lido-player 0.0.2-beta-18-dev → 0.0.2-beta-21-dev

package/dist/lido-player/readme.md

@@ -1,49 +1,49 @@
-# lido-avatar
-
-
-
-<!-- Auto Generated Below -->
-
-
-## Properties
-
-| Property       | Attribute       | Description                                                                                                             | Type      | Default  |
-| -------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------- | --------- | -------- |
-| `ariaHidden`   | `aria-hidden`   | The ARIA hidden attribute of the container. Used for accessibility to hide the element.                                 | `string`  | `''`     |
-| `ariaLabel`    | `aria-label`    | The ARIA label of the container. Used for accessibility to indicate the purpose of the element.                         | `string`  | `''`     |
-| `audio`        | `audio`         | Audio file URL or identifier for sound that will be associated with the column.                                         | `string`  | `''`     |
-| `bgColor`      | `bg-color`      | The background color of the column (CSS color value, e.g., '#FFFFFF', 'blue').                                          | `string`  | `''`     |
-| `delayVisible` | `delay-visible` | Delay in milliseconds to make the cell visible after mount.                                                             | `string`  | `''`     |
-| `height`       | `height`        | The height of the column component (CSS value, e.g., '100px', '50%').                                                   | `string`  | `''`     |
-| `id`           | `id`            | The unique identifier for the column component.                                                                         | `string`  | `''`     |
-| `onCorrect`    | `on-correct`    | Event handler for a Correct matching action, which can be used to hide the column or trigger other custom logic.        | `string`  | `''`     |
-| `onEntry`      | `on-entry`      | Event handler for when the column is entered, which can be used to initiate specific behaviors on entry.                | `string`  | `''`     |
-| `onInCorrect`  | `on-in-correct` | Event handler for an Incorrect matching action, which can be used to trigger custom logic when the action is incorrect. | `string`  | `''`     |
-| `onTouch`      | `on-touch`      | Event handler for a touch event, where a custom function can be triggered when the column is touched.                   | `string`  | `''`     |
-| `src`          | `src`           | Source URL of the Rive (.riv) file                                                                                      | `string`  | `''`     |
-| `tabIndex`     | `tab-index`     | The tab index value, used to set the tab order of the column for keyboard navigation.                                   | `number`  | `0`      |
-| `type`         | `type`          | Defines the type of the column, which can be used for styling or specific logic handling.                               | `string`  | `''`     |
-| `value`        | `value`         | The value associated with the column component. Typically used for internal logic.                                      | `string`  | `''`     |
-| `visible`      | `visible`       | A boolean that controls whether the column is visible (`true`) or hidden (`false`).                                     | `boolean` | `false`  |
-| `width`        | `width`         | The width of the column component (CSS value, e.g., '100px', '50%').                                                    | `string`  | `'auto'` |
-| `x`            | `x`             | The x-coordinate (left position) of the column within its container (CSS value, e.g., '10px', '5vw').                   | `string`  | `'0px'`  |
-| `y`            | `y`             | The y-coordinate (top position) of the column within its container (CSS value, e.g., '10px', '5vh').                    | `string`  | `'0px'`  |
-| `z`            | `z`             | The z-index of the column to control stacking order.                                                                    | `string`  | `'0'`    |
-
-
-## Dependencies
-
-### Used by
-
- - [lido-home](../home)
-
-### Graph
-```mermaid
-graph TD;
-  lido-home --> lido-avatar
-  style lido-avatar fill:#f9f,stroke:#333,stroke-width:4px
-```
-
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*
+# lido-avatar
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property       | Attribute       | Description                                                                                                             | Type      | Default  |
+| -------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------- | --------- | -------- |
+| `ariaHidden`   | `aria-hidden`   | The ARIA hidden attribute of the container. Used for accessibility to hide the element.                                 | `string`  | `''`     |
+| `ariaLabel`    | `aria-label`    | The ARIA label of the container. Used for accessibility to indicate the purpose of the element.                         | `string`  | `''`     |
+| `audio`        | `audio`         | Audio file URL or identifier for sound that will be associated with the column.                                         | `string`  | `''`     |
+| `bgColor`      | `bg-color`      | The background color of the column (CSS color value, e.g., '#FFFFFF', 'blue').                                          | `string`  | `''`     |
+| `delayVisible` | `delay-visible` | Delay in milliseconds to make the cell visible after mount.                                                             | `string`  | `''`     |
+| `height`       | `height`        | The height of the column component (CSS value, e.g., '100px', '50%').                                                   | `string`  | `''`     |
+| `id`           | `id`            | The unique identifier for the column component.                                                                         | `string`  | `''`     |
+| `onCorrect`    | `on-correct`    | Event handler for a Correct matching action, which can be used to hide the column or trigger other custom logic.        | `string`  | `''`     |
+| `onEntry`      | `on-entry`      | Event handler for when the column is entered, which can be used to initiate specific behaviors on entry.                | `string`  | `''`     |
+| `onInCorrect`  | `on-in-correct` | Event handler for an Incorrect matching action, which can be used to trigger custom logic when the action is incorrect. | `string`  | `''`     |
+| `onTouch`      | `on-touch`      | Event handler for a touch event, where a custom function can be triggered when the column is touched.                   | `string`  | `''`     |
+| `src`          | `src`           | Source URL of the Rive (.riv) file                                                                                      | `string`  | `''`     |
+| `tabIndex`     | `tab-index`     | The tab index value, used to set the tab order of the column for keyboard navigation.                                   | `number`  | `0`      |
+| `type`         | `type`          | Defines the type of the column, which can be used for styling or specific logic handling.                               | `string`  | `''`     |
+| `value`        | `value`         | The value associated with the column component. Typically used for internal logic.                                      | `string`  | `''`     |
+| `visible`      | `visible`       | A boolean that controls whether the column is visible (`true`) or hidden (`false`).                                     | `boolean` | `false`  |
+| `width`        | `width`         | The width of the column component (CSS value, e.g., '100px', '50%').                                                    | `string`  | `'auto'` |
+| `x`            | `x`             | The x-coordinate (left position) of the column within its container (CSS value, e.g., '10px', '5vw').                   | `string`  | `'0px'`  |
+| `y`            | `y`             | The y-coordinate (top position) of the column within its container (CSS value, e.g., '10px', '5vh').                    | `string`  | `'0px'`  |
+| `z`            | `z`             | The z-index of the column to control stacking order.                                                                    | `string`  | `'0'`    |
+
+
+## Dependencies
+
+### Used by
+
+ - [lido-home](../home)
+
+### Graph
+```mermaid
+graph TD;
+  lido-home --> lido-avatar
+  style lido-avatar fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/types/components/trace/lido-trace.d.ts

@@ -117,6 +117,7 @@ export declare class LidoTrace {
     fileIndex: number;
     isDragging: boolean;
     activePointerId: number | null;
+    private activeTraceState;
     private freeTraceUpdateCounter;
     /** ───────────────────────────────────────────────────────────
      *  NEW: idle‑timer + finger‑hint state
@@ -127,6 +128,8 @@ export declare class LidoTrace {
     componentDidLoad(): void;
     componentWillLoad(): void;
     disconnectedCallback(): void;
+    /** Release listeners, pending frames, timers, and cached SVG geometry. */
+    private cleanupTraceState;
     /** ───────────────────────────────────────────────────────────
      *  Idle‑timer helpers
      *  ─────────────────────────────────────────────────────────── */
@@ -151,7 +154,12 @@ export declare class LidoTrace {
     handlePointerMove(state: any): Promise<void>;
     private animatePathToEnd;
     moveToNextContainer(): Promise<void>;
-    getPointerPosition(evt: PointerEvent, svg: SVGSVGElement): {
+    getPointerPosition(evt: PointerEvent, svg: SVGSVGElement, cachedTransform?: {
+        offsetX: number;
+        offsetY: number;
+        scaleX: number;
+        scaleY: number;
+    }, cachedRect?: DOMRect): {
         x: number;
         y: number;
     };

package/dist/types/stencil-public-runtime.d.ts

@@ -1008,7 +1008,6 @@ export declare namespace JSXBase {
         onClose?: (event: Event) => void;
         open?: boolean;
         returnValue?: string;
-        closedby?: 'any' | 'closerequest' | 'none';
     }
     interface EmbedHTMLAttributes<T> extends HTMLAttributes<T> {
         height?: number | string;
@@ -1046,8 +1045,6 @@ export declare namespace JSXBase {
         allowtransparency?: string | boolean;
         frameBorder?: number | string;
         frameborder?: number | string;
-        fetchPriority?: 'high' | 'low' | 'auto';
-        fetchpriority?: 'high' | 'low' | 'auto';
         importance?: 'low' | 'auto' | 'high';
         height?: number | string;
         loading?: 'lazy' | 'auto' | 'eager';
@@ -1070,8 +1067,6 @@ export declare namespace JSXBase {
         crossOrigin?: string;
         crossorigin?: string;
         decoding?: 'async' | 'auto' | 'sync';
-        fetchPriority?: 'high' | 'low' | 'auto';
-        fetchpriority?: 'high' | 'low' | 'auto';
         importance?: 'low' | 'auto' | 'high';
         height?: number | string;
         loading?: 'lazy' | 'auto' | 'eager';
@@ -1171,8 +1166,6 @@ export declare namespace JSXBase {
     }
     interface LinkHTMLAttributes<T> extends HTMLAttributes<T> {
         as?: string;
-        fetchPriority?: 'high' | 'low' | 'auto';
-        fetchpriority?: 'high' | 'low' | 'auto';
         href?: string;
         hrefLang?: string;
         hreflang?: string;
@@ -1296,8 +1289,6 @@ export declare namespace JSXBase {
         crossOrigin?: string;
         crossorigin?: string;
         defer?: boolean;
-        fetchPriority?: 'high' | 'low' | 'auto';
-        fetchpriority?: 'high' | 'low' | 'auto';
         importance?: 'low' | 'auto' | 'high';
         integrity?: string;
         nonce?: string;
@@ -1413,10 +1404,7 @@ export declare namespace JSXBase {
         tabIndex?: number;
         tabindex?: number | string;
         title?: string;
-        translate?: 'yes' | 'no' | (string & {});
         popover?: string | null;
-        focusgroup?: string;
-        focusgroupstart?: boolean;
         inputMode?: string;
         inputmode?: string;
         enterKeyHint?: string;

package/dist/types/types/json.d.ts

@@ -1,4 +1,4 @@
-declare module "*.json" {
-  const value: any;
-  export default value;
+declare module "*.json" {
+  const value: any;
+  export default value;
 }

package/dist/types/utils/utils.d.ts

@@ -12,7 +12,7 @@ export declare const storingEachActivityScore: (flag: boolean, scoreTrigger?: ty
 export declare const calculateScore: () => void;
 export declare function onActivityComplete(dragElement?: HTMLElement, dropElement?: HTMLElement): Promise<void>;
 export declare const getLessonTrackingParams: () => LessonTrackingParams;
-export declare const handleShowCheck: () => void;
+export declare const handleShowCheck: () => Promise<void>;
 export declare const validateObjectiveStatus: () => Promise<void>;
 export declare const triggerNextContainer: () => void;
 export declare const triggerPrevcontainer: () => void;

package/dist/types/utils/utilsHandlers/dragDropHandler.d.ts

@@ -8,6 +8,7 @@ export declare const setDraggingDisabled: (disabled: boolean) => void;
 export declare const getDraggingDisabled: () => boolean;
 export declare function enableDraggingWithScaling(element: HTMLElement): void;
 export declare const findMostoverlappedElement: (element: HTMLElement, type: string) => HTMLElement;
+export declare function animateDragToTarget(dragElement: HTMLElement, targetElement: HTMLElement, container: HTMLElement, transition?: string): void;
 export declare function handleResetDragElement(dragElement: HTMLElement, dropElement: HTMLElement, dropHasDrag: Record<string, {
     drop: string;
     isFull: boolean;

package/dist/types/utils/utilsHandlers/sortHandler.d.ts

@@ -1 +1,3 @@
 export declare function enableReorderDrag(element: HTMLElement): void;
+export declare const resetElementStyles: (el: HTMLElement) => void;
+export declare const categoriseCompleted: (container: HTMLElement) => Promise<void>;

package/loader/index.d.ts

@@ -8,7 +8,7 @@ export interface CustomElementsDefineOptions {
   ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
 }
-export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;
+export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
 /**
  * @deprecated
  */

package/package.json

@@ -1,74 +1,74 @@
-{
-  "name": "lido-player",
-  "version": "0.0.2-beta-18-dev",
-  "description": "Stencil Component For  Lido Player",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.js",
-  "types": "dist/types/index.d.ts",
-  "collection": "dist/collection/collection-manifest.json",
-  "collection:main": "dist/collection/index.js",
-  "unpkg": "dist/lido-player/lido-player.esm.js",
-  "exports": {
-    ".": {
-      "import": "./dist/lido-player/lido-player.esm.js",
-      "require": "./dist/lido-player/lido-player.cjs.js"
-    },
-    "./my-component": {
-      "import": "./dist/components/my-component.js",
-      "types": "./dist/components/my-component.d.ts"
-    },
-    "./loader": {
-      "import": "./loader/index.js",
-      "require": "./loader/index.cjs",
-      "types": "./loader/index.d.ts"
-    }
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/chimple/lido-player.git"
-  },
-  "files": [
-    "dist/",
-    "loader/"
-  ],
-  "scripts": {
-    "build": "stencil build && npm run build-storybook",
-    "start": "stencil build --dev --watch --serve",
-    "dev": "npm run start",
-    "test": "stencil test --spec --e2e",
-    "test.watch": "stencil test --spec --e2e --watchAll",
-    "generate": "stencil generate",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build --output-dir www/storybook"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.6",
-    "@stencil/core": "^4.7.0",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/experimental-addon-test": "^8.6.12",
-    "@storybook/test": "^8.6.12",
-    "@storybook/web-components": "^8.6.12",
-    "@storybook/web-components-vite": "^8.6.12",
-    "@types/jest": "^29.5.14",
-    "@types/node": "^16.18.11",
-    "@types/react": "^19.1.2",
-    "jest": "^29.7.0",
-    "jest-cli": "^29.7.0",
-    "lit": "^3.2.1",
-    "puppeteer": "^21.11.0",
-    "storybook": "^8.6.12"
-  },
-  "license": "MIT",
-  "dependencies": {
-    "@rive-app/canvas": "2.32.0",
-    "brotli": "^1.3.3",
-    "css-filter-converter": "^1.0.110",
-    "i18next": "^25.6.1",
-    "i18next-browser-languagedetector": "^8.2.0",
-    "jszip": "^3.10.1",
-    "lido-player": "^0.0.2-alpha-77",
-    "mathjs": "^14.4.0",
-    "tinycolor2": "^1.6.0"
-  }
-}
+{
+  "name": "lido-player",
+  "version": "0.0.2-beta-21-dev",
+  "description": "Stencil Component For  Lido Player",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/lido-player/lido-player.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/lido-player/lido-player.esm.js",
+      "require": "./dist/lido-player/lido-player.cjs.js"
+    },
+    "./my-component": {
+      "import": "./dist/components/my-component.js",
+      "types": "./dist/components/my-component.d.ts"
+    },
+    "./loader": {
+      "import": "./loader/index.js",
+      "require": "./loader/index.cjs",
+      "types": "./loader/index.d.ts"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chimple/lido-player.git"
+  },
+  "files": [
+    "dist/",
+    "loader/"
+  ],
+  "scripts": {
+    "build": "stencil build && npm run build-storybook",
+    "start": "stencil build --dev --watch --serve",
+    "dev": "npm run start",
+    "test": "stencil test --spec --e2e",
+    "test.watch": "stencil test --spec --e2e --watchAll",
+    "generate": "stencil generate",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build --output-dir www/storybook"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.6",
+    "@stencil/core": "4.43.5",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/experimental-addon-test": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@storybook/web-components": "^8.6.12",
+    "@storybook/web-components-vite": "^8.6.12",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^16.18.11",
+    "@types/react": "^19.1.2",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
+    "lit": "^3.2.1",
+    "puppeteer": "^21.11.0",
+    "storybook": "^8.6.12"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@rive-app/canvas": "2.32.0",
+    "brotli": "^1.3.3",
+    "css-filter-converter": "^1.0.110",
+    "i18next": "^25.6.1",
+    "i18next-browser-languagedetector": "^8.2.0",
+    "jszip": "^3.10.1",
+    "lido-player": "^0.0.2-alpha-77",
+    "mathjs": "^14.4.0",
+    "tinycolor2": "^1.6.0"
+  }
+}

package/readme.md

@@ -1,114 +1,114 @@
-[![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)](https://stenciljs.com)
-
-# Stencil Component Starter
-
-This is a starter project for building a standalone Web Component using Stencil.
-
-Stencil is also great for building entire apps. For that, use the [stencil-app-starter](https://github.com/ionic-team/stencil-app-starter) instead.
-
-# Stencil
-
-Stencil is a compiler for building fast web apps using Web Components.
-
-Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than runtime tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
-
-Stencil components are just Web Components, so they work in any major framework or with no framework at all.
-
-## Getting Started
-
-To start building a new web component using Stencil, clone this repo to a new directory:
-
-```bash
-git clone https://github.com/ionic-team/stencil-component-starter.git my-component
-cd my-component
-git remote rm origin
-```
-
-and run:
-
-```bash
-npm install
-npm start
-```
-
-To build the component for production, run:
-
-```bash
-npm run build
-```
-
-To run the unit tests for the components, run:
-
-```bash
-npm test
-```
-
-Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).
-
-## Naming Components
-
-When creating new component tags, we recommend _not_ using `stencil` in the component name (ex: `<stencil-datepicker>`). This is because the generated component has little to nothing to do with Stencil; it's just a web component!
-
-Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic-generated web components use the prefix `ion`.
-
-## Using this component
-
-There are two strategies we recommend for using web components built with Stencil.
-
-The first step for all two of these strategies is to [publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages).
-
-You can read more about these different approaches in the [Stencil docs](https://stenciljs.com/docs/publishing).
-
-### Lazy Loading
-
-If your Stencil project is built with the [`dist`](https://stenciljs.com/docs/distribution) output target, you can import a small bootstrap script that registers all components and allows you to load individual component scripts lazily.
-
-For example, given your Stencil project namespace is called `my-design-system`, to use `my-component` on any website, inject this into your HTML:
-
-```html
-<script type="module" src="https://unpkg.com/my-design-system"></script>
-<!--
-To avoid unpkg.com redirects to the actual file, you can also directly import:
-https://unpkg.com/foobar-design-system@0.0.1/dist/foobar-design-system/foobar-design-system.esm.js
--->
-<my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>
-```
-
-This will only load the necessary scripts needed to render `<my-component />`. Once more components of this package are used, they will automatically be loaded lazily.
-
-You can also import the script as part of your `node_modules` in your applications entry file:
-
-```tsx
-import 'foobar-design-system/dist/foobar-design-system/foobar-design-system.esm.js';
-```
-
-Check out this [Live Demo](https://stackblitz.com/edit/vitejs-vite-y6v26a?file=src%2Fmain.tsx).
-
-### Standalone
-
-If you are using a Stencil component library with `dist-custom-elements`, we recommend importing Stencil components individually in those files where they are needed.
-
-To export Stencil components as standalone components make sure you have the [`dist-custom-elements`](https://stenciljs.com/docs/custom-elements) output target defined in your `stencil.config.ts`.
-
-For example, given you'd like to use `<my-component />` as part of a React component, you can import the component directly via:
-
-```tsx
-import 'foobar-design-system/my-component';
-
-function App() {
-  return (
-    <>
-      <div>
-        <my-component
-          first="Stencil"
-          last="'Don't call me a framework' JS"
-        ></my-component>
-      </div>
-    </>
-  );
-}
-
-export default App;
-```
-
+[![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)](https://stenciljs.com)
+
+# Stencil Component Starter
+
+This is a starter project for building a standalone Web Component using Stencil.
+
+Stencil is also great for building entire apps. For that, use the [stencil-app-starter](https://github.com/ionic-team/stencil-app-starter) instead.
+
+# Stencil
+
+Stencil is a compiler for building fast web apps using Web Components.
+
+Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than runtime tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
+
+Stencil components are just Web Components, so they work in any major framework or with no framework at all.
+
+## Getting Started
+
+To start building a new web component using Stencil, clone this repo to a new directory:
+
+```bash
+git clone https://github.com/ionic-team/stencil-component-starter.git my-component
+cd my-component
+git remote rm origin
+```
+
+and run:
+
+```bash
+npm install
+npm start
+```
+
+To build the component for production, run:
+
+```bash
+npm run build
+```
+
+To run the unit tests for the components, run:
+
+```bash
+npm test
+```
+
+Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).
+
+## Naming Components
+
+When creating new component tags, we recommend _not_ using `stencil` in the component name (ex: `<stencil-datepicker>`). This is because the generated component has little to nothing to do with Stencil; it's just a web component!
+
+Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic-generated web components use the prefix `ion`.
+
+## Using this component
+
+There are two strategies we recommend for using web components built with Stencil.
+
+The first step for all two of these strategies is to [publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages).
+
+You can read more about these different approaches in the [Stencil docs](https://stenciljs.com/docs/publishing).
+
+### Lazy Loading
+
+If your Stencil project is built with the [`dist`](https://stenciljs.com/docs/distribution) output target, you can import a small bootstrap script that registers all components and allows you to load individual component scripts lazily.
+
+For example, given your Stencil project namespace is called `my-design-system`, to use `my-component` on any website, inject this into your HTML:
+
+```html
+<script type="module" src="https://unpkg.com/my-design-system"></script>
+<!--
+To avoid unpkg.com redirects to the actual file, you can also directly import:
+https://unpkg.com/foobar-design-system@0.0.1/dist/foobar-design-system/foobar-design-system.esm.js
+-->
+<my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>
+```
+
+This will only load the necessary scripts needed to render `<my-component />`. Once more components of this package are used, they will automatically be loaded lazily.
+
+You can also import the script as part of your `node_modules` in your applications entry file:
+
+```tsx
+import 'foobar-design-system/dist/foobar-design-system/foobar-design-system.esm.js';
+```
+
+Check out this [Live Demo](https://stackblitz.com/edit/vitejs-vite-y6v26a?file=src%2Fmain.tsx).
+
+### Standalone
+
+If you are using a Stencil component library with `dist-custom-elements`, we recommend importing Stencil components individually in those files where they are needed.
+
+To export Stencil components as standalone components make sure you have the [`dist-custom-elements`](https://stenciljs.com/docs/custom-elements) output target defined in your `stencil.config.ts`.
+
+For example, given you'd like to use `<my-component />` as part of a React component, you can import the component directly via:
+
+```tsx
+import 'foobar-design-system/my-component';
+
+function App() {
+  return (
+    <>
+      <div>
+        <my-component
+          first="Stencil"
+          last="'Don't call me a framework' JS"
+        ></my-component>
+      </div>
+    </>
+  );
+}
+
+export default App;
+```
+
 Check out this [Live Demo](https://stackblitz.com/edit/vitejs-vite-b6zuds?file=src%2FApp.tsx).

package/dist/components/p-BSV5U72F.js

@@ -1 +0,0 @@
-import{t,p as a,H as i,k as e,i as r,a as o,h,b as s}from"./index.js";const d=a(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.id="",this.value="",this.height="auto",this.width="auto",this.ariaLabel="",this.ariaHidden="",this.x="0px",this.y="0px",this.z="0",this.bgColor="",this.type="",this.tabIndex=0,this.shapeType="circle",this.visible=!1,this.audio="",this.onTouch="",this.onInCorrect="",this.onCorrect="",this.onEntry="",this.minDrops=1,this.maxDrops=1,this.margin="",this.delayVisible="",this.disableSpeak=!1,this.style={}}componentDidLoad(){e(this.el,this.delayVisible),r(this.el,this.type),this.updateStyles(),this.lido3DShapes()}updateStyles(){const t=window.innerHeight>window.innerWidth?"portrait":"landscape";this.style={x:o(`${this.x}`,t),y:o(`${this.y}`,t),height:o(`${this.height}`,t),width:o(`${this.width}`,t)}}lido3DShapes(){const t=window.innerHeight>window.innerWidth?"portrait":"landscape";"lido-cube"===this.shapeType&&this.el.querySelectorAll(".face").forEach((a=>{const i=a;i.style.setProperty("--face-width",o(`${this.width}`,t));const e=parseInt(o(`${this.width}`,t))/2;i.style.setProperty("--face-translate",`${e}px`),i.style.setProperty("--face-bg-color",this.bgColor)}))}render(){return h(s,{key:"b252b5dbf4624939ef2917a385fc95061695bc64",class:`lido-shape ${this.shapeType}`,value:this.value,type:this.type,"tab-index":this.tabIndex,style:{height:"polygon"!==this.shapeType?this.style.height:void 0,width:"polygon"!==this.shapeType?this.style.width:void 0,top:this.style.y,left:this.style.x,display:this.visible?"block":"none",zIndex:this.z,backgroundColor:"polygon"!==this.shapeType?this.bgColor:"transparent",margin:this.margin},"aria-label":this.ariaLabel,"aria-hidden":this.ariaHidden,audio:this.audio,minDrops:this.minDrops,maxDrops:this.maxDrops,onTouch:this.onTouch,onCorrect:this.onCorrect,onInCorrect:this.onInCorrect,onEntry:this.onEntry,"disable-speak":this.disableSpeak},"lido-cube"===this.shapeType&&h("div",{key:"573e3aaee8ada8da25b434058962f034ee7bcd2a",class:"cube"},h("div",{key:"4d5bb38b531a0a4cc6ffa9df25312b41718c81d2",class:"face top"}),h("div",{key:"01f93868cbc55844969e50256f505391323c4cbe",class:"face bottom"}),h("div",{key:"44ab31e212d6dd0e321a30154e0bd6cba61f5367",class:"face left"}),h("div",{key:"28b970d25d8ce54c4f96d418b05c559964a1e882",class:"face right"}),h("div",{key:"6da6d820eaa308e2401e3063de298be165428ff4",class:"face front"}),h("div",{key:"caaee0b7580ad10f925a610650098cbe7abc31a4",class:"face back"})))}get el(){return this}static get style(){return".lido-shape{position:absolute;top:var(--y);left:var(--x);display:var(--display);z-index:var(--z);justify-content:center;align-items:center}.lido-rectangle{border-radius:0}.lido-circle{width:var(--width);height:var(--width);border-radius:50%;background-color:var(--bgColor)}.lido-ellipse{width:var(--width);height:var(--height);border-radius:50%;background-color:var(--bgColor)}.lido-triangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(50% 0%, 100% 100%, 0% 100%)}.lido-rightTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(100% 0%, 100% 100%, 0% 100%)}.lido-leftTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--triangleBgColor);clip-path:polygon(0% 0%, 100% 100%, 0% 100%)}.lido-parallelogram{width:var(--paralleWidth);height:var(--paralleHeight);transform:skew(20deg)}.lido-trapezium{width:var(--trapeziumWidth);height:var(--trapeziumHeight);background-color:var(--bgColor);clip-path:polygon(      20% 0%,         80% 0%,         100% 100%,      0% 100%      )}.lido-hexagon{width:var(--hexagonWidth);height:var(--hexagonHeight);background-color:var(--bgColor);clip-path:polygon(      25% 0%,         75% 0%,         100% 50%,       75% 100%,       25% 100%,       0% 50%       )}.lido-cone{width:var(--coneWidth);height:var(--coneHeight);background-color:var(--bgColor);clip-path:polygon(            15% 10%,      25% 4%,      35% 1%,      50% 0%,      65% 1%,      75% 4%,      85% 10%,              50% 100%    )}.lido-star{width:var(--starWidth);height:var(--starHeight);background-color:var(--starBgColor);clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)}.lido-pentagon{width:var(--pentagonWidth);height:var(--pentagonHeight);background-color:var(--pentagonBgColor);clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)}.lido-heptagon{width:var(--heptagonWidth);height:var(--heptagonHeight);background-color:var(--heptagonBgColor);clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)}.lido-octagon{width:var(--octagonWidth);height:var(--octagonHeight);background-color:var(--octagonBgColor);clip-path:polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%)}.lido-rhombus{width:var(--rhombusWidth);height:var(--rhombusHeight);background-color:var(--rhombusBgColor);clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)}.lido-heart{height:var(--heartHeight);width:var(--heartWidth);border-image:radial-gradient(var(--heartBgColor) 69%, #0000 70%) 84.5%/50%;clip-path:polygon(-41% 0, 50% 91%, 141% 0)}.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(45deg)}.face{position:absolute;width:var(--face-width,150px);height:var(--face-width,150px);background:var(--face-bg-color,150px);box-shadow:inset -20px -20px 40px rgba(0,0,0,0.3)}.front{transform:rotateY(  0deg) translateZ(var(--face-translate, 75px))}.back{transform:rotateY(180deg) translateZ(var(--face-translate, 75px))}.right{transform:rotateY( 90deg) translateZ(var(--face-translate, 75px))}.left{transform:rotateY(-90deg) translateZ(var(--face-translate, 75px))}.top{transform:rotateX( 90deg) translateZ(var(--face-translate, 75px))}.bottom{transform:rotateX(-90deg) translateZ(var(--face-translate, 75px))}.lido-cylinder{width:var(--width);height:var(--height);border-radius:100% / 80px;background:radial-gradient(50% 40px at 50% 40px, #0003 99.99%, #0000 0),      radial-gradient(50% 40px at 50% calc(100% - 40px), #fff3 99.99%, #0000 0),      red}.lido-sphere{position:relative;width:var(--width);height:var(--width);border-radius:50%;background:radial-gradient(circle at 30% 18%, #22d4ff 0%, #18c2f4 9%, rgba(24, 194, 244, 0.2) 18%, transparent 30%),      radial-gradient(circle at 36% 26%, #0f8fff 0%, #0b67e6 30%, #083fbe 62%, #120084 100%);box-shadow:inset -22px -26px 40px rgba(5, 0, 70, 0.38),      inset 14px 14px 24px rgba(255, 255, 255, 0.05),      0 4px 2px rgba(0, 0, 0, 0.78);overflow:visible}.lido-sphere::after{content:'';position:absolute;top:50%;left:50%;width:100%;height:16%;border-radius:50%;border-top:2px dashed rgba(0, 0, 0, 0.65);border-bottom:3px solid rgba(0, 0, 0, 0.85);box-sizing:border-box;transform:translate(-50%, -50%);pointer-events:none}"}},[0,"lido-shape",{id:[1],value:[1],height:[1],width:[1],ariaLabel:[1,"aria-label"],ariaHidden:[1,"aria-hidden"],x:[1],y:[1],z:[1],bgColor:[1,"bg-color"],type:[1],tabIndex:[2,"tab-index"],shapeType:[1,"shape-type"],visible:[4],audio:[1],onTouch:[1,"on-touch"],onInCorrect:[1,"on-in-correct"],onCorrect:[1,"on-correct"],onEntry:[1,"on-entry"],minDrops:[2,"min-drops"],maxDrops:[2,"max-drops"],margin:[1],delayVisible:[1,"delay-visible"],disableSpeak:[4,"disable-speak"],style:[32]}]);function l(){"undefined"!=typeof customElements&&["lido-shape"].forEach((a=>{"lido-shape"===a&&(customElements.get(t(a))||customElements.define(t(a),d))}))}l();export{d as L,l as d}