@excom/content-drawer 0.1.0

package/.rush/temp/chunked-rush-logs/content-drawer.apply-exports.chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: cd \"$RUSH_PROJECT_FOLDER\" && node ../heft-rig/scripts/apply-exports.mjs \n"}

package/.rush/temp/chunked-rush-logs/content-drawer.build_docs.chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs \n"}

package/.rush/temp/chunked-rush-logs/content-drawer.build_package-metas.chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs \n"}

package/.rush/temp/operation/apply-exports/all.log

@@ -0,0 +1 @@
+Invoking: cd "$RUSH_PROJECT_FOLDER" && node ../heft-rig/scripts/apply-exports.mjs 

package/.rush/temp/operation/apply-exports/log-chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: cd \"$RUSH_PROJECT_FOLDER\" && node ../heft-rig/scripts/apply-exports.mjs \n"}

package/.rush/temp/operation/apply-exports/state.json

@@ -0,0 +1,3 @@
+{
+  "nonCachedDurationMs": 33.706642999999985
+}

package/.rush/temp/operation/build_docs/all.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs 

package/.rush/temp/operation/build_docs/log-chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs \n"}

package/.rush/temp/operation/build_docs/state.json

@@ -0,0 +1,3 @@
+{
+  "nonCachedDurationMs": 54.51659700000005
+}

package/.rush/temp/operation/build_package-metas/all.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs 

package/.rush/temp/operation/build_package-metas/log-chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs \n"}

package/.rush/temp/operation/build_package-metas/state.json

@@ -0,0 +1,3 @@
+{
+  "nonCachedDurationMs": 109.20764600000007
+}

package/.rush/temp/shrinkwrap-deps.json

@@ -0,0 +1,3 @@
+{
+  "../../packages/content-drawer": "../../packages/content-drawer:jBi1kG66FeHydRSlEDv+j1OmUyYZvtYazxNti9QBCwU=:"
+}

package/config/rig.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/rig-package/rig.schema.json",
+  "rigPackageName": "@excom/heft-rig",
+  "rigProfile": "default"
+}

package/content-drawer.ts

