@playcanvas/web-components 0.6.0 → 0.7.1

package/dist/pwc.mjs

@@ -1,4 +1,4 @@
-import { basisInitialize, WasmModule, createGraphicsDevice, AppOptions, Keyboard, Mouse, AnimComponentSystem, AnimationComponentSystem, AudioListenerComponentSystem, ButtonComponentSystem, CameraComponentSystem, CollisionComponentSystem, ElementComponentSystem, GSplatComponentSystem, JointComponentSystem, LayoutChildComponentSystem, LayoutGroupComponentSystem, LightComponentSystem, ModelComponentSystem, ParticleSystemComponentSystem, RenderComponentSystem, RigidBodyComponentSystem, ScreenComponentSystem, ScriptComponentSystem, ScrollbarComponentSystem, ScrollViewComponentSystem, SoundComponentSystem, SpriteComponentSystem, ZoneComponentSystem, AnimClipHandler, AnimationHandler, AnimStateGraphHandler, AudioHandler, BinaryHandler, CssHandler, ContainerHandler, CubemapHandler, FolderHandler, FontHandler, GSplatHandler, HierarchyHandler, HtmlHandler, JsonHandler, MaterialHandler, ModelHandler, RenderHandler, ScriptHandler, SceneHandler, ShaderHandler, SpriteHandler, TemplateHandler, TextHandler, TextureAtlasHandler, TextureHandler, SoundManager, Lightmapper, BatchManager, XrManager, AppBase, FILLMODE_FILL_WINDOW, RESOLUTION_AUTO, Picker, MeshInstance, Vec3, Vec4, Color, Quat, Vec2, Entity, Asset, GAMMA_SRGB, GAMMA_NONE, XRTYPE_VR, PROJECTION_ORTHOGRAPHIC, PROJECTION_PERSPECTIVE, TONEMAP_NONE, TONEMAP_LINEAR, TONEMAP_FILMIC, TONEMAP_HEJL, TONEMAP_ACES, TONEMAP_ACES2, TONEMAP_NEUTRAL, SHADOW_PCF3_32F, SHADOW_PCF1_16F, SHADOW_PCF1_32F, SHADOW_PCF3_16F, SHADOW_PCF5_16F, SHADOW_PCF5_32F, SHADOW_VSM_16F, SHADOW_VSM_32F, SHADOW_PCSS_32F, StandardMaterial, SCALEMODE_BLEND, SCALEMODE_NONE, EnvLighting, LAYERID_SKYBOX } from 'playcanvas';
+import { basisInitialize, WasmModule, createGraphicsDevice, AppOptions, Keyboard, Mouse, ElementInput, AnimComponentSystem, AnimationComponentSystem, AudioListenerComponentSystem, ButtonComponentSystem, CameraComponentSystem, CollisionComponentSystem, ElementComponentSystem, GSplatComponentSystem, JointComponentSystem, LayoutChildComponentSystem, LayoutGroupComponentSystem, LightComponentSystem, ModelComponentSystem, ParticleSystemComponentSystem, RenderComponentSystem, RigidBodyComponentSystem, ScreenComponentSystem, ScriptComponentSystem, ScrollbarComponentSystem, ScrollViewComponentSystem, SoundComponentSystem, SpriteComponentSystem, ZoneComponentSystem, AnimClipHandler, AnimationHandler, AnimStateGraphHandler, AudioHandler, BinaryHandler, CssHandler, ContainerHandler, CubemapHandler, FolderHandler, FontHandler, GSplatHandler, HierarchyHandler, HtmlHandler, JsonHandler, MaterialHandler, ModelHandler, RenderHandler, ScriptHandler, SceneHandler, ShaderHandler, SpriteHandler, TemplateHandler, TextHandler, TextureAtlasHandler, TextureHandler, SoundManager, Lightmapper, BatchManager, XrManager, AppBase, FILLMODE_FILL_WINDOW, RESOLUTION_AUTO, Picker, MeshInstance, Vec3, Color, Vec4, Quat, Vec2, Entity, Asset, SPRITE_RENDERMODE_SIMPLE, SPRITE_RENDERMODE_SLICED, SPRITE_RENDERMODE_TILED, BUTTON_TRANSITION_MODE_TINT, BUTTON_TRANSITION_MODE_SPRITE_CHANGE, GAMMA_SRGB, GAMMA_NONE, XRTYPE_VR, PROJECTION_ORTHOGRAPHIC, PROJECTION_PERSPECTIVE, TONEMAP_NONE, TONEMAP_LINEAR, TONEMAP_FILMIC, TONEMAP_HEJL, TONEMAP_ACES, TONEMAP_ACES2, TONEMAP_NEUTRAL, ORIENTATION_HORIZONTAL, FITTING_NONE, FITTING_STRETCH, FITTING_SHRINK, FITTING_BOTH, ORIENTATION_VERTICAL, SHADOW_PCF3_32F, SHADOW_PCF1_16F, SHADOW_PCF1_32F, SHADOW_PCF3_16F, SHADOW_PCF5_16F, SHADOW_PCF5_32F, SHADOW_VSM_16F, SHADOW_VSM_32F, SHADOW_PCSS_32F, StandardMaterial, SCALEMODE_BLEND, SCALEMODE_NONE, SCROLL_MODE_BOUNCE, SCROLLBAR_VISIBILITY_SHOW_WHEN_REQUIRED, SCROLLBAR_VISIBILITY_SHOW_ALWAYS, SCROLL_MODE_CLAMP, SCROLL_MODE_INFINITE, EnvLighting, LAYERID_SKYBOX } from 'playcanvas';
 
 /**
  * Base class for all PlayCanvas Web Components that initialize asynchronously.
@@ -144,6 +144,10 @@ class AppElement extends AsyncElement {
         createOptions.graphicsDevice = device;
         createOptions.keyboard = new Keyboard(window);
         createOptions.mouse = new Mouse(this._canvas);
+        createOptions.elementInput = new ElementInput(this._canvas, {
+            useMouse: true,
+            useTouch: true
+        });
         createOptions.componentSystems = [
             AnimComponentSystem,
             AnimationComponentSystem,
@@ -743,6 +747,50 @@ const parseVec4 = (value) => {
     const components = value.split(' ').map(Number);
     return new Vec4(components);
 };
+/**
+ * Resolves an enum value supplied as either a named string (looked up in `map`) or a numeric
+ * string. Falls back to `defaultValue` when the value is neither a known name nor a finite number.
+ *
+ * @param value - The attribute value to parse.
+ * @param map - A map of named values to their numeric enum equivalents.
+ * @param defaultValue - The value to return when parsing fails.
+ * @returns The resolved numeric enum value.
+ */
+const parseEnum = (value, map, defaultValue) => {
+    const named = map.get(value);
+    if (named !== undefined) {
+        return named;
+    }
+    const numeric = Number(value);
+    return Number.isFinite(numeric) ? numeric : defaultValue;
+};
+/**
+ * Resolves a reference string to the {@link Entity} backing a `<pc-entity>` element. The reference
+ * can be a CSS selector (e.g. `#my-id`, `pc-entity[name="Foo"]`), a bare element id, or a bare
+ * entity name. Returns `null` if no matching element (or backing entity) is found.
+ *
+ * @param ref - The reference string to resolve.
+ * @returns The resolved entity, or `null`.
+ */
+const getEntity = (ref) => {
+    var _a, _b;
+    if (!ref) {
+        return null;
+    }
+    let element = null;
+    // Try the reference as a CSS selector. An invalid selector (e.g. a bare name containing
+    // spaces) throws, in which case we fall back to id/name lookups below.
+    try {
+        element = document.querySelector(ref);
+    }
+    catch (_c) {
+        element = null;
+    }
+    if (!element) {
+        element = (_a = document.getElementById(ref)) !== null && _a !== void 0 ? _a : document.querySelector(`pc-entity[name="${ref}"]`);
+    }
+    return (_b = element === null || element === void 0 ? void 0 : element.entity) !== null && _b !== void 0 ? _b : null;
+};
 
 /**
  * The EntityElement interface provides properties and methods for manipulating
@@ -781,12 +829,22 @@ class EntityElement extends AsyncElement {
          * The pointer event listeners for the entity.
          */
         this._listeners = {};
