@excom/dismiss-watcher 0.1.0

package/support/dist-docs/dismiss-watcher.md

@@ -0,0 +1,176 @@
+# dismiss-watcher
+
+One dismissal Adapter for drawers, menus, dialogs and popovers — Escape / back gesture and outside click, without each panel element owning the logic.
+
+
+```html
+<div>
+  <quark-sheet>
+    :scope {
+      @on menu-open { data-is-open: ""; }
+      @on dismiss-watcher-dismiss { data-is-open: none; }
+      &[data-is-open] dismiss-watcher { is-active: ""; }
+      &:not([data-is-open]) dismiss-watcher { is-active: none; }
+    }
+  </quark-sheet>
+  <style>
+    [data-demo-menu] { display: none; }
+    [data-is-open] > [data-demo-menu] { display: block; }
+  </style>
+  <event-handler role="button" fire-event="menu-open">Open menu</event-handler>
+  <nav data-demo-menu>
+    <dismiss-watcher></dismiss-watcher>
+    <ul>
+      <li><a href="#">Profile</a></li>
+      <li><a href="#">Settings</a></li>
+      <li><a href="#">Sign out</a></li>
+    </ul>
+    <p>Press Escape or click outside to close.</p>
+  </nav>
+</div>
+```
+
+
+## Features
+
+- **Escape / back gesture** Through a `CloseWatcher` (Android back, Escape) via `watch-escape`
+- **Outside click** A `mouseup` outside the target via `watch-outside-click`
+- **One event** `dismiss-watcher-dismiss` with `detail.reason`; cancel it with `preventDefault()`
+- **Default action** `command-name` commands invoked on the target (`--close`), or `fire-event` names dispatched at it
+- **Any target** The parent by default, or `target-ref` (`:scope`-relative)
+- **Gated by State** Live only while `is-active` — set it from Quark on the panel's open state
+
+## Installation
+
+
+`@excom/dismiss-watcher` v0.1.0
+
+```bash
+pnpm add @excom/dismiss-watcher
+```
+
+```bash
+npm install @excom/dismiss-watcher
+```
+
+```bash
+yarn add @excom/dismiss-watcher
+```
+
+### Import
+
+```ts
+import "@excom/dismiss-watcher";
+```
+
+
+
+## Usage
+
+Drop it inside the element being dismissed, gate `is-active` on that element's open state, and either react to `dismiss-watcher-dismiss` or let `command-name` / `fire-event` close the panel for you. When neither `watch-escape` nor `watch-outside-click` is present, both watchers are on.
+
+```html
+<nav>
+  <dismiss-watcher fire-event="menu-close"></dismiss-watcher>
+  …
+</nav>
+```
+
+```quark
+:scope {
+  @on menu-open { data-is-open: ""; }
+  @on menu-close { data-is-open: none; }
+  &[data-is-open] dismiss-watcher { is-active: ""; }
+  &:not([data-is-open]) dismiss-watcher { is-active: none; }
+}
+```
+
+Why a separate element: dismissal is the same request whether the panel is a drawer, a menu, a dialog or a popover. Panel elements keep their own state (`is-open`); this Adapter only asks them to close. It renders nothing, listens only while `is-active`, and tears down when unset or removed. Write the inverse rule for `is-active` — Quark rules do not revert.
+
+`dismiss-watcher-dismiss` bubbles and is cancelable. `detail.reason` is `"escape"` / `"outside-click"`. The default action invokes each `command-name` on the target (a `command` event, as a `<button command commandfor>` would) and dispatches each `fire-event` name at it as a bubbling `CustomEvent`; `preventDefault()` keeps the panel open (an unsaved-changes guard, for instance).
+
+### API Reference
+
+
+#### Attributes
+
+| Name | Surface | Type | Default | Values | Description |
+| --- | --- | --- | --- | --- | --- |
+| `is-active` | hybrid | `boolean` |  |  | Watchers are live while set. Gate it from Quark on the panel's open state, and write the inverse rule. |
+| `watch-escape` | option | `boolean` |  |  | Watch Escape / the back gesture through a `CloseWatcher`. When neither `watch-*` attribute is present both watchers are on. |
+| `watch-outside-click` | option | `boolean` |  |  | Watch for a `mouseup` on the document outside the target. When neither `watch-*` attribute is present both watchers are on. |
+| `target-ref` | option | `string` |  |  | Selector for the element being dismissed, `:scope`-relative (`:scope ~ nav`). Unset = the parent element. |
+| `command-name` | option | `tokenlist` |  | `<command>…` | Commands invoked on the target as the default action of `dismiss-watcher-dismiss` — `--close` for a `<content-drawer>`, or any `--verb` the panel handles. |
+| `fire-event` | option | `tokenlist` |  |  | Event names dispatched at the target (bubbling `CustomEvent`s) as the default action of `dismiss-watcher-dismiss`, for panels driven by events rather than commands (`menu-close`). |
+
+#### Fires
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `dismiss-watcher-dismiss` | `DismissWatcherDismissEvent` (`CustomEvent & { type: "dismiss-watcher-dismiss"; detail: { reason: "escape" \| "outside-click" }; bubbles: true; cancelable: true; composed: true }`) | A dismissal was requested; `detail.reason` is `"escape"` or `"outside-click"`. Default action: invoke each `command-name` on the target and dispatch each `fire-event` name at it as a bubbling `CustomEvent`. `preventDefault()` skips both. |
+
+
+
+### Examples
+
+#### Menu panel
+
+Both watchers on (neither `watch-*` set), target = the parent `<nav>`. The sheet opens on `menu-open`, closes on `dismiss-watcher-dismiss`, and gates `is-active` on `data-is-open` with its inverse rule.
+
+
+```html
+<div>
+  <quark-sheet>
+    :scope {
+      @on menu-open { data-is-open: ""; }
+      @on dismiss-watcher-dismiss { data-is-open: none; }
+      &[data-is-open] dismiss-watcher { is-active: ""; }
+      &:not([data-is-open]) dismiss-watcher { is-active: none; }
+    }
+  </quark-sheet>
+  <style>
+    [data-demo-menu] { display: none; }
+    [data-is-open] > [data-demo-menu] { display: block; }
+  </style>
+  <event-handler role="button" fire-event="menu-open">Open menu</event-handler>
+  <nav data-demo-menu>
+    <dismiss-watcher></dismiss-watcher>
+    <ul>
+      <li><a href="#">Profile</a></li>
+      <li><a href="#">Settings</a></li>
+      <li><a href="#">Sign out</a></li>
+    </ul>
+    <p>Press Escape or click outside to close.</p>
+  </nav>
+</div>
+```
+
+
+#### Content drawer
+
+First child of `<content-drawer>`, `command-name="--close"` — the drawer needs no dismissal logic of its own. `is-active` follows `content-drawer[is-open]`.
+
+Open with `--open`, not `--toggle`: an outside `mouseup` on the button closes the drawer first, then the button's `click` re-opens it. With `--toggle` the same click would close it again.
+
+
+```html
+<section>
+  <quark-sheet>
+    :scope {
+      content-drawer[is-open] dismiss-watcher { is-active: ""; }
+      content-drawer:not([is-open]) dismiss-watcher { is-active: none; }
+    }
+  </quark-sheet>
+  <button type="button" command="--open" commandfor="demo-dismiss-drawer">
+    Open drawer
+  </button>
+  <content-drawer id="demo-dismiss-drawer">
+    <dismiss-watcher watch-escape watch-outside-click command-name="--close"></dismiss-watcher>
+    <header>
+      <h2>Drawer</h2>
+    </header>
+    <p>Press Escape or click outside to close.</p>
+  </content-drawer>
+  <event-handler class="tag-backdrop" role="presentation" target-ref="content-drawer:has(+ :scope)" command-name="--close"></event-handler>
+</section>
+```

