@sveltia/ui 0.12.0 → 0.12.1

package/package/components/select/combobox.svelte

@@ -6,6 +6,7 @@
   @todo Add DOM API compatibility.
 -->
 <script>
+  import { generateElementId } from '@sveltia/utils/element';
   import { createEventDispatcher } from 'svelte';
   import { _ } from 'svelte-i18n';
   import { writable } from 'svelte/store';
@@ -15,7 +16,6 @@
   import SearchBar from '../text-field/search-bar.svelte';
   import TextInput from '../text-field/text-input.svelte';
   import Popup from '../util/popup.svelte';
-  import { getRandomId } from '../../services/util';
 
   /**
    * The `class` attribute on the wrapper element.
@@ -64,7 +64,7 @@
   export let position = 'bottom-left';
 
   const dispatch = createEventDispatcher();
-  const id = getRandomId('combobox');
+  const id = generateElementId('combobox');
   const selectedSelector = '[role="option"][aria-selected="true"]';
   /** @type {HTMLElement} */
   let comboboxElement;

package/package/components/select/combobox.svelte.d.ts

@@ -11,10 +11,10 @@ export default class Combobox extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     invalid?: boolean | undefined;
-    position?: PopupPosition | undefined;
-    hidden?: boolean | undefined;
     disabled?: boolean | undefined;
     value?: string | number | undefined;
+    position?: PopupPosition | undefined;
+    hidden?: boolean | undefined;
     readonly?: boolean | undefined;
     required?: boolean | undefined;
     editable?: boolean | undefined;
@@ -38,10 +38,10 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         invalid?: boolean | undefined;
-        position?: PopupPosition | undefined;
-        hidden?: boolean | undefined;
         disabled?: boolean | undefined;
         value?: (string | number | undefined);
+        position?: PopupPosition | undefined;
+        hidden?: boolean | undefined;
         readonly?: boolean | undefined;
         required?: boolean | undefined;
         editable?: boolean | undefined;

package/package/components/select/select.svelte.d.ts

@@ -11,9 +11,9 @@ export default class Select extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     invalid?: boolean | undefined;
-    hidden?: boolean | undefined;
     disabled?: boolean | undefined;
     value?: string | number | undefined;
+    hidden?: boolean | undefined;
     readonly?: boolean | undefined;
     required?: boolean | undefined;
 }, {
@@ -33,9 +33,9 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         invalid?: boolean | undefined;
-        hidden?: boolean | undefined;
         disabled?: boolean | undefined;
         value?: (string | number | undefined);
+        hidden?: boolean | undefined;
         readonly?: boolean | undefined;
         required?: boolean | undefined;
     };

package/package/components/slider/slider.svelte.d.ts

@@ -13,9 +13,9 @@ export default class Slider extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     invalid?: boolean | undefined;
-    hidden?: boolean | undefined;
     disabled?: boolean | undefined;
     value?: number | undefined;
+    hidden?: boolean | undefined;
     readonly?: boolean | undefined;
     values?: [number, number] | undefined;
     min?: number | undefined;
@@ -39,9 +39,9 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         invalid?: boolean | undefined;
-        hidden?: boolean | undefined;
         disabled?: boolean | undefined;
         value?: number | undefined;
+        hidden?: boolean | undefined;
         readonly?: boolean | undefined;
         values?: [number, number] | undefined;
         min?: number | undefined;

package/package/components/switch/switch.svelte.d.ts

@@ -9,10 +9,10 @@
 export default class Switch extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    label?: string | undefined;
     invalid?: boolean | undefined;
-    hidden?: boolean | undefined;
+    label?: string | undefined;
     disabled?: boolean | undefined;
+    hidden?: boolean | undefined;
     readonly?: boolean | undefined;
     required?: boolean | undefined;
     checked?: boolean | "mixed" | undefined;
@@ -32,10 +32,10 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        label?: string | undefined;
         invalid?: boolean | undefined;
-        hidden?: boolean | undefined;
+        label?: string | undefined;
         disabled?: boolean | undefined;
+        hidden?: boolean | undefined;
         readonly?: boolean | undefined;
         required?: boolean | undefined;
         checked?: boolean | "mixed" | undefined;

package/package/components/table/table-body.svelte

@@ -5,7 +5,7 @@
   @see https://w3c.github.io/aria/#rowgroup
 -->
 <script>
-  import { getRandomId } from '../../services/util';
+  import { generateElementId } from '@sveltia/utils/element';
 
   /**
    * The `class` attribute on the wrapper element.
@@ -20,7 +20,7 @@
    */
   export let label = '';
 
