diff --git a/demo/audio-beats-with-event-propagators.html b/demo/audio-beats-with-event-propagators.html index 891ef54..a06f4b3 100644 --- a/demo/audio-beats-with-event-propagators.html +++ b/demo/audio-beats-with-event-propagators.html @@ -15,13 +15,6 @@ margin: 0; } - folk-event-propagator { - display: block; - position: absolute; - inset: 0 0 0 0; - pointer-events: none; - } - folk-shape { border: 1px solid black; border-radius: 4px; diff --git a/demo/embeddable-llm-with-propagators.html b/demo/embeddable-llm-with-propagators.html index 6c863d4..3b49a24 100644 --- a/demo/embeddable-llm-with-propagators.html +++ b/demo/embeddable-llm-with-propagators.html @@ -15,13 +15,6 @@ margin: 0; } - folk-event-propagator { - display: block; - position: absolute; - inset: 0 0 0 0; - pointer-events: none; - } - folk-shape { border: 1px solid black; border-radius: 4px; diff --git a/demo/event-propagators.html b/demo/event-propagators.html index 107f34d..2bfc982 100644 --- a/demo/event-propagators.html +++ b/demo/event-propagators.html @@ -22,13 +22,6 @@ padding: 0px 5px; z-index: 10; } - - folk-event-propagator { - display: block; - position: absolute; - inset: 0 0 0 0; - pointer-events: none; - } diff --git a/demo/folk-interface-for-qr-codes.html b/demo/folk-interface-for-qr-codes.html index 9792a35..dcc7ce0 100644 --- a/demo/folk-interface-for-qr-codes.html +++ b/demo/folk-interface-for-qr-codes.html @@ -20,13 +20,6 @@ field-sizing: content; } - folk-event-propagator { - display: block; - position: absolute; - inset: 0 0 0 0; - pointer-events: none; - } - body:not([rope-mode]) folk-event-propagator { display: none; } diff --git a/demo/propagator-toolbar.html b/demo/propagator-toolbar.html index 8530c9f..d909dad 100644 --- a/demo/propagator-toolbar.html +++ b/demo/propagator-toolbar.html @@ -28,14 +28,6 @@ position: absolute; inset: 0; } - - folk-event-propagator { - display: block; - position: absolute; - inset: 0 0 0 0; - pointer-events: none; - z-index: 1000; - } diff --git a/demo/proximity-based-communication-and-event-propagators.html b/demo/proximity-based-communication-and-event-propagators.html index 00b37fe..df79ecd 100644 --- a/demo/proximity-based-communication-and-event-propagators.html +++ b/demo/proximity-based-communication-and-event-propagators.html @@ -54,13 +54,6 @@ border-radius: 5px; padding: 1rem; } - - folk-event-propagator { - display: block; - position: absolute; - inset: 0 0 0 0; - pointer-events: none; - } diff --git a/demo/spreadsheet-map-propagator.html b/demo/spreadsheet-map-propagator.html index af90715..6462ea9 100644 --- a/demo/spreadsheet-map-propagator.html +++ b/demo/spreadsheet-map-propagator.html @@ -22,10 +22,6 @@ } folk-event-propagator { - display: block; - position: absolute; - inset: 0 0 0 0; - pointer-events: none; z-index: calc(infinity); } diff --git a/src/folk-event-propagator.ts b/src/folk-event-propagator.ts index 645310f..ccd6f86 100644 --- a/src/folk-event-propagator.ts +++ b/src/folk-event-propagator.ts @@ -5,6 +5,13 @@ import type { Node } from '@babel/types'; const styles = new CSSStyleSheet(); styles.replaceSync(css` + :host { + display: block; + position: absolute; + inset: 0 0 0 0; + pointer-events: none; + } + textarea { position: absolute; width: auto;