fix(#528): Resolve console error: Uncaught TypeError: NONE is read-only

packages/core/src/api/context-event.ts

@@ -4,7 +4,6 @@ class TybaltContextEvent<T> extends Event implements ContextEvent<T extends Unkn
     #context: Context<T>;
     #callback: ContextCallback<ContextType<T extends UnknownContext ? any : any>>;
     #subscribe: boolean;
-    #event: CustomEvent;
 
     constructor(
         context: Context<T>,
@@ -31,82 +30,6 @@ class TybaltContextEvent<T> extends Event implements ContextEvent<T extends Unkn
         this.#context = context;
         this.#callback = callback;
         this.#subscribe = options?.subscribe || false;
-        this.#event = new CustomEvent('context-request', options);
-    }
-
-    NONE: 0 = 0 as const;
-    CAPTURING_PHASE = 1 as const;
-    AT_TARGET: 2 = 2 as const;
-    BUBBLING_PHASE: 3 = 3 as const;
-
-    get bubbles() {
-        return this.#event.bubbles;
-    }
-
-    // deprecated
-    get cancelBubble() {
-        return this.#event.cancelBubble;
-    }
-
-    get cancelable() {
-        return this.#event.cancelable;
-    }
-
-    get composed() {
-        return this.#event.bubbles;
-    }
-
-    get currentTarget() {
-        return this.#event.currentTarget;
-    }
-
-    get defaultPrevented() {
-        return this.#event.defaultPrevented;
-    }
-
-    get eventPhase() {
-        return this.#event.eventPhase;
-    }
-
-    get isTrusted() {
-        return this.#event.isTrusted;
-    }
-
-    get returnValue() {
-        return this.#event.returnValue;
-    }
-
-    get srcElement() {
-        return this.#event.srcElement;
-    }
-    get target() {
-        return this.#event.target;
-    }
-    get timeStamp() {
-        return this.#event.timeStamp;
-    }
-    get type() {
-        return this.#event.type;
-    }
-
-    composedPath(): EventTarget[] {
-        throw new Error('Method not implemented.');
-    }
-
-    initEvent(): void {
-        throw new Error('Method not implemented.');
-    }
-
-    preventDefault(): void {
-        throw new Error('Method not implemented.');
-    }
-
-    stopImmediatePropagation(): void {
-        throw new Error('Method not implemented.');
-    }
-
-    stopPropagation(): void {
-        throw new Error('Method not implemented.');
     }
 
     get context() {

packages/example/src/Button/button.component.ts

@@ -26,19 +26,24 @@ export default defineComponent({
     },
     render({ computedClass, clickHandler, theme }: RenderContext) {
         return html`<style>
-                :root {
+                button {
                     --primary-color: ${theme.primaryColor};
                     --secondary-color: ${theme.secondaryColor};
+                    --inverse-font-color: ${theme.inverseFontColor};
+                    --font-color: ${theme.fontColor};
                     --font-family: ${theme.fontFamily};
                 }
             </style>
-            <button class="button ${computedClass}" @click="${clickHandler}"><slot></slot></button>`;
+            <button class="button ${computedClass}" @click="${clickHandler}">
+                <slot></slot>
+            </button>
+        `;
     },
     setup({ variant }: PropsStateMap, { emit }: SetupContext) {
         const clickHandler = () => {
             emit('click');
         };
-        const computedClass = variant.pipe(map((variant: string) => `button-${variant}`));
+        const computedClass = variant.observable.pipe(map((variant: string) => `button-${variant}`));
 
         return {
             clickHandler,

packages/example/src/Button/button.css

@@ -7,10 +7,12 @@
 
 .button-primary {
     background-color: var(--primary-color);
+    color: var(--inverse-font-color);
 }
 
 .button-secondary {
     background-color: var(--secondary-color);
+    color: var(--font-color);
 }
 
 .button-tertiary {

packages/example/src/contexts.ts

@@ -5,4 +5,6 @@ export const theme = createContext('theme', {
     secondaryColor: 'bisque',
     fontFamily: 'Consolas',
     linkColor: '#ffcc99',
+    inverseFontColor: 'white',
+    fontColor: 'black',
 });