@playcanvas/web-components 0.8.1 → 0.9.0

package/src/components/gsplat-component.ts

@@ -2,6 +2,7 @@ import { GSplatComponent } from 'playcanvas';
 
 import { ComponentElement } from './component';
 import { AssetElement } from '../asset';
+import { parseBool, parseNumber } from '../utils';
 
 /**
  * The GSplatComponentElement interface provides properties and methods for manipulating
@@ -44,8 +45,8 @@ class GSplatComponentElement extends ComponentElement {
      * Gets the underlying PlayCanvas gsplat component.
      * @returns The gsplat component.
      */
-    get component(): GSplatComponent | null {
-        return super.component as GSplatComponent | null;
+    get component(): GSplatComponent {
+        return super.component as GSplatComponent;
     }
 
     /**
@@ -195,19 +196,19 @@ class GSplatComponentElement extends ComponentElement {
                 this.asset = newValue;
                 break;
             case 'cast-shadows':
-                this.castShadows = this.hasAttribute('cast-shadows');
+                this.castShadows = parseBool(newValue, false);
                 break;
             case 'lod-base-distance':
-                this.lodBaseDistance = Number(newValue);
+                this.lodBaseDistance = parseNumber(newValue, 5, name);
                 break;
             case 'lod-multiplier':
-                this.lodMultiplier = Number(newValue);
+                this.lodMultiplier = parseNumber(newValue, 3, name);
                 break;
             case 'lod-range-min':
-                this.lodRangeMin = Number(newValue);
+                this.lodRangeMin = parseNumber(newValue, 0, name);
                 break;
             case 'lod-range-max':
-                this.lodRangeMax = Number(newValue);
+                this.lodRangeMax = parseNumber(newValue, 99, name);
                 break;
         }
     }
@@ -215,4 +216,10 @@ class GSplatComponentElement extends ComponentElement {
 
 customElements.define('pc-gsplat', GSplatComponentElement);
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pc-gsplat': GSplatComponentElement;
+    }
+}
+
 export { GSplatComponentElement };

package/src/components/layoutchild-component.ts

@@ -1,6 +1,7 @@
 import { LayoutChildComponent } from 'playcanvas';
 
 import { ComponentElement } from './component';
+import { parseBool, parseNumber } from '../utils';
 
 /**
  * The LayoutChildComponentElement interface provides properties and methods for manipulating
@@ -46,8 +47,8 @@ class LayoutChildComponentElement extends ComponentElement {
      * Gets the underlying PlayCanvas layout child component.
      * @returns The layout child component.
      */
-    get component(): LayoutChildComponent | null {
-        return super.component as LayoutChildComponent | null;
+    get component(): LayoutChildComponent {
+        return super.component as LayoutChildComponent;
     }
 
     /**
@@ -203,25 +204,25 @@ class LayoutChildComponentElement extends ComponentElement {
 
         switch (name) {
             case 'min-width':
-                this.minWidth = Number(newValue);
+                this.minWidth = parseNumber(newValue, 0, name);
                 break;
             case 'min-height':
-                this.minHeight = Number(newValue);
+                this.minHeight = parseNumber(newValue, 0, name);
                 break;
             case 'max-width':
-                this.maxWidth = newValue === '' ? null : Number(newValue);
+                this.maxWidth = parseNumber(newValue, null, name);
                 break;
             case 'max-height':
-                this.maxHeight = newValue === '' ? null : Number(newValue);
+                this.maxHeight = parseNumber(newValue, null, name);
                 break;
             case 'fit-width-proportion':
-                this.fitWidthProportion = Number(newValue);
+                this.fitWidthProportion = parseNumber(newValue, 0, name);
                 break;
             case 'fit-height-proportion':
-                this.fitHeightProportion = Number(newValue);
+                this.fitHeightProportion = parseNumber(newValue, 0, name);
                 break;
             case 'exclude-from-layout':
-                this.excludeFromLayout = newValue !== 'false';
+                this.excludeFromLayout = parseBool(newValue, false);
                 break;
         }
     }
@@ -229,4 +230,10 @@ class LayoutChildComponentElement extends ComponentElement {
 
 customElements.define('pc-layoutchild', LayoutChildComponentElement);
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pc-layoutchild': LayoutChildComponentElement;
+    }
+}
+
 export { LayoutChildComponentElement };

package/src/components/layoutgroup-component.ts

@@ -1,14 +1,14 @@
 import { FITTING_NONE, FITTING_STRETCH, FITTING_SHRINK, FITTING_BOTH, LayoutGroupComponent, ORIENTATION_HORIZONTAL, ORIENTATION_VERTICAL, Vec2, Vec4 } from 'playcanvas';
 
 import { ComponentElement } from './component';
-import { parseEnum, parseVec2, parseVec4 } from '../utils';
+import { parseBool, parseEnum, parseVec2, parseVec4 } from '../utils';
 
-const orientations = new Map<string, number>([
+const orientations = new Map<'horizontal' | 'vertical', number>([
     ['horizontal', ORIENTATION_HORIZONTAL],
     ['vertical', ORIENTATION_VERTICAL]
 ]);
 
-const fittings = new Map<string, number>([
+const fittings = new Map<'none' | 'stretch' | 'shrink' | 'both', number>([
     ['none', FITTING_NONE],
     ['stretch', FITTING_STRETCH],
     ['shrink', FITTING_SHRINK],
@@ -24,7 +24,7 @@ const fittings = new Map<string, number>([
  * @category Components
  */
 class LayoutGroupComponentElement extends ComponentElement {
-    private _orientation: number = ORIENTATION_HORIZONTAL;
+    private _orientation: 'horizontal' | 'vertical' = 'horizontal';
 
     private _reverseX = false;
 
@@ -36,9 +36,9 @@ class LayoutGroupComponentElement extends ComponentElement {
 
     private _spacing = new Vec2(0, 0);
 
-    private _widthFitting: number = FITTING_NONE;
+    private _widthFitting: 'none' | 'stretch' | 'shrink' | 'both' = 'none';
 
-    private _heightFitting: number = FITTING_NONE;
+    private _heightFitting: 'none' | 'stretch' | 'shrink' | 'both' = 'none';
 
     private _wrap = false;
 
@@ -49,14 +49,14 @@ class LayoutGroupComponentElement extends ComponentElement {
 
     getInitialComponentData() {
         return {
-            orientation: this._orientation,
+            orientation: orientations.get(this._orientation),
             reverseX: this._reverseX,
             reverseY: this._reverseY,
             alignment: this._alignment,
             padding: this._padding,
             spacing: this._spacing,
-            widthFitting: this._widthFitting,
-            heightFitting: this._heightFitting,
+            widthFitting: fittings.get(this._widthFitting),
+            heightFitting: fittings.get(this._heightFitting),
             wrap: this._wrap
         };
     }
@@ -65,18 +65,19 @@ class LayoutGroupComponentElement extends ComponentElement {
      * Gets the underlying PlayCanvas layout group component.
      * @returns The layout group component.
      */
-    get component(): LayoutGroupComponent | null {
-        return super.component as LayoutGroupComponent | null;
+    get component(): LayoutGroupComponent {
+        return super.component as LayoutGroupComponent;
     }
 
     /**
-     * Sets the orientation of the layout group. Can be `horizontal` (0) or `vertical` (1).
+     * Sets the orientation of the layout group. Can be `horizontal` or `vertical`. Defaults to
+     * `horizontal`.
      * @param value - The orientation.
      */
-    set orientation(value: number) {
+    set orientation(value: 'horizontal' | 'vertical') {
         this._orientation = value;
         if (this.component) {
-            this.component.orientation = value;
+            this.component.orientation = orientations.get(value) ?? ORIENTATION_HORIZONTAL;
         }
     }
 
@@ -184,14 +185,14 @@ class LayoutGroupComponentElement extends ComponentElement {
     }
 
     /**
-     * Sets the fitting mode along the horizontal axis. Can be `none` (0), `stretch` (1), `shrink`
-     * (2) or `both` (3).
+     * Sets the fitting mode along the horizontal axis. Can be `none`, `stretch`, `shrink` or
+     * `both`. Defaults to `none`.
      * @param value - The width fitting mode.
      */
-    set widthFitting(value: number) {
+    set widthFitting(value: 'none' | 'stretch' | 'shrink' | 'both') {
         this._widthFitting = value;
         if (this.component) {
-            this.component.widthFitting = value;
+            this.component.widthFitting = fittings.get(value) ?? FITTING_NONE;
         }
     }
 
@@ -204,14 +205,14 @@ class LayoutGroupComponentElement extends ComponentElement {
     }
 
     /**
-     * Sets the fitting mode along the vertical axis. Can be `none` (0), `stretch` (1), `shrink` (2)
-     * or `both` (3).
+     * Sets the fitting mode along the vertical axis. Can be `none`, `stretch`, `shrink` or
+     * `both`. Defaults to `none`.
      * @param value - The height fitting mode.
      */
-    set heightFitting(value: number) {
+    set heightFitting(value: 'none' | 'stretch' | 'shrink' | 'both') {
         this._heightFitting = value;
         if (this.component) {
-            this.component.heightFitting = value;
+            this.component.heightFitting = fittings.get(value) ?? FITTING_NONE;
         }
     }
 
@@ -262,31 +263,31 @@ class LayoutGroupComponentElement extends ComponentElement {
 
         switch (name) {
             case 'orientation':
-                this.orientation = parseEnum(newValue, orientations, ORIENTATION_HORIZONTAL);
+                this.orientation = parseEnum(newValue, orientations, 'horizontal', name);
                 break;
             case 'reverse-x':
-                this.reverseX = newValue !== 'false';
+                this.reverseX = parseBool(newValue, false);
                 break;
             case 'reverse-y':
-                this.reverseY = newValue !== 'false';
+                this.reverseY = parseBool(newValue, false);
                 break;
             case 'alignment':
-                this.alignment = parseVec2(newValue);
+                this.alignment = parseVec2(newValue, new Vec2(0, 1), name);
                 break;
             case 'padding':
-                this.padding = parseVec4(newValue);
+                this.padding = parseVec4(newValue, Vec4.ZERO, name);
                 break;
             case 'spacing':
-                this.spacing = parseVec2(newValue);
+                this.spacing = parseVec2(newValue, Vec2.ZERO, name);
                 break;
             case 'width-fitting':
-                this.widthFitting = parseEnum(newValue, fittings, FITTING_NONE);
+                this.widthFitting = parseEnum(newValue, fittings, 'none', name);
                 break;
             case 'height-fitting':
-                this.heightFitting = parseEnum(newValue, fittings, FITTING_NONE);
+                this.heightFitting = parseEnum(newValue, fittings, 'none', name);
                 break;
             case 'wrap':
-                this.wrap = newValue !== 'false';
+                this.wrap = parseBool(newValue, false);
                 break;
         }
     }
@@ -294,4 +295,10 @@ class LayoutGroupComponentElement extends ComponentElement {
 
 customElements.define('pc-layoutgroup', LayoutGroupComponentElement);
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pc-layoutgroup': LayoutGroupComponentElement;
+    }
+}
+
 export { LayoutGroupComponentElement };

package/src/components/light-component.ts

@@ -1,9 +1,9 @@
 import { Color, LightComponent, SHADOW_PCF1_16F, SHADOW_PCF1_32F, SHADOW_PCF3_16F, SHADOW_PCF3_32F, SHADOW_PCF5_16F, SHADOW_PCF5_32F, SHADOW_PCSS_32F, SHADOW_VSM_16F, SHADOW_VSM_32F } from 'playcanvas';
 
 import { ComponentElement } from './component';
-import { parseColor } from '../utils';
+import { parseBool, parseColor, parseEnum, parseNumber } from '../utils';
 
-const shadowTypes = new Map([
+const shadowTypes = new Map<'pcf1-16f' | 'pcf1-32f' | 'pcf3-16f' | 'pcf3-32f' | 'pcf5-16f' | 'pcf5-32f' | 'vsm-16f' | 'vsm-32f' | 'pcss-32f', number>([
     ['pcf1-16f', SHADOW_PCF1_16F],
     ['pcf1-32f', SHADOW_PCF1_32F],
     ['pcf3-16f', SHADOW_PCF3_16F],
@@ -48,7 +48,7 @@ class LightComponentElement extends ComponentElement {
 
     private _shadowType: 'pcf1-16f' | 'pcf1-32f' | 'pcf3-16f' | 'pcf3-32f' | 'pcf5-16f' | 'pcf5-32f' | 'vsm-16f' | 'vsm-32f' | 'pcss-32f' = 'pcf3-32f';
 
-    private _type = 'directional';
+    private _type: 'directional' | 'omni' | 'spot' = 'directional';
 
     private _vsmBias = 0.01;
 
@@ -95,8 +95,8 @@ class LightComponentElement extends ComponentElement {
      * Gets the underlying PlayCanvas light component.
      * @returns The light component.
      */
-    get component(): LightComponent | null {
-        return super.component as LightComponent | null;
+    get component(): LightComponent {
+        return super.component as LightComponent;
     }
 
     /**
@@ -338,15 +338,11 @@ class LightComponentElement extends ComponentElement {
     }
 
     /**
-     * Sets the type of the light.
+     * Sets the type of the light. Can be `directional`, `omni` or `spot`. Defaults to
+     * `directional`.
      * @param value - The type.
      */
-    set type(value: string) {
-        if (!['directional', 'omni', 'spot'].includes(value)) {
-            console.warn(`Invalid light type '${value}', using default type '${this._type}'.`);
-            return;
-        }
-
+    set type(value: 'directional' | 'omni' | 'spot') {
         this._type = value;
         if (this.component) {
             this.component.type = value;
@@ -505,61 +501,61 @@ class LightComponentElement extends ComponentElement {
 
         switch (name) {
             case 'color':
-                this.color = parseColor(newValue);
+                this.color = parseColor(newValue, Color.WHITE, name);
                 break;
             case 'cast-shadows':
-                this.castShadows = this.hasAttribute('cast-shadows');
+                this.castShadows = parseBool(newValue, false);
                 break;
             case 'inner-cone-angle':
-                this.innerConeAngle = Number(newValue);
+                this.innerConeAngle = parseNumber(newValue, 40, name);
                 break;
             case 'intensity':
-                this.intensity = Number(newValue);
+                this.intensity = parseNumber(newValue, 1, name);
                 break;
             case 'normal-offset-bias':
-                this.normalOffsetBias = Number(newValue);
+                this.normalOffsetBias = parseNumber(newValue, 0.05, name);
                 break;
             case 'outer-cone-angle':
-                this.outerConeAngle = Number(newValue);
+                this.outerConeAngle = parseNumber(newValue, 45, name);
                 break;
             case 'penumbra-falloff':
-                this.penumbraFalloff = Number(newValue);
+                this.penumbraFalloff = parseNumber(newValue, 1, name);
                 break;
             case 'penumbra-size':
-                this.penumbraSize = Number(newValue);
+                this.penumbraSize = parseNumber(newValue, 1, name);
                 break;
             case 'range':
-                this.range = Number(newValue);
+                this.range = parseNumber(newValue, 10, name);
                 break;
             case 'shadow-bias':
-                this.shadowBias = Number(newValue);
+                this.shadowBias = parseNumber(newValue, 0.2, name);
                 break;
             case 'shadow-distance':
-                this.shadowDistance = Number(newValue);
+                this.shadowDistance = parseNumber(newValue, 16, name);
                 break;
             case 'shadow-blocker-samples':
-                this.shadowBlockerSamples = Number(newValue);
+                this.shadowBlockerSamples = parseNumber(newValue, 16, name);
                 break;
             case 'shadow-resolution':
-                this.shadowResolution = Number(newValue);
+                this.shadowResolution = parseNumber(newValue, 1024, name);
                 break;
             case 'shadow-intensity':
-                this.shadowIntensity = Number(newValue);
+                this.shadowIntensity = parseNumber(newValue, 1, name);
                 break;
             case 'shadow-samples':
-                this.shadowSamples = Number(newValue);
+                this.shadowSamples = parseNumber(newValue, 16, name);
                 break;
             case 'shadow-type':
-                this.shadowType = newValue as 'pcf1-16f' | 'pcf1-32f' | 'pcf3-16f' | 'pcf3-32f' | 'pcf5-16f' | 'pcf5-32f' | 'vsm-16f' | 'vsm-32f' | 'pcss-32f';
+                this.shadowType = parseEnum(newValue, shadowTypes, 'pcf3-32f', name);
                 break;
             case 'type':
-                this.type = newValue;
+                this.type = parseEnum(newValue, ['directional', 'omni', 'spot'], 'directional', name);
                 break;
             case 'vsm-bias':
-                this.vsmBias = Number(newValue);
+                this.vsmBias = parseNumber(newValue, 0.01, name);
                 break;
             case 'vsm-blur-size':
-                this.vsmBlurSize = Number(newValue);
+                this.vsmBlurSize = parseNumber(newValue, 11, name);
                 break;
         }
     }
@@ -567,4 +563,10 @@ class LightComponentElement extends ComponentElement {
 
 customElements.define('pc-light', LightComponentElement);
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pc-light': LightComponentElement;
+    }
+}
+
 export { LightComponentElement };

package/src/components/listener-component.ts

@@ -20,11 +20,17 @@ class ListenerComponentElement extends ComponentElement {
      * Gets the underlying PlayCanvas audio listener component.
      * @returns The audio listener component.
      */
-    get component(): AudioListenerComponent | null {
-        return super.component as AudioListenerComponent | null;
+    get component(): AudioListenerComponent {
+        return super.component as AudioListenerComponent;
     }
 }
 
 customElements.define('pc-listener', ListenerComponentElement);
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pc-listener': ListenerComponentElement;
+    }
+}
+
 export { ListenerComponentElement };

package/src/components/particlesystem-component.ts

@@ -40,8 +40,8 @@ class ParticleSystemComponentElement extends ComponentElement {
      * Gets the underlying PlayCanvas particle system component.
      * @returns The particle system component.
      */
-    get component(): ParticleSystemComponent | null {
-        return super.component as ParticleSystemComponent | null;
+    get component(): ParticleSystemComponent {
+        return super.component as ParticleSystemComponent;
     }
 
     private applyConfig(resource: any) {
@@ -152,4 +152,10 @@ class ParticleSystemComponentElement extends ComponentElement {
 
 customElements.define('pc-particles', ParticleSystemComponentElement);
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pc-particles': ParticleSystemComponentElement;
+    }
+}
+
 export { ParticleSystemComponentElement };

package/src/components/render-component.ts

@@ -2,6 +2,7 @@ import { RenderComponent, StandardMaterial } from 'playcanvas';
 
 import { ComponentElement } from './component';
 import { MaterialElement } from '../material';
+import { parseBool, parseEnum } from '../utils';
 
 /**
  * The RenderComponentElement interface provides properties and methods for manipulating
@@ -9,6 +10,10 @@ import { MaterialElement } from '../material';
  * The RenderComponentElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
  *
+ * This element renders one of the engine's built-in primitives, selected with `type` (defaulting
+ * to `box`). It does not cover the engine's `asset` render type, since there is no way to supply
+ * a render asset here — use `pc-model` for glTF content instead.
+ *
  * @category Components
  */
 class RenderComponentElement extends ComponentElement {
@@ -18,7 +23,7 @@ class RenderComponentElement extends ComponentElement {
 
     private _receiveShadows = true;
 
-    private _type: 'asset' | 'box' | 'capsule' | 'cone' | 'cylinder' | 'plane' | 'sphere' = 'asset';
+    private _type: 'box' | 'capsule' | 'cone' | 'cylinder' | 'plane' | 'sphere' = 'box';
 
     /** @ignore */
     constructor() {
@@ -38,15 +43,15 @@ class RenderComponentElement extends ComponentElement {
      * Gets the underlying PlayCanvas render component.
      * @returns The render component.
      */
-    get component(): RenderComponent | null {
-        return super.component as RenderComponent | null;
+    get component(): RenderComponent {
+        return super.component as RenderComponent;
     }
 
     /**
      * Sets the type of the render component.
      * @param value - The type.
      */
-    set type(value: 'asset' | 'box' | 'capsule' | 'cone' | 'cylinder' | 'plane' | 'sphere') {
+    set type(value: 'box' | 'capsule' | 'cone' | 'cylinder' | 'plane' | 'sphere') {
         this._type = value;
         if (this.component) {
             this.component.type = value;
@@ -57,7 +62,7 @@ class RenderComponentElement extends ComponentElement {
      * Gets the type of the render component.
      * @returns The type.
      */
-    get type(): 'asset' | 'box' | 'capsule' | 'cone' | 'cylinder' | 'plane' | 'sphere' {
+    get type(): 'box' | 'capsule' | 'cone' | 'cylinder' | 'plane' | 'sphere' {
         return this._type;
     }
 
@@ -127,16 +132,16 @@ class RenderComponentElement extends ComponentElement {
 
         switch (name) {
             case 'cast-shadows':
-                this.castShadows = newValue !== 'false';
+                this.castShadows = parseBool(newValue, true);
                 break;
             case 'material':
                 this.material = newValue;
                 break;
             case 'receive-shadows':
-                this.receiveShadows = newValue !== 'false';
+                this.receiveShadows = parseBool(newValue, true);
                 break;
             case 'type':
-                this.type = newValue as 'asset' | 'box' | 'capsule' | 'cone' | 'cylinder' | 'plane' | 'sphere';
+                this.type = parseEnum(newValue, ['box', 'capsule', 'cone', 'cylinder', 'plane', 'sphere'], 'box', name);
                 break;
         }
     }
@@ -144,4 +149,10 @@ class RenderComponentElement extends ComponentElement {
 
 customElements.define('pc-render', RenderComponentElement);
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pc-render': RenderComponentElement;
+    }
+}
+
 export { RenderComponentElement };

package/src/components/rigidbody-component.ts

@@ -1,7 +1,7 @@
 import { RigidBodyComponent, Vec3 } from 'playcanvas';
 
 import { ComponentElement } from './component';
-import { parseVec3 } from '../utils';
+import { parseEnum, parseNumber, parseVec3 } from '../utils';
 
 /**
  * The RigidBodyComponentElement interface provides properties and methods for manipulating
@@ -55,7 +55,7 @@ class RigidBodyComponentElement extends ComponentElement {
     /**
      * The type of the rigidbody.
      */
-    private _type: string = 'static';
+    private _type: 'static' | 'dynamic' | 'kinematic' = 'static';
 
     /** @ignore */
     constructor() {
@@ -80,8 +80,8 @@ class RigidBodyComponentElement extends ComponentElement {
      * Gets the underlying PlayCanvas rigidbody component.
      * @returns The rigidbody component.
      */
-    get component(): RigidBodyComponent | null {
-        return super.component as RigidBodyComponent | null;
+    get component(): RigidBodyComponent {
+        return super.component as RigidBodyComponent;
     }
 
     set angularDamping(value: number) {
@@ -172,10 +172,10 @@ class RigidBodyComponentElement extends ComponentElement {
         return this._rollingFriction;
     }
 
-    set type(value: string) {
+    set type(value: 'static' | 'dynamic' | 'kinematic') {
         this._type = value;
         if (this.component) {
-            this.component.type = value as 'static' | 'dynamic' | 'kinematic';
+            this.component.type = value;
         }
     }
 
@@ -192,31 +192,31 @@ class RigidBodyComponentElement extends ComponentElement {
 
         switch (name) {
             case 'angular-damping':
-                this.angularDamping = parseFloat(newValue);
+                this.angularDamping = parseNumber(newValue, 0, name);
                 break;
             case 'angular-factor':
-                this.angularFactor = parseVec3(newValue);
+                this.angularFactor = parseVec3(newValue, Vec3.ONE, name);
                 break;
             case 'friction':
-                this.friction = parseFloat(newValue);
+                this.friction = parseNumber(newValue, 0.5, name);
                 break;
             case 'linear-damping':
-                this.linearDamping = parseFloat(newValue);
+                this.linearDamping = parseNumber(newValue, 0, name);
                 break;
             case 'linear-factor':
-                this.linearFactor = parseVec3(newValue);
+                this.linearFactor = parseVec3(newValue, Vec3.ONE, name);
                 break;
             case 'mass':
-                this.mass = parseFloat(newValue);
+                this.mass = parseNumber(newValue, 1, name);
                 break;
             case 'restitution':
-                this.restitution = parseFloat(newValue);
+                this.restitution = parseNumber(newValue, 0, name);
                 break;
             case 'rolling-friction':
-                this.rollingFriction = parseFloat(newValue);
+                this.rollingFriction = parseNumber(newValue, 0, name);
                 break;
             case 'type':
-                this.type = newValue;
+                this.type = parseEnum(newValue, ['static', 'dynamic', 'kinematic'], 'static', name);
                 break;
         }
     }
@@ -224,4 +224,10 @@ class RigidBodyComponentElement extends ComponentElement {
 
 customElements.define('pc-rigidbody', RigidBodyComponentElement);
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pc-rigidbody': RigidBodyComponentElement;
+    }
+}
+
 export { RigidBodyComponentElement };