-  const id = getRandomId('tbody');
+  const id = generateElementId('tbody');
 </script>
 
 <div

package/package/components/tabs/tab-list.svelte.d.ts

@@ -10,8 +10,8 @@ export default class TabList extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     name?: string | undefined;
-    hidden?: boolean | undefined;
     disabled?: boolean | undefined;
+    hidden?: boolean | undefined;
     orientation?: "vertical" | "horizontal" | undefined;
 }, {
     change: CustomEvent<any>;
@@ -30,8 +30,8 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         name?: string | undefined;
-        hidden?: boolean | undefined;
         disabled?: boolean | undefined;
+        hidden?: boolean | undefined;
         orientation?: "vertical" | "horizontal" | undefined;
     };
     events: {

package/package/components/tabs/tab.svelte.d.ts

@@ -9,8 +9,8 @@
 export default class Tab extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    hidden?: boolean | undefined;
     disabled?: boolean | undefined;
+    hidden?: boolean | undefined;
     selected?: boolean | undefined;
 }, {
     focus: FocusEvent;
@@ -37,8 +37,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        hidden?: boolean | undefined;
         disabled?: boolean | undefined;
+        hidden?: boolean | undefined;
         selected?: boolean | undefined;
     };
     events: {

package/package/components/text-editor/text-editor.svelte

@@ -3,6 +3,7 @@
   A rich text editor based on Lexical.
 -->
 <script>
+  import { generateElementId } from '@sveltia/utils/element';
   import { onMount, setContext } from 'svelte';
   import { _ } from 'svelte-i18n';
   import { writable } from 'svelte/store';
@@ -16,7 +17,6 @@
   import EditorToolbar from './toolbar/editor-toolbar.svelte';
   import TextArea from '../text-field/text-area.svelte';
   import Toast from '../toast/toast.svelte';
-  import { getRandomId } from '../../services/util';
 
   /**
    * Make the text input container flexible.
@@ -67,7 +67,7 @@
   const editor = writable(initEditor());
   const selectionBlockType = writable('paragraph');
   const selectionInlineTypes = writable([]);
-  const editorId = writable(getRandomId('editor'));
+  const editorId = writable(generateElementId('editor'));
   const useRichText = writable(modes.includes('rich-text'));
   const hasConverterError = writable(false);
   let showConverterError = false;

package/package/components/text-editor/text-editor.svelte.d.ts

@@ -5,9 +5,9 @@
 export default class TextEditor extends SvelteComponent<{
     [x: string]: any;
     invalid?: boolean | undefined;
-    hidden?: boolean | undefined;
     disabled?: boolean | undefined;
     value?: string | undefined;
+    hidden?: boolean | undefined;
     readonly?: boolean | undefined;
     flex?: boolean | undefined;
     required?: boolean | undefined;
@@ -25,9 +25,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         invalid?: boolean | undefined;
-        hidden?: boolean | undefined;
         disabled?: boolean | undefined;
         value?: string | undefined;
+        hidden?: boolean | undefined;
         readonly?: boolean | undefined;
         flex?: boolean | undefined;
         required?: boolean | undefined;

package/package/components/text-editor/toolbar/insert-link-button.svelte

@@ -1,6 +1,7 @@
 <script>
   import { LinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
   import { $getNearestNodeOfType as getNearestNodeOfType } from '@lexical/utils';
+  import { isURL } from '@sveltia/utils/string';
   import {
     COMMAND_PRIORITY_NORMAL,
     KEY_DOWN_COMMAND,
@@ -17,7 +18,6 @@
   import { availableButtons } from '..';
   import TextInput from '../../text-field/text-input.svelte';
   import { isMac, matchShortcuts } from '../../../services/events';
-  import { isURL } from '../../../services/util';
 
   /**
    * Button type.

package/package/components/text-field/number-input.svelte

@@ -5,11 +5,11 @@
   @see https://w3c.github.io/aria/#textbox
 -->
 <script>
+  import { generateElementId } from '@sveltia/utils/element';
   import { _ } from 'svelte-i18n';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
   import TextInput from './text-input.svelte';
-  import { getRandomId } from '../../services/util';
 
   /**
    * The `class` attribute on the wrapper element.
@@ -67,7 +67,7 @@
    */
   export let step = 1;
 
-  const id = getRandomId('input');
+  const id = generateElementId('input');
   let edited = false;
 
   $: maximumFractionDigits = String(step).split('.')[1]?.length || 0;

package/package/components/text-field/number-input.svelte.d.ts

@@ -10,9 +10,9 @@ export default class NumberInput extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     invalid?: boolean | undefined;
-    hidden?: boolean | undefined;
     disabled?: boolean | undefined;
     value?: string | undefined;
+    hidden?: boolean | undefined;
     readonly?: boolean | undefined;
     flex?: boolean | undefined;
     required?: boolean | undefined;
@@ -45,9 +45,9 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         invalid?: boolean | undefined;
-        hidden?: boolean | undefined;
         disabled?: boolean | undefined;
         value?: string | undefined;
+        hidden?: boolean | undefined;
         readonly?: boolean | undefined;
         flex?: boolean | undefined;
         required?: boolean | undefined;

package/package/components/text-field/password-input.svelte

@@ -6,11 +6,11 @@
   @see https://w3c.github.io/aria/#textbox
 -->
 <script>
+  import { generateElementId } from '@sveltia/utils/element';
   import { _ } from 'svelte-i18n';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
   import TextInput from './text-input.svelte';
-  import { getRandomId } from '../../services/util';
 
   /**
    * The `class` attribute on the wrapper element.
@@ -54,7 +54,7 @@
    */
   export let value = undefined;
 
-  const id = getRandomId('input');
+  const id = generateElementId('input');
 
   /**
    * @type {TextInput}

package/package/components/text-field/password-input.svelte.d.ts

@@ -11,9 +11,9 @@ export default class PasswordInput extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     invalid?: boolean | undefined;
-    hidden?: boolean | undefined;
     disabled?: boolean | undefined;
     value?: string | undefined;
+    hidden?: boolean | undefined;
     readonly?: boolean | undefined;
     flex?: boolean | undefined;
     required?: boolean | undefined;
@@ -40,9 +40,9 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         invalid?: boolean | undefined;
-        hidden?: boolean | undefined;
         disabled?: boolean | undefined;
         value?: string | undefined;
+        hidden?: boolean | undefined;
         readonly?: boolean | undefined;
         flex?: boolean | undefined;
         required?: boolean | undefined;

package/package/components/text-field/search-bar.svelte

@@ -8,11 +8,11 @@
 <svelte:options accessors={true} />
 
 <script>
+  import { generateElementId } from '@sveltia/utils/element';
   import { _ } from 'svelte-i18n';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
   import TextInput from './text-input.svelte';
-  import { getRandomId } from '../../services/util';
 
   /**
    * The `class` attribute on the wrapper element.
@@ -56,7 +56,7 @@
    */
   export let value = undefined;
 
-  const id = getRandomId('searchbox');
+  const id = generateElementId('searchbox');
   /**
    * Reference to the `TextInput` component.
    * @type {TextInput | undefined}

package/package/components/text-field/search-bar.svelte.d.ts

@@ -12,9 +12,9 @@ export default class SearchBar extends SvelteComponent<{
     class?: string | undefined;
     focus?: (() => void) | undefined;
     invalid?: boolean | undefined;
-    hidden?: boolean | undefined;
     disabled?: boolean | undefined;
     value?: string | undefined;
+    hidden?: boolean | undefined;
     readonly?: boolean | undefined;
     flex?: boolean | undefined;
     required?: boolean | undefined;
@@ -68,9 +68,9 @@ declare const __propDef: {
         class?: string | undefined;
         focus?: (() => void) | undefined;
         invalid?: boolean | undefined;
-        hidden?: boolean | undefined;
         disabled?: boolean | undefined;
         value?: string | undefined;
+        hidden?: boolean | undefined;
         readonly?: boolean | undefined;
         flex?: boolean | undefined;
         required?: boolean | undefined;

package/package/components/text-field/text-area.svelte.d.ts

@@ -12,9 +12,9 @@ export default class TextArea extends SvelteComponent<{
     class?: string | undefined;
     name?: string | undefined;
     invalid?: boolean | undefined;
-    hidden?: boolean | undefined;
     disabled?: boolean | undefined;
     value?: string | undefined;
+    hidden?: boolean | undefined;
     readonly?: boolean | undefined;
     flex?: boolean | undefined;
     required?: boolean | undefined;
@@ -39,9 +39,9 @@ declare const __propDef: {
         class?: string | undefined;
         name?: string | undefined;
         invalid?: boolean | undefined;
-        hidden?: boolean | undefined;
         disabled?: boolean | undefined;
         value?: string | undefined;
+        hidden?: boolean | undefined;
         readonly?: boolean | undefined;
         flex?: boolean | undefined;
         required?: boolean | undefined;

package/package/components/text-field/text-input.svelte

@@ -7,8 +7,8 @@
 <svelte:options accessors={true} />
 
 <script>
+  import { generateElementId } from '@sveltia/utils/element';
   import { activateKeyShortcuts } from '../../services/events';
-  import { getRandomId } from '../../services/util';
 
   /**
    * Reference to the `<input>` element.
@@ -85,7 +85,7 @@
    */
   export let inputmode = 'text';
 
-  const id = getRandomId('input');
+  const id = generateElementId('input');
 
   $: ariaLabel = $$restProps['aria-label'];
 </script>

package/package/components/text-field/text-input.svelte.d.ts

@@ -10,12 +10,12 @@ export default class TextInput extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     name?: string | undefined;
-    role?: "textbox" | "searchbox" | "combobox" | "spinbutton" | undefined;
     invalid?: boolean | undefined;
-    hidden?: boolean | undefined;
     disabled?: boolean | undefined;
-    element?: HTMLInputElement | undefined;
     value?: string | number | undefined;
+    role?: "textbox" | "searchbox" | "combobox" | "spinbutton" | undefined;
+    hidden?: boolean | undefined;
+    element?: HTMLInputElement | undefined;
     readonly?: boolean | undefined;
     keyShortcuts?: string | undefined;
     flex?: boolean | undefined;
@@ -83,12 +83,12 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         name?: string | undefined;
-        role?: "textbox" | "searchbox" | "combobox" | "spinbutton" | undefined;
         invalid?: boolean | undefined;
-        hidden?: boolean | undefined;
         disabled?: boolean | undefined;
-        element?: HTMLInputElement | undefined;
         value?: string | number | undefined;
+        role?: "textbox" | "searchbox" | "combobox" | "spinbutton" | undefined;
+        hidden?: boolean | undefined;
+        element?: HTMLInputElement | undefined;
         readonly?: boolean | undefined;
         keyShortcuts?: string | undefined;
         flex?: boolean | undefined;

package/package/components/toast/toast.svelte.d.ts

@@ -9,8 +9,8 @@
 export default class Toast extends SvelteComponent<{
     [x: string]: any;
     id?: number | undefined;
-    show?: boolean | undefined;
     position?: ToastPosition | undefined;
+    show?: boolean | undefined;
     duration?: number | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -26,8 +26,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         id?: number | undefined;
-        show?: boolean | undefined;
         position?: ToastPosition | undefined;
+        show?: boolean | undefined;
         duration?: number | undefined;
     };
     events: {

package/package/components/toolbar/toolbar.svelte.d.ts

@@ -9,8 +9,8 @@
 export default class Toolbar extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    hidden?: boolean | undefined;
     disabled?: boolean | undefined;
+    hidden?: boolean | undefined;
     variant?: "primary" | "secondary" | undefined;
     orientation?: "vertical" | "horizontal" | undefined;
 }, {
@@ -27,8 +27,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        hidden?: boolean | undefined;
         disabled?: boolean | undefined;
+        hidden?: boolean | undefined;
         variant?: 'primary' | 'secondary' | undefined;
         orientation?: "vertical" | "horizontal" | undefined;
     };

package/package/components/util/group.svelte.d.ts

@@ -8,8 +8,8 @@
 export default class Group extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    hidden?: boolean | undefined;
     disabled?: boolean | undefined;
+    hidden?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -24,8 +24,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        hidden?: boolean | undefined;
         disabled?: boolean | undefined;
+        hidden?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/util/modal.svelte

@@ -5,8 +5,8 @@
 <svelte:options accessors={true} />
 
 <script>
+  import { sleep } from '@sveltia/utils/misc';
   import { createEventDispatcher, onMount } from 'svelte';
-  import { sleep } from '../../services/util';
 
   /**
    * The `class` attribute on the `<dialog>` element.

package/package/components/util/modal.svelte.d.ts

@@ -5,8 +5,8 @@
 export default class Modal extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    dialog?: HTMLDialogElement | undefined;
     close?: ((returnValue: string) => void) | undefined;
+    dialog?: HTMLDialogElement | undefined;
     role?: "dialog" | "alertdialog" | "none" | undefined;
     open?: boolean | undefined;
     showBackdrop?: boolean | undefined;
@@ -58,8 +58,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        dialog?: HTMLDialogElement | undefined;
         close?: ((returnValue: string) => void) | undefined;
+        dialog?: HTMLDialogElement | undefined;
         role?: "dialog" | "alertdialog" | "none" | undefined;
         open?: boolean | undefined;
         showBackdrop?: boolean | undefined;

package/package/components/util/popup.svelte

@@ -5,11 +5,11 @@
 <svelte:options accessors={true} />
 
 <script>
+  import { sleep } from '@sveltia/utils/misc';
   import { onMount } from 'svelte';
   import { writable } from 'svelte/store';
-  import Modal from './modal.svelte';
   import { activatePopup } from '../../services/popup';
-  import { sleep } from '../../services/util';
+  import Modal from './modal.svelte';
 
   /**
    * The `class` attribute on the content element.

package/package/components/util/popup.svelte.d.ts

@@ -6,9 +6,9 @@ export default class Popup extends SvelteComponent<{
     [x: string]: any;
     anchor: HTMLElement | undefined;
     class?: string | undefined;
+    position?: PopupPosition | undefined;
     open?: import("svelte/store").Writable<boolean> | undefined;
     showBackdrop?: boolean | undefined;
-    position?: PopupPosition | undefined;
     content?: HTMLElement | undefined;
     positionBaseElement?: HTMLElement | undefined;
     touchOptimized?: boolean | undefined;
@@ -61,9 +61,9 @@ declare const __propDef: {
         [x: string]: any;
         anchor: HTMLElement | undefined;
         class?: string | undefined;
+        position?: PopupPosition | undefined;
         open?: import("svelte/store").Writable<boolean> | undefined;
         showBackdrop?: boolean | undefined;
-        position?: PopupPosition | undefined;
         content?: HTMLElement | undefined;
         positionBaseElement?: HTMLElement | undefined;
         touchOptimized?: boolean | undefined;
@@ -78,10 +78,7 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    /**
-       * The `class` attribute on the content element.
-       * @type {string}
-       */ slots: {
+    slots: {
         'extra-content': {
             slot: string;
         };

package/package/index.d.ts

@@ -67,4 +67,3 @@ export { default as Toolbar } from "./components/toolbar/toolbar.svelte";
 export { default as AppShell } from "./components/util/app-shell.svelte";
 export { default as Group } from "./components/util/group.svelte";
 export { default as Modal } from "./components/util/modal.svelte";
-export * from "./services/util";

package/package/index.js

@@ -10,7 +10,14 @@ import { addMessages, init } from 'svelte-i18n';
  */
 export const initLocales = ({ fallbackLocale = 'en', initialLocale = 'en' } = {}) => {
   /** @type {{ [key: string]: { strings: object }}} */
-  const modules = import.meta.glob('./locales/*.js', { eager: true });
+  let modules = import.meta.glob('./locales/*.js', { eager: true });
+
+  // The file path must be relative during local development, or the import may fail when using
+  // `pnpm link -g @sveltia/ui`. On the other hand, it must start with `$lib` when being imported
+  // with `pnpm install @sveltia/ui`, otherwise the path cannot be resolved.
+  if (!Object.keys(modules).length) {
+    modules = import.meta.glob('$lib/locales/*.js', { eager: true });
+  }
 
   Object.entries(modules).forEach(([path, { strings }]) => {
     const [, locale] = /** @type {string[]} */ (path.match(/([a-zA-Z-]+)\.js/));
@@ -92,5 +99,3 @@ export { default as Toolbar } from './components/toolbar/toolbar.svelte';
 export { default as AppShell } from './components/util/app-shell.svelte';
 export { default as Group } from './components/util/group.svelte';
 export { default as Modal } from './components/util/modal.svelte';
-
-export * from './services/util';

package/package/services/group.js

@@ -1,4 +1,5 @@
-import { getRandomId, sleep } from './util';
+import { generateElementId } from '@sveltia/utils/element';
+import { sleep } from '@sveltia/utils/misc';
 
 /**
  * @type {{ [role: string]: {
@@ -62,7 +63,7 @@ class Group {
     this.parent = parent;
     this.role = /** @type {string} */ (parent.getAttribute('role'));
     this.multi = this.parent.getAttribute('aria-multiselectable') === 'true';
-    this.id = getRandomId(this.role);
+    this.id = generateElementId(this.role);
     this.parentGroupSelector = `[role="group"], [role="${this.role}"]`;
 
     const { orientation, childRoles, childSelectedAttr, focusChild } = config[this.role];

package/package/services/popup.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 
+import { generateElementId } from '@sveltia/utils/element';
 import { get, writable } from 'svelte/store';
-import { getRandomId } from './util';
 
 /**
  * Implement the popup handler.
@@ -105,7 +105,7 @@ class Popup {
     this.popupElement = popupElement; // = backdrop
     this.position = position;
     this.positionBaseElement = positionBaseElement ?? anchorElement;
-    this.id = getRandomId('popup');
+    this.id = generateElementId('popup');
 
     this.anchorElement.setAttribute('aria-controls', this.id);
     this.popupElement.setAttribute('id', this.id);