diff --git a/labs/folk-event-propagator.ts b/labs/folk-event-propagator.ts
index 8d1e732..d052360 100644
--- a/labs/folk-event-propagator.ts
+++ b/labs/folk-event-propagator.ts
@@ -1,7 +1,7 @@
import { css, PropertyValues } from '@lit/reactive-element';
-import { FolkRope } from './folk-rope.ts';
import { property } from '@lit/reactive-element/decorators.js';
import { Propagator } from '@propagators';
+import { FolkRope } from './folk-rope.ts';
export class FolkEventPropagator extends FolkRope {
static override tagName = 'folk-event-propagator';
@@ -30,13 +30,13 @@ export class FolkEventPropagator extends FolkRope {
box-sizing: content-box;
}
- .trigger {
+ [part='trigger'] {
border-radius: 5px 5px 0 0;
border-bottom: none;
width: fit-content;
}
- .expression {
+ [part='expression'] {
border-radius: 0 5px 5px 5px;
}
`,
@@ -55,8 +55,8 @@ export class FolkEventPropagator extends FolkRope {
const root = super.createRenderRoot();
this.#container.className = 'input-container';
- this.#triggerTextarea.className = 'trigger';
- this.#expressionTextarea.className = 'expression';
+ this.#triggerTextarea.part.add('trigger');
+ this.#expressionTextarea.part.add('expression');
this.#triggerTextarea.addEventListener('change', () => {
this.trigger = this.#triggerTextarea.value;
diff --git a/labs/folk-shape.ts b/labs/folk-shape.ts
index e92db48..25f9eff 100644
--- a/labs/folk-shape.ts
+++ b/labs/folk-shape.ts
@@ -332,6 +332,7 @@ export class FolkShape extends FolkElement {
// Handle pointer capture setup/cleanup
if (event instanceof PointerEvent) {
+ event.stopPropagation();
if (event.type === 'pointerdown') {
if (target !== this && !handle) return;
diff --git a/website/canvas/fluid-semantic-zoom-in-a-canvas.html b/website/canvas/fluid-semantic-zoom-in-a-canvas.html
index f5ec74c..55bba8a 100644
--- a/website/canvas/fluid-semantic-zoom-in-a-canvas.html
+++ b/website/canvas/fluid-semantic-zoom-in-a-canvas.html
@@ -21,12 +21,6 @@
inset: 0;
}
- label {
- display: flex;
- align-items: center;
- margin: 1rem;
- }
-
folk-shape {
background: black;
border-radius: 5px;
@@ -46,6 +40,31 @@
max-width: 35ch;
}
}
+
+ /* @container style(--folk-discrete-zoom: 0) or style(--folk-discrete-zoom: 0.25) or style(--folk-discrete-zoom: 0.5) {
+ p {
+ display: none;
+ }
+ h2 {
+ font-size: calc(3em * (var(--folk-zoom)));
+ opacity: clamp(0, calc(var(--folk-zoom) + 0.5), 1);
+ }
+ }
+ @container style(--folk-discrete-zoom: 0) or style(--folk-discrete-zoom: 0.25) {
+ folk-shape {
+ border-radius: clamp(5px, calc((0.25 - var(--folk-zoom)) * 200%), 50%);
+ }
+ }
+ @container style(--folk-discrete-zoom: 0) {
+ folk-shape {
+ width: 20px;
+ aspect-ratio: 1;
+ border-radius: 50%;
+ }
+ h2 {
+ display: none;
+ }
+ } */
diff --git a/website/canvas/propagators/event-propagators-with-semantic-zoom.html b/website/canvas/propagators/event-propagators-with-semantic-zoom.html
new file mode 100644
index 0000000..5d18b0a
--- /dev/null
+++ b/website/canvas/propagators/event-propagators-with-semantic-zoom.html
@@ -0,0 +1,71 @@
+
+
+
+
+
+ Event Propagator
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+