package/support/docs/README.md

@@ -0,0 +1,62 @@
+# dismiss-watcher
+
+One dismissal Adapter for drawers, menus, dialogs and popovers — Escape / back gesture and outside click, without each panel element owning the logic.
+
+<include-content data-demo="simple"></include-content>
+
+## Features
+
+- **Escape / back gesture** Through a `CloseWatcher` (Android back, Escape) via `watch-escape`
+- **Outside click** A `mouseup` outside the target via `watch-outside-click`
+- **One event** `dismiss-watcher-dismiss` with `detail.reason`; cancel it with `preventDefault()`
+- **Default action** `command-name` commands invoked on the target (`--close`), or `fire-event` names dispatched at it
+- **Any target** The parent by default, or `target-ref` (`:scope`-relative)
+- **Gated by State** Live only while `is-active` — set it from Quark on the panel's open state
+
+## Installation
+
+<include-content is-active template-ref="/views/install-section/install-section.html"></include-content>
+
+## Usage
+
+Drop it inside the element being dismissed, gate `is-active` on that element's open state, and either react to `dismiss-watcher-dismiss` or let `command-name` / `fire-event` close the panel for you. When neither `watch-escape` nor `watch-outside-click` is present, both watchers are on.
+
+```html
+<nav>
+  <dismiss-watcher fire-event="menu-close"></dismiss-watcher>
+  …
+</nav>
+```
+
+```quark
+:scope {
+  @on menu-open { data-is-open: ""; }
+  @on menu-close { data-is-open: none; }
+  &[data-is-open] dismiss-watcher { is-active: ""; }
+  &:not([data-is-open]) dismiss-watcher { is-active: none; }
+}
+```
+
+Why a separate element: dismissal is the same request whether the panel is a drawer, a menu, a dialog or a popover. Panel elements keep their own state (`is-open`); this Adapter only asks them to close. It renders nothing, listens only while `is-active`, and tears down when unset or removed. Write the inverse rule for `is-active` — Quark rules do not revert.
+
+`dismiss-watcher-dismiss` bubbles and is cancelable. `detail.reason` is `"escape"` / `"outside-click"`. The default action invokes each `command-name` on the target (a `command` event, as a `<button command commandfor>` would) and dispatches each `fire-event` name at it as a bubbling `CustomEvent`; `preventDefault()` keeps the panel open (an unsaved-changes guard, for instance).
+
+### API Reference
+
+<include-content is-active template-ref="/views/api-reference/api-reference.html"></include-content>
+
+### Examples
+
+#### Menu panel
+
+Both watchers on (neither `watch-*` set), target = the parent `<nav>`. The sheet opens on `menu-open`, closes on `dismiss-watcher-dismiss`, and gates `is-active` on `data-is-open` with its inverse rule.
+
+<include-content data-demo="simple"></include-content>
+
+#### Content drawer
+
+First child of `<content-drawer>`, `command-name="--close"` — the drawer needs no dismissal logic of its own. `is-active` follows `content-drawer[is-open]`.
+
+Open with `--open`, not `--toggle`: an outside `mouseup` on the button closes the drawer first, then the button's `click` re-opens it. With `--toggle` the same click would close it again.
+
+<include-content data-demo="drawer"></include-content>