@@ -0,0 +1,205 @@
+import {
+  ConstructorType,
+  Neutron,
+  NeutronElement,
+  TEvent,
+} from "@excom/neutron";
+
+/**
+ * Props the invoker of `--open` / `--toggle` may set through its `data-*`
+ * attributes (`data-open-stage="1"` → `openStage`). Keys are whitelisted
+ * against declared, non-private props; `isOpen` is always the command's.
+ */
+export type ContentDrawerCommandData = Partial<{
+  openStage: number;
+  fromSide: string;
+  disappearAfter: number;
+  singletonName: string;
+}>;
+
+export type ContentDrawerOpenedEvent = TEvent & {
+  type: "content-drawer-opened";
+  detail: HTMLElement;
+};
+
+export type ContentDrawerClosedEvent = TEvent & {
+  type: "content-drawer-closed";
+  detail: HTMLElement;
+};
+
+/**
+ * Panel / sheet that slides in from an edge of its positioned parent —
+ * bottom sheets, nav drawers, filter panels, toast-style confirmations.
+ * Drive it with the `--open` / `--close` / `--toggle` commands (`<button
+ * command="--toggle" commandfor="…">`). Pair with a sibling
+ * `[role="presentation"]` / `.tag-backdrop` (Valence.css dialog dimmer) and
+ * `<event-handler>` / `<dismiss-watcher>` for click / Escape dismissal.
+ *
+ * @summary Slide-in drawer / sheet — bottom, top, left, or right, with peek stages.
+ *
+ * @command --open - Opens the drawer (`is-open` set). `data-*` attributes on
+ *   the invoker that name a declared prop (`data-open-stage`,
+ *   `data-from-side`, …) are applied first; unknown, private and `isOpen`
+ *   keys are ignored.
+ * @command --close - Closes the drawer (`is-open` unset).
+ * @command --toggle - Toggles open / closed. Reads the invoker's `data-*`
+ *   like `--open`.
+ *
+ * @fires content-drawer-opened - After open (`is-open` set), `detail` is the
+ *   drawer. When `singleton-name` is set it is also broadcast so drawers
+ *   sharing that name close.
+ * @type ContentDrawerOpenedEvent
+ * @fires content-drawer-closed - After close (`is-open` unset), `detail` is
+ *   the drawer.
+ * @type ContentDrawerClosedEvent
+ */
+export const ContentDrawer = Neutron({
+  tag: "content-drawer",
+  props: {
+    /**
+     * @option
+     * Edge the drawer slides from.
+     * @values bottom | top | left | right
+     * @default bottom
+     */
+    fromSide: String,
+    /**
+     * @option
+     * Auto-close after this many seconds once opened — toast-style /
+     * transient confirmations.
+     */
+    disappearAfter: Number,
+    /**
+     * @option
+     * Shared group name. Opening one drawer closes others with the same
+     * name (singleton coordination).
+     */
+    singletonName: String,
+    /**
+     * @option
+     * @state
+     * How far the drawer opens: `0` full, `1` half, `2` peek. Unset = full.
+     * Set statically, or per open through `data-open-stage` on the
+     * `--open` / `--toggle` invoker.
+     * @values 0 | 1 | 2
+     */
+    openStage: {
+      type: Number,
+      isValid: (value: number) => value >= 0 && value <= 2,
+    },
+    /**
+     * @option
+     * @state
+     * Open state. Toggle directly, or through the `--open` / `--close` /
+     * `--toggle` commands. For Escape / outside-click dismissal pair with
+     * `<dismiss-watcher command-name="--close">`.
+     */
+    isOpen: Boolean,
+    // private state
+    _timeoutId: Object as unknown as ConstructorType<
+      ReturnType<typeof setTimeout>
+    >,
+  },
+})
+  .defineMethods({
+    _timeoutCallback: () => ({
+      isOpen: false,
+    }),
+    _emitClosed: (element) => ({
+      emit: ["content-drawer-closed", { detail: element }],
+    }),
+    _singletonCallback: (element, { detail }: CustomEvent<typeof element>) => {
+      if (
+        element !== detail &&
+        element.singletonName &&
+        detail?.singletonName &&
+        element.singletonName === detail.singletonName
+      ) {
+        return {
+          isOpen: false,
+        };
+      }
+    },
+  })
+  .onConnected(
+    ({ singletonName, _singletonCallback }) =>
+      // Re-register after a DOM move / reconnect so the drawer still coordinates
+      !!singletonName && {
+        toggleBroadcastListeners: [
+          ["content-drawer-opened", _singletonCallback, true],
+        ],
+      }
+  )
+  .onDisconnected(({ isMoving, _timeoutId }) => {
+    // A DOM move keeps the disappear timer running
+    if (isMoving || !_timeoutId) {
+      return;
+    }
+    clearTimeout(_timeoutId);
+    return {
+      _timeoutId: null,
+    };
+  })
+  .onPropUnset("isOpen", ({ _timeoutId }) => {
+    if (_timeoutId) {
+      clearTimeout(_timeoutId);
+    }
+    return {
+      _timeoutId: null,
+      _emitClosed: [],
+    };
+  })
+  .onPropSet(
+    "isOpen",
+    ({ disappearAfter, _timeoutId, _timeoutCallback }) =>
+      !!disappearAfter &&
+      !_timeoutId && {
+        _timeoutId: setTimeout(_timeoutCallback, disappearAfter * 1000),
+      }
+  )
+  .onPropSet("isOpen", (el) => ({
+    emit: ["content-drawer-opened", { detail: el }],
+    ...(el.singletonName
+      ? { broadcast: ["content-drawer-opened", { detail: el }] }
+      : {}),
+  }))
+  .onPropChanged("singletonName", ({ singletonName, _singletonCallback }) => ({
+    toggleBroadcastListeners: [
+      ["content-drawer-opened", _singletonCallback, !!singletonName],
+    ],
+  }))
+  .onCommand("--close", () => ({
+    isOpen: false,
+  }))
+  .onCommand("--open", (el, { source }) => ({
+    ...propsFromSource(el, source),
+    isOpen: true,
+  }))
+  .onCommand("--toggle", (el, { source }) => ({
+    ...propsFromSource(el, source),
+    isOpen: !el.isOpen,
+  }));
+
+/**
+ * Props from the invoker's `data-*` attributes (`data-open-stage` →
+ * `openStage`), keeping only keys that name a declared, non-`_` prop.
+ * Spread the result *before* the command's own writes so an invoker
+ * can't force those through its dataset.
+ */
+export function propsFromSource(
+  element: HTMLElement,
+  source: Element | null | undefined
+): Record<string, unknown> {
+  if (!(source instanceof HTMLElement)) {
+    return {};
+  }
+  const config = (element.constructor as typeof NeutronElement).getConfig();
+  const declared = new Set(
+    Object.values(config?.props ?? {})
+      .map((prop) => prop.prop)
+      .filter((name) => !name.startsWith("_"))
+  );
+  return Object.fromEntries(
+    Object.entries(source.dataset).filter(([key]) => declared.has(key))
+  );
+}

package/index.css

@@ -0,0 +1,5 @@
+@import "./src/content-drawer.css";
+
+@layer {
+  @mixin module-content-drawer;
+}

package/index.ts

@@ -0,0 +1,17 @@
+import { ContentDrawer } from "./content-drawer";
+
+ContentDrawer.define();
+
+export { ContentDrawer };
+
+type T_HTMLContentDrawerElement = typeof ContentDrawer.CustomElement;
+declare global {
+  interface HTMLContentDrawerElement extends T_HTMLContentDrawerElement {}
+  interface Window {
+    HTMLContentDrawerElement: HTMLContentDrawerElement;
+  }
+  interface HTMLElementTagNameMap {
+    "content-drawer": HTMLContentDrawerElement;
+  }
+}
+export type { HTMLContentDrawerElement };

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@excom/content-drawer",
+  "version": "0.1.0",
+  "description": "<content-drawer> custom element",
+  "license": "MIT",
+  "engines": {
+    "node": ">=24.13.0"
+  },
+  "type": "module",
+  "dependencies": {
+    "@excom/kit-utils": "^0.1.0",
+    "@excom/valence": "^0.1.0",
+    "@excom/neutron": "^0.1.0"
+  },
+  "peerDependencies": {},
+  "devDependencies": {
+    "@excom/heft-rig": "^0.1.0"
+  },
+  "repository": {
+    "url": "excom-dev/nucleus",
+    "directory": "packages/content-drawer"
+  },
+  "homepage": "https://github.com/excom-dev/nucleus/tree/main/packages/content-drawer/support/docs/README.md",
+  "bugs": "https://github.com/excom-dev/nucleus/issues",
+  "keywords": [
+    "content-drawer",
+    "neutron",
+    "custom-elements"
+  ],
+  "excom": {
+    "packageType": "kit-element"
+  },
+  "scripts": {
+    "build": "node node_modules/@excom/heft-rig/scripts/vite-build.mjs",
+    "build:watch": "node node_modules/@excom/heft-rig/scripts/vite-build-watch.mjs",
+    "format": "node node_modules/@excom/heft-rig/scripts/format.mjs",
+    "test": "node node_modules/@excom/heft-rig/scripts/vitest.mjs",
+    "coverage": "node node_modules/@excom/heft-rig/scripts/coverage.mjs",
+    "dev": "node node_modules/@excom/heft-rig/scripts/vite-dev.mjs",
+    "preview": "node node_modules/@excom/heft-rig/scripts/vite-preview.mjs",
+    "build:package-metas": "node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs",
+    "build:docs": "node node_modules/@excom/heft-rig/scripts/build-docs.mjs"
+  }
+}

package/rush-logs/content-drawer.apply-exports.cache.log

@@ -0,0 +1 @@
+Caching has been disabled for this project's "apply-exports" command.

package/rush-logs/content-drawer.apply-exports.log

@@ -0,0 +1 @@
+Invoking: cd "$RUSH_PROJECT_FOLDER" && node ../heft-rig/scripts/apply-exports.mjs 

package/rush-logs/content-drawer.build_docs.cache.log

@@ -0,0 +1 @@
+This project does not define the caching behavior of the "build:docs" command, so caching has been disabled.

package/rush-logs/content-drawer.build_docs.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs 

package/rush-logs/content-drawer.build_package-metas.cache.log

@@ -0,0 +1 @@
+This project does not define the caching behavior of the "build:package-metas" command, so caching has been disabled.

package/rush-logs/content-drawer.build_package-metas.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs