@playcanvas/web-components 0.1.1 → 0.1.3

package/README.md

@@ -24,7 +24,266 @@ UMD:
 <script src="https://cdn.jsdelivr.net/npm/@playcanvas/web-components@0.1.0"></script>
 ```
 
-## Example 📖
+## Tag Reference 📖
+
+Table of contents:
+
+- [pc-app](#pc-app)
+- [pc-asset](#pc-asset)
+- [pc-camera](#pc-camera)
+- [pc-collision](#pc-collision)
+- [pc-element](#pc-element)
+- [pc-entity](#pc-entity)
+- [pc-light](#pc-light)
+- [pc-listener](#pc-listener)
+- [pc-module](#pc-module)
+- [pc-render](#pc-render)
+- [pc-rigidbody](#pc-rigidbody)
+- [pc-scene](#pc-scene)
+- [pc-script](#pc-script)
+- [pc-scripts](#pc-scripts)
+- [pc-sky](#pc-sky)
+- [pc-screen](#pc-screen)
+- [pc-sound](#pc-sound)
+- [pc-sounds](#pc-sounds)
+- [pc-splat](#pc-splat)
+
+### pc-app
+
+The `pc-app` tag is the root element for your PlayCanvas application. It is used to initialize the PlayCanvas application and provide a container for your scene.
+
+| Attribute | Description |
+| --- | --- |
+| `high-resolution` | Valueless attribute. If present, enables high-resolution mode. |
+
+### pc-asset
+
+The `pc-asset` tag is used to define an asset. It must be a direct child of `pc-app`.
+
+| Attribute | Description |
+| --- | --- |
+| `id` | The ID of the asset. This is used to reference the asset in scripts. |
+| `src` | The path to the asset. |
+| `preload` | Valueless attribute. If present, the asset is loaded immediately. |
+| `type` | The type of asset. If not specified, the type is inferred from the file extension. Can be: `audio`, `binary`, `css`, `container`, `gsplat`, `html`, `json`, `script`, `shader`, `text`, `texture`. |
+
+### pc-camera
+
+The `pc-camera` tag is used to define a camera component. It must be a direct child of an `pc-entity`.
+
+| Attribute | Description |
+| --- | --- |
+| `clear-color` | The background color of the camera. Can be a comma-separated list of R, G, B, and A values or a hex color code. If unspecified, `0.75,0.75,0.75,1` is used. |
+| `clear-color-buffer` | Boolean attribute. Controls whether the camera clears the color buffer. If unspecified, the color buffer is cleared. |
+| `clear-depth-buffer` | Boolean attribute. Controls whether the camera clears the depth buffer. If unspecified, the depth buffer is cleared. |
+| `clear-stencil-buffer` | Boolean attribute. Controls whether the camera clears the stencil buffer. If unspecified, the stencil buffer is cleared. |
+| `cull-faces` | Boolean attribute. Controls whether the camera culls faces. If unspecified, faces are culled. |
+| `far-clip` | The far clipping plane of the camera. If unspecified, `1000` is used. |
+| `flip-faces` | Boolean attribute. Controls whether the camera flips faces. If unspecified, faces are not flipped. |
+| `fov` | The field of view of the camera. If unspecified, `45` is used. |
+| `frustum-culling` | Boolean attribute. Controls whether the camera uses frustum culling. If unspecified, frustum culling is used. |
+| `near-clip` | The near clipping plane of the camera. If unspecified, `0.1` is used. |
+| `orthographic` | Valueless attribute. If present, the camera uses an orthographic projection. If unspecified, the camera uses a perspective projection. |
+| `ortho-height` | The height of the orthographic projection. If unspecified, `10` is used. |
+| `priority` | The priority of the camera. If unspecified, `0` is used. |
+| `rect` | The viewport rectangle of the camera. Specified as a comma-separated list of X, Y, Width, and Height values. If unspecified, `0,0,1,1` is used. |
+| `scissor-rect` | The scissor rectangle of the camera. Specified as a comma-separated list of X, Y, Width, and Height values. If not specified, `0,0,1,1` is used. |
+
+### pc-collision
+
+The `pc-collision` tag is used to define a collision component. It must be a direct child of a `pc-entity`.
+
+| Attribute | Description |
+| --- | --- |
+| `axis` | The axis of the collision component. If not specified, `1` is used (Y-axis). |
+| `convex-hull` | Valueless attribute. If present, the collision component uses a convex hull. |
+| `enabled` | Enabled state of the collision component. If not specified, `true` is used. |
+| `half-extents` | The half-extents of the collision component. Specified as a comma-separated list of X, Y, and Z values. If not specified, `0.5,0.5,0.5` is used. |
+| `height` | The height of the collision component. If not specified, `2` is used. |
+| `radius` | The radius of the collision component. If not specified, `0.5` is used. |
+| `type` | The type of collision component. Can be `box`, `capsule`, `cone`, `cylinder` or `sphere`. |
+
+### pc-element
+
+The `pc-element` tag is used to define an element component. It must be a direct child of a `pc-entity`.
+
+| Attribute | Description |
+| --- | --- |
+| `anchor` | The anchor of the element component. Specified as a comma-separated list of X, Y, Z, and W values. If not specified, `0,0,0,1` is used. |
+| `asset` | A string that should match the `id` of a `pc-asset` tag that has a type of `font`. |
+| `auto-width` | Valueless attribute. If present, the element component automatically adjusts its width. |
+| `color` | The color of the element component. Can be a comma-separated list of R, G, B, and A values or a hex color code. If not specified, `1,1,1,1` is used. |
+| `font-size` | The font size of the element component. If not specified, `16` is used. |
+| `line-height` | The line height of the element component. If not specified, `1.2` is used. |
+| `pivot` | The pivot of the element component. Specified as a comma-separated list of X and Y values. If not specified, `0.5,0.5` is used. |
+| `text` | The text of the element component. |
+| `type` | The type of element component. Can be `group`, `image` or `text`. If not specified, `group` is used. |
+| `width` | The width of the element component. If not specified, `0` is used. |
+| `wrap-lines` | Valueless attribute. If present, the element component wraps lines. |
+
+### pc-entity
+
+The `pc-entity` tag is used to define an entity. It must be a direct child of `pc-scene` or another `pc-entity`.
+
+| Attribute | Description |
+| --- | --- |
+| `enabled` | Enabled state of the entity. If not specified, `true` is used. |
+| `name` | The name of the entity. |
+| `position` | The position of the entity. Specified as a comma-separated list of X, Y, and Z values. If not specified, `0,0,0` is used. |
+| `rotation` | The rotation of the entity. Specified as a comma-separated list of X, Y, and Z Euler angles in degrees. If not specified, `0,0,0` is used. |
+| `scale` | The scale of the entity. Specified as a comma-separated list of X, Y, and Z values. If not specified, `1,1,1` is used. |
+| `tags` | A comma-separated list of tags for the entity. |
+
+### pc-light
+
+The `pc-light` tag is used to define a light component. It must be a direct child of a `pc-entity`.
+
+| Attribute | Description |
+| --- | --- |
+| `color` | The color of the light. Can be a comma-separated list of R, G, B values or a hex color code. If not specified, `1,1,1` is used. |
+| `cast-shadows` | Valueless attribute. If present, the light casts shadows. |
+| `inner-cone-angle` | The angle of the light's inner cone. If not specified, `40` is used. |
+| `intensity` | The intensity of the light. If not specified, `1` is used. |
+| `normal-offset-bias` | The bias of the light's normal offset. If not specified, `0.05` is used. |
+| `outer-cone-angle` | The angle of the light's outer cone. If not specified, `45` is used. |
+| `range` | The range of the light. If not specified, `10` is used. |
+| `shadow-bias` | The bias of the light's shadows. If not specified, `0.2` is used. |
+| `shadow-distance` | The distance at which the light's shadows are no longer rendered. If not specified, `16` is used. |
+| `type` | The type of light. Can be `directional`, `point` or `omni`. |
+
+### pc-listener
+
+The `pc-listener` tag is used to define a listener component. It must be a direct child of a `pc-entity`. It has no attributes.
+
+### pc-module
+
+The `pc-module` tag is used to define a WASM module. It must be a direct child of `pc-app`.
+
+| Attribute | Description |
+| --- | --- |
+| `name` | The name of the module. This is used to reference the module in scripts. |
+| `glue` | The path to the glue code for the module. |
+| `wasm` | The path to the WASM file for the module. |
+| `fallback` | The path to the fallback (asm.js) code for the module. |
+
+### pc-render
+
+The `pc-render` tag is used to define a render component that render a 3D primitive. It must be a direct child of a `pc-entity`.
+
+| Attribute | Description |
+| --- | --- |
+| `type` | The type of render component. Can be `box`, `capsule`, `cone`, `cylinder`, `plane` or `sphere`. |
+| `cast-shadows` | Valueless attribute. If present, the render component casts shadows. |
+| `receive-shadows` | Valueless attribute. If present, the render component receives shadows. |
+
+### pc-rigidbody
+
+The `pc-rigidbody` tag is used to define a rigidbody component. It must be a direct child of a `pc-entity`.
+
+| Attribute | Description |
+| --- | --- |
+| `angular-damping` | The angular damping of the rigidbody. If not specified, `0` is used. |
+| `angular-factor` | The angular factor of the rigidbody. Specified as a comma-separated list of X, Y, and Z values. If not specified, `1,1,1` is used. |
+| `friction` | The friction of the rigidbody. If not specified, `0.5` is used. |
+| `linear-damping` | The linear damping of the rigidbody. If not specified, `0` is used. |
+| `linear-factor` | The linear factor of the rigidbody. Specified as a comma-separated list of X, Y, and Z values. If not specified, `1,1,1` is used. |
+| `mass` | The mass of the rigidbody. If not specified, `1` is used. |
+| `restitution` | The restitution of the rigidbody. If not specified, `0` is used. |
+| `rolling-friction` | The rolling friction of the rigidbody. If not specified, `0` is used. |
+| `type` | The type of rigidbody component. Can be `static`, `kinematic` or `dynamic`. |
+
+### pc-scene
+
+The `pc-scene` tag is used to define the scene. It must be a direct child of `pc-app`.
+
+| Attribute | Description |
+| --- | --- |
+| `fog` | The type of fog to use. Can be `linear`, `exp`, or `exp2`. |
+| `fog-color` | The color of the fog. Can be a CSS color string or a hex color code. |
+| `fog-start` | The start distance of the fog. |
+| `fog-end` | The end distance of the fog. |
+| `fog-density` | The density of the fog. |
+
+### pc-screen
+
+The `pc-screen` tag is used to define a screen component. It must be a direct child of a `pc-entity`.
+
+| Attribute | Description |
+| --- | --- |
+| `blend` | Valueless attribute. If present, the screen component blends. |
+| `priority` | The priority of the screen component. Must be an integer between `0` and `255`. If not specified, `0` is used. |
+| `reference-resolution` | The reference resolution of the screen component. Specified as a comma-separated list of Width and Height values. If not specified, `640,320` is used. |
+| `resolution` | The resolution of the screen component. Specified as a comma-separated list of Width and Height values. If not specified, `640,320` is used. |
+| `scale-blend` | The scale blend of the screen component. Must be a number between `0` and `1`. If not specified, `0.5` is used. |
+| `screen-space` | Valueless attribute. If present, the screen component is in screen space. |
+
+
+### pc-script
+
+The `pc-script` tag is used to define a script. It must be a direct child of a `pc-scripts` component.
+
+| Attribute | Description |
+| --- | --- |
+| `attributes` | A JSON string of attributes for the script. |
+| `enabled` | Enabled state of the script. If not specified, `true` is used. |
+| `name` | The name of the script. |
+
+### pc-scripts
+
+The `pc-scripts` tag is used to define a scripts component. It must be a direct child of a `pc-entity`.
+
+| Attribute | Description |
+| --- | --- |
+| `enabled` | Enabled state of the scripts component. If not specified, `true` is used. |
+
+### pc-sky
+
+The `pc-sky` tag is used to define a sky component. It must be a direct child of a `pc-scene`.
+
+| Attribute | Description |
+| --- | --- |
+| `asset` | A string that should match the `id` of a `pc-asset` tag that has a type of `texture`. |
+| `intensity` | The intensity of the sky. If not specified, `1` is used. |
+| `level` | The mipmap level used to render the sky. If not specified, `0` is used (base mip level). |
+| `rotation` | The rotation of the sky. Specified as a comma-separated list of X, Y, and Z values. If not specified, `0,0,0` is used. |
+| `solid-color` | Valueless attribute. If present, the skybox itself is not rendered but is still used for environment lighting. |
+
+### pc-sound
+
+The `pc-sound` tag is used to define a sound. It must be a direct child of a `pc-sounds`.
+
+| Attribute | Description |
+| --- | --- |
+| `asset` | A string that should match the `id` of a `pc-asset` tag that has a type of `audio`. |
+| `auto-play` | Valueless attribute. If present, the sound slot plays automatically. |
+| `duration` | The duration of the sound slot. |
+| `loop` | Valueless attribute. If present, the sound slot loops. |
+| `name` | The name of the sound slot. |
+| `overlap` | Valueless attribute. If present, the sound slot overlaps. |
+| `pitch` | The pitch of the sound slot. If not specified, `1` is used. |
+| `start-time` | The start time of the sound slot. If not specified, `0` is used. |
+| `volume` | The volume of the sound slot. If not specified, `1` is used. |
+
+### pc-sounds
+
+The `pc-sounds` tag is used to define a sound component. It must be a direct child of a `pc-entity`.
+
+| Attribute | Description |
+| --- | --- |
+| `pitch` | The pitch of the sound. If not specified, `1` is used. |
+| `positional` | Valueless attribute. If present, the sound is positional. |
+| `volume` | The volume of the sound. If not specified, `1` is used. |
+
+### pc-splat
+
+The `pc-splat` tag is used to define a splat component. It must be a direct child of a `pc-entity`.
+
+| Attribute | Description |
+| --- | --- |
+| `asset` | A string that should match the `id` of a `pc-asset` tag that has a type of `gsplat`. |
+| `enabled` | Enabled state of the splat component. If not specified, `true` is used. |
+
+## Example 
 
 Below is a basic example of how to use PlayCanvas Web Components to create a simple 3D scene (a spinning cube):
 

package/dist/asset.d.ts

@@ -22,6 +22,7 @@ declare class AssetElement extends HTMLElement {
      * @returns The preload flag.
      */
     get preload(): boolean;
+    static get(id: string): Asset | null | undefined;
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, _oldValue: string, _newValue: string): void;
 }

package/dist/components/camera-component.d.ts

@@ -1,4 +1,4 @@
-import { CameraComponent, Color } from 'playcanvas';
+import { CameraComponent, Color, Vec4 } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
  * Represents a camera component in the PlayCanvas engine.
@@ -7,22 +7,40 @@ import { ComponentElement } from './component';
  */
 declare class CameraComponentElement extends ComponentElement {
     private _clearColor;
+    private _clearColorBuffer;
+    private _clearDepthBuffer;
+    private _clearStencilBuffer;
+    private _cullFaces;
     private _farClip;
+    private _flipFaces;
     private _fov;
+    private _frustumCulling;
     private _nearClip;
     private _orthographic;
     private _orthoHeight;
+    private _priority;
+    private _rect;
+    private _scissorRect;
     /**
      * Creates a new CameraComponentElement.
      */
     constructor();
     getInitialComponentData(): {
         clearColor: Color;
+        clearColorBuffer: boolean;
+        clearDepthBuffer: boolean;
+        clearStencilBuffer: boolean;
+        cullFaces: boolean;
         farClip: number;
+        flipFaces: boolean;
         fov: number;
+        frustumCulling: boolean;
         nearClip: number;
-        projection: number;
+        orthographic: boolean;
         orthoHeight: number;
+        priority: number;
+        rect: Vec4;
+        scissorRect: Vec4;
     };
     /**
      * Gets the camera component.
@@ -39,6 +57,46 @@ declare class CameraComponentElement extends ComponentElement {
      * @returns The clear color.
      */
     get clearColor(): Color;
+    /**
+     * Sets the clear color buffer of the camera.
+     * @param value - The clear color buffer.
+     */
+    set clearColorBuffer(value: boolean);
+    /**
+     * Gets the clear color buffer of the camera.
+     * @returns The clear color buffer.
+     */
+    get clearColorBuffer(): boolean;
+    /**
+     * Sets the clear depth buffer of the camera.
+     * @param value - The clear depth buffer.
+     */
+    set clearDepthBuffer(value: boolean);
+    /**
+     * Gets the clear depth buffer of the camera.
+     * @returns The clear depth buffer.
+     */
+    get clearDepthBuffer(): boolean;
+    /**
+     * Sets the clear stencil buffer of the camera.
+     * @param value - The clear stencil buffer.
+     */
+    set clearStencilBuffer(value: boolean);
+    /**
+     * Gets the clear stencil buffer of the camera.
+     * @returns The clear stencil buffer.
+     */
+    get clearStencilBuffer(): boolean;
+    /**
+     * Sets the cull faces of the camera.
+     * @param value - The cull faces.
+     */
+    set cullFaces(value: boolean);
+    /**
+     * Gets the cull faces of the camera.
+     * @returns The cull faces.
+     */
+    get cullFaces(): boolean;
     /**
      * Sets the far clip distance of the camera.
      * @param value - The far clip distance.
@@ -49,6 +107,16 @@ declare class CameraComponentElement extends ComponentElement {
      * @returns The far clip distance.
      */
     get farClip(): number;
+    /**
+     * Sets the flip faces of the camera.
+     * @param value - The flip faces.
+     */
+    set flipFaces(value: boolean);
+    /**
+     * Gets the flip faces of the camera.
+     * @returns The flip faces.
+     */
+    get flipFaces(): boolean;
     /**
      * Sets the field of view of the camera.
      * @param value - The field of view.
@@ -59,6 +127,16 @@ declare class CameraComponentElement extends ComponentElement {
      * @returns The field of view.
      */
     get fov(): number;
+    /**
+     * Sets the frustum culling of the camera.
+     * @param value - The frustum culling.
+     */
+    set frustumCulling(value: boolean);
+    /**
+     * Gets the frustum culling of the camera.
+     * @returns The frustum culling.
+     */
+    get frustumCulling(): boolean;
     /**
      * Sets the near clip distance of the camera.
      * @param value - The near clip distance.
@@ -89,6 +167,36 @@ declare class CameraComponentElement extends ComponentElement {
      * @returns The orthographic height.
      */
     get orthoHeight(): number;
+    /**
+     * Sets the priority of the camera.
+     * @param value - The priority.
+     */
+    set priority(value: number);
+    /**
+     * Gets the priority of the camera.
+     * @returns The priority.
+     */
+    get priority(): number;
+    /**
+     * Sets the rect of the camera.
+     * @param value - The rect.
+     */
+    set rect(value: Vec4);
+    /**
+     * Gets the rect of the camera.
+     * @returns The rect.
+     */
+    get rect(): Vec4;
+    /**
+     * Sets the scissor rect of the camera.
+     * @param value - The scissor rect.
+     */
+    set scissorRect(value: Vec4);
+    /**
+     * Gets the scissor rect of the camera.
+     * @returns The scissor rect.
+     */
+    get scissorRect(): Vec4;
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
 }

package/dist/components/element-component.d.ts

@@ -19,7 +19,6 @@ declare class ElementComponentElement extends ComponentElement {
     private _wrapLines;
     constructor();
     connectedCallback(): Promise<void>;
-    getAsset(): import("playcanvas").Asset | null;
     getInitialComponentData(): {
         anchor: Vec4;
         autoWidth: boolean;

package/dist/components/gsplat-component.d.ts

@@ -8,9 +8,8 @@ import { ComponentElement } from './component';
 declare class GSplatComponentElement extends ComponentElement {
     private _asset;
     constructor();
-    getAsset(): import("playcanvas").Asset | null;
     getInitialComponentData(): {
-        asset: import("playcanvas").Asset | null;
+        asset: import("playcanvas").Asset | null | undefined;
     };
     /**
      * Gets the gsplat component.

package/dist/components/render-component.d.ts

@@ -6,10 +6,12 @@ import { ComponentElement } from './component';
  * @category Components
  */
 declare class RenderComponentElement extends ComponentElement {
-    private _type;
     private _castShadows;
+    private _material;
     private _receiveShadows;
+    private _type;
     constructor();
+    connectedCallback(): Promise<void>;
     getInitialComponentData(): {
         type: "box" | "asset" | "capsule" | "cone" | "cylinder" | "plane" | "sphere";
         castShadows: boolean;
@@ -40,6 +42,16 @@ declare class RenderComponentElement extends ComponentElement {
      * @returns The cast shadows flag.
      */
     get castShadows(): boolean;
+    /**
+     * Sets the material of the render component.
+     * @param value - The id of the material asset to use.
+     */
+    set material(value: string);
+    /**
+     * Gets the id of the material asset used by the render component.
+     * @returns The id of the material asset.
+     */
+    get material(): string;
     /**
      * Sets the receive shadows flag of the render component.
      * @param value - The receive shadows flag.

package/dist/components/screen-component.d.ts

@@ -0,0 +1,44 @@
+import { ScreenComponent, Vec2 } from 'playcanvas';
+import { ComponentElement } from './component';
+/**
+ * Represents a screen component in the PlayCanvas engine.
+ *
+ * @category Components
+ */
+declare class ScreenComponentElement extends ComponentElement {
+    private _screenSpace;
+    private _resolution;
+    private _referenceResolution;
+    private _priority;
+    private _blend;
+    private _scaleBlend;
+    constructor();
+    getInitialComponentData(): {
+        priority: number;
+        referenceResolution: Vec2;
+        resolution: Vec2;
+        scaleBlend: number;
+        scaleMode: string;
+        screenSpace: boolean;
+    };
+    /**
+     * Gets the screen component.
+     * @returns The screen component.
+     */
+    get component(): ScreenComponent | null;
+    set priority(value: number);
+    get priority(): number;
+    set referenceResolution(value: Vec2);
+    get referenceResolution(): Vec2;
+    set resolution(value: Vec2);
+    get resolution(): Vec2;
+    set scaleBlend(value: number);
+    get scaleBlend(): number;
+    set blend(value: boolean);
+    get blend(): boolean;
+    set screenSpace(value: boolean);
+    get screenSpace(): boolean;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+}
+export { ScreenComponentElement };

package/dist/components/script-component.d.ts

@@ -1,12 +1,37 @@
 import { ScriptComponent } from 'playcanvas';
 import { ComponentElement } from './component';
+interface ScriptAttributesChangeEvent extends CustomEvent {
+    detail: {
+        attributes: any;
+    };
+}
+interface ScriptEnableChangeEvent extends CustomEvent {
+    detail: {
+        enabled: boolean;
+    };
+}
+declare global {
+    interface HTMLElementEventMap {
+        'scriptattributeschange': ScriptAttributesChangeEvent;
+        'scriptenablechange': ScriptEnableChangeEvent;
+    }
+}
 /**
  * Represents a script component in the PlayCanvas engine.
  *
  * @category Components
  */
 declare class ScriptComponentElement extends ComponentElement {
+    private observer;
     constructor();
+    connectedCallback(): Promise<void>;
+    private applyAttributes;
+    private handleScriptAttributesChange;
+    private handleScriptEnableChange;
+    private createScript;
+    private destroyScript;
+    private handleMutations;
+    disconnectedCallback(): void;
     /**
      * Gets the script component.
      * @returns The script component.

package/dist/components/script.d.ts

@@ -1,4 +1,3 @@
-import { ScriptComponentElement } from './script-component';
 /**
  * Represents a script in the PlayCanvas engine.
  */
@@ -6,13 +5,20 @@ declare class ScriptElement extends HTMLElement {
     private _attributes;
     private _enabled;
     private _name;
-    private _script;
-    connectedCallback(): Promise<void>;
-    disconnectedCallback(): void;
-    refreshAttributes(): void;
-    protected get scriptsElement(): ScriptComponentElement | null;
+    /**
+     * Sets the attributes of the script.
+     * @param value - The attributes of the script.
+     */
     set scriptAttributes(value: string);
+    /**
+     * Gets the attributes of the script.
+     * @returns The attributes of the script.
+     */
     get scriptAttributes(): string;
+    /**
+     * Sets the enabled state of the script.
+     * @param value - The enabled state of the script.
+     */
     set enabled(value: boolean);
     /**
      * Gets the enabled state of the script.

package/dist/components/sound-slot.d.ts

@@ -17,7 +17,6 @@ declare class SoundSlotElement extends HTMLElement {
      * The sound slot.
      */
     soundSlot: SoundSlot | null;
-    getAsset(): import("playcanvas").Asset | null;
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
     protected get soundElement(): SoundComponentElement | null;

package/dist/index.d.ts

@@ -11,11 +11,13 @@ import { GSplatComponentElement } from './components/gsplat-component';
 import { LightComponentElement } from './components/light-component';
 import { RenderComponentElement } from './components/render-component';
 import { RigidBodyComponentElement } from './components/rigidbody-component';
+import { ScreenComponentElement } from './components/screen-component';
 import { ScriptComponentElement } from './components/script-component';
 import { ScriptElement } from './components/script';
 import { SoundComponentElement } from './components/sound-component';
 import { SoundSlotElement } from './components/sound-slot';
+import { MaterialElement } from './material';
 import { ModelElement } from './model';
 import { SceneElement } from './scene';
 import { SkyElement } from './sky';
-export { ModuleElement, AppElement, EntityElement, AssetElement, CameraComponentElement, CollisionComponentElement, ComponentElement, ElementComponentElement, GSplatComponentElement, LightComponentElement, ListenerComponentElement, RenderComponentElement, RigidBodyComponentElement, ScriptComponentElement, ScriptElement, SoundComponentElement, SoundSlotElement, ModelElement, SceneElement, SkyElement };
+export { ModuleElement, AppElement, EntityElement, AssetElement, CameraComponentElement, CollisionComponentElement, ComponentElement, ElementComponentElement, GSplatComponentElement, LightComponentElement, ListenerComponentElement, RenderComponentElement, RigidBodyComponentElement, ScreenComponentElement, ScriptComponentElement, ScriptElement, SoundComponentElement, SoundSlotElement, MaterialElement, ModelElement, SceneElement, SkyElement };

package/dist/material.d.ts

@@ -0,0 +1,29 @@
+import { Color, StandardMaterial } from 'playcanvas';
+/**
+ * Represents a material in the PlayCanvas engine.
+ */
+declare class MaterialElement extends HTMLElement {
+    private _diffuse;
+    private _diffuseMap;
+    private _metalnessMap;
+    private _normalMap;
+    private _roughnessMap;
+    material: StandardMaterial | null;
+    createMaterial(): void;
+    disconnectedCallback(): void;
+    setMap(map: string, property: 'diffuseMap' | 'metalnessMap' | 'normalMap' | 'glossMap'): void;
+    set diffuse(value: Color);
+    get diffuse(): Color;
+    set diffuseMap(value: string);
+    get diffuseMap(): string;
+    set metalnessMap(value: string);
+    get metalnessMap(): string;
+    set normalMap(value: string);
+    get normalMap(): string;
+    set roughnessMap(value: string);
+    get roughnessMap(): string;
+    static get(id: string): StandardMaterial | null | undefined;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+}
+export { MaterialElement };

package/dist/model.d.ts

@@ -4,7 +4,6 @@
 declare class ModelElement extends HTMLElement {
     private _asset;
     connectedCallback(): Promise<void>;
-    getAsset(): import("playcanvas").Asset | null;
     _loadModel(): void;
     /**
      * Sets the asset ID of the model.