package/support/package-meta.json

@@ -0,0 +1,106 @@
+{
+  "shortName": "dismiss-watcher",
+  "package": {
+    "name": "@excom/dismiss-watcher",
+    "version": "0.1.0",
+    "description": "<dismiss-watcher> custom element",
+    "peerDependencies": {},
+    "excom": {
+      "packageType": "kit-element"
+    }
+  },
+  "demos": {
+    "drawer": "<section>\n  <quark-sheet>\n    :scope {\n      content-drawer[is-open] dismiss-watcher { is-active: \"\"; }\n      content-drawer:not([is-open]) dismiss-watcher { is-active: none; }\n    }\n  </quark-sheet>\n  <button type=\"button\" command=\"--open\" commandfor=\"demo-dismiss-drawer\">\n    Open drawer\n  </button>\n  <content-drawer id=\"demo-dismiss-drawer\">\n    <dismiss-watcher watch-escape watch-outside-click command-name=\"--close\"></dismiss-watcher>\n    <header>\n      <h2>Drawer</h2>\n    </header>\n    <p>Press Escape or click outside to close.</p>\n  </content-drawer>\n  <event-handler class=\"tag-backdrop\" role=\"presentation\" target-ref=\"content-drawer:has(+ :scope)\" command-name=\"--close\"></event-handler>\n</section>\n",
+    "simple": "<div>\n  <quark-sheet>\n    :scope {\n      @on menu-open { data-is-open: \"\"; }\n      @on dismiss-watcher-dismiss { data-is-open: none; }\n      &[data-is-open] dismiss-watcher { is-active: \"\"; }\n      &:not([data-is-open]) dismiss-watcher { is-active: none; }\n    }\n  </quark-sheet>\n  <style>\n    [data-demo-menu] { display: none; }\n    [data-is-open] > [data-demo-menu] { display: block; }\n  </style>\n  <event-handler role=\"button\" fire-event=\"menu-open\">Open menu</event-handler>\n  <nav data-demo-menu>\n    <dismiss-watcher></dismiss-watcher>\n    <ul>\n      <li><a href=\"#\">Profile</a></li>\n      <li><a href=\"#\">Settings</a></li>\n      <li><a href=\"#\">Sign out</a></li>\n    </ul>\n    <p>Press Escape or click outside to close.</p>\n  </nav>\n</div>\n"
+  },
+  "readme": "<h1 id=\"md-dismiss-watcher\">dismiss-watcher</h1>\n<p>One dismissal Adapter for drawers, menus, dialogs and popovers — Escape / back gesture and outside click, without each panel element owning the logic.</p>\n<p><include-content data-demo=\"simple\"></include-content></p>\n<h2 id=\"md-features\">Features</h2>\n<ul>\n<li><strong>Escape / back gesture</strong> Through a <code>CloseWatcher</code> (Android back, Escape) via <code>watch-escape</code></li>\n<li><strong>Outside click</strong> A <code>mouseup</code> outside the target via <code>watch-outside-click</code></li>\n<li><strong>One event</strong> <code>dismiss-watcher-dismiss</code> with <code>detail.reason</code>; cancel it with <code>preventDefault()</code></li>\n<li><strong>Default action</strong> <code>command-name</code> commands invoked on the target (<code>--close</code>), or <code>fire-event</code> names dispatched at it</li>\n<li><strong>Any target</strong> The parent by default, or <code>target-ref</code> (<code>:scope</code>-relative)</li>\n<li><strong>Gated by State</strong> Live only while <code>is-active</code> — set it from Quark on the panel&#39;s open state</li>\n</ul>\n<h2 id=\"md-installation\">Installation</h2>\n<p><include-content is-active template-ref=\"/views/install-section/install-section.html\"></include-content></p>\n<h2 id=\"md-usage\">Usage</h2>\n<p>Drop it inside the element being dismissed, gate <code>is-active</code> on that element&#39;s open state, and either react to <code>dismiss-watcher-dismiss</code> or let <code>command-name</code> / <code>fire-event</code> close the panel for you. When neither <code>watch-escape</code> nor <code>watch-outside-click</code> is present, both watchers are on.</p>\n<include-content data-language=\"html\"><template>&lt;nav&gt;\n  &lt;dismiss-watcher fire-event=\"menu-close\"&gt;&lt;/dismiss-watcher&gt;\n  …\n&lt;/nav&gt;</template></include-content>\n<include-content data-language=\"quark\"><template>:scope {\n  @on menu-open { data-is-open: \"\"; }\n  @on menu-close { data-is-open: none; }\n  &amp;[data-is-open] dismiss-watcher { is-active: \"\"; }\n  &amp;:not([data-is-open]) dismiss-watcher { is-active: none; }\n}</template></include-content>\n<p>Why a separate element: dismissal is the same request whether the panel is a drawer, a menu, a dialog or a popover. Panel elements keep their own state (<code>is-open</code>); this Adapter only asks them to close. It renders nothing, listens only while <code>is-active</code>, and tears down when unset or removed. Write the inverse rule for <code>is-active</code> — Quark rules do not revert.</p>\n<p><code>dismiss-watcher-dismiss</code> bubbles and is cancelable. <code>detail.reason</code> is <code>&quot;escape&quot;</code> / <code>&quot;outside-click&quot;</code>. The default action invokes each <code>command-name</code> on the target (a <code>command</code> event, as a <code>&lt;button command commandfor&gt;</code> would) and dispatches each <code>fire-event</code> name at it as a bubbling <code>CustomEvent</code>; <code>preventDefault()</code> keeps the panel open (an unsaved-changes guard, for instance).</p>\n<h3 id=\"md-api-reference\">API Reference</h3>\n<p><include-content is-active template-ref=\"/views/api-reference/api-reference.html\"></include-content></p>\n<h3 id=\"md-examples\">Examples</h3>\n<h4 id=\"md-menu-panel\">Menu panel</h4>\n<p>Both watchers on (neither <code>watch-*</code> set), target = the parent <code>&lt;nav&gt;</code>. The sheet opens on <code>menu-open</code>, closes on <code>dismiss-watcher-dismiss</code>, and gates <code>is-active</code> on <code>data-is-open</code> with its inverse rule.</p>\n<p><include-content data-demo=\"simple\"></include-content></p>\n<h4 id=\"md-content-drawer\">Content drawer</h4>\n<p>First child of <code>&lt;content-drawer&gt;</code>, <code>command-name=&quot;--close&quot;</code> — the drawer needs no dismissal logic of its own. <code>is-active</code> follows <code>content-drawer[is-open]</code>.</p>\n<p>Open with <code>--open</code>, not <code>--toggle</code>: an outside <code>mouseup</code> on the button closes the drawer first, then the button&#39;s <code>click</code> re-opens it. With <code>--toggle</code> the same click would close it again.</p>\n<p><include-content data-demo=\"drawer\"></include-content></p>\n",
+  "docs": {
+    "readme": "<h1 id=\"md-dismiss-watcher\">dismiss-watcher</h1>\n<p>One dismissal Adapter for drawers, menus, dialogs and popovers — Escape / back gesture and outside click, without each panel element owning the logic.</p>\n<p><include-content data-demo=\"simple\"></include-content></p>\n<h2 id=\"md-features\">Features</h2>\n<ul>\n<li><strong>Escape / back gesture</strong> Through a <code>CloseWatcher</code> (Android back, Escape) via <code>watch-escape</code></li>\n<li><strong>Outside click</strong> A <code>mouseup</code> outside the target via <code>watch-outside-click</code></li>\n<li><strong>One event</strong> <code>dismiss-watcher-dismiss</code> with <code>detail.reason</code>; cancel it with <code>preventDefault()</code></li>\n<li><strong>Default action</strong> <code>command-name</code> commands invoked on the target (<code>--close</code>), or <code>fire-event</code> names dispatched at it</li>\n<li><strong>Any target</strong> The parent by default, or <code>target-ref</code> (<code>:scope</code>-relative)</li>\n<li><strong>Gated by State</strong> Live only while <code>is-active</code> — set it from Quark on the panel&#39;s open state</li>\n</ul>\n<h2 id=\"md-installation\">Installation</h2>\n<p><include-content is-active template-ref=\"/views/install-section/install-section.html\"></include-content></p>\n<h2 id=\"md-usage\">Usage</h2>\n<p>Drop it inside the element being dismissed, gate <code>is-active</code> on that element&#39;s open state, and either react to <code>dismiss-watcher-dismiss</code> or let <code>command-name</code> / <code>fire-event</code> close the panel for you. When neither <code>watch-escape</code> nor <code>watch-outside-click</code> is present, both watchers are on.</p>\n<include-content data-language=\"html\"><template>&lt;nav&gt;\n  &lt;dismiss-watcher fire-event=\"menu-close\"&gt;&lt;/dismiss-watcher&gt;\n  …\n&lt;/nav&gt;</template></include-content>\n<include-content data-language=\"quark\"><template>:scope {\n  @on menu-open { data-is-open: \"\"; }\n  @on menu-close { data-is-open: none; }\n  &amp;[data-is-open] dismiss-watcher { is-active: \"\"; }\n  &amp;:not([data-is-open]) dismiss-watcher { is-active: none; }\n}</template></include-content>\n<p>Why a separate element: dismissal is the same request whether the panel is a drawer, a menu, a dialog or a popover. Panel elements keep their own state (<code>is-open</code>); this Adapter only asks them to close. It renders nothing, listens only while <code>is-active</code>, and tears down when unset or removed. Write the inverse rule for <code>is-active</code> — Quark rules do not revert.</p>\n<p><code>dismiss-watcher-dismiss</code> bubbles and is cancelable. <code>detail.reason</code> is <code>&quot;escape&quot;</code> / <code>&quot;outside-click&quot;</code>. The default action invokes each <code>command-name</code> on the target (a <code>command</code> event, as a <code>&lt;button command commandfor&gt;</code> would) and dispatches each <code>fire-event</code> name at it as a bubbling <code>CustomEvent</code>; <code>preventDefault()</code> keeps the panel open (an unsaved-changes guard, for instance).</p>\n<h3 id=\"md-api-reference\">API Reference</h3>\n<p><include-content is-active template-ref=\"/views/api-reference/api-reference.html\"></include-content></p>\n<h3 id=\"md-examples\">Examples</h3>\n<h4 id=\"md-menu-panel\">Menu panel</h4>\n<p>Both watchers on (neither <code>watch-*</code> set), target = the parent <code>&lt;nav&gt;</code>. The sheet opens on <code>menu-open</code>, closes on <code>dismiss-watcher-dismiss</code>, and gates <code>is-active</code> on <code>data-is-open</code> with its inverse rule.</p>\n<p><include-content data-demo=\"simple\"></include-content></p>\n<h4 id=\"md-content-drawer\">Content drawer</h4>\n<p>First child of <code>&lt;content-drawer&gt;</code>, <code>command-name=&quot;--close&quot;</code> — the drawer needs no dismissal logic of its own. <code>is-active</code> follows <code>content-drawer[is-open]</code>.</p>\n<p>Open with <code>--open</code>, not <code>--toggle</code>: an outside <code>mouseup</code> on the button closes the drawer first, then the button&#39;s <code>click</code> re-opens it. With <code>--toggle</code> the same click would close it again.</p>\n<p><include-content data-demo=\"drawer\"></include-content></p>\n"
+  },
+  "installation": {
+    "name": "@excom/dismiss-watcher",
+    "shortName": "dismiss-watcher",
+    "version": "0.1.0",
+    "description": "<dismiss-watcher> custom element",
+    "packageType": "kit-element",
+    "cdn": "<script src=\"https://unpkg.com/@excom/kit-utils/dist/index.umd.min.js\"></script>\n<script src=\"https://unpkg.com/@excom/neutron/dist/index.umd.min.js\"></script>\n<script src=\"https://unpkg.com/@excom/dismiss-watcher@0.1.0/dist/index.umd.min.js\"></script>",
+    "install": {
+      "npm": "npm install @excom/dismiss-watcher"
+    },
+    "imports": {
+      "js": "import \"@excom/dismiss-watcher\";",
+      "html": "<!-- import path to `node_modules` will depend on your build setup -->\n<script type=\"module\" src=\"/node_modules/@excom/dismiss-watcher\"></script>\n<link rel=\"stylesheet\" href=\"/node_modules/@excom/dismiss-watcher\">"
+    },
+    "peerDependencies": []
+  },
+  "elementApis": [
+    {
+      "tag": "dismiss-watcher",
+      "summary": "Escape / back-gesture and outside-click dismissal for any panel.",
+      "kind": "class",
+      "attributes": [
+        {
+          "name": "command-name",
+          "type": "tokenlist",
+          "description": "Commands invoked on the target as the default action of <code>dismiss-watcher-dismiss</code> — <code>--close</code> for a <code>&lt;content-drawer&gt;</code>, or any <code>--verb</code> the panel handles.",
+          "fieldName": "commandName",
+          "surface": "option",
+          "values": "<command>…"
+        },
+        {
+          "name": "fire-event",
+          "type": "tokenlist",
+          "description": "Event names dispatched at the target (bubbling <code>CustomEvent</code>s) as the default action of <code>dismiss-watcher-dismiss</code>, for panels driven by events rather than commands (<code>menu-close</code>).",
+          "fieldName": "fireEvent",
+          "surface": "option"
+        },
+        {
+          "name": "target-ref",
+          "type": "string",
+          "description": "Selector for the element being dismissed, <code>:scope</code>-relative (<code>:scope ~ nav</code>). Unset = the parent element.",
+          "fieldName": "targetRef",
+          "surface": "option"
+        },
+        {
+          "name": "watch-escape",
+          "type": "boolean",
+          "description": "Watch Escape / the back gesture through a <code>CloseWatcher</code>. When neither <code>watch-*</code> attribute is present both watchers are on.",
+          "fieldName": "watchEscape",
+          "surface": "option"
+        },
+        {
+          "name": "watch-outside-click",
+          "type": "boolean",
+          "description": "Watch for a <code>mouseup</code> on the document outside the target. When neither <code>watch-*</code> attribute is present both watchers are on.",
+          "fieldName": "watchOutsideClick",
+          "surface": "option"
+        },
+        {
+          "name": "is-active",
+          "type": "boolean",
+          "description": "Watchers are live while set. Gate it from Quark on the panel&#39;s open state, and write the inverse rule.",
+          "fieldName": "isActive",
+          "surface": "hybrid"
+        }
+      ],
+      "events": [
+        {
+          "name": "dismiss-watcher-dismiss",
+          "description": "A dismissal was requested; <code>detail.reason</code> is <code>&quot;escape&quot;</code> or <code>&quot;outside-click&quot;</code>. Default action: invoke each <code>command-name</code> on the target and dispatch each <code>fire-event</code> name at it as a bubbling <code>CustomEvent</code>. <code>preventDefault()</code> skips both.",
+          "type": "DismissWatcherDismissEvent",
+          "typeExpanded": "CustomEvent & { type: \"dismiss-watcher-dismiss\"; detail: { reason: \"escape\" | \"outside-click\" }; bubbles: true; cancelable: true; composed: true }"
+        }
+      ],
+      "slots": [],
+      "cssProperties": [],
+      "cssClasses": [],
+      "cssAliases": [],
+      "listens": [],
+      "commands": [],
+      "defaultActions": [],
+      "expectedChildren": [],
+      "provisions": []
+    }
+  ],
+  "exportedFiles": {}
+}