ids-enterprise-wc 1.0.0-beta.16 → 1.0.0-beta.18

package/components/ids-list-view/ids-list-view-item.d.ts

@@ -1,7 +1,9 @@
 import IdsElement from '../../core/ids-element';
-import '../ids-checkbox/ids-checkbox';
 import '../ids-swappable/ids-swappable';
 import '../ids-swappable/ids-swappable-item';
+import type IdsListView from './ids-list-view';
+import IdsCheckbox from '../ids-checkbox/ids-checkbox';
+import type IdsSwappableItem from '../ids-swappable/ids-swappable-item';
 declare const Base: {
     new (...args: any[]): {
         handledEvents: Map<any, any>;
@@ -40,7 +42,7 @@ declare const Base: {
         "__#5@#removeHoverEndListener"(): void;
         "__#5@#removeKeyDownEndListener"(): void;
         name?: string | undefined;
-        state: Record<string, any>;
+        state: any;
         cachedNonce: string;
         container?: HTMLElement | null | undefined;
         hasStyles: boolean;
@@ -49,13 +51,18 @@ declare const Base: {
             noStyles?: boolean | undefined;
         } | undefined;
         connectedCallback(): void;
-        "__#4@#addBaseName"(): void;
+        mountedCallback(): void;
+        "__#3@#addBaseName"(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         render(force?: boolean | undefined): any;
         template(): string;
         readonly nonce: any;
         appendStyles(): void;
-        "__#4@#appendHostCss"(): void;
+        "__#3@#appendHostCss"(): void; /**
+         * Set the row index
+         * @private
+         * @param {boolean} newValue the new row index value
+         */
         theme: string;
         lastTheme: string;
         loadTheme(theme: string): Promise<void>;
@@ -75,11 +82,15 @@ declare const Base: {
         readonly offsetTop: number;
         readonly offsetWidth: number;
         outerText: string;
+        popover: string | null;
         spellcheck: boolean;
         title: string;
         translate: boolean;
         attachInternals(): ElementInternals;
         click(): void;
+        hidePopover(): void;
+        showPopover(): void;
+        togglePopover(force?: boolean | undefined): void;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
@@ -113,6 +124,7 @@ declare const Base: {
         closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
         closest<K_4 extends keyof MathMLElementTagNameMap>(selector: K_4): MathMLElementTagNameMap[K_4] | null;
         closest<E extends Element = Element>(selectors: string): E | null;
+        computedStyleMap(): StylePropertyMapReadOnly;
         getAttribute(qualifiedName: string): string | null;
         getAttributeNS(namespace: string | null, localName: string): string | null;
         getAttributeNames(): string[];
@@ -243,7 +255,7 @@ declare const Base: {
         ariaValueNow: string | null;
         ariaValueText: string | null;
         role: string | null;
-        animate(keyframes: PropertyIndexedKeyframes | Keyframe[] | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
+        animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
         getAnimations(options?: GetAnimationsOptions | undefined): Animation[];
         after(...nodes: (string | Node)[]): void;
         before(...nodes: (string | Node)[]): void;
@@ -270,6 +282,7 @@ declare const Base: {
         querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
         replaceChildren(...nodes: (string | Node)[]): void;
         readonly assignedSlot: HTMLSlotElement | null;
+        readonly attributeStyleMap: StylePropertyMap;
         readonly style: CSSStyleDeclaration;
         contentEditable: string;
         enterKeyHint: string;
@@ -342,6 +355,7 @@ declare const Base: {
         onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
         onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onscrollend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
         onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -384,21 +398,22 @@ declare const Base: {
  */
 export default class IdsListViewItem extends Base {
     #private;
+    protected rootNode?: IdsListView;
     /**
-     * Get the parent IdsListView that contains this list-view-item
-     * @returns {HTMLElement | null} this list-item's parent slot
+     * Reference to the ids-list-view parent element
+     * @returns {IdsListView} the ids-list-view parent
      */
-    get parentListView(): HTMLElement | null;
+    get listView(): IdsListView;
+    get nextEnabled(): IdsListViewItem | undefined;
+    get prevEnabled(): IdsListViewItem | undefined;
+    get data(): Record<string, any>[];
+    get rowData(): Record<string, unknown>;
+    set rowData(value: Record<string, unknown>);
     /**
-     * Get the top-most wrapper element that contains this list-view-item
-     * @returns {HTMLElement | null} this list-item's parent slot
-     */
-    get parentListItemWrapper(): HTMLElement | null;
-    /**
-     * Get slot that was autogenerated in IdsListView to contain this list-view-item
-     * @returns {HTMLSlotElement | null} this list-item's parent slot
+     * Return the attributes we handle as getters/setters
+     * @returns {Array} The attributes in an array
      */
-    get parentSlot(): HTMLSlotElement | null;
+    static get attributes(): any[];
     /**
      * Invoked each time the custom element is appended into a document-connected element.
      */
@@ -407,16 +422,23 @@ export default class IdsListViewItem extends Base {
      * Invoked each time the custom element is removed from a document-connected element.
      */
     disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    get checkbox(): IdsCheckbox | undefined;
+    get swappableParent(): IdsSwappableItem | undefined;
     /**
      * Inner template contents
      * @returns {string} The template
      */
     template(): string;
+    templateElements(): {
+        [key: string]: HTMLElement;
+    };
+    get checkboxHidden(): boolean;
     /**
-     * Return the attributes we handle as getters/setters
-     * @returns {Array} The attributes in an array
+     * Helper method to render the list-view-item template
+     * @returns {string} html
      */
-    static get attributes(): any[];
+    templateCheckbox(): string;
     /**
      * Set the row index. This index can be used to lazy-load data from IdsListView.data.
      * @param {number} value the index
@@ -433,30 +455,55 @@ export default class IdsListViewItem extends Base {
      */
     get itemActivated(): boolean;
     /**
-     * Get the list-item active state.
+     * Get the list-item activated state.
      * @returns {boolean} true/false
      */
-    get active(): boolean;
+    get activated(): boolean;
     /**
-     * Set the list-item active state.
+     * Set the list-item activated state.
      * @param {boolean} value true/false
      */
-    set active(value: boolean);
+    set activated(value: boolean);
+    /**
+     * Get the list-item disabled state.
+     * @returns {boolean} true/false
+     */
+    get disabled(): boolean;
     /**
      * Set the list-item disabled state.
      * @param {boolean} value true/false
      */
     set disabled(value: boolean);
     /**
-     * Get the list-item disabled state.
+     * Wrapper function that adds interface to match dataset interface.
      * @returns {boolean} true/false
      */
-    get disabled(): boolean;
+    get itemSelected(): boolean;
+    /**
+     * Is this list-item selectable
+     * @returns {string} either single, multiple, mixed or empty-string
+     */
+    get selectable(): string;
+    /**
+     * Is this list-item sortable
+     * @returns {boolean} true if it is sortable
+     */
+    get sortable(): boolean;
     /**
      * Wrapper function that adds interface to match dataset interface.
      * @returns {boolean} true/false
      */
-    get itemSelected(): boolean;
+    get itemChecked(): boolean;
+    /**
+     * Get the list-item checked state.
+     * @returns {boolean} true/false
+     */
+    get checked(): boolean;
+    /**
+     * Set the list-item checked state.
+     * @param {boolean} value true/false
+     */
+    set checked(value: boolean);
     /**
      * Get the list-item selected state.
      * @returns {boolean} true/false

package/components/ids-list-view/ids-list-view-item.js

@@ -1 +1 @@
-import{a}from"../../chunks/ids-chunk-CGDRYT3L.js";import"../../chunks/ids-chunk-JTU3ELLM.js";import"../../chunks/ids-chunk-6DMHSAHB.js";import"../../chunks/ids-chunk-SDRG6LI4.js";import"../../chunks/ids-chunk-TR5PD2OO.js";import"../../chunks/ids-chunk-Y4WUDVCZ.js";import"../../chunks/ids-chunk-NWQJK4KK.js";import"../../chunks/ids-chunk-AYDTADXU.js";import"../../chunks/ids-chunk-M7IB5XSG.js";import"../../chunks/ids-chunk-7ZTSUHBA.js";import"../../chunks/ids-chunk-T47YQ3TX.js";import"../../chunks/ids-chunk-CYHGXCKL.js";import"../../chunks/ids-chunk-RZXRZPI4.js";import"../../chunks/ids-chunk-6NIQXA2N.js";import"../../chunks/ids-chunk-R7IBXBBI.js";import"../../chunks/ids-chunk-MXFCUDLP.js";import"../../chunks/ids-chunk-T6ZV4PDM.js";import"../../chunks/ids-chunk-B6P5AQ2Z.js";import"../../chunks/ids-chunk-CK6SA7FU.js";import"../../chunks/ids-chunk-27RPCUPT.js";import"../../chunks/ids-chunk-VD3FN2LH.js";import"../../chunks/ids-chunk-ZUHWNQKP.js";import"../../chunks/ids-chunk-XE4WFW5M.js";import"../../chunks/ids-chunk-DCNGT4R2.js";import"../../chunks/ids-chunk-CS7RTATZ.js";import"../../chunks/ids-chunk-RMV7ZP4H.js";import"../../chunks/ids-chunk-WYSIBKRB.js";import"../../chunks/ids-chunk-JBUWUXJX.js";import"../../chunks/ids-chunk-ZVK34T2N.js";import"../../chunks/ids-chunk-N7P4D4N3.js";import"../../chunks/ids-chunk-U4XVR5SW.js";import"../../chunks/ids-chunk-TJKIW3GF.js";import"../../chunks/ids-chunk-6EMRTLSG.js";import"../../chunks/ids-chunk-5K6IDMGA.js";export{a as default};
+import{a}from"../../chunks/ids-chunk-7NRG5NRA.js";import"../../chunks/ids-chunk-3MD3NFTS.js";import"../../chunks/ids-chunk-I5BRSE7Z.js";import"../../chunks/ids-chunk-S3IRDAIM.js";import"../../chunks/ids-chunk-OPOTJ7IF.js";import"../../chunks/ids-chunk-T6ZV4PDM.js";import"../../chunks/ids-chunk-DK5QOJMP.js";import"../../chunks/ids-chunk-CK6SA7FU.js";import"../../chunks/ids-chunk-27RPCUPT.js";import"../../chunks/ids-chunk-XE4WFW5M.js";import"../../chunks/ids-chunk-RCDMHHTV.js";import"../../chunks/ids-chunk-UCUVUYRO.js";import"../../chunks/ids-chunk-RMV7ZP4H.js";import"../../chunks/ids-chunk-WYSIBKRB.js";import"../../chunks/ids-chunk-JBUWUXJX.js";import"../../chunks/ids-chunk-AG3TBUSU.js";import"../../chunks/ids-chunk-X4NATGYL.js";import"../../chunks/ids-chunk-U4XVR5SW.js";import"../../chunks/ids-chunk-5Q3WPKMB.js";import"../../chunks/ids-chunk-4NXTNKXV.js";import"../../chunks/ids-chunk-Y32WUP63.js";export{a as default};

package/components/ids-list-view/ids-list-view-search-mixin.d.ts

@@ -3,6 +3,7 @@ import { IdsConstructor } from '../../core/ids-element';
 import type IdsSearchField from '../ids-search-field/ids-search-field';
 type Constraints = IdsConstructor<EventsMixinInterface>;
 type SearchItem = string | HTMLElement | object;
+type SearchFilterModes = string | null | 'contains' | 'keyword' | 'phrase-starts-with' | 'word-starts-with';
 declare const IdsListViewSearchMixin: <T extends Constraints>(superclass: T) => {
     new (...args: any[]): {
         connectedCallback(): void;
@@ -26,7 +27,7 @@ declare const IdsListViewSearchMixin: <T extends Constraints>(superclass: T) =>
         /**
          * Current search term
          */
-        "__#44@#term": string;
+        "__#120@#term": string;
         /**
          * Get search container element
          * @returns {HTMLDivElement|null|undefined} The search container element
@@ -42,31 +43,36 @@ declare const IdsListViewSearchMixin: <T extends Constraints>(superclass: T) =>
          * @param {string | null} value The value
          */
         searchFieldId: string | null;
+        get searchFilterMode(): string;
         /**
          * Set search filter mode
          * @param {SearchFilterModes} value The value
          */
-        searchFilterMode: string;
+        set searchFilterMode(value: SearchFilterModes);
+        get searchTermCaseSensitive(): boolean;
         /**
          * Set search term case sensitive
          * @param {string | boolean | null} value The value
          */
-        searchTermCaseSensitive: boolean;
+        set searchTermCaseSensitive(value: string | boolean | null);
+        get searchTermMinSize(): number;
         /**
          * Set search term min size, will trigger filtering only when its length is greater than or equals to term value.
          * @param {string | number | null} value The value
          */
-        searchTermMinSize: number;
+        set searchTermMinSize(value: string | number | null);
+        get searchable(): boolean;
         /**
          * Set searchable which allows list view to be filtered
          * @param {string | boolean | null} value The value
          */
-        searchable: boolean;
+        set searchable(value: string | boolean | null);
+        get suppressHighlight(): boolean;
         /**
          * Set search term text to be suppress highlight when using searchable
          * @param {string | boolean | null} value The value
          */
-        suppressHighlight: boolean;
+        set suppressHighlight(value: string | boolean | null);
         /**
          * Get search template
          * @returns {string} The search template
@@ -92,20 +98,20 @@ declare const IdsListViewSearchMixin: <T extends Constraints>(superclass: T) =>
          * @private
          * @returns {void}
          */
-        "__#44@#attachSearchField"(): void;
+        "__#120@#attachSearchField"(): void;
         /**
          * Get object props as text
          * @param {string} item The term value
          * @returns {string|HTMLElement|object} The searchable content
          */
-        "__#44@#objectPropsAsText"(item: string | HTMLElement | object): string;
+        "__#120@#objectPropsAsText"(item: string | HTMLElement | object): string;
         /**
          * Get searchable content
          * @private
          * @param {string} item The term value
          * @returns {string|HTMLElement|object} The searchable content
          */
-        "__#44@#searchableContent"(item: string | HTMLElement | object): string;
+        "__#120@#searchableContent"(item: string | HTMLElement | object): string;
         /**
          * Matches the provided term against the beginning of all words in a text string.
          * @private
@@ -113,14 +119,14 @@ declare const IdsListViewSearchMixin: <T extends Constraints>(superclass: T) =>
          * @param {string} term the term for which to search in the text string.
          * @returns {boolean} true if the term is present.
          */
-        "__#44@#wordStartsWithFilter"(text: string, term: string): boolean;
+        "__#120@#wordStartsWithFilter"(text: string, term: string): boolean;
         /**
          * Handle search for given trem
          * @private
          * @param {string} term The term value
          * @returns {void}
          */
-        "__#44@#handleSearch"(term: string): void;
+        "__#120@#handleSearch"(term: string): void;
         /**
          * Set search term highlight
          * @param {string | HTMLElement | object} item The from data item
@@ -134,7 +140,7 @@ declare const IdsListViewSearchMixin: <T extends Constraints>(superclass: T) =>
         detachEventsByName: (eventName: string) => void;
         handledEvents: Map<any, any>;
         name?: string | undefined;
-        state: Record<string, any>;
+        state: any;
         cachedNonce: string;
         container?: HTMLElement | null | undefined;
         hasStyles: boolean;
@@ -142,14 +148,17 @@ declare const IdsListViewSearchMixin: <T extends Constraints>(superclass: T) =>
             noShadowRoot?: boolean | undefined;
             noStyles?: boolean | undefined;
         } | undefined;
-        "__#4@#addBaseName"(): void;
+        mountedCallback(): void;
+        "__#3@#addBaseName"(): void; /**
+         * Possible Filter Modes
+         */
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         disconnectedCallback(): void;
         render(force?: boolean | undefined): any;
         template(): string;
         readonly nonce: any;
         appendStyles(): void;
-        "__#4@#appendHostCss"(): void;
+        "__#3@#appendHostCss"(): void;
         theme: string;
         lastTheme: string;
         loadTheme(theme: string): Promise<void>;
@@ -169,11 +178,15 @@ declare const IdsListViewSearchMixin: <T extends Constraints>(superclass: T) =>
         readonly offsetTop: number;
         readonly offsetWidth: number;
         outerText: string;
+        popover: string | null;
         spellcheck: boolean;
         title: string;
         translate: boolean;
         attachInternals(): ElementInternals;
         click(): void;
+        hidePopover(): void;
+        showPopover(): void;
+        togglePopover(force?: boolean | undefined): void;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
@@ -207,6 +220,7 @@ declare const IdsListViewSearchMixin: <T extends Constraints>(superclass: T) =>
         closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
         closest<K_4 extends keyof MathMLElementTagNameMap>(selector: K_4): MathMLElementTagNameMap[K_4] | null;
         closest<E extends Element = Element>(selectors: string): E | null;
+        computedStyleMap(): StylePropertyMapReadOnly;
         getAttribute(qualifiedName: string): string | null;
         getAttributeNS(namespace: string | null, localName: string): string | null;
         getAttributeNames(): string[];
@@ -337,7 +351,7 @@ declare const IdsListViewSearchMixin: <T extends Constraints>(superclass: T) =>
         ariaValueNow: string | null;
         ariaValueText: string | null;
         role: string | null;
-        animate(keyframes: PropertyIndexedKeyframes | Keyframe[] | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
+        animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
         getAnimations(options?: GetAnimationsOptions | undefined): Animation[];
         after(...nodes: (string | Node)[]): void;
         before(...nodes: (string | Node)[]): void;
@@ -364,6 +378,7 @@ declare const IdsListViewSearchMixin: <T extends Constraints>(superclass: T) =>
         querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
         replaceChildren(...nodes: (string | Node)[]): void;
         readonly assignedSlot: HTMLSlotElement | null;
+        readonly attributeStyleMap: StylePropertyMap;
         readonly style: CSSStyleDeclaration;
         contentEditable: string;
         enterKeyHint: string;
@@ -436,6 +451,7 @@ declare const IdsListViewSearchMixin: <T extends Constraints>(superclass: T) =>
         onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
         onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onscrollend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
         onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;

package/components/ids-list-view/ids-list-view-search-mixin.js

@@ -1 +1 @@
-import{a}from"../../chunks/ids-chunk-4ADP36SL.js";import"../../chunks/ids-chunk-UR2NLGN4.js";import"../../chunks/ids-chunk-ZUHWNQKP.js";import"../../chunks/ids-chunk-TJKIW3GF.js";import"../../chunks/ids-chunk-6EMRTLSG.js";import"../../chunks/ids-chunk-5K6IDMGA.js";export{a as default};
+import{a}from"../../chunks/ids-chunk-RNW2M7BI.js";import"../../chunks/ids-chunk-UR2NLGN4.js";import"../../chunks/ids-chunk-ZUHWNQKP.js";import"../../chunks/ids-chunk-5Q3WPKMB.js";import"../../chunks/ids-chunk-4NXTNKXV.js";import"../../chunks/ids-chunk-Y32WUP63.js";export{a as default};

package/components/ids-list-view/ids-list-view.css

@@ -1,5 +1,135 @@
-:host .ids-list-view-item {
-  border: none;
+:host slot {
+  display: block;
+}
+
+:host([no-margins]) .ids-list-view .ids-list-view-body li:first-child,
+:host([no-margins]) .ids-list-view .ids-list-view-body ids-list-view-item:first-child,
+:host([no-margins]) .ids-list-view .ids-list-view-body ::slotted(li):first-child,
+:host([no-margins]) .ids-list-view .ids-list-view-body ::slotted(ids-list-view-item):first-child {
+  margin-block-start: var(--ids-space-none);
+}
+
+:host([searchable]) .ids-list-view-body:first-child,
+.has-searchfield .ids-list-view-body:first-child {
+  margin-block-start: 8px;
+}
+
+.ids-list-view {
+  height: var(--ids-list-view-height);
+  overflow: auto;
+  scroll-behavior: smooth;
+  position: relative;
+}
+.ids-list-view .ids-list-view-body {
   margin: 0;
   padding: 0;
+}
+.ids-list-view .ids-list-view-body:focus {
+  border-color: var(--ids-list-view-color-border-focus);
+}
+.ids-list-view .ids-list-view-body li {
+  padding: var(--ids-list-view-item-padding);
+  background-color: var(--ids-list-view-item-color-background-default);
+  border: var(--ids-list-view-item-border);
+  border-top-color: var(--ids-list-view-item-color-border-top);
+  contain: content;
+  list-style-type: none;
+}
+.ids-list-view.selectable-multiple .list-item-area, .ids-list-view.selectable-mixed .list-item-area {
+  display: flex;
+  align-items: center;
+}
+.ids-list-view.selectable-multiple .list-item-area .list-item-checkbox, .ids-list-view.selectable-mixed .list-item-area .list-item-checkbox {
+  padding-inline-end: var(--ids-space-70);
+  flex-grow: 0;
+  flex-shrink: 0;
+  max-height: var(--ids-space-60);
+  max-width: var(--ids-space-60);
+}
+.ids-list-view.selectable-multiple .list-item-area .list-item-checkbox[disabled]::part(checkmark), .ids-list-view.selectable-mixed .list-item-area .list-item-checkbox[disabled]::part(checkmark) {
+  background-color: transparent;
+}
+.ids-list-view.is-scrolling {
+  box-shadow: var(--ids-scroll-shadow);
+  border-top: var(--ids-scroll-color-border-top);
+}
+
+ids-swappable-item {
+  border-bottom-color: var(--ids-color-neutral-20);
+  border: none;
+}
+
+ids-swappable-item[over] {
+  border: 1px dashed var(--ids-color-neutral-80);
+}
+
+::slotted(ids-search-field) {
+  margin-bottom: 8px;
+}
+
+.sortable .ids-list-view li:hover,
+.sortable .ids-list-view li:focus,
+.sortable .ids-list-view li:focus-visible,
+.sortable .ids-list-view li:focus-within,
+.sortable .ids-list-view ids-list-view-item:hover,
+.sortable .ids-list-view ids-list-view-item:focus,
+.sortable .ids-list-view ids-list-view-item:focus-visible,
+.sortable .ids-list-view ids-list-view-item:focus-within,
+.sortable .ids-list-view ::slotted(li:hover),
+.sortable .ids-list-view ::slotted(li:focus),
+.sortable .ids-list-view ::slotted(li:focus-visible),
+.sortable .ids-list-view ::slotted(li:focus-within),
+.sortable .ids-list-view ::slotted(ids-list-view-item:hover),
+.sortable .ids-list-view ::slotted(ids-list-view-item:focus),
+.sortable .ids-list-view ::slotted(ids-list-view-item:focus-visible),
+.sortable .ids-list-view ::slotted(ids-list-view-item:focus-within),
+[sortable] .ids-list-view li:hover,
+[sortable] .ids-list-view li:focus,
+[sortable] .ids-list-view li:focus-visible,
+[sortable] .ids-list-view li:focus-within,
+[sortable] .ids-list-view ids-list-view-item:hover,
+[sortable] .ids-list-view ids-list-view-item:focus,
+[sortable] .ids-list-view ids-list-view-item:focus-visible,
+[sortable] .ids-list-view ids-list-view-item:focus-within,
+[sortable] .ids-list-view ::slotted(li:hover),
+[sortable] .ids-list-view ::slotted(li:focus),
+[sortable] .ids-list-view ::slotted(li:focus-visible),
+[sortable] .ids-list-view ::slotted(li:focus-within),
+[sortable] .ids-list-view ::slotted(ids-list-view-item:hover),
+[sortable] .ids-list-view ::slotted(ids-list-view-item:focus),
+[sortable] .ids-list-view ::slotted(ids-list-view-item:focus-visible),
+[sortable] .ids-list-view ::slotted(ids-list-view-item:focus-within),
+:host(.sortable) li:hover,
+:host(.sortable) li:focus,
+:host(.sortable) li:focus-visible,
+:host(.sortable) li:focus-within,
+:host(.sortable) ids-list-view-item:hover,
+:host(.sortable) ids-list-view-item:focus,
+:host(.sortable) ids-list-view-item:focus-visible,
+:host(.sortable) ids-list-view-item:focus-within,
+:host(.sortable) ::slotted(li:hover),
+:host(.sortable) ::slotted(li:focus),
+:host(.sortable) ::slotted(li:focus-visible),
+:host(.sortable) ::slotted(li:focus-within),
+:host(.sortable) ::slotted(ids-list-view-item:hover),
+:host(.sortable) ::slotted(ids-list-view-item:focus),
+:host(.sortable) ::slotted(ids-list-view-item:focus-visible),
+:host(.sortable) ::slotted(ids-list-view-item:focus-within),
+:host([sortable]) li:hover,
+:host([sortable]) li:focus,
+:host([sortable]) li:focus-visible,
+:host([sortable]) li:focus-within,
+:host([sortable]) ids-list-view-item:hover,
+:host([sortable]) ids-list-view-item:focus,
+:host([sortable]) ids-list-view-item:focus-visible,
+:host([sortable]) ids-list-view-item:focus-within,
+:host([sortable]) ::slotted(li:hover),
+:host([sortable]) ::slotted(li:focus),
+:host([sortable]) ::slotted(li:focus-visible),
+:host([sortable]) ::slotted(li:focus-within),
+:host([sortable]) ::slotted(ids-list-view-item:hover),
+:host([sortable]) ::slotted(ids-list-view-item:focus),
+:host([sortable]) ::slotted(ids-list-view-item:focus-visible),
+:host([sortable]) ::slotted(ids-list-view-item:focus-within) {
+  background: transparent;
 }