+        /**
+         * Whether the hierarchy has been built for this entity.
+         */
+        this._built = false;
         /**
          * The PlayCanvas entity instance.
          */
         this.entity = null;
     }
     createEntity(app) {
+        // Guard against double creation. When a subtree is inserted at runtime (e.g. cloning a
+        // `<template>`), an ancestor's connectedCallback eagerly creates descendant entities; the
+        // descendants' own connectedCallbacks would otherwise create them a second time.
+        if (this.entity) {
+            return;
+        }
         // Create a new entity
         this.entity = new Entity(this.getAttribute('name') || this._name, app);
         const enabled = this.getAttribute('enabled');
@@ -835,8 +893,9 @@ class EntityElement extends AsyncElement {
         });
     }
     buildHierarchy(app) {
-        if (!this.entity)
+        if (!this.entity || this._built)
             return;
+        this._built = true;
         const closestEntity = this.closestEntity;
         if (closestEntity === null || closestEntity === void 0 ? void 0 : closestEntity.entity) {
             closestEntity.entity.addChild(this.entity);
@@ -876,6 +935,7 @@ class EntityElement extends AsyncElement {
             // Destroy the entity
             this.entity.destroy();
             this.entity = null;
+            this._built = false;
         }
     }
     /**
@@ -1241,6 +1301,11 @@ var MeshoptDecoder = (function() {
 	};
 })();
 
+const renderModes = new Map([
+    ['simple', SPRITE_RENDERMODE_SIMPLE],
+    ['sliced', SPRITE_RENDERMODE_SLICED],
+    ['tiled', SPRITE_RENDERMODE_TILED]
+]);
 const extToType = new Map([
     ['bin', 'binary'],
     ['css', 'css'],
@@ -1314,6 +1379,9 @@ class AssetElement extends HTMLElement {
             console.warn(`Unsupported asset type: ${src}`);
             return;
         }
+        // Optional inline asset data, used by data-driven assets such as texture atlases (frame
+        // definitions) and sprites (atlas reference, frame keys, etc.).
+        const data = this._buildData(type);
         if (type === 'container') {
             this.asset = new Asset(id, type, { url: src }, undefined, {
                 // @ts-ignore TODO no definition in pc
@@ -1322,12 +1390,69 @@ class AssetElement extends HTMLElement {
                 }
             });
         }
+        else if (type === 'sprite') {
+            // Sprite assets have no file of their own; their data references a texture atlas asset.
+            // @ts-ignore
+            this.asset = new Asset(id, type, null, data);
+        }
         else {
             // @ts-ignore
-            this.asset = new Asset(id, type, { url: src });
+            this.asset = new Asset(id, type, src ? { url: src } : null, data);
         }
         this.asset.preload = !this._lazy;
     }
+    /**
+     * Builds the `data` object for the asset from an optional inline `data` attribute (JSON) and,
+     * for sprites, from the convenience attributes (`atlas`, `frame-keys`, `pixels-per-unit`,
+     * `render-mode`). Returns `undefined` when there is no data to apply.
+     * @param type - The resolved asset type.
+     * @returns The asset data, or `undefined`.
+     */
+    _buildData(type) {
+        var _a, _b, _c, _d;
+        let data;
+        const dataAttr = this.getAttribute('data');
+        if (dataAttr) {
+            try {
+                data = JSON.parse(dataAttr);
+            }
+            catch (e) {
+                console.warn(`Invalid 'data' JSON on pc-asset: ${dataAttr}`);
+            }
+        }
+        if (type === 'sprite') {
+            data = data !== null && data !== void 0 ? data : {};
+            // Resolve the referenced texture atlas to its (numeric) asset id. The atlas must be
+            // declared before the sprite so its asset already exists in the registry.
+            const atlas = (_a = this.getAttribute('atlas')) !== null && _a !== void 0 ? _a : data.textureAtlasAsset;
+            if (typeof atlas === 'string') {
+                const atlasAsset = AssetElement.get(atlas);
+                if (atlasAsset) {
+                    data.textureAtlasAsset = atlasAsset.id;
+                }
+                else {
+                    console.warn(`pc-asset sprite '${this.getAttribute('id')}' could not find atlas '${atlas}'`);
+                }
+            }
+            const frameKeys = this.getAttribute('frame-keys');
+            if (frameKeys !== null) {
+                data.frameKeys = frameKeys.split(/[\s,]+/).filter(Boolean);
+            }
+            const pixelsPerUnit = this.getAttribute('pixels-per-unit');
+            if (pixelsPerUnit !== null) {
+                data.pixelsPerUnit = Number(pixelsPerUnit);
+            }
+            const renderMode = this.getAttribute('render-mode');
+            if (renderMode !== null) {
+                data.renderMode = parseEnum(renderMode, renderModes, SPRITE_RENDERMODE_SIMPLE);
+            }
+            // Apply engine defaults for any values not supplied.
+            data.renderMode = (_b = data.renderMode) !== null && _b !== void 0 ? _b : SPRITE_RENDERMODE_SIMPLE;
+            data.pixelsPerUnit = (_c = data.pixelsPerUnit) !== null && _c !== void 0 ? _c : 1;
+            data.frameKeys = (_d = data.frameKeys) !== null && _d !== void 0 ? _d : [];
+        }
+        return data;
+    }
     destroyAsset() {
         if (this.asset) {
             this.asset.unload();
@@ -1467,6 +1592,396 @@ class ListenerComponentElement extends ComponentElement {
 }
 customElements.define('pc-listener', ListenerComponentElement);
 
+const transitionModes = new Map([
+    ['tint', BUTTON_TRANSITION_MODE_TINT],
+    ['sprite', BUTTON_TRANSITION_MODE_SPRITE_CHANGE]
+]);
+/**
+ * The ButtonComponentElement interface provides properties and methods for manipulating
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-button/ | `<pc-button>`} elements.
+ * The ButtonComponentElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
+ *
+ * @category Components
+ */
+class ButtonComponentElement extends ComponentElement {
+    /** @ignore */
+    constructor() {
+        super('button');
+        this._active = true;
+        this._image = '';
+        this._hitPadding = new Vec4(0, 0, 0, 0);
+        this._transitionMode = BUTTON_TRANSITION_MODE_TINT;
+        this._hoverTint = new Color(1, 1, 1, 1);
+        this._pressedTint = new Color(1, 1, 1, 1);
+        this._inactiveTint = new Color(1, 1, 1, 1);
+        this._fadeDuration = 0;
+        this._hoverSpriteAsset = '';
+        this._hoverSpriteFrame = 0;
+        this._pressedSpriteAsset = '';
+        this._pressedSpriteFrame = 0;
+        this._inactiveSpriteAsset = '';
+        this._inactiveSpriteFrame = 0;
+    }
+    getInitialComponentData() {
+        var _a;
+        const data = {
+            active: this._active,
+            hitPadding: this._hitPadding,
+            transitionMode: this._transitionMode,
+            hoverTint: this._hoverTint,
+            pressedTint: this._pressedTint,
+            inactiveTint: this._inactiveTint,
+            fadeDuration: this._fadeDuration,
+            hoverSpriteFrame: this._hoverSpriteFrame,
+            pressedSpriteFrame: this._pressedSpriteFrame,
+            inactiveSpriteFrame: this._inactiveSpriteFrame
+        };
+        // The image entity defaults to the button's own entity (which carries the image element)
+        // when no explicit reference is provided.
+        const imageEntity = this._image ? getEntity(this._image) : (_a = this.closestEntity) === null || _a === void 0 ? void 0 : _a.entity;
+        if (imageEntity) {
+            data.imageEntity = imageEntity;
+        }
+        const hoverSpriteAsset = AssetElement.get(this._hoverSpriteAsset);
+        if (hoverSpriteAsset) {
+            data.hoverSpriteAsset = hoverSpriteAsset.id;
+        }
+        const pressedSpriteAsset = AssetElement.get(this._pressedSpriteAsset);
+        if (pressedSpriteAsset) {
+            data.pressedSpriteAsset = pressedSpriteAsset.id;
+        }
+        const inactiveSpriteAsset = AssetElement.get(this._inactiveSpriteAsset);
+        if (inactiveSpriteAsset) {
+            data.inactiveSpriteAsset = inactiveSpriteAsset.id;
+        }
+        return data;
+    }
+    /**
+     * Gets the underlying PlayCanvas button component.
+     * @returns The button component.
+     */
+    get component() {
+        return super.component;
+    }
+    /**
+     * Sets whether the button is active and responds to input.
+     * @param value - Whether the button is active.
+     */
+    set active(value) {
+        this._active = value;
+        if (this.component) {
+            this.component.active = value;
+        }
+    }
+    /**
+     * Gets whether the button is active.
+     * @returns Whether the button is active.
+     */
+    get active() {
+        return this._active;
+    }
+    /**
+     * Sets the reference (CSS selector, element id or entity name) to the `<pc-entity>` whose image
+     * element is used for visual transitions. Defaults to the button's own entity.
+     * @param value - The image entity reference.
+     */
+    set image(value) {
+        this._image = value;
+        const entity = getEntity(value);
+        if (this.component && entity) {
+            this.component.imageEntity = entity;
+        }
+    }
+    /**
+     * Gets the reference to the `<pc-entity>` whose image element is used for visual transitions.
+     * @returns The image entity reference.
+     */
+    get image() {
+        return this._image;
+    }
+    /**
+     * Sets the padding used to expand the button's hit area, as a Vec4 (left, bottom, right, top).
+     * @param value - The hit padding.
+     */
+    set hitPadding(value) {
+        this._hitPadding = value;
+        if (this.component) {
+            this.component.hitPadding = value;
+        }
+    }
+    /**
+     * Gets the padding used to expand the button's hit area.
+     * @returns The hit padding.
+     */
+    get hitPadding() {
+        return this._hitPadding;
+    }
+    /**
+     * Sets how the button reacts to being hovered/pressed. Can be `tint` (0) or `sprite` (1).
+     * @param value - The transition mode.
+     */
+    set transitionMode(value) {
+        this._transitionMode = value;
+        if (this.component) {
+            this.component.transitionMode = value;
+        }
+    }
+    /**
+     * Gets how the button reacts to being hovered/pressed.
+     * @returns The transition mode.
+     */
+    get transitionMode() {
+        return this._transitionMode;
+    }
+    /**
+     * Sets the tint color applied to the image entity when the button is hovered (tint transition
+     * mode).
+     * @param value - The hover tint.
+     */
+    set hoverTint(value) {
+        this._hoverTint = value;
+        if (this.component) {
+            this.component.hoverTint = value;
+        }
+    }
+    /**
+     * Gets the hover tint color.
+     * @returns The hover tint.
+     */
+    get hoverTint() {
+        return this._hoverTint;
+    }
+    /**
+     * Sets the tint color applied to the image entity when the button is pressed (tint transition
+     * mode).
+     * @param value - The pressed tint.
+     */
+    set pressedTint(value) {
+        this._pressedTint = value;
+        if (this.component) {
+            this.component.pressedTint = value;
+        }
+    }
+    /**
+     * Gets the pressed tint color.
+     * @returns The pressed tint.
+     */
+    get pressedTint() {
+        return this._pressedTint;
+    }
+    /**
+     * Sets the tint color applied to the image entity when the button is inactive (tint transition
+     * mode).
+     * @param value - The inactive tint.
+     */
+    set inactiveTint(value) {
+        this._inactiveTint = value;
+        if (this.component) {
+            this.component.inactiveTint = value;
+        }
+    }
+    /**
+     * Gets the inactive tint color.
+     * @returns The inactive tint.
+     */
+    get inactiveTint() {
+        return this._inactiveTint;
+    }
+    /**
+     * Sets the duration (in milliseconds) over which tint transitions are applied.
+     * @param value - The fade duration.
+     */
+    set fadeDuration(value) {
+        this._fadeDuration = value;
+        if (this.component) {
+            this.component.fadeDuration = value;
+        }
+    }
+    /**
+     * Gets the duration over which tint transitions are applied.
+     * @returns The fade duration.
+     */
+    get fadeDuration() {
+        return this._fadeDuration;
+    }
+    /**
+     * Sets the id of the `pc-asset` sprite shown when the button is hovered (sprite transition
+     * mode).
+     * @param value - The hover sprite asset id.
+     */
+    set hoverSpriteAsset(value) {
+        this._hoverSpriteAsset = value;
+        const asset = AssetElement.get(value);
+        if (this.component && asset) {
+            this.component.hoverSpriteAsset = asset.id;
+        }
+    }
+    /**
+     * Gets the id of the `pc-asset` sprite shown when the button is hovered.
+     * @returns The hover sprite asset id.
+     */
+    get hoverSpriteAsset() {
+        return this._hoverSpriteAsset;
+    }
+    /**
+     * Sets the frame of the hover sprite to show.
+     * @param value - The hover sprite frame.
+     */
+    set hoverSpriteFrame(value) {
+        this._hoverSpriteFrame = value;
+        if (this.component) {
+            this.component.hoverSpriteFrame = value;
+        }
+    }
+    /**
+     * Gets the frame of the hover sprite to show.
+     * @returns The hover sprite frame.
+     */
+    get hoverSpriteFrame() {
+        return this._hoverSpriteFrame;
+    }
+    /**
+     * Sets the id of the `pc-asset` sprite shown when the button is pressed (sprite transition
+     * mode).
+     * @param value - The pressed sprite asset id.
+     */
+    set pressedSpriteAsset(value) {
+        this._pressedSpriteAsset = value;
+        const asset = AssetElement.get(value);
+        if (this.component && asset) {
+            this.component.pressedSpriteAsset = asset.id;
+        }
+    }
+    /**
+     * Gets the id of the `pc-asset` sprite shown when the button is pressed.
+     * @returns The pressed sprite asset id.
+     */
+    get pressedSpriteAsset() {
+        return this._pressedSpriteAsset;
+    }
+    /**
+     * Sets the frame of the pressed sprite to show.
+     * @param value - The pressed sprite frame.
+     */
+    set pressedSpriteFrame(value) {
+        this._pressedSpriteFrame = value;
+        if (this.component) {
+            this.component.pressedSpriteFrame = value;
+        }
+    }
+    /**
+     * Gets the frame of the pressed sprite to show.
+     * @returns The pressed sprite frame.
+     */
+    get pressedSpriteFrame() {
+        return this._pressedSpriteFrame;
+    }
+    /**
+     * Sets the id of the `pc-asset` sprite shown when the button is inactive (sprite transition
+     * mode).
+     * @param value - The inactive sprite asset id.
+     */
+    set inactiveSpriteAsset(value) {
+        this._inactiveSpriteAsset = value;
+        const asset = AssetElement.get(value);
+        if (this.component && asset) {
+            this.component.inactiveSpriteAsset = asset.id;
+        }
+    }
+    /**
+     * Gets the id of the `pc-asset` sprite shown when the button is inactive.
+     * @returns The inactive sprite asset id.
+     */
+    get inactiveSpriteAsset() {
+        return this._inactiveSpriteAsset;
+    }
+    /**
+     * Sets the frame of the inactive sprite to show.
+     * @param value - The inactive sprite frame.
+     */
+    set inactiveSpriteFrame(value) {
+        this._inactiveSpriteFrame = value;
+        if (this.component) {
+            this.component.inactiveSpriteFrame = value;
+        }
+    }
+    /**
+     * Gets the frame of the inactive sprite to show.
+     * @returns The inactive sprite frame.
+     */
+    get inactiveSpriteFrame() {
+        return this._inactiveSpriteFrame;
+    }
+    static get observedAttributes() {
+        return [
+            ...super.observedAttributes,
+            'active',
+            'image',
+            'hit-padding',
+            'transition-mode',
+            'hover-tint',
+            'pressed-tint',
+            'inactive-tint',
+            'fade-duration',
+            'hover-sprite-asset',
+            'hover-sprite-frame',
+            'pressed-sprite-asset',
+            'pressed-sprite-frame',
+            'inactive-sprite-asset',
+            'inactive-sprite-frame'
+        ];
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        super.attributeChangedCallback(name, _oldValue, newValue);
+        switch (name) {
+            case 'active':
+                this.active = newValue !== 'false';
+                break;
+            case 'image':
+                this.image = newValue;
+                break;
+            case 'hit-padding':
+                this.hitPadding = parseVec4(newValue);
+                break;
+            case 'transition-mode':
+                this.transitionMode = parseEnum(newValue, transitionModes, BUTTON_TRANSITION_MODE_TINT);
+                break;
+            case 'hover-tint':
+                this.hoverTint = parseColor(newValue);
+                break;
+            case 'pressed-tint':
+                this.pressedTint = parseColor(newValue);
+                break;
+            case 'inactive-tint':
+                this.inactiveTint = parseColor(newValue);
+                break;
+            case 'fade-duration':
+                this.fadeDuration = Number(newValue);
+                break;
+            case 'hover-sprite-asset':
+                this.hoverSpriteAsset = newValue;
+                break;
+            case 'hover-sprite-frame':
+                this.hoverSpriteFrame = Number(newValue);
+                break;
+            case 'pressed-sprite-asset':
+                this.pressedSpriteAsset = newValue;
+                break;
+            case 'pressed-sprite-frame':
+                this.pressedSpriteFrame = Number(newValue);
+                break;
+            case 'inactive-sprite-asset':
+                this.inactiveSpriteAsset = newValue;
+                break;
+            case 'inactive-sprite-frame':
+                this.inactiveSpriteFrame = Number(newValue);
+                break;
+        }
+    }
+}
+customElements.define('pc-button', ButtonComponentElement);
+
 const tonemaps = new Map([
     ['none', TONEMAP_NONE],
     ['linear', TONEMAP_LINEAR],
@@ -2119,34 +2634,94 @@ class ElementComponentElement extends ComponentElement {
         this._anchor = new Vec4(0.5, 0.5, 0.5, 0.5);
         this._asset = '';
         this._autoWidth = true;
+        this._autoHeight = true;
+        this._autoFitWidth = false;
+        this._autoFitHeight = false;
         this._color = new Color(1, 1, 1, 1);
         this._enableMarkup = false;
         this._fontSize = 32;
+        this._maxFontSize = 32;
+        this._minFontSize = 8;
+        this._height = 0;
         this._lineHeight = 32;
+        this._margin = null;
+        this._mask = false;
+        this._opacity = 1;
         this._pivot = new Vec2(0.5, 0.5);
+        this._pixelsPerUnit = null;
+        this._spriteAsset = '';
+        this._spriteFrame = 0;
         this._text = '';
+        this._textureAsset = '';
         this._type = 'group';
+        this._useInput = false;
         this._width = 0;
         this._wrapLines = false;
     }
     initComponent() {
-        this.component._text._material.useFog = true;
+        var _a, _b;
+        const component = this.component;
+        if (!component) {
+            return;
+        }
+        // Text elements render through their own material; enable fog on it so 3D text respects
+        // scene fog. Image/group elements have no text material, so guard the access.
+        if ((_a = component._text) === null || _a === void 0 ? void 0 : _a._material) {
+            component._text._material.useFog = true;
+        }
+        // The engine establishes element masking in ElementComponent._onInsert, which fires when an
+        // entity is inserted into the hierarchy. Web-components inserts the entity first and adds
+        // the element component afterwards, so that pass is missed. Re-dirty the mask state here so
+        // masks (e.g. a scroll view viewport) correctly clip this element and any added at runtime.
+        (_b = component._dirtifyMask) === null || _b === void 0 ? void 0 : _b.call(component);
     }
     getInitialComponentData() {
-        return {
+        const data = {
             anchor: this._anchor,
             autoWidth: this._autoWidth,
+            autoHeight: this._autoHeight,
+            autoFitWidth: this._autoFitWidth,
+            autoFitHeight: this._autoFitHeight,
             color: this._color,
             enableMarkup: this._enableMarkup,
-            fontAsset: AssetElement.get(this._asset).id,
             fontSize: this._fontSize,
+            maxFontSize: this._maxFontSize,
+            minFontSize: this._minFontSize,
+            height: this._height,
             lineHeight: this._lineHeight,
+            mask: this._mask,
+            opacity: this._opacity,
             pivot: this._pivot,
+            spriteFrame: this._spriteFrame,
             type: this._type,
             text: this._text,
+            useInput: this._useInput,
             width: this._width,
             wrapLines: this._wrapLines
         };
+        // Asset references are resolved from `<pc-asset>` element ids to engine asset ids. They are
+        // only included when they resolve, so image/group elements (with no font) don't error.
+        const fontAsset = AssetElement.get(this._asset);
+        if (fontAsset) {
+            data.fontAsset = fontAsset.id;
+        }
+        const spriteAsset = AssetElement.get(this._spriteAsset);
+        if (spriteAsset) {
+            data.spriteAsset = spriteAsset.id;
+        }
+        const textureAsset = AssetElement.get(this._textureAsset);
+        if (textureAsset) {
+            data.textureAsset = textureAsset.id;
+        }
+        // Margin is only applied when explicitly set. For stretched (split) anchors it governs the
+        // element size; for point anchors width/height take over (handled by the engine).
+        if (this._margin) {
+            data.margin = this._margin;
+        }
+        if (this._pixelsPerUnit !== null) {
+            data.pixelsPerUnit = this._pixelsPerUnit;
+        }
+        return data;
     }
     /**
      * Gets the underlying PlayCanvas element component.
@@ -2173,7 +2748,7 @@ class ElementComponentElement extends ComponentElement {
         return this._anchor;
     }
     /**
-     * Sets the id of the `pc-asset` to use for the font.
+     * Sets the id of the `pc-asset` to use for the font (text elements).
      * @param value - The asset ID.
      */
     set asset(value) {
@@ -2191,7 +2766,8 @@ class ElementComponentElement extends ComponentElement {
         return this._asset;
     }
     /**
-     * Sets whether the element component should automatically adjust its width.
+     * Sets whether the element component should automatically adjust its width to the text content
+     * (text elements only).
      * @param value - Whether to automatically adjust the width.
      */
     set autoWidth(value) {
@@ -2207,6 +2783,24 @@ class ElementComponentElement extends ComponentElement {
     get autoWidth() {
         return this._autoWidth;
     }
+    /**
+     * Sets whether the element component should automatically adjust its height to the text content
+     * (text elements only).
+     * @param value - Whether to automatically adjust the height.
+     */
+    set autoHeight(value) {
+        this._autoHeight = value;
+        if (this.component) {
+            this.component.autoHeight = value;
+        }
+    }
+    /**
+     * Gets whether the element component should automatically adjust its height.
+     * @returns Whether to automatically adjust the height.
+     */
+    get autoHeight() {
+        return this._autoHeight;
+    }
     /**
      * Sets the color of the element component.
      * @param value - The color.
@@ -2258,6 +2852,23 @@ class ElementComponentElement extends ComponentElement {
     get fontSize() {
         return this._fontSize;
     }
+    /**
+     * Sets the height of the element component.
+     * @param value - The height.
+     */
+    set height(value) {
+        this._height = value;
+        if (this.component) {
+            this.component.height = value;
+        }
+    }
+    /**
+     * Gets the height of the element component.
+     * @returns The height.
+     */
+    get height() {
+        return this._height;
+    }
     /**
      * Sets the line height of the element component.
      * @param value - The line height.
@@ -2276,56 +2887,195 @@ class ElementComponentElement extends ComponentElement {
         return this._lineHeight;
     }
     /**
-     * Sets the pivot of the element component.
-     * @param value - The pivot.
+     * Sets the margin of the element component (used to inset the element from stretched anchors).
+     * @param value - The margin as a Vec4 (left, bottom, right, top).
      */
-    set pivot(value) {
-        this._pivot = value;
-        if (this.component) {
-            this.component.pivot = value;
+    set margin(value) {
+        this._margin = value;
+        if (this.component && value) {
+            this.component.margin = value;
         }
     }
     /**
-     * Gets the pivot of the element component.
-     * @returns The pivot.
+     * Gets the margin of the element component.
+     * @returns The margin.
      */
-    get pivot() {
-        return this._pivot;
+    get margin() {
+        return this._margin;
     }
     /**
-     * Sets the text of the element component.
-     * @param value - The text.
+     * Sets whether the element component is a mask, clipping its descendants to its bounds (image
+     * elements only).
+     * @param value - Whether the element is a mask.
      */
-    set text(value) {
-        this._text = value;
+    set mask(value) {
+        this._mask = value;
         if (this.component) {
-            this.component.text = value;
+            this.component.mask = value;
         }
     }
     /**
-     * Gets the text of the element component.
-     * @returns The text.
+     * Gets whether the element component is a mask.
+     * @returns Whether the element is a mask.
      */
-    get text() {
-        return this._text;
+    get mask() {
+        return this._mask;
     }
     /**
-     * Sets the type of the element component.
-     * @param value - The type.
+     * Sets the opacity of the element component.
+     * @param value - The opacity (0 to 1).
      */
-    set type(value) {
-        this._type = value;
+    set opacity(value) {
+        this._opacity = value;
         if (this.component) {
-            this.component.type = value;
+            this.component.opacity = value;
         }
     }
     /**
-     * Gets the type of the element component.
+     * Gets the opacity of the element component.
+     * @returns The opacity.
+     */
+    get opacity() {
+        return this._opacity;
+    }
+    /**
+     * Sets the pivot of the element component.
+     * @param value - The pivot.
+     */
+    set pivot(value) {
+        this._pivot = value;
+        if (this.component) {
+            this.component.pivot = value;
+        }
+    }
+    /**
+     * Gets the pivot of the element component.
+     * @returns The pivot.
+     */
+    get pivot() {
+        return this._pivot;
+    }
+    /**
+     * Sets the number of pixels per unit to use when rendering a sprite (image elements only).
+     * @param value - The pixels per unit.
+     */
+    set pixelsPerUnit(value) {
+        this._pixelsPerUnit = value;
+        if (this.component && value !== null) {
+            this.component.pixelsPerUnit = value;
+        }
+    }
+    /**
+     * Gets the number of pixels per unit used when rendering a sprite.
+     * @returns The pixels per unit.
+     */
+    get pixelsPerUnit() {
+        return this._pixelsPerUnit;
+    }
+    /**
+     * Sets the id of the `pc-asset` to use for the sprite (image elements only).
+     * @param value - The sprite asset ID.
+     */
+    set spriteAsset(value) {
+        this._spriteAsset = value;
+        const asset = AssetElement.get(value);
+        if (this.component && asset) {
+            this.component.spriteAsset = asset.id;
+        }
+    }
+    /**
+     * Gets the id of the `pc-asset` to use for the sprite.
+     * @returns The sprite asset ID.
+     */
+    get spriteAsset() {
+        return this._spriteAsset;
+    }
+    /**
+     * Sets the frame of the sprite to render (image elements only).
+     * @param value - The sprite frame index.
+     */
+    set spriteFrame(value) {
+        this._spriteFrame = value;
+        if (this.component) {
+            this.component.spriteFrame = value;
+        }
+    }
+    /**
+     * Gets the frame of the sprite to render.
+     * @returns The sprite frame index.
+     */
+    get spriteFrame() {
+        return this._spriteFrame;
+    }
+    /**
+     * Sets the text of the element component.
+     * @param value - The text.
+     */
+    set text(value) {
+        this._text = value;
+        if (this.component) {
+            this.component.text = value;
+        }
+    }
+    /**
+     * Gets the text of the element component.
+     * @returns The text.
+     */
+    get text() {
+        return this._text;
+    }
+    /**
+     * Sets the id of the `pc-asset` to use for the texture (image elements only).
+     * @param value - The texture asset ID.
+     */
+    set textureAsset(value) {
+        this._textureAsset = value;
+        const asset = AssetElement.get(value);
+        if (this.component && asset) {
+            this.component.textureAsset = asset.id;
+        }
+    }
+    /**
+     * Gets the id of the `pc-asset` to use for the texture.
+     * @returns The texture asset ID.
+     */
+    get textureAsset() {
+        return this._textureAsset;
+    }
+    /**
+     * Sets the type of the element component.
+     * @param value - The type.
+     */
+    set type(value) {
+        this._type = value;
+        if (this.component) {
+            this.component.type = value;
+        }
+    }
+    /**
+     * Gets the type of the element component.
      * @returns The type.
      */
     get type() {
         return this._type;
     }
+    /**
+     * Sets whether the element component accepts input events (required for buttons and scrolling).
+     * @param value - Whether the element accepts input.
+     */
+    set useInput(value) {
+        this._useInput = value;
+        if (this.component) {
+            this.component.useInput = value;
+        }
+    }
+    /**
+     * Gets whether the element component accepts input events.
+     * @returns Whether the element accepts input.
+     */
+    get useInput() {
+        return this._useInput;
+    }
     /**
      * Sets the width of the element component.
      * @param value - The width.
@@ -2360,19 +3110,103 @@ class ElementComponentElement extends ComponentElement {
     get wrapLines() {
         return this._wrapLines;
     }
+    /**
+     * Sets whether a text element should automatically reduce its font size (down to `min-font-size`)
+     * so the text fits within the element's width. Requires `auto-width` to be `false`.
+     * @param value - Whether to auto-fit the width.
+     */
+    set autoFitWidth(value) {
+        this._autoFitWidth = value;
+        if (this.component) {
+            this.component.autoFitWidth = value;
+        }
+    }
+    /**
+     * Gets whether a text element automatically reduces its font size to fit its width.
+     * @returns Whether the width is auto-fit.
+     */
+    get autoFitWidth() {
+        return this._autoFitWidth;
+    }
+    /**
+     * Sets whether a text element should automatically reduce its font size (down to `min-font-size`)
+     * so the text fits within the element's height. Requires `auto-height` to be `false`.
+     * @param value - Whether to auto-fit the height.
+     */
+    set autoFitHeight(value) {
+        this._autoFitHeight = value;
+        if (this.component) {
+            this.component.autoFitHeight = value;
+        }
+    }
+    /**
+     * Gets whether a text element automatically reduces its font size to fit its height.
+     * @returns Whether the height is auto-fit.
+     */
+    get autoFitHeight() {
+        return this._autoFitHeight;
+    }
+    /**
+     * Sets the smallest font size a text element may use when auto-fitting.
+     * @param value - The minimum font size.
+     */
+    set minFontSize(value) {
+        this._minFontSize = value;
+        if (this.component) {
+            this.component.minFontSize = value;
+        }
+    }
+    /**
+     * Gets the smallest font size a text element may use when auto-fitting.
+     * @returns The minimum font size.
+     */
+    get minFontSize() {
+        return this._minFontSize;
+    }
+    /**
+     * Sets the largest font size a text element may use when auto-fitting.
+     * @param value - The maximum font size.
+     */
+    set maxFontSize(value) {
+        this._maxFontSize = value;
+        if (this.component) {
+            this.component.maxFontSize = value;
+        }
+    }
+    /**
+     * Gets the largest font size a text element may use when auto-fitting.
+     * @returns The maximum font size.
+     */
+    get maxFontSize() {
+        return this._maxFontSize;
+    }
     static get observedAttributes() {
         return [
             ...super.observedAttributes,
             'anchor',
             'asset',
             'auto-width',
+            'auto-height',
+            'auto-fit-width',
+            'auto-fit-height',
             'color',
             'enable-markup',
             'font-size',
+            'max-font-size',
+            'min-font-size',
+            'height',
             'line-height',
+            'margin',
+            'mask',
+            'opacity',
             'pivot',
+            'pixels-per-unit',
+            'sprite-asset',
+            'sprite-frame',
             'text',
+            'texture-asset',
             'type',
+            'use-input',
             'width',
             'wrap-lines'
         ];
@@ -2380,46 +3214,544 @@ class ElementComponentElement extends ComponentElement {
     attributeChangedCallback(name, _oldValue, newValue) {
         super.attributeChangedCallback(name, _oldValue, newValue);
         switch (name) {
-            case 'anchor':
-                this.anchor = parseVec4(newValue);
-                break;
-            case 'asset':
-                this.asset = newValue;
-                break;
-            case 'auto-width':
-                this.autoWidth = newValue !== 'false';
-                break;
-            case 'color':
-                this.color = parseColor(newValue);
+            case 'anchor':
+                this.anchor = parseVec4(newValue);
+                break;
+            case 'asset':
+                this.asset = newValue;
+                break;
+            case 'auto-width':
+                this.autoWidth = newValue !== 'false';
+                break;
+            case 'auto-height':
+                this.autoHeight = newValue !== 'false';
+                break;
+            case 'auto-fit-width':
+                this.autoFitWidth = newValue !== 'false';
+                break;
+            case 'auto-fit-height':
+                this.autoFitHeight = newValue !== 'false';
+                break;
+            case 'color':
+                this.color = parseColor(newValue);
+                break;
+            case 'enable-markup':
+                this.enableMarkup = this.hasAttribute(name);
+                break;
+            case 'font-size':
+                this.fontSize = Number(newValue);
+                break;
+            case 'max-font-size':
+                this.maxFontSize = Number(newValue);
+                break;
+            case 'min-font-size':
+                this.minFontSize = Number(newValue);
+                break;
+            case 'height':
+                this.height = Number(newValue);
+                break;
+            case 'line-height':
+                this.lineHeight = Number(newValue);
+                break;
+            case 'margin':
+                this.margin = parseVec4(newValue);
+                break;
+            case 'mask':
+                this.mask = this.hasAttribute(name);
+                break;
+            case 'opacity':
+                this.opacity = Number(newValue);
+                break;
+            case 'pivot':
+                this.pivot = parseVec2(newValue);
+                break;
+            case 'pixels-per-unit':
+                this.pixelsPerUnit = Number(newValue);
+                break;
+            case 'sprite-asset':
+                this.spriteAsset = newValue;
+                break;
+            case 'sprite-frame':
+                this.spriteFrame = Number(newValue);
+                break;
+            case 'text':
+                this.text = newValue;
+                break;
+            case 'texture-asset':
+                this.textureAsset = newValue;
+                break;
+            case 'type':
+                this.type = newValue;
+                break;
+            case 'use-input':
+                this.useInput = this.hasAttribute(name);
+                break;
+            case 'width':
+                this.width = Number(newValue);
+                break;
+            case 'wrap-lines':
+                this.wrapLines = this.hasAttribute(name);
+                break;
+        }
+    }
+}
+customElements.define('pc-element', ElementComponentElement);
+
+/**
+ * The LayoutChildComponentElement interface provides properties and methods for manipulating
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-layoutchild/ | `<pc-layoutchild>`} elements.
+ * The LayoutChildComponentElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
+ *
+ * @category Components
+ */
+class LayoutChildComponentElement extends ComponentElement {
+    /** @ignore */
+    constructor() {
+        super('layoutchild');
+        this._minWidth = 0;
+        this._minHeight = 0;
+        this._maxWidth = null;
+        this._maxHeight = null;
+        this._fitWidthProportion = 0;
+        this._fitHeightProportion = 0;
+        this._excludeFromLayout = false;
+    }
+    getInitialComponentData() {
+        return {
+            minWidth: this._minWidth,
+            minHeight: this._minHeight,
+            maxWidth: this._maxWidth,
+            maxHeight: this._maxHeight,
+            fitWidthProportion: this._fitWidthProportion,
+            fitHeightProportion: this._fitHeightProportion,
+            excludeFromLayout: this._excludeFromLayout
+        };
+    }
+    /**
+     * Gets the underlying PlayCanvas layout child component.
+     * @returns The layout child component.
+     */
+    get component() {
+        return super.component;
+    }
+    /**
+     * Sets the minimum width the element should be laid out with.
+     * @param value - The minimum width.
+     */
+    set minWidth(value) {
+        this._minWidth = value;
+        if (this.component) {
+            this.component.minWidth = value;
+        }
+    }
+    /**
+     * Gets the minimum width the element should be laid out with.
+     * @returns The minimum width.
+     */
+    get minWidth() {
+        return this._minWidth;
+    }
+    /**
+     * Sets the minimum height the element should be laid out with.
+     * @param value - The minimum height.
+     */
+    set minHeight(value) {
+        this._minHeight = value;
+        if (this.component) {
+            this.component.minHeight = value;
+        }
+    }
+    /**
+     * Gets the minimum height the element should be laid out with.
+     * @returns The minimum height.
+     */
+    get minHeight() {
+        return this._minHeight;
+    }
+    /**
+     * Sets the maximum width the element should be laid out with (or `null` for no limit).
+     * @param value - The maximum width.
+     */
+    set maxWidth(value) {
+        this._maxWidth = value;
+        if (this.component) {
+            this.component.maxWidth = value;
+        }
+    }
+    /**
+     * Gets the maximum width the element should be laid out with.
+     * @returns The maximum width.
+     */
+    get maxWidth() {
+        return this._maxWidth;
+    }
+    /**
+     * Sets the maximum height the element should be laid out with (or `null` for no limit).
+     * @param value - The maximum height.
+     */
+    set maxHeight(value) {
+        this._maxHeight = value;
+        if (this.component) {
+            this.component.maxHeight = value;
+        }
+    }
+    /**
+     * Gets the maximum height the element should be laid out with.
+     * @returns The maximum height.
+     */
+    get maxHeight() {
+        return this._maxHeight;
+    }
+    /**
+     * Sets the proportion of the container's spare width this element should take (when the layout
+     * group's `width-fitting` is set to stretch or shrink).
+     * @param value - The fit width proportion.
+     */
+    set fitWidthProportion(value) {
+        this._fitWidthProportion = value;
+        if (this.component) {
+            this.component.fitWidthProportion = value;
+        }
+    }
+    /**
+     * Gets the proportion of the container's spare width this element should take.
+     * @returns The fit width proportion.
+     */
+    get fitWidthProportion() {
+        return this._fitWidthProportion;
+    }
+    /**
+     * Sets the proportion of the container's spare height this element should take (when the layout
+     * group's `height-fitting` is set to stretch or shrink).
+     * @param value - The fit height proportion.
+     */
+    set fitHeightProportion(value) {
+        this._fitHeightProportion = value;
+        if (this.component) {
+            this.component.fitHeightProportion = value;
+        }
+    }
+    /**
+     * Gets the proportion of the container's spare height this element should take.
+     * @returns The fit height proportion.
+     */
+    get fitHeightProportion() {
+        return this._fitHeightProportion;
+    }
+    /**
+     * Sets whether the element should be excluded from the layout (and thus not take up space).
+     * @param value - Whether to exclude the element from layout.
+     */
+    set excludeFromLayout(value) {
+        this._excludeFromLayout = value;
+        if (this.component) {
+            this.component.excludeFromLayout = value;
+        }
+    }
+    /**
+     * Gets whether the element is excluded from the layout.
+     * @returns Whether the element is excluded from layout.
+     */
+    get excludeFromLayout() {
+        return this._excludeFromLayout;
+    }
+    static get observedAttributes() {
+        return [
+            ...super.observedAttributes,
+            'min-width',
+            'min-height',
+            'max-width',
+            'max-height',
+            'fit-width-proportion',
+            'fit-height-proportion',
+            'exclude-from-layout'
+        ];
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        super.attributeChangedCallback(name, _oldValue, newValue);
+        switch (name) {
+            case 'min-width':
+                this.minWidth = Number(newValue);
+                break;
+            case 'min-height':
+                this.minHeight = Number(newValue);
+                break;
+            case 'max-width':
+                this.maxWidth = newValue === '' ? null : Number(newValue);
+                break;
+            case 'max-height':
+                this.maxHeight = newValue === '' ? null : Number(newValue);
+                break;
+            case 'fit-width-proportion':
+                this.fitWidthProportion = Number(newValue);
+                break;
+            case 'fit-height-proportion':
+                this.fitHeightProportion = Number(newValue);
+                break;
+            case 'exclude-from-layout':
+                this.excludeFromLayout = newValue !== 'false';
+                break;
+        }
+    }
+}
+customElements.define('pc-layoutchild', LayoutChildComponentElement);
+
+const orientations$1 = new Map([
+    ['horizontal', ORIENTATION_HORIZONTAL],
+    ['vertical', ORIENTATION_VERTICAL]
+]);
+const fittings = new Map([
+    ['none', FITTING_NONE],
+    ['stretch', FITTING_STRETCH],
+    ['shrink', FITTING_SHRINK],
+    ['both', FITTING_BOTH]
+]);
+/**
+ * The LayoutGroupComponentElement interface provides properties and methods for manipulating
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-layoutgroup/ | `<pc-layoutgroup>`} elements.
+ * The LayoutGroupComponentElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
+ *
+ * @category Components
+ */
+class LayoutGroupComponentElement extends ComponentElement {
+    /** @ignore */
+    constructor() {
+        super('layoutgroup');
+        this._orientation = ORIENTATION_HORIZONTAL;
+        this._reverseX = false;
+        this._reverseY = false;
+        this._alignment = new Vec2(0, 1);
+        this._padding = new Vec4(0, 0, 0, 0);
+        this._spacing = new Vec2(0, 0);
+        this._widthFitting = FITTING_NONE;
+        this._heightFitting = FITTING_NONE;
+        this._wrap = false;
+    }
+    getInitialComponentData() {
+        return {
+            orientation: this._orientation,
+            reverseX: this._reverseX,
+            reverseY: this._reverseY,
+            alignment: this._alignment,
+            padding: this._padding,
+            spacing: this._spacing,
+            widthFitting: this._widthFitting,
+            heightFitting: this._heightFitting,
+            wrap: this._wrap
+        };
+    }
+    /**
+     * Gets the underlying PlayCanvas layout group component.
+     * @returns The layout group component.
+     */
+    get component() {
+        return super.component;
+    }
+    /**
+     * Sets the orientation of the layout group. Can be `horizontal` (0) or `vertical` (1).
+     * @param value - The orientation.
+     */
+    set orientation(value) {
+        this._orientation = value;
+        if (this.component) {
+            this.component.orientation = value;
+        }
+    }
+    /**
+     * Gets the orientation of the layout group.
+     * @returns The orientation.
+     */
+    get orientation() {
+        return this._orientation;
+    }
+    /**
+     * Sets whether the order of children is reversed along the horizontal axis.
+     * @param value - Whether to reverse the horizontal order.
+     */
+    set reverseX(value) {
+        this._reverseX = value;
+        if (this.component) {
+            this.component.reverseX = value;
+        }
+    }
+    /**
+     * Gets whether the order of children is reversed along the horizontal axis.
+     * @returns Whether the horizontal order is reversed.
+     */
+    get reverseX() {
+        return this._reverseX;
+    }
+    /**
+     * Sets whether the order of children is reversed along the vertical axis.
+     * @param value - Whether to reverse the vertical order.
+     */
+    set reverseY(value) {
+        this._reverseY = value;
+        if (this.component) {
+            this.component.reverseY = value;
+        }
+    }
+    /**
+     * Gets whether the order of children is reversed along the vertical axis.
+     * @returns Whether the vertical order is reversed.
+     */
+    get reverseY() {
+        return this._reverseY;
+    }
+    /**
+     * Sets the horizontal and vertical alignment of the child elements (each component 0 to 1).
+     * @param value - The alignment.
+     */
+    set alignment(value) {
+        this._alignment = value;
+        if (this.component) {
+            this.component.alignment = value;
+        }
+    }
+    /**
+     * Gets the alignment of the child elements.
+     * @returns The alignment.
+     */
+    get alignment() {
+        return this._alignment;
+    }
+    /**
+     * Sets the padding around the layout group, as a Vec4 (left, bottom, right, top).
+     * @param value - The padding.
+     */
+    set padding(value) {
+        this._padding = value;
+        if (this.component) {
+            this.component.padding = value;
+        }
+    }
+    /**
+     * Gets the padding around the layout group.
+     * @returns The padding.
+     */
+    get padding() {
+        return this._padding;
+    }
+    /**
+     * Sets the spacing between child elements, as a Vec2 (x, y).
+     * @param value - The spacing.
+     */
+    set spacing(value) {
+        this._spacing = value;
+        if (this.component) {
+            this.component.spacing = value;
+        }
+    }
+    /**
+     * Gets the spacing between child elements.
+     * @returns The spacing.
+     */
+    get spacing() {
+        return this._spacing;
+    }
+    /**
+     * Sets the fitting mode along the horizontal axis. Can be `none` (0), `stretch` (1), `shrink`
+     * (2) or `both` (3).
+     * @param value - The width fitting mode.
+     */
+    set widthFitting(value) {
+        this._widthFitting = value;
+        if (this.component) {
+            this.component.widthFitting = value;
+        }
+    }
+    /**
+     * Gets the fitting mode along the horizontal axis.
+     * @returns The width fitting mode.
+     */
+    get widthFitting() {
+        return this._widthFitting;
+    }
+    /**
+     * Sets the fitting mode along the vertical axis. Can be `none` (0), `stretch` (1), `shrink` (2)
+     * or `both` (3).
+     * @param value - The height fitting mode.
+     */
+    set heightFitting(value) {
+        this._heightFitting = value;
+        if (this.component) {
+            this.component.heightFitting = value;
+        }
+    }
+    /**
+     * Gets the fitting mode along the vertical axis.
+     * @returns The height fitting mode.
+     */
+    get heightFitting() {
+        return this._heightFitting;
+    }
+    /**
+     * Sets whether children wrap onto a new line/column when they overflow the group.
+     * @param value - Whether to wrap children.
+     */
+    set wrap(value) {
+        this._wrap = value;
+        if (this.component) {
+            this.component.wrap = value;
+        }
+    }
+    /**
+     * Gets whether children wrap onto a new line/column when they overflow the group.
+     * @returns Whether children wrap.
+     */
+    get wrap() {
+        return this._wrap;
+    }
+    static get observedAttributes() {
+        return [
+            ...super.observedAttributes,
+            'orientation',
+            'reverse-x',
+            'reverse-y',
+            'alignment',
+            'padding',
+            'spacing',
+            'width-fitting',
+            'height-fitting',
+            'wrap'
+        ];
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        super.attributeChangedCallback(name, _oldValue, newValue);
+        switch (name) {
+            case 'orientation':
+                this.orientation = parseEnum(newValue, orientations$1, ORIENTATION_HORIZONTAL);
                 break;
-            case 'enable-markup':
-                this.enableMarkup = this.hasAttribute(name);
+            case 'reverse-x':
+                this.reverseX = newValue !== 'false';
                 break;
-            case 'font-size':
-                this.fontSize = Number(newValue);
+            case 'reverse-y':
+                this.reverseY = newValue !== 'false';
                 break;
-            case 'line-height':
-                this.lineHeight = Number(newValue);
+            case 'alignment':
+                this.alignment = parseVec2(newValue);
                 break;
-            case 'pivot':
-                this.pivot = parseVec2(newValue);
+            case 'padding':
+                this.padding = parseVec4(newValue);
                 break;
-            case 'text':
-                this.text = newValue;
+            case 'spacing':
+                this.spacing = parseVec2(newValue);
                 break;
-            case 'type':
-                this.type = newValue;
+            case 'width-fitting':
+                this.widthFitting = parseEnum(newValue, fittings, FITTING_NONE);
                 break;
-            case 'width':
-                this.width = Number(newValue);
+            case 'height-fitting':
+                this.heightFitting = parseEnum(newValue, fittings, FITTING_NONE);
                 break;
-            case 'wrap-lines':
-                this.wrapLines = this.hasAttribute(name);
+            case 'wrap':
+                this.wrap = newValue !== 'false';
                 break;
         }
     }
 }
-customElements.define('pc-element', ElementComponentElement);
+customElements.define('pc-layoutgroup', LayoutGroupComponentElement);
 
 const shadowTypes = new Map([
     ['pcf1-16f', SHADOW_PCF1_16F],
@@ -3608,6 +4940,514 @@ class ScreenComponentElement extends ComponentElement {
 }
 customElements.define('pc-screen', ScreenComponentElement);
 
+const orientations = new Map([
+    ['horizontal', ORIENTATION_HORIZONTAL],
+    ['vertical', ORIENTATION_VERTICAL]
+]);
+/**
+ * The ScrollbarComponentElement interface provides properties and methods for manipulating
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-scrollbar/ | `<pc-scrollbar>`} elements.
+ * The ScrollbarComponentElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
+ *
+ * @category Components
+ */
+class ScrollbarComponentElement extends ComponentElement {
+    /** @ignore */
+    constructor() {
+        super('scrollbar');
+        this._orientation = ORIENTATION_HORIZONTAL;
+        this._value = 0;
+        this._handleSize = 0.5;
+        this._handle = '';
+    }
+    getInitialComponentData() {
+        const data = {
+            orientation: this._orientation,
+            value: this._value,
+            handleSize: this._handleSize
+        };
+        const handle = getEntity(this._handle);
+        if (handle) {
+            data.handleEntity = handle;
+        }
+        return data;
+    }
+    /**
+     * Gets the underlying PlayCanvas scrollbar component.
+     * @returns The scrollbar component.
+     */
+    get component() {
+        return super.component;
+    }
+    /**
+     * Sets the orientation of the scrollbar. Can be `horizontal` (0) or `vertical` (1).
+     * @param value - The orientation.
+     */
+    set orientation(value) {
+        this._orientation = value;
+        if (this.component) {
+            this.component.orientation = value;
+        }
+    }
+    /**
+     * Gets the orientation of the scrollbar.
+     * @returns The orientation.
+     */
+    get orientation() {
+        return this._orientation;
+    }
+    /**
+     * Sets the current position value of the scrollbar, in the range 0 to 1.
+     * @param value - The scrollbar value.
+     */
+    set value(value) {
+        this._value = value;
+        if (this.component) {
+            this.component.value = value;
+        }
+    }
+    /**
+     * Gets the current position value of the scrollbar.
+     * @returns The scrollbar value.
+     */
+    get value() {
+        return this._value;
+    }
+    /**
+     * Sets the size of the handle relative to the size of the track, in the range 0 to 1.
+     * @param value - The handle size.
+     */
+    set handleSize(value) {
+        this._handleSize = value;
+        if (this.component) {
+            this.component.handleSize = value;
+        }
+    }
+    /**
+     * Gets the size of the handle relative to the size of the track.
+     * @returns The handle size.
+     */
+    get handleSize() {
+        return this._handleSize;
+    }
+    /**
+     * Sets the reference (CSS selector, element id or entity name) to the `<pc-entity>` used as the
+     * scrollbar handle.
+     * @param value - The handle entity reference.
+     */
+    set handle(value) {
+        this._handle = value;
+        const entity = getEntity(value);
+        if (this.component && entity) {
+            this.component.handleEntity = entity;
+        }
+    }
+    /**
+     * Gets the reference to the `<pc-entity>` used as the scrollbar handle.
+     * @returns The handle entity reference.
+     */
+    get handle() {
+        return this._handle;
+    }
+    static get observedAttributes() {
+        return [
+            ...super.observedAttributes,
+            'orientation',
+            'value',
+            'handle-size',
+            'handle'
+        ];
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        super.attributeChangedCallback(name, _oldValue, newValue);
+        switch (name) {
+            case 'orientation':
+                this.orientation = parseEnum(newValue, orientations, ORIENTATION_HORIZONTAL);
+                break;
+            case 'value':
+                this.value = Number(newValue);
+                break;
+            case 'handle-size':
+                this.handleSize = Number(newValue);
+                break;
+            case 'handle':
+                this.handle = newValue;
+                break;
+        }
+    }
+}
+customElements.define('pc-scrollbar', ScrollbarComponentElement);
+
+const scrollModes = new Map([
+    ['clamp', SCROLL_MODE_CLAMP],
+    ['bounce', SCROLL_MODE_BOUNCE],
+    ['infinite', SCROLL_MODE_INFINITE]
+]);
+const visibilities = new Map([
+    ['always', SCROLLBAR_VISIBILITY_SHOW_ALWAYS],
+    ['when-required', SCROLLBAR_VISIBILITY_SHOW_WHEN_REQUIRED]
+]);
+/**
+ * The ScrollViewComponentElement interface provides properties and methods for manipulating
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-scrollview/ | `<pc-scrollview>`} elements.
+ * The ScrollViewComponentElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
+ *
+ * @category Components
+ */
+class ScrollViewComponentElement extends ComponentElement {
+    /** @ignore */
+    constructor() {
+        super('scrollview');
+        this._horizontal = true;
+        this._vertical = true;
+        this._scrollMode = SCROLL_MODE_BOUNCE;
+        this._bounceAmount = 0.1;
+        this._friction = 0.05;
+        this._useMouseWheel = true;
+        this._mouseWheelSensitivity = new Vec2(1, 1);
+        this._horizontalScrollbarVisibility = SCROLLBAR_VISIBILITY_SHOW_WHEN_REQUIRED;
+        this._verticalScrollbarVisibility = SCROLLBAR_VISIBILITY_SHOW_WHEN_REQUIRED;
+        this._viewport = '';
+        this._content = '';
+        this._horizontalScrollbar = '';
+        this._verticalScrollbar = '';
+    }
+    getInitialComponentData() {
+        const data = {
+            horizontal: this._horizontal,
+            vertical: this._vertical,
+            scrollMode: this._scrollMode,
+            bounceAmount: this._bounceAmount,
+            friction: this._friction,
+            useMouseWheel: this._useMouseWheel,
+            mouseWheelSensitivity: this._mouseWheelSensitivity,
+            horizontalScrollbarVisibility: this._horizontalScrollbarVisibility,
+            verticalScrollbarVisibility: this._verticalScrollbarVisibility
+        };
+        const viewport = getEntity(this._viewport);
+        if (viewport) {
+            data.viewportEntity = viewport;
+        }
+        const content = getEntity(this._content);
+        if (content) {
+            data.contentEntity = content;
+        }
+        const horizontalScrollbar = getEntity(this._horizontalScrollbar);
+        if (horizontalScrollbar) {
+            data.horizontalScrollbarEntity = horizontalScrollbar;
+        }
+        const verticalScrollbar = getEntity(this._verticalScrollbar);
+        if (verticalScrollbar) {
+            data.verticalScrollbarEntity = verticalScrollbar;
+        }
+        return data;
+    }
+    /**
+     * Gets the underlying PlayCanvas scroll view component.
+     * @returns The scroll view component.
+     */
+    get component() {
+        return super.component;
+    }
+    /**
+     * Sets whether horizontal scrolling is enabled.
+     * @param value - Whether horizontal scrolling is enabled.
+     */
+    set horizontal(value) {
+        this._horizontal = value;
+        if (this.component) {
+            this.component.horizontal = value;
+        }
+    }
+    /**
+     * Gets whether horizontal scrolling is enabled.
+     * @returns Whether horizontal scrolling is enabled.
+     */
+    get horizontal() {
+        return this._horizontal;
+    }
+    /**
+     * Sets whether vertical scrolling is enabled.
+     * @param value - Whether vertical scrolling is enabled.
+     */
+    set vertical(value) {
+        this._vertical = value;
+        if (this.component) {
+            this.component.vertical = value;
+        }
+    }
+    /**
+     * Gets whether vertical scrolling is enabled.
+     * @returns Whether vertical scrolling is enabled.
+     */
+    get vertical() {
+        return this._vertical;
+    }
+    /**
+     * Sets how the scroll view should behave when the content is scrolled beyond its bounds. Can be
+     * `clamp` (0), `bounce` (1) or `infinite` (2).
+     * @param value - The scroll mode.
+     */
+    set scrollMode(value) {
+        this._scrollMode = value;
+        if (this.component) {
+            this.component.scrollMode = value;
+        }
+    }
+    /**
+     * Gets how the scroll view behaves when the content is scrolled beyond its bounds.
+     * @returns The scroll mode.
+     */
+    get scrollMode() {
+        return this._scrollMode;
+    }
+    /**
+     * Sets how far the content is allowed to bounce beyond its bounds when `scroll-mode` is
+     * `bounce`, in the range 0 to 1.
+     * @param value - The bounce amount.
+     */
+    set bounceAmount(value) {
+        this._bounceAmount = value;
+        if (this.component) {
+            this.component.bounceAmount = value;
+        }
+    }
+    /**
+     * Gets the bounce amount.
+     * @returns The bounce amount.
+     */
+    get bounceAmount() {
+        return this._bounceAmount;
+    }
+    /**
+     * Sets how freely the content moves once thrown, in the range 0 (no friction) to 1.
+     * @param value - The friction.
+     */
+    set friction(value) {
+        this._friction = value;
+        if (this.component) {
+            this.component.friction = value;
+        }
+    }
+    /**
+     * Gets the friction.
+     * @returns The friction.
+     */
+    get friction() {
+        return this._friction;
+    }
+    /**
+     * Sets whether the scroll view responds to mouse wheel events.
+     * @param value - Whether to use the mouse wheel.
+     */
+    set useMouseWheel(value) {
+        this._useMouseWheel = value;
+        if (this.component) {
+            this.component.useMouseWheel = value;
+        }
+    }
+    /**
+     * Gets whether the scroll view responds to mouse wheel events.
+     * @returns Whether the mouse wheel is used.
+     */
+    get useMouseWheel() {
+        return this._useMouseWheel;
+    }
+    /**
+     * Sets the mouse wheel sensitivity as a Vec2 (horizontal, vertical). A value of 0 on an axis
+     * disables mouse wheel scrolling for that axis.
+     * @param value - The mouse wheel sensitivity.
+     */
+    set mouseWheelSensitivity(value) {
+        this._mouseWheelSensitivity = value;
+        if (this.component) {
+            this.component.mouseWheelSensitivity = value;
+        }
+    }
+    /**
+     * Gets the mouse wheel sensitivity.
+     * @returns The mouse wheel sensitivity.
+     */
+    get mouseWheelSensitivity() {
+        return this._mouseWheelSensitivity;
+    }
+    /**
+     * Sets the visibility of the horizontal scrollbar. Can be `always` (0) or `when-required` (1).
+     * @param value - The horizontal scrollbar visibility.
+     */
+    set horizontalScrollbarVisibility(value) {
+        this._horizontalScrollbarVisibility = value;
+        if (this.component) {
+            this.component.horizontalScrollbarVisibility = value;
+        }
+    }
+    /**
+     * Gets the visibility of the horizontal scrollbar.
+     * @returns The horizontal scrollbar visibility.
+     */
+    get horizontalScrollbarVisibility() {
+        return this._horizontalScrollbarVisibility;
+    }
+    /**
+     * Sets the visibility of the vertical scrollbar. Can be `always` (0) or `when-required` (1).
+     * @param value - The vertical scrollbar visibility.
+     */
+    set verticalScrollbarVisibility(value) {
+        this._verticalScrollbarVisibility = value;
+        if (this.component) {
+            this.component.verticalScrollbarVisibility = value;
+        }
+    }
+    /**
+     * Gets the visibility of the vertical scrollbar.
+     * @returns The vertical scrollbar visibility.
+     */
+    get verticalScrollbarVisibility() {
+        return this._verticalScrollbarVisibility;
+    }
+    /**
+     * Sets the reference (CSS selector, element id or entity name) to the `<pc-entity>` used as the
+     * viewport, which clips the content to the scroll view's bounds.
+     * @param value - The viewport entity reference.
+     */
+    set viewport(value) {
+        this._viewport = value;
+        const entity = getEntity(value);
+        if (this.component && entity) {
+            this.component.viewportEntity = entity;
+        }
+    }
+    /**
+     * Gets the reference to the `<pc-entity>` used as the viewport.
+     * @returns The viewport entity reference.
+     */
+    get viewport() {
+        return this._viewport;
+    }
+    /**
+     * Sets the reference (CSS selector, element id or entity name) to the `<pc-entity>` used as the
+     * content, which is moved as the scroll view is scrolled.
+     * @param value - The content entity reference.
+     */
+    set content(value) {
+        this._content = value;
+        const entity = getEntity(value);
+        if (this.component && entity) {
+            this.component.contentEntity = entity;
+        }
+    }
+    /**
+     * Gets the reference to the `<pc-entity>` used as the content.
+     * @returns The content entity reference.
+     */
+    get content() {
+        return this._content;
+    }
+    /**
+     * Sets the reference (CSS selector, element id or entity name) to the `<pc-entity>` containing
+     * the horizontal `<pc-scrollbar>`.
+     * @param value - The horizontal scrollbar entity reference.
+     */
+    set horizontalScrollbar(value) {
+        this._horizontalScrollbar = value;
+        const entity = getEntity(value);
+        if (this.component && entity) {
+            this.component.horizontalScrollbarEntity = entity;
+        }
+    }
+    /**
+     * Gets the reference to the `<pc-entity>` containing the horizontal scrollbar.
+     * @returns The horizontal scrollbar entity reference.
+     */
+    get horizontalScrollbar() {
+        return this._horizontalScrollbar;
+    }
+    /**
+     * Sets the reference (CSS selector, element id or entity name) to the `<pc-entity>` containing
+     * the vertical `<pc-scrollbar>`.
+     * @param value - The vertical scrollbar entity reference.
+     */
+    set verticalScrollbar(value) {
+        this._verticalScrollbar = value;
+        const entity = getEntity(value);
+        if (this.component && entity) {
+            this.component.verticalScrollbarEntity = entity;
+        }
+    }
+    /**
+     * Gets the reference to the `<pc-entity>` containing the vertical scrollbar.
+     * @returns The vertical scrollbar entity reference.
+     */
+    get verticalScrollbar() {
+        return this._verticalScrollbar;
+    }
+    static get observedAttributes() {
+        return [
+            ...super.observedAttributes,
+            'horizontal',
+            'vertical',
+            'scroll-mode',
+            'bounce-amount',
+            'friction',
+            'use-mouse-wheel',
+            'mouse-wheel-sensitivity',
+            'horizontal-scrollbar-visibility',
+            'vertical-scrollbar-visibility',
+            'viewport',
+            'content',
+            'horizontal-scrollbar',
+            'vertical-scrollbar'
+        ];
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        super.attributeChangedCallback(name, _oldValue, newValue);
+        switch (name) {
+            case 'horizontal':
+                this.horizontal = newValue !== 'false';
+                break;
+            case 'vertical':
+                this.vertical = newValue !== 'false';
+                break;
+            case 'scroll-mode':
+                this.scrollMode = parseEnum(newValue, scrollModes, SCROLL_MODE_BOUNCE);
+                break;
+            case 'bounce-amount':
+                this.bounceAmount = Number(newValue);
+                break;
+            case 'friction':
+                this.friction = Number(newValue);
+                break;
+            case 'use-mouse-wheel':
+                this.useMouseWheel = newValue !== 'false';
+                break;
+            case 'mouse-wheel-sensitivity':
+                this.mouseWheelSensitivity = parseVec2(newValue);
+                break;
+            case 'horizontal-scrollbar-visibility':
+                this.horizontalScrollbarVisibility = parseEnum(newValue, visibilities, SCROLLBAR_VISIBILITY_SHOW_WHEN_REQUIRED);
+                break;
+            case 'vertical-scrollbar-visibility':
+                this.verticalScrollbarVisibility = parseEnum(newValue, visibilities, SCROLLBAR_VISIBILITY_SHOW_WHEN_REQUIRED);
+                break;
+            case 'viewport':
+                this.viewport = newValue;
+                break;
+            case 'content':
+                this.content = newValue;
+                break;
+            case 'horizontal-scrollbar':
+                this.horizontalScrollbar = newValue;
+                break;
+            case 'vertical-scrollbar':
+                this.verticalScrollbar = newValue;
+                break;
+        }
+    }
+}
+customElements.define('pc-scrollview', ScrollViewComponentElement);
+
 /**
  * The ScriptComponentElement interface provides properties and methods for manipulating
  * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-scripts/ | `<pc-scripts>`} elements.
@@ -5035,5 +6875,5 @@ class SkyElement extends AsyncElement {
 }
 customElements.define('pc-sky', SkyElement);
 
-export { AppElement, AssetElement, AsyncElement, CameraComponentElement, CollisionComponentElement, ComponentElement, ElementComponentElement, EntityElement, GSplatComponentElement, LightComponentElement, ListenerComponentElement, MaterialElement, ModelElement, ModuleElement, ParticleSystemComponentElement, RenderComponentElement, RigidBodyComponentElement, SceneElement, ScreenComponentElement, ScriptComponentElement, ScriptElement, SkyElement, SoundComponentElement, SoundSlotElement };
+export { AppElement, AssetElement, AsyncElement, ButtonComponentElement, CameraComponentElement, CollisionComponentElement, ComponentElement, ElementComponentElement, EntityElement, GSplatComponentElement, LayoutChildComponentElement, LayoutGroupComponentElement, LightComponentElement, ListenerComponentElement, MaterialElement, ModelElement, ModuleElement, ParticleSystemComponentElement, RenderComponentElement, RigidBodyComponentElement, SceneElement, ScreenComponentElement, ScriptComponentElement, ScriptElement, ScrollViewComponentElement, ScrollbarComponentElement, SkyElement, SoundComponentElement, SoundSlotElement };
 //# sourceMappingURL=pwc.mjs.map