@api-client/ui 0.0.17 → 0.1.0

package/src/elements/project/ProjectRunnerNavigationElement.ts

@@ -1,8 +1,10 @@
 import { TemplateResult, html } from 'lit'
 import { classMap } from 'lit/directives/class-map.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
-import { HttpProject, ProjectFolder, ProjectRequest, ProjectRequestKind } from '@api-client/core/browser.js'
 import ProjectNavigationElement from './ProjectNavigation.js'
+import type { HttpProject } from '@api-client/core/models/HttpProject.js'
+import type { ProjectFolder } from '@api-client/core/models/ProjectFolder.js'
+import { type ProjectRequest, Kind as ProjectRequestKind } from '@api-client/core/models/ProjectRequest.js'
 import '../../md/icons/ui-icon.js'
 
 export default class ProjectRunnerNavigationElement extends ProjectNavigationElement {

package/src/elements/user/internals/UserAvatar.ts

@@ -1,6 +1,6 @@
 import { html, TemplateResult, LitElement } from 'lit'
 import { property, state } from 'lit/decorators.js'
-import type { IUser } from '@api-client/core/browser.js'
+import type { IUser } from '@api-client/core/models/store/User.js'
 import '@material/web/focus/md-focus-ring.js'
 import '@material/web/ripple/ripple.js'
 

package/src/events/BroadcastUiEvents.ts

@@ -1,9 +1,5 @@
-import {
-  BroadcastCreatedEvent,
-  DeletedBroadcastEvent,
-  type IRequestUiMeta,
-  RequestUiMetaKind,
-} from '@api-client/core/browser.js'
+import { BroadcastCreatedEvent, DeletedBroadcastEvent } from '@api-client/core/models/store/Backend.js'
+import { type IRequestUiMeta, Kind as RequestUiMetaKind } from '@api-client/core/models/RequestUiMeta.js'
 
 /**
  * @deprecated

package/src/events/ConfigEvents.ts

@@ -1,5 +1,5 @@
+import type { TelemetryConfig } from '@api-client/core/config/index.js'
 import { EventTypes } from './EventTypes.js'
-import type { TelemetryConfig } from '@api-client/core/browser.js'
 
 export default Object.freeze({
   Session: Object.freeze({

package/src/events/HttpClientEvents.ts

@@ -1,11 +1,7 @@
-import {
-  ContextDeleteEvent,
-  ContextQueryEvent,
-  type IQueryResponse,
-  type IRequestUiMeta,
-  type IUrl,
-} from '@api-client/core/browser.js'
+import type { IRequestUiMeta } from '@api-client/core/models/RequestUiMeta.js'
 import { EventTypes } from './EventTypes.js'
+import { ContextDeleteEvent, ContextQueryEvent, type IQueryResponse } from '@api-client/core/events/BaseEvents.js'
+import type { IUrl } from '@api-client/core/models/Url.js'
 
 export interface IRequestUiInsertDetail {
   pid: string

package/src/events/HttpProjectEvents.ts

@@ -1,13 +1,13 @@
 import {
-  ContextDeleteEvent,
-  ContextReadEvent,
-  ContextUpdateEvent,
-  type IRequestUiMeta,
   type ContextChangeRecord,
+  ContextDeleteEvent,
   type ContextDeleteRecord,
   ContextReadBulkEvent,
+  ContextReadEvent,
+  ContextUpdateEvent,
   type IBulkOperationResult,
-} from '@api-client/core/browser.js'
+} from '@api-client/core/events/BaseEvents.js'
+import type { IRequestUiMeta } from '@api-client/core/models/RequestUiMeta.js'
 import { EventTypes } from './EventTypes.js'
 import type { IRequestUiInsertDetail } from './HttpClientEvents.js'
 

package/src/events/IntentEvents.ts

@@ -12,7 +12,7 @@ export interface ActivityWithResultDetail {
 
 export default {
   /**
-   * Startes an activity with the given intent.
+   * Starts an activity with the given intent.
    * The started activity does not expect a result.
    * @param intent The intent to start.
    * @param target Optional events target on which to dispatch the event.

package/src/events/StoreEvents.ts

@@ -1,18 +1,12 @@
 /* eslint-disable no-redeclare */
-import {
-  type IFile,
-  type IFileCreateOptions,
-  ListFileKind,
-  type AccessOperation,
-  type IUser,
-  type IPatchRevision,
-  type IApplication,
-  type ContextListOptions,
-  type ContextListResult,
-  type FileBreadcrumb,
-} from '@api-client/core/browser.js'
-import { Patch } from '@api-client/json'
+import type { Operation } from '@api-client/json/types.js'
 import { EventTypes } from './EventTypes.js'
+import type { FileBreadcrumb, IFile } from '@api-client/core/models/store/File.js'
+import type { IApplication } from '@api-client/core/models/Application.js'
+import type { ContextListOptions, ContextListResult, IPatchRevision } from '@api-client/core/events/BaseEvents.js'
+import { type IFileCreateOptions, ListFileKind } from '@api-client/core/runtime/store/FilesSdk.js'
+import type { IUser } from '@api-client/core/models/store/User.js'
+import type { AccessOperation } from '@api-client/core/models/store/Permission.js'
 
 /**
  * Reads file metadata from the store.
@@ -58,7 +52,7 @@ function fileRead(key: string, media: boolean, target: EventTarget = document.bo
 function patchFile(
   key: string,
   id: string,
-  value: Patch.JsonPatch,
+  value: Operation[],
   app: IApplication,
   media: false,
   target?: EventTarget
@@ -73,7 +67,7 @@ function patchFile(
 function patchFile(
   key: string,
   id: string,
-  value: Patch.JsonPatch,
+  value: Operation[],
   app: IApplication,
   // eslint-disable-next-line @typescript-eslint/unified-signatures
   media: true,
@@ -89,7 +83,7 @@ function patchFile(
 function patchFile(
   key: string,
   id: string,
-  value: Patch.JsonPatch,
+  value: Operation[],
   app: IApplication,
   media?: boolean,
   target: EventTarget = document.body

package/src/events/amf/ApiEvents.ts

@@ -1,4 +1,4 @@
-import { ApiDefinitions } from '@api-client/core/browser.js'
+import type { IApiSummary } from '@api-client/core/amf/definitions/Api.js'
 import { EventTypes } from './EventTypes.js'
 import { ApiStoreContextEvent } from './BaseEvents.js'
 import { DocumentMeta } from '../../amf/types.js'
@@ -8,10 +8,10 @@ export const ApiEvents = {
    * Reads basic info about the API.
    * @param target The node on which to dispatch the event
    */
-  summary: async (target: EventTarget): Promise<ApiDefinitions.IApiSummary | undefined> => {
+  summary: async (target: EventTarget): Promise<IApiSummary | undefined> => {
     const e = new ApiStoreContextEvent(EventTypes.Api.summary)
     target.dispatchEvent(e)
-    return e.detail.result as Promise<ApiDefinitions.IApiSummary | undefined>
+    return e.detail.result as Promise<IApiSummary | undefined>
   },
 
   /**

package/src/events/amf/DocumentationEvents.ts

@@ -1,4 +1,4 @@
-import { ApiDefinitions } from '@api-client/core/browser.js'
+import type { IApiDocumentation } from '@api-client/core/amf/definitions/Api.js'
 import { EventTypes } from './EventTypes.js'
 import { ApiStoreReadEvent, ApiStoreContextEvent } from './BaseEvents.js'
 
@@ -10,20 +10,20 @@ export const DocumentationEvents = {
    * @param target The node on which to dispatch the event
    * @param id The domain id of the documentation.
    */
-  get: async (target: EventTarget, id: string): Promise<ApiDefinitions.IApiDocumentation> => {
+  get: async (target: EventTarget, id: string): Promise<IApiDocumentation> => {
     const e = new ApiStoreReadEvent(EventTypes.Documentation.get, id)
     target.dispatchEvent(e)
-    return e.detail.result as Promise<ApiDefinitions.IApiDocumentation>
+    return e.detail.result as Promise<IApiDocumentation>
   },
   /**
    * Lists the documentation definitions for the API.
    * @param target The node on which to dispatch the event
    * @returns The list of documentations.
    */
-  list: async (target: EventTarget): Promise<ApiDefinitions.IApiDocumentation[]> => {
+  list: async (target: EventTarget): Promise<IApiDocumentation[]> => {
     const e = new ApiStoreContextEvent(EventTypes.Documentation.list)
     target.dispatchEvent(e)
-    return e.detail.result as Promise<ApiDefinitions.IApiDocumentation[]>
+    return e.detail.result as Promise<IApiDocumentation[]>
   },
 }
 Object.freeze(DocumentationEvents)

package/src/events/amf/EndpointEvents.ts

@@ -1,4 +1,4 @@
-import { ApiDefinitions } from '@api-client/core/browser.js'
+import type { IApiEndPoint, IApiEndPointWithOperationsListItem } from '@api-client/core/amf/definitions/Api.js'
 import { EventTypes } from './EventTypes.js'
 import { ApiStoreContextEvent, ApiStoreReadEvent } from './BaseEvents.js'
 
@@ -8,29 +8,29 @@ export const EndpointEvents = {
    * @param target The node on which to dispatch the event
    * @param id The domain id of the endpoint.
    */
-  get: async (target: EventTarget, id: string): Promise<ApiDefinitions.IApiEndPoint> => {
+  get: async (target: EventTarget, id: string): Promise<IApiEndPoint> => {
     const e = new ApiStoreReadEvent(EventTypes.Endpoint.get, id)
     target.dispatchEvent(e)
-    return e.detail.result as Promise<ApiDefinitions.IApiEndPoint>
+    return e.detail.result as Promise<IApiEndPoint>
   },
   /**
    * Reads the endpoint model from the store by the path value.
    * @param target The node on which to dispatch the event
    * @param path The path of the endpoint.
    */
-  byPath: async (target: EventTarget, path: string): Promise<ApiDefinitions.IApiEndPoint> => {
+  byPath: async (target: EventTarget, path: string): Promise<IApiEndPoint> => {
     const e = new ApiStoreReadEvent(EventTypes.Endpoint.byPath, path)
     target.dispatchEvent(e)
-    return e.detail.result as Promise<ApiDefinitions.IApiEndPoint>
+    return e.detail.result as Promise<IApiEndPoint>
   },
   /**
    * Lists all endpoints with operations included into the result.
    * @param target The node on which to dispatch the event
    */
-  list: async (target: EventTarget): Promise<ApiDefinitions.IApiEndPointWithOperationsListItem[]> => {
+  list: async (target: EventTarget): Promise<IApiEndPointWithOperationsListItem[]> => {
     const e = new ApiStoreContextEvent(EventTypes.Endpoint.list)
     target.dispatchEvent(e)
-    return e.detail.result as Promise<ApiDefinitions.IApiEndPointWithOperationsListItem[]>
+    return e.detail.result as Promise<IApiEndPointWithOperationsListItem[]>
   },
 }
 

package/src/events/amf/OperationEvents.ts

@@ -1,4 +1,4 @@
-import { ApiDefinitions } from '@api-client/core/browser.js'
+import type { IApiEndPoint, IApiOperation } from '@api-client/core/amf/definitions/Api.js'
 import { EventTypes } from './EventTypes.js'
 import { ApiStoreReadEvent } from './BaseEvents.js'
 
@@ -9,20 +9,20 @@ export const OperationEvents = {
    * @param operationId The domain id of the operation to read.
    * @param endpointId Optional endpoint id. When not set it searches through all endpoints.
    */
-  get: async (target: EventTarget, operationId: string, endpointId?: string): Promise<ApiDefinitions.IApiOperation> => {
+  get: async (target: EventTarget, operationId: string, endpointId?: string): Promise<IApiOperation> => {
     const e = new ApiStoreReadEvent(EventTypes.Operation.get, operationId, endpointId)
     target.dispatchEvent(e)
-    return e.detail.result as Promise<ApiDefinitions.IApiOperation>
+    return e.detail.result as Promise<IApiOperation>
   },
   /**
    * Reads the operation parent from the store.
    * @param target The node on which to dispatch the event
    * @param operationId The domain id of the operation to read.
    */
-  getParent: async (target: EventTarget, operationId: string): Promise<ApiDefinitions.IApiEndPoint> => {
+  getParent: async (target: EventTarget, operationId: string): Promise<IApiEndPoint> => {
     const e = new ApiStoreReadEvent(EventTypes.Operation.getParent, operationId)
     target.dispatchEvent(e)
-    return e.detail.result as Promise<ApiDefinitions.IApiEndPoint>
+    return e.detail.result as Promise<IApiEndPoint>
   },
 }
 

package/src/events/amf/PayloadEvents.ts

@@ -1,4 +1,4 @@
-import { ApiDefinitions } from '@api-client/core/browser.js'
+import type { IApiPayload } from '@api-client/core/amf/definitions/Api.js'
 import { EventTypes } from './EventTypes.js'
 import { ApiStoreReadEvent } from './BaseEvents.js'
 
@@ -8,10 +8,10 @@ export const PayloadEvents = {
    * @param target The node on which to dispatch the event
    * @param id The id of the Payload to read.
    */
-  get: async (target: EventTarget, id: string): Promise<ApiDefinitions.IApiPayload> => {
+  get: async (target: EventTarget, id: string): Promise<IApiPayload> => {
     const e = new ApiStoreReadEvent(EventTypes.Payload.get, id)
     target.dispatchEvent(e)
-    return e.detail.result as Promise<ApiDefinitions.IApiPayload>
+    return e.detail.result as Promise<IApiPayload>
   },
 }
 

package/src/events/amf/RequestEvents.ts

@@ -1,4 +1,4 @@
-import { ApiDefinitions } from '@api-client/core/browser.js'
+import type { IApiRequest } from '@api-client/core/amf/definitions/Api.js'
 import { EventTypes } from './EventTypes.js'
 import { ApiStoreReadEvent } from './BaseEvents.js'
 
@@ -8,9 +8,9 @@ export const RequestEvents = {
    * @param target The node on which to dispatch the event
    * @param id The id of the request to read.
    */
-  get: async (target: EventTarget, id: string): Promise<ApiDefinitions.IApiRequest> => {
+  get: async (target: EventTarget, id: string): Promise<IApiRequest> => {
     const e = new ApiStoreReadEvent(EventTypes.Request.get, id)
     target.dispatchEvent(e)
-    return e.detail.result as Promise<ApiDefinitions.IApiRequest>
+    return e.detail.result as Promise<IApiRequest>
   },
 }

package/src/events/amf/ResponseEvents.ts

@@ -1,4 +1,4 @@
-import { ApiDefinitions } from '@api-client/core/browser.js'
+import type { IApiResponse } from '@api-client/core/amf/definitions/Api.js'
 import { EventTypes } from './EventTypes.js'
 import { ApiStoreReadEvent } from './BaseEvents.js'
 
@@ -8,10 +8,10 @@ export const ResponseEvents = {
    * @param target The node on which to dispatch the event
    * @param id The id of the response to read.
    */
-  get: async (target: EventTarget, id: string): Promise<ApiDefinitions.IApiResponse> => {
+  get: async (target: EventTarget, id: string): Promise<IApiResponse> => {
     const e = new ApiStoreReadEvent(EventTypes.Response.get, id)
     target.dispatchEvent(e)
-    return e.detail.result as Promise<ApiDefinitions.IApiResponse>
+    return e.detail.result as Promise<IApiResponse>
   },
 }
 

package/src/events/amf/SecurityEvents.ts

@@ -1,6 +1,10 @@
-import { ApiDefinitions } from '@api-client/core/browser.js'
 import { EventTypes } from './EventTypes.js'
 import { ApiStoreContextEvent, ApiStoreReadEvent } from './BaseEvents.js'
+import type {
+  IApiSecurityRequirement,
+  IApiSecurityScheme,
+  IApiSecuritySchemeListItem,
+} from '@api-client/core/amf/definitions/Api.js'
 
 export const SecurityEvents = {
   /**
@@ -11,10 +15,10 @@ export const SecurityEvents = {
    * @param target The node on which to dispatch the event
    * @param id The id of the Payload to read.
    */
-  get: async (target: EventTarget, id: string): Promise<ApiDefinitions.IApiSecurityScheme> => {
+  get: async (target: EventTarget, id: string): Promise<IApiSecurityScheme> => {
     const e = new ApiStoreReadEvent(EventTypes.Security.get, id)
     target.dispatchEvent(e)
-    return e.detail.result as Promise<ApiDefinitions.IApiSecurityScheme>
+    return e.detail.result as Promise<IApiSecurityScheme>
   },
   /**
    * Reads a security requirement for an endpoint or operation.
@@ -22,19 +26,19 @@ export const SecurityEvents = {
    * @param target The node on which to dispatch the event
    * @param id The id of the Payload to read.
    */
-  getRequirement: async (target: EventTarget, id: string): Promise<ApiDefinitions.IApiSecurityRequirement> => {
+  getRequirement: async (target: EventTarget, id: string): Promise<IApiSecurityRequirement> => {
     const e = new ApiStoreReadEvent(EventTypes.Security.getRequirement, id)
     target.dispatchEvent(e)
-    return e.detail.result as Promise<ApiDefinitions.IApiSecurityRequirement>
+    return e.detail.result as Promise<IApiSecurityRequirement>
   },
   /**
    * Lists the security definitions for the API.
    * @param target The node on which to dispatch the event
    */
-  list: async (target: EventTarget): Promise<ApiDefinitions.IApiSecuritySchemeListItem[]> => {
+  list: async (target: EventTarget): Promise<IApiSecuritySchemeListItem[]> => {
     const e = new ApiStoreContextEvent(EventTypes.Security.list)
     target.dispatchEvent(e)
-    return e.detail.result as Promise<ApiDefinitions.IApiSecuritySchemeListItem[]>
+    return e.detail.result as Promise<IApiSecuritySchemeListItem[]>
   },
 
   /**

package/src/events/amf/ServerEvents.ts

@@ -1,7 +1,8 @@
-import { ApiDefinitions, ServersQueryOptions } from '@api-client/core/browser.js'
 import { EventTypes } from './EventTypes.js'
 import { ApiStoreContextEvent } from './BaseEvents.js'
-import { ServerType } from '../../amf/types.js'
+import type { ServerType } from '../../amf/types.js'
+import type { ServersQueryOptions } from '@api-client/core/amf/AmfMixin.js'
+import type { IApiServer } from '@api-client/core/amf/definitions/Api.js'
 
 export interface ServerChangeEventDetail {
   /**
@@ -85,9 +86,9 @@ export const ServerEvents = {
    * @param query Server query options
    * @returns The list of servers for given query.
    */
-  query: (target: EventTarget, query?: ServersQueryOptions): Promise<ApiDefinitions.IApiServer[]> => {
+  query: (target: EventTarget, query?: ServersQueryOptions): Promise<IApiServer[]> => {
     const e = new ApiStoreContextEvent(EventTypes.Server.query, query)
     target.dispatchEvent(e)
-    return e.detail.result as Promise<ApiDefinitions.IApiServer[]>
+    return e.detail.result as Promise<IApiServer[]>
   },
 }

package/src/events/amf/TypeEvents.ts

@@ -1,26 +1,27 @@
-import { ApiDefinitions, AmfShapes } from '@api-client/core/browser.js'
 import { EventTypes } from './EventTypes.js'
 import { ApiStoreContextEvent, ApiStoreReadEvent } from './BaseEvents.js'
+import type { IShapeUnion } from '@api-client/core/amf/definitions/Shapes.js'
+import type { IApiNodeShapeListItem } from '@api-client/core/amf/definitions/Api.js'
 
 export const TypeEvents = {
   /**
    * Lists the type (schema) definitions for the API.
    * @param target The node on which to dispatch the event
    */
-  list: async (target: EventTarget): Promise<ApiDefinitions.IApiNodeShapeListItem[]> => {
+  list: async (target: EventTarget): Promise<IApiNodeShapeListItem[]> => {
     const e = new ApiStoreContextEvent(EventTypes.Type.list)
     target.dispatchEvent(e)
-    return e.detail.result as Promise<ApiDefinitions.IApiNodeShapeListItem[]>
+    return e.detail.result as Promise<IApiNodeShapeListItem[]>
   },
   /**
    * Reads a type (schema) from the store.
    * @param target The node on which to dispatch the event
    * @param id The id of the object to read.
    */
-  get: async (target: EventTarget, id: string): Promise<AmfShapes.IShapeUnion> => {
+  get: async (target: EventTarget, id: string): Promise<IShapeUnion> => {
     const e = new ApiStoreReadEvent(EventTypes.Type.get, id)
     target.dispatchEvent(e)
-    return e.detail.result as Promise<AmfShapes.IShapeUnion>
+    return e.detail.result as Promise<IShapeUnion>
   },
 }
 

package/src/index.ts

@@ -64,4 +64,4 @@ export { DomEventsAmfStore } from './amf/store/DomEventsAmfStore.js'
 export * from './lib/config/Config.js'
 
 // Other
-export * from './decorators/index.js'
+export * as Decorators from './decorators/index.js'

package/src/lib/UserCache.ts

@@ -1,4 +1,4 @@
-import type { IUser } from '@api-client/core/browser.js'
+import type { IUser } from '@api-client/core/models/store/User.js'
 import { Events } from '../events/Events.js'
 
 /**

package/src/lib/http/Har.ts

@@ -1,4 +1,4 @@
-import { RequestTime, IRequestTime } from '@api-client/core/browser.js'
+import { type IRequestTime, RequestTime } from '@api-client/core/models/RequestTime.js'
 
 export interface ITimingProgressInfo {
   /**

package/src/lib/http/HeadersArray.ts

@@ -1,4 +1,4 @@
-import { Headers } from '@api-client/core/browser.js'
+import { Headers } from '@api-client/core/lib/headers/Headers.js'
 
 export interface IHeader {
   name: string

package/src/lib/http/Payload.ts

@@ -1,4 +1,4 @@
-import { DeserializedPayload } from '@api-client/core/browser.js'
+import { DeserializedPayload } from '@api-client/core/lib/transformers/PayloadSerializer.js'
 
 /**
  * @param body The body

package/src/lib/http/Url.ts

@@ -1,4 +1,4 @@
-import { IUrl } from '@api-client/core/browser.js'
+import type { IUrl } from '@api-client/core/models/Url.js'
 
 /**
  * Lists the suggestions lists before rendering.

package/src/md/chip/internals/Chip.ts

@@ -1,8 +1,8 @@
+import { cancelEvent } from '@api-client/core/lib/events/Utils.js'
 import { html, nothing, PropertyValues, TemplateResult } from 'lit'
 import { property, queryAsync, state } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { when } from 'lit/directives/when.js'
-import { EventUtils } from '@api-client/core/browser.js'
 import { UiElement } from '../../UiElement.js'
 import UiRipple from '../../ripple/internals/ripple.js'
 import { ripple } from '../../effects/rippleDirective.js'
@@ -279,7 +279,7 @@ export default class UiChip extends UiElement {
           class="trailing-icon"
           role="presentation"
           @click="${this.handleListClick}"
-          @keypress="${EventUtils.cancelEvent}"
+          @keypress="${cancelEvent}"
           >${arrowDropDown}</span
         >`
       }
@@ -288,7 +288,7 @@ export default class UiChip extends UiElement {
       return html`<span
         class="trailing-icon"
         @click="${this.handleClose}"
-        @keypress="${EventUtils.cancelEvent}"
+        @keypress="${cancelEvent}"
         role="button"
         aria-label="Activate to close or disabled this chip."
         >${close}</span

package/src/md/dialog/internals/Dialog.styles.ts

@@ -6,6 +6,10 @@ export default css`
   }
 
   dialog {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
     border: none;
     border-radius: var(--md-sys-shape-corner-extra-large);
     background-color: var(--md-sys-color-surface);
@@ -68,6 +72,7 @@ export default css`
   }
 
   .content {
+    overflow: auto;
     font-family: var(--md-sys-typescale-body-medium-font);
     font-weight: var(--md-sys-typescale-body-medium-weight);
     font-size: var(--md-sys-typescale-body-medium-size);

package/src/md/dropdown-list/internals/UiDropdownList.ts

@@ -1,10 +1,10 @@
+import { randomString } from '@api-client/core/lib/math/Random.js'
 import { html, LitElement, PropertyValues, TemplateResult } from 'lit'
 import { property, queryAssignedElements, state } from 'lit/decorators.js'
 import { ClassInfo, classMap } from 'lit/directives/class-map.js'
 import { StyleInfo, styleMap } from 'lit/directives/style-map.js'
 import { positionOverlay, type HorizontalAlignment, type VerticalAlignment } from '../../../lib/ElementPositioning.js'
 import * as ScrollHelper from '../../../lib/ScrollHelper.js'
-import { Random } from '@api-client/core/browser.js'
 
 const itemRole = ['menuitem', 'menuitemcheckbox', 'menuitemradio']
 
@@ -39,9 +39,9 @@ export default class UiDropdownList extends LitElement {
   @queryAssignedElements({ slot: 'dropdown' })
   protected accessor dropdowns!: HTMLElement[]
 
-  @state() protected accessor triggerId = `ui-trigger-${Random.randomString(4)}`
+  @state() protected accessor triggerId = `ui-trigger-${randomString(4)}`
 
-  @state() protected accessor menuId = `ui-menu-${Random.randomString(4)}`
+  @state() protected accessor menuId = `ui-menu-${randomString(4)}`
 
   /**
    * Whether the menu is opened.

package/src/md/listbox/internals/Listbox.ts

@@ -1,5 +1,5 @@
+import { randomString } from '@api-client/core/lib/math/Random.js'
 import { query } from 'lit/decorators.js'
-import { Random } from '@api-client/core/browser.js'
 import UiList from '../../list/internals/List.js'
 import UiListItem from '../../list/internals/ListItem.js'
 
@@ -50,7 +50,7 @@ export default class UiListbox extends UiList {
     }
     item.setAttribute('aria-selected', 'true')
     if (!item.id) {
-      item.id = `option-${Random.randomString(4)}`
+      item.id = `option-${randomString(4)}`
     }
     this.setAttribute('aria-activedescendant', item.id)
   }

package/src/md/snackbar/internals/Snackbar.ts

@@ -1,6 +1,6 @@
 import { html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit'
+import { cancelEvent } from '@api-client/core/lib/events/Utils.js'
 import { property } from 'lit/decorators.js'
-import { EventUtils } from '@api-client/core/browser.js'
 import { classMap } from 'lit/directives/class-map.js'
 import '../../button/ui-text-button.js'
 import '../../icon-button/ui-icon-button.js'
@@ -206,9 +206,7 @@ export class Snackbar extends LitElement {
       return nothing
     }
     return html`
-      <ui-text-button class="action" @click="${this.actionHandler}" @action="${EventUtils.cancelEvent}"
-        >${action}</ui-text-button
-      >
+      <ui-text-button class="action" @click="${this.actionHandler}" @action="${cancelEvent}">${action}</ui-text-button>
     `
   }
 
@@ -218,7 +216,7 @@ export class Snackbar extends LitElement {
       return nothing
     }
     return html`
-      <ui-icon-button @click="${this.closeHandler}" class="icon" @action="${EventUtils.cancelEvent}">
+      <ui-icon-button @click="${this.closeHandler}" class="icon" @action="${cancelEvent}">
         <ui-icon icon="close"></ui-icon>
       </ui-icon-button>
     `