@playcanvas/web-components 0.6.0 → 0.7.1

package/dist/pwc.js

@@ -148,6 +148,10 @@
             createOptions.graphicsDevice = device;
             createOptions.keyboard = new playcanvas.Keyboard(window);
             createOptions.mouse = new playcanvas.Mouse(this._canvas);
+            createOptions.elementInput = new playcanvas.ElementInput(this._canvas, {
+                useMouse: true,
+                useTouch: true
+            });
             createOptions.componentSystems = [
                 playcanvas.AnimComponentSystem,
                 playcanvas.AnimationComponentSystem,
@@ -747,6 +751,50 @@
         const components = value.split(' ').map(Number);
         return new playcanvas.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
@@ -785,12 +833,22 @@
              * 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 playcanvas.Entity(this.getAttribute('name') || this._name, app);
             const enabled = this.getAttribute('enabled');
@@ -839,8 +897,9 @@
             });
         }
         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);
@@ -880,6 +939,7 @@
                 // Destroy the entity
                 this.entity.destroy();
                 this.entity = null;
+                this._built = false;
             }
         }
         /**
@@ -1245,6 +1305,11 @@
     	};
     })();
 
+    const renderModes = new Map([
+        ['simple', playcanvas.SPRITE_RENDERMODE_SIMPLE],
+        ['sliced', playcanvas.SPRITE_RENDERMODE_SLICED],
+        ['tiled', playcanvas.SPRITE_RENDERMODE_TILED]
+    ]);
     const extToType = new Map([
         ['bin', 'binary'],
         ['css', 'css'],
@@ -1318,6 +1383,9 @@
                 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 playcanvas.Asset(id, type, { url: src }, undefined, {
                     // @ts-ignore TODO no definition in pc
@@ -1326,12 +1394,69 @@
                     }
                 });
             }
+            else if (type === 'sprite') {
+                // Sprite assets have no file of their own; their data references a texture atlas asset.
+                // @ts-ignore
+                this.asset = new playcanvas.Asset(id, type, null, data);
+            }
             else {
                 // @ts-ignore
-                this.asset = new playcanvas.Asset(id, type, { url: src });
+                this.asset = new playcanvas.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, playcanvas.SPRITE_RENDERMODE_SIMPLE);
+                }
+                // Apply engine defaults for any values not supplied.
+                data.renderMode = (_b = data.renderMode) !== null && _b !== void 0 ? _b : playcanvas.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();
@@ -1471,6 +1596,396 @@
     }
     customElements.define('pc-listener', ListenerComponentElement);
 
+    const transitionModes = new Map([
+        ['tint', playcanvas.BUTTON_TRANSITION_MODE_TINT],
+        ['sprite', playcanvas.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 playcanvas.Vec4(0, 0, 0, 0);
+            this._transitionMode = playcanvas.BUTTON_TRANSITION_MODE_TINT;
+            this._hoverTint = new playcanvas.Color(1, 1, 1, 1);
+            this._pressedTint = new playcanvas.Color(1, 1, 1, 1);
+            this._inactiveTint = new playcanvas.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, playcanvas.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', playcanvas.TONEMAP_NONE],
         ['linear', playcanvas.TONEMAP_LINEAR],
@@ -2123,34 +2638,94 @@
             this._anchor = new playcanvas.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 playcanvas.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 playcanvas.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.
@@ -2177,7 +2752,7 @@
             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) {
@@ -2195,7 +2770,8 @@
             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) {
@@ -2211,6 +2787,24 @@
         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.
@@ -2262,6 +2856,23 @@
         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.
@@ -2280,56 +2891,195 @@
             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.
@@ -2364,19 +3114,103 @@
         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'
             ];
@@ -2384,46 +3218,544 @@
         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', playcanvas.ORIENTATION_HORIZONTAL],
+        ['vertical', playcanvas.ORIENTATION_VERTICAL]
+    ]);
+    const fittings = new Map([
+        ['none', playcanvas.FITTING_NONE],
+        ['stretch', playcanvas.FITTING_STRETCH],
+        ['shrink', playcanvas.FITTING_SHRINK],
+        ['both', playcanvas.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 = playcanvas.ORIENTATION_HORIZONTAL;
+            this._reverseX = false;
+            this._reverseY = false;
+            this._alignment = new playcanvas.Vec2(0, 1);
+            this._padding = new playcanvas.Vec4(0, 0, 0, 0);
+            this._spacing = new playcanvas.Vec2(0, 0);
+            this._widthFitting = playcanvas.FITTING_NONE;
+            this._heightFitting = playcanvas.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, playcanvas.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, playcanvas.FITTING_NONE);
                     break;
-                case 'width':
-                    this.width = Number(newValue);
+                case 'height-fitting':
+                    this.heightFitting = parseEnum(newValue, fittings, playcanvas.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', playcanvas.SHADOW_PCF1_16F],
@@ -3612,6 +4944,514 @@
     }
     customElements.define('pc-screen', ScreenComponentElement);
 
+    const orientations = new Map([
+        ['horizontal', playcanvas.ORIENTATION_HORIZONTAL],
+        ['vertical', playcanvas.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 = playcanvas.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, playcanvas.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', playcanvas.SCROLL_MODE_CLAMP],
+        ['bounce', playcanvas.SCROLL_MODE_BOUNCE],
+        ['infinite', playcanvas.SCROLL_MODE_INFINITE]
+    ]);
+    const visibilities = new Map([
+        ['always', playcanvas.SCROLLBAR_VISIBILITY_SHOW_ALWAYS],
+        ['when-required', playcanvas.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 = playcanvas.SCROLL_MODE_BOUNCE;
+            this._bounceAmount = 0.1;
+            this._friction = 0.05;
+            this._useMouseWheel = true;
+            this._mouseWheelSensitivity = new playcanvas.Vec2(1, 1);
+            this._horizontalScrollbarVisibility = playcanvas.SCROLLBAR_VISIBILITY_SHOW_WHEN_REQUIRED;
+            this._verticalScrollbarVisibility = playcanvas.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, playcanvas.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, playcanvas.SCROLLBAR_VISIBILITY_SHOW_WHEN_REQUIRED);
+                    break;
+                case 'vertical-scrollbar-visibility':
+                    this.verticalScrollbarVisibility = parseEnum(newValue, visibilities, playcanvas.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.
@@ -5042,12 +6882,15 @@
     exports.AppElement = AppElement;
     exports.AssetElement = AssetElement;
     exports.AsyncElement = AsyncElement;
+    exports.ButtonComponentElement = ButtonComponentElement;
     exports.CameraComponentElement = CameraComponentElement;
     exports.CollisionComponentElement = CollisionComponentElement;
     exports.ComponentElement = ComponentElement;
     exports.ElementComponentElement = ElementComponentElement;
     exports.EntityElement = EntityElement;
     exports.GSplatComponentElement = GSplatComponentElement;
+    exports.LayoutChildComponentElement = LayoutChildComponentElement;
+    exports.LayoutGroupComponentElement = LayoutGroupComponentElement;
     exports.LightComponentElement = LightComponentElement;
     exports.ListenerComponentElement = ListenerComponentElement;
     exports.MaterialElement = MaterialElement;
@@ -5060,6 +6903,8 @@
     exports.ScreenComponentElement = ScreenComponentElement;
     exports.ScriptComponentElement = ScriptComponentElement;
     exports.ScriptElement = ScriptElement;
+    exports.ScrollViewComponentElement = ScrollViewComponentElement;
+    exports.ScrollbarComponentElement = ScrollbarComponentElement;
     exports.SkyElement = SkyElement;
     exports.SoundComponentElement = SoundComponentElement;
     exports.SoundSlotElement = SoundSlotElement;