@excom/content-drawer 0.1.0

package/support/package-meta.json

@@ -0,0 +1,299 @@
+{
+  "shortName": "content-drawer",
+  "package": {
+    "name": "@excom/content-drawer",
+    "version": "0.1.0",
+    "description": "<content-drawer> custom element",
+    "peerDependencies": {},
+    "excom": {
+      "packageType": "kit-element"
+    }
+  },
+  "demos": {
+    "disappear": "<section>\n  <button type=\"button\" command=\"--open\" commandfor=\"demo-drawer-disappear\">\n    Show success\n  </button>\n  <content-drawer id=\"demo-drawer-disappear\" class=\"absolute\" disappear-after=\"2\">\n    <h2>Saved!</h2>\n  </content-drawer>\n</section>\n",
+    "dismiss": "<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-drawer-dismiss\">\n    Open drawer\n  </button>\n  <content-drawer id=\"demo-drawer-dismiss\" class=\"absolute\">\n    <dismiss-watcher watch-escape watch-outside-click command-name=\"--close\"></dismiss-watcher>\n    <nav>Menu</nav>\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",
+    "from-side": "<section>\n  <button type=\"button\" command=\"--toggle\" commandfor=\"demo-drawer-side\">\n    Toggle drawer\n  </button>\n  <content-drawer id=\"demo-drawer-side\" class=\"absolute\" from-side=\"left\">\n    <nav>Menu</nav>\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": "<section>\n  <button type=\"button\" command=\"--toggle\" commandfor=\"demo-drawer-simple\">\n    Toggle sheet\n  </button>\n  <content-drawer id=\"demo-drawer-simple\" class=\"absolute\">\n    <header>\n      <button type=\"button\" rel=\"prev\" command=\"--close\" commandfor=\"demo-drawer-simple\" aria-label=\"Close\"></button>\n      <h2>Sheet open</h2>\n    </header>\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",
+    "singleton": "<section>\n  <button type=\"button\" command=\"--open\" commandfor=\"drawer-a\">Open A</button>\n  <button type=\"button\" command=\"--open\" commandfor=\"drawer-b\">Open B</button>\n  <content-drawer id=\"drawer-a\" class=\"absolute\" singleton-name=\"demo\">\n    <header>\n      <button type=\"button\" rel=\"prev\" command=\"--close\" commandfor=\"drawer-a\" aria-label=\"Close\"></button>\n      <h2>Drawer A</h2>\n    </header>\n  </content-drawer>\n  <content-drawer id=\"drawer-b\" class=\"absolute\" singleton-name=\"demo\">\n    <header>\n      <button type=\"button\" rel=\"prev\" command=\"--close\" commandfor=\"drawer-b\" aria-label=\"Close\"></button>\n      <h2>Drawer B</h2>\n    </header>\n  </content-drawer>\n</section>\n",
+    "stages": "<section>\n  <button type=\"button\" command=\"--open\" commandfor=\"demo-drawer-stages\" data-open-stage=\"0\">\n    Full (100%)\n  </button>\n  <button type=\"button\" command=\"--open\" commandfor=\"demo-drawer-stages\" data-open-stage=\"1\">\n    Half (50%)\n  </button>\n  <button type=\"button\" command=\"--open\" commandfor=\"demo-drawer-stages\" data-open-stage=\"2\">\n    Peek (25%)\n  </button>\n  <content-drawer id=\"demo-drawer-stages\" class=\"absolute\">\n    <header>\n      <button type=\"button\" rel=\"prev\" command=\"--close\" commandfor=\"demo-drawer-stages\" aria-label=\"Close\"></button>\n      <h2>Open stages</h2>\n    </header>\n    <p>Full / half / peek via <code>data-open-stage</code> on the button.</p>\n  </content-drawer>\n</section>\n"
+  },
+  "readme": "<h1 id=\"md-content-drawer\">content-drawer</h1>\n<p>Slide-in drawers and sheets for nav menus, filters, confirmations, and side panels — any edge, with peek stages.</p>\n<p><include-content data-demo=\"simple\"></include-content></p>\n<h2 id=\"md-features\">Features</h2>\n<ul>\n<li><strong>Any edge</strong> Bottom (default), top, left, or right via <code>from-side</code></li>\n<li><strong>Peek stages</strong> Full, half, or peek via <code>open-stage</code></li>\n<li><strong>Command-driven</strong> <code>--open</code> / <code>--close</code> / <code>--toggle</code> from any <code>&lt;button command commandfor&gt;</code></li>\n<li><strong>Dismissal</strong> Outside click + Escape via <code>&lt;dismiss-watcher&gt;</code></li>\n<li><strong>Backdrop</strong> Valence.css dimmer — sibling <code>[role=&quot;presentation&quot;]</code> / <code>.tag-backdrop</code></li>\n<li><strong>Auto-dismiss</strong> <code>disappear-after</code> for toast-style confirmations</li>\n<li><strong>Singleton groups</strong> One open drawer per <code>singleton-name</code></li>\n<li><strong>Layout modes</strong> Viewport sheet (default, <code>position: fixed</code>), <code>.absolute</code> (inside its parent), <code>.relative</code>, or <code>.sticky</code></li>\n<li><strong>Scrubbable</strong> Wrap in <spa-a route-href=\"/nucleus/packages/gesture-handler\" role=\"link\"><code>gesture-handler</code></spa-a>: the sheet follows the finger via <code>is-scrubbing</code> + <code>--content-drawer-open-progress</code></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>Put content inside <code>&lt;content-drawer&gt;</code> and invoke <code>--open</code>, <code>--close</code>, or <code>--toggle</code> on it — a native <code>&lt;button command commandfor&gt;</code>, or <code>&lt;event-handler command-name target-ref&gt;</code> when the invoker is not a button. Its parent automatically becomes <code>position: relative; overflow: hidden</code>, so give the parent a real size along the drawer&#39;s axis.</p>\n<include-content data-language=\"html\"><template>&lt;button type=\"button\" command=\"--toggle\" commandfor=\"sheet\"&gt;Toggle sheet&lt;/button&gt;\n&lt;content-drawer id=\"sheet\" class=\"absolute\"&gt;\n  &lt;h2&gt;Saved!&lt;/h2&gt;\n&lt;/content-drawer&gt;\n&lt;event-handler class=\"tag-backdrop\" role=\"presentation\" target-ref=\"content-drawer:has(+ :scope)\" command-name=\"--close\"&gt;&lt;/event-handler&gt;</template></include-content>\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-peek-stages\">Peek stages</h4>\n<p><code>--open</code> with <code>data-open-stage</code> on the button sets the stage — <code>0</code> full, <code>1</code> half, <code>2</code> peek. The exact heights of each stage are configurable through CSS variables.</p>\n<p><include-content data-demo=\"stages\"></include-content></p>\n<h4 id=\"md-dismissal\">Dismissal</h4>\n<p><code>&lt;dismiss-watcher command-name=&quot;--close&quot;&gt;</code> as the drawer&#39;s first child closes it on outside click or Escape / back gesture; the sheet gates its <code>is-active</code> on <code>content-drawer[is-open]</code> (with the inverse rule). Open with <code>--open</code>, not <code>--toggle</code> — an outside <code>mouseup</code> on the button closes first, the <code>click</code> then re-opens. Immediate next sibling <code>[role=&quot;presentation&quot;]</code> / <code>.tag-backdrop</code> is the Valence.css modal dimmer; <code>&lt;event-handler command-name=&quot;--close&quot;&gt;</code> on that node closes on click.</p>\n<p><include-content data-demo=\"dismiss\"></include-content></p>\n<h4 id=\"md-side-drawer\">Side drawer</h4>\n<p><code>from-side</code> slides from left / right / top instead of the default bottom.</p>\n<p><include-content data-demo=\"from-side\"></include-content></p>\n<h4 id=\"md-auto-dismiss\">Auto-dismiss</h4>\n<p><code>disappear-after</code> closes the drawer after N seconds — useful for success toasts.</p>\n<p><include-content data-demo=\"disappear\"></include-content></p>\n<h4 id=\"md-singleton-group\">Singleton group</h4>\n<p>Drawers sharing <code>singleton-name</code> — opening one closes the other.</p>\n<p><include-content data-demo=\"singleton\"></include-content></p>\n",
+  "docs": {
+    "readme": "<h1 id=\"md-content-drawer\">content-drawer</h1>\n<p>Slide-in drawers and sheets for nav menus, filters, confirmations, and side panels — any edge, with peek stages.</p>\n<p><include-content data-demo=\"simple\"></include-content></p>\n<h2 id=\"md-features\">Features</h2>\n<ul>\n<li><strong>Any edge</strong> Bottom (default), top, left, or right via <code>from-side</code></li>\n<li><strong>Peek stages</strong> Full, half, or peek via <code>open-stage</code></li>\n<li><strong>Command-driven</strong> <code>--open</code> / <code>--close</code> / <code>--toggle</code> from any <code>&lt;button command commandfor&gt;</code></li>\n<li><strong>Dismissal</strong> Outside click + Escape via <code>&lt;dismiss-watcher&gt;</code></li>\n<li><strong>Backdrop</strong> Valence.css dimmer — sibling <code>[role=&quot;presentation&quot;]</code> / <code>.tag-backdrop</code></li>\n<li><strong>Auto-dismiss</strong> <code>disappear-after</code> for toast-style confirmations</li>\n<li><strong>Singleton groups</strong> One open drawer per <code>singleton-name</code></li>\n<li><strong>Layout modes</strong> Viewport sheet (default, <code>position: fixed</code>), <code>.absolute</code> (inside its parent), <code>.relative</code>, or <code>.sticky</code></li>\n<li><strong>Scrubbable</strong> Wrap in <spa-a route-href=\"/nucleus/packages/gesture-handler\" role=\"link\"><code>gesture-handler</code></spa-a>: the sheet follows the finger via <code>is-scrubbing</code> + <code>--content-drawer-open-progress</code></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>Put content inside <code>&lt;content-drawer&gt;</code> and invoke <code>--open</code>, <code>--close</code>, or <code>--toggle</code> on it — a native <code>&lt;button command commandfor&gt;</code>, or <code>&lt;event-handler command-name target-ref&gt;</code> when the invoker is not a button. Its parent automatically becomes <code>position: relative; overflow: hidden</code>, so give the parent a real size along the drawer&#39;s axis.</p>\n<include-content data-language=\"html\"><template>&lt;button type=\"button\" command=\"--toggle\" commandfor=\"sheet\"&gt;Toggle sheet&lt;/button&gt;\n&lt;content-drawer id=\"sheet\" class=\"absolute\"&gt;\n  &lt;h2&gt;Saved!&lt;/h2&gt;\n&lt;/content-drawer&gt;\n&lt;event-handler class=\"tag-backdrop\" role=\"presentation\" target-ref=\"content-drawer:has(+ :scope)\" command-name=\"--close\"&gt;&lt;/event-handler&gt;</template></include-content>\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-peek-stages\">Peek stages</h4>\n<p><code>--open</code> with <code>data-open-stage</code> on the button sets the stage — <code>0</code> full, <code>1</code> half, <code>2</code> peek. The exact heights of each stage are configurable through CSS variables.</p>\n<p><include-content data-demo=\"stages\"></include-content></p>\n<h4 id=\"md-dismissal\">Dismissal</h4>\n<p><code>&lt;dismiss-watcher command-name=&quot;--close&quot;&gt;</code> as the drawer&#39;s first child closes it on outside click or Escape / back gesture; the sheet gates its <code>is-active</code> on <code>content-drawer[is-open]</code> (with the inverse rule). Open with <code>--open</code>, not <code>--toggle</code> — an outside <code>mouseup</code> on the button closes first, the <code>click</code> then re-opens. Immediate next sibling <code>[role=&quot;presentation&quot;]</code> / <code>.tag-backdrop</code> is the Valence.css modal dimmer; <code>&lt;event-handler command-name=&quot;--close&quot;&gt;</code> on that node closes on click.</p>\n<p><include-content data-demo=\"dismiss\"></include-content></p>\n<h4 id=\"md-side-drawer\">Side drawer</h4>\n<p><code>from-side</code> slides from left / right / top instead of the default bottom.</p>\n<p><include-content data-demo=\"from-side\"></include-content></p>\n<h4 id=\"md-auto-dismiss\">Auto-dismiss</h4>\n<p><code>disappear-after</code> closes the drawer after N seconds — useful for success toasts.</p>\n<p><include-content data-demo=\"disappear\"></include-content></p>\n<h4 id=\"md-singleton-group\">Singleton group</h4>\n<p>Drawers sharing <code>singleton-name</code> — opening one closes the other.</p>\n<p><include-content data-demo=\"singleton\"></include-content></p>\n"
+  },
+  "installation": {
+    "name": "@excom/content-drawer",
+    "shortName": "content-drawer",
+    "version": "0.1.0",
+    "description": "<content-drawer> 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/content-drawer@0.1.0/dist/index.umd.min.js\"></script>\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@excom/content-drawer@0.1.0/dist/index.css\">",
+    "install": {
+      "npm": "npm install @excom/content-drawer"
+    },
+    "imports": {
+      "js": "import \"@excom/content-drawer\";",
+      "css": "@import \"@excom/content-drawer\";",
+      "html": "<!-- import path to `node_modules` will depend on your build setup -->\n<script type=\"module\" src=\"/node_modules/@excom/content-drawer\"></script>\n<link rel=\"stylesheet\" href=\"/node_modules/@excom/content-drawer\">"
+    },
+    "peerDependencies": []
+  },
+  "elementApis": [
+    {
+      "tag": "content-drawer",
+      "summary": "Slide-in drawer / sheet — bottom, top, left, or right, with peek stages.",
+      "kind": "class",
+      "attributes": [
+        {
+          "name": "disappear-after",
+          "type": "number",
+          "description": "Auto-close after this many seconds once opened — toast-style / transient confirmations.",
+          "fieldName": "disappearAfter",
+          "surface": "option"
+        },
+        {
+          "name": "from-side",
+          "type": "string",
+          "description": "Edge the drawer slides from.",
+          "fieldName": "fromSide",
+          "surface": "option",
+          "default": "\"bottom\"",
+          "values": "\"bottom\" | \"top\" | \"left\" | \"right\""
+        },
+        {
+          "name": "singleton-name",
+          "type": "string",
+          "description": "Shared group name. Opening one drawer closes others with the same name (singleton coordination).",
+          "fieldName": "singletonName",
+          "surface": "option"
+        },
+        {
+          "name": "is-open",
+          "type": "boolean",
+          "description": "Open state. Toggle directly, or through the <code>--open</code> / <code>--close</code> / <code>--toggle</code> commands. For Escape / outside-click dismissal pair with <code>&lt;dismiss-watcher command-name=&quot;--close&quot;&gt;</code>.",
+          "fieldName": "isOpen",
+          "surface": "hybrid"
+        },
+        {
+          "name": "open-stage",
+          "type": "number",
+          "description": "How far the drawer opens: <code>0</code> full, <code>1</code> half, <code>2</code> peek. Unset = full. Set statically, or per open through <code>data-open-stage</code> on the <code>--open</code> / <code>--toggle</code> invoker.",
+          "fieldName": "openStage",
+          "surface": "hybrid",
+          "values": "\"0\" | \"1\" | \"2\""
+        }
+      ],
+      "events": [
+        {
+          "name": "content-drawer-closed",
+          "description": "After close (<code>is-open</code> unset), <code>detail</code> is the drawer.",
+          "type": "ContentDrawerClosedEvent",
+          "typeExpanded": "CustomEvent & { type: \"content-drawer-closed\"; detail: HTMLElement; bubbles: true; cancelable: true; composed: true }"
+        },
+        {
+          "name": "content-drawer-opened",
+          "description": "After open (<code>is-open</code> set), <code>detail</code> is the drawer. When <code>singleton-name</code> is set it is also broadcast so drawers sharing that name close.",
+          "type": "ContentDrawerOpenedEvent",
+          "typeExpanded": "CustomEvent & { type: \"content-drawer-opened\"; detail: HTMLElement; bubbles: true; cancelable: true; composed: true }"
+        }
+      ],
+      "slots": [],
+      "cssProperties": [
+        {
+          "name": "--content-drawer-closed",
+          "description": "Off-screen translate amount (closed).",
+          "syntax": "<percentage>",
+          "default": "101%"
+        },
+        {
+          "name": "--content-drawer-max-width",
+          "description": "Overrides <code>--content-drawer-relative-max-width</code> for this drawer only.",
+          "syntax": "<length>"
+        },
+        {
+          "name": "--content-drawer-open-full",
+          "description": "Full-open translate (<code>open-stage</code> unset or <code>0</code>).",
+          "syntax": "<percentage>",
+          "default": "0%"
+        },
+        {
+          "name": "--content-drawer-open-half",
+          "description": "Half-open translate (<code>open-stage=&quot;1&quot;</code>).",
+          "syntax": "<percentage>",
+          "default": "50%"
+        },
+        {
+          "name": "--content-drawer-open-peek",
+          "description": "Peek translate (<code>open-stage=&quot;2&quot;</code>).",
+          "syntax": "<percentage>",
+          "default": "75%"
+        },
+        {
+          "name": "--content-drawer-open-progress",
+          "description": "How far open the drawer is while <code>is-scrubbing</code>: <code>0</code> closed, <code>1</code> full. Declared on the drawer (not <code>:root</code>) so it follows a wrapping <code>&lt;gesture-handler&gt;</code>&#39;s inherited <code>--gesture-progress</code> unless set explicitly — a swipe-to-open / drag-to-close bottom sheet.",
+          "syntax": "<number>",
+          "default": "var(--gesture-progress, 0)"
+        },
+        {
+          "name": "--content-drawer-overlay-z-index",
+          "description": "Stack order for the sibling backdrop (<code>:--dialog-backdrop-aliases</code>).",
+          "syntax": "<integer>",
+          "default": "2"
+        },
+        {
+          "name": "--content-drawer-relative-max-width",
+          "description": "Max width when open in <code>.relative</code> mode, used unless <code>--content-drawer-max-width</code> is set.",
+          "syntax": "<length>",
+          "default": "200px"
+        },
+        {
+          "name": "--content-drawer-transition-duration",
+          "description": "Slide transition duration.",
+          "syntax": "<time>",
+          "default": "0.25s"
+        },
+        {
+          "name": "--content-drawer-transition-ease",
+          "description": "Slide transition easing.",
+          "syntax": "<easing-function>",
+          "default": "ease-out"
+        },
+        {
+          "name": "--content-drawer-z-index",
+          "description": "Stack order for the drawer panel.",
+          "syntax": "<integer>",
+          "default": "3"
+        }
+      ],
+      "cssClasses": [
+        {
+          "name": "absolute",
+          "description": "<code>position: absolute</code> instead of the default <code>fixed</code> placement — a sheet inside its (<code>position: relative</code>) parent."
+        },
+        {
+          "name": "close",
+          "description": "Close control — empty <code>.close</code> / <code>[rel=&quot;prev&quot;]</code> button or link (theme close icon)."
+        },
+        {
+          "name": "relative",
+          "description": "In-flow mode: the drawer participates in layout and animates <code>max-width</code> instead of overlaying via <code>position</code>, pushing sibling content aside as it opens. Currently only affects <code>from-side=&quot;left&quot;</code>."
+        },
+        {
+          "name": "sticky",
+          "description": "<code>position: sticky</code> instead of the default <code>absolute</code> placement."
+        }
+      ],
+      "cssAliases": [
+        {
+          "name": ":--content-drawer",
+          "selectors": [
+            "content-drawer",
+            ".tag-content-drawer"
+          ],
+          "kind": "element",
+          "description": ""
+        },
+        {
+          "name": ":--content-drawer--from-side",
+          "selectors": [
+            "[from-side]",
+            "[data-placement]"
+          ],
+          "kind": "state",
+          "description": ""
+        },
+        {
+          "name": ":--content-drawer--from-side-bottom",
+          "selectors": [
+            "[from-side=\"bottom\"]",
+            "[data-placement=\"bottom\"]"
+          ],
+          "kind": "state",
+          "description": ""
+        },
+        {
+          "name": ":--content-drawer--from-side-left",
+          "selectors": [
+            "[from-side=\"left\"]",
+            "[data-placement=\"left\"]"
+          ],
+          "kind": "state",
+          "description": ""
+        },
+        {
+          "name": ":--content-drawer--from-side-right",
+          "selectors": [
+            "[from-side=\"right\"]",
+            "[data-placement=\"right\"]"
+          ],
+          "kind": "state",
+          "description": ""
+        },
+        {
+          "name": ":--content-drawer--from-side-top",
+          "selectors": [
+            "[from-side=\"top\"]",
+            "[data-placement=\"top\"]"
+          ],
+          "kind": "state",
+          "description": ""
+        },
+        {
+          "name": ":--content-drawer--is-open",
+          "selectors": [
+            "[is-open]",
+            "[aria-expanded=\"true\"]"
+          ],
+          "kind": "state",
+          "description": ""
+        },
+        {
+          "name": ":--content-drawer--is-scrubbing",
+          "selectors": [
+            "[is-scrubbing][is-scrubbing]",
+            "[data-scrubbing][data-scrubbing]"
+          ],
+          "kind": "state",
+          "description": ""
+        },
+        {
+          "name": ":--content-drawer--open-stage-1",
+          "selectors": [
+            "[open-stage=\"1\"]",
+            "[data-open=\"1\"]"
+          ],
+          "kind": "state",
+          "description": ""
+        },
+        {
+          "name": ":--content-drawer--open-stage-2",
+          "selectors": [
+            "[open-stage=\"2\"]",
+            "[data-open=\"2\"]"
+          ],
+          "kind": "state",
+          "description": ""
+        }
+      ],
+      "listens": [],
+      "commands": [
+        {
+          "name": "--close",
+          "description": "Closes the drawer (<code>is-open</code> unset)."
+        },
+        {
+          "name": "--open",
+          "description": "Opens the drawer (<code>is-open</code> set). <code>data-*</code> attributes on the invoker that name a declared prop (<code>data-open-stage</code>, <code>data-from-side</code>, …) are applied first; unknown, private and <code>isOpen</code> keys are ignored."
+        },
+        {
+          "name": "--toggle",
+          "description": "Toggles open / closed. Reads the invoker&#39;s <code>data-*</code> like <code>--open</code>."
+        }
+      ],
+      "defaultActions": [],
+      "expectedChildren": [],
+      "provisions": []
+    }
+  ],
+  "exportedFiles": {}
+}