@c2n/sheet 0.0.7

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,31 @@
+# @c2n/sheet
+
+Sheet built with Lit: a dialog pinned to an edge of the screen, for content that complements the page rather than interrupting it.
+
+```bash
+npm install @c2n/sheet
+```
+
+```html
+<script type="module">
+  import '@c2n/sheet'
+</script>
+
+<button onclick="document.getElementById('filters').show()">Filters</button>
+
+<c2-sheet id="filters">
+  <span slot="title">Filters</span>
+  <p>Anything that belongs beside the page rather than over it.</p>
+  <button slot="footer" onclick="this.closest('c2-sheet').close('applied')">Apply</button>
+</c2-sheet>
+```
+
+- **Edges**: `side="right"` (default), `left`, `top` or `bottom`. The panel spans its edge and slides in from off-screen; `--c2-sheet--size` is the width of a left/right sheet and the height of a top/bottom one, and the other axis fills the screen.
+- **Dialog behaviour**: built on the native `<dialog>` opened with `showModal()`, so focus is trapped and restored, the page behind is inert and covered by a backdrop, and Escape closes. `hide-close`, `no-backdrop-close`, `no-escape` and `no-scroll-lock` each opt out of one piece.
+- **Structure**: `title` slot (it labels the sheet; `label` names one without a visible heading), the default slot for the body, `footer` for actions. Only the body scrolls, so the header and footer stay put in a full-height panel.
+- **Events**: `open` after showing, `close` with `detail.returnValue`, and the native cancelable `cancel` on Escape.
+- **Nesting**: a sheet can hold another overlay. The page scroll lock is shared through `@c2n/core`, and each overlay only reacts to its own dialog's events, so closing an inner confirm leaves the sheet standing and the page locked.
+
+Theme it with `--c2-sheet--size`, `--c2-sheet--border-radius` (the two corners facing the page), `--c2-sheet--background`, `--c2-sheet--color`, `--c2-sheet--box-shadow`, `--c2-sheet--transition-duration` and the `__header`, `__body`, `__footer`, `__close` and `__backdrop` groups — the same names [`@c2n/modal`](../modal) uses, so a dialog and a sheet can be themed together. The full list is in `custom-elements.json` and on the docs site.
+
+Use [`@c2n/modal`](../modal) when the page must stop for a decision, and [`@c2n/side-nav`](../side-nav) when the panel is navigation that is part of the layout rather than a transient overlay.

package/dist/sheet.js

@@ -0,0 +1,166 @@
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { isServer } from "lit-html/is-server.js";
+import { property, query, state } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
+import { classMap } from "lit/directives/class-map.js";
+import { lockPageScroll, redispatchEvent } from "@c2n/core/dom-helper.js";
+//#region src/sheet.scss?inline
+var sheet_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: contents;\n}\n\n.c2-sheet {\n  box-sizing: border-box;\n  position: fixed;\n  max-width: 100vw;\n  max-height: 100dvh;\n  padding: 0;\n  border: var(--c2-sheet--border,none);\n  background: var(--c2-sheet--background,#ffffff);\n  color: var(--c2-sheet--color,#18181b);\n  box-shadow: var(--c2-sheet--box-shadow,0 24px 60px rgba(0, 0, 0, 0.25));\n  overflow: hidden;\n  transform: var(--_c2-sheet-enter);\n  transition: transform var(--c2-sheet--transition-duration,280ms) cubic-bezier(0.2, 0, 0, 1), display var(--c2-sheet--transition-duration,280ms) allow-discrete, overlay var(--c2-sheet--transition-duration,280ms) allow-discrete;\n}\n.c2-sheet[open] {\n  transform: none;\n}\n.c2-sheet::backdrop {\n  background: var(--c2-sheet__backdrop--background,rgba(9, 9, 11, 0.45));\n  backdrop-filter: var(--c2-sheet__backdrop--backdrop-filter);\n  opacity: 0;\n  transition: opacity var(--c2-sheet--transition-duration,280ms) cubic-bezier(0.2, 0, 0, 1), display var(--c2-sheet--transition-duration,280ms) allow-discrete, overlay var(--c2-sheet--transition-duration,280ms) allow-discrete;\n}\n.c2-sheet[open]::backdrop {\n  opacity: 1;\n}\n\n:host([side=right]) .c2-sheet {\n  inset: 0 0 0 auto;\n  width: var(--c2-sheet--size,380px);\n  height: 100dvh;\n  --_c2-sheet-enter: translateX(100%);\n  border-top-left-radius: var(--c2-sheet--border-radius,0px);\n  border-bottom-left-radius: var(--c2-sheet--border-radius,0px);\n}\n\n:host([side=left]) .c2-sheet {\n  inset: 0 auto 0 0;\n  width: var(--c2-sheet--size,380px);\n  height: 100dvh;\n  --_c2-sheet-enter: translateX(-100%);\n  border-top-right-radius: var(--c2-sheet--border-radius,0px);\n  border-bottom-right-radius: var(--c2-sheet--border-radius,0px);\n}\n\n:host([side=top]) .c2-sheet {\n  inset: 0 0 auto 0;\n  width: 100vw;\n  height: var(--c2-sheet--size,380px);\n  --_c2-sheet-enter: translateY(-100%);\n  border-bottom-left-radius: var(--c2-sheet--border-radius,0px);\n  border-bottom-right-radius: var(--c2-sheet--border-radius,0px);\n}\n\n:host([side=bottom]) .c2-sheet {\n  inset: auto 0 0 0;\n  width: 100vw;\n  height: var(--c2-sheet--size,380px);\n  --_c2-sheet-enter: translateY(100%);\n  border-top-left-radius: var(--c2-sheet--border-radius,0px);\n  border-top-right-radius: var(--c2-sheet--border-radius,0px);\n}\n\n@starting-style {\n  .c2-sheet[open] {\n    transform: var(--_c2-sheet-enter);\n  }\n  .c2-sheet[open]::backdrop {\n    opacity: 0;\n  }\n}\n.c2-sheet__panel {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n\n.c2-sheet__header {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  flex: none;\n  padding-top: var(--c2-sheet__header--padding-top,20px);\n  padding-right: var(--c2-sheet__header--padding-right,20px);\n  padding-bottom: var(--c2-sheet__header--padding-bottom,0px);\n  padding-left: var(--c2-sheet__header--padding-left,24px);\n  border-bottom: var(--c2-sheet__header--border-bottom);\n}\n.c2-sheet__header[hidden] {\n  display: none;\n}\n\n.c2-sheet__title {\n  flex: 1;\n  min-width: 0;\n  font-size: var(--c2-sheet__header--font-size,17px);\n  font-weight: var(--c2-sheet__header--font-weight,600);\n  line-height: var(--c2-sheet__header--line-height,1.35);\n  min-height: var(--c2-sheet__close--size,32px);\n  display: flex;\n  align-items: center;\n}\n.c2-sheet__title ::slotted(*) {\n  margin: 0;\n  font: inherit;\n}\n\n.c2-sheet__close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  box-sizing: border-box;\n  width: var(--c2-sheet__close--size,32px);\n  height: var(--c2-sheet__close--size,32px);\n  margin: 0;\n  padding: 0;\n  border: none;\n  border-radius: var(--c2-sheet__close--border-radius,8px);\n  background: transparent;\n  color: var(--c2-sheet__close--color,#71717a);\n  cursor: pointer;\n  transition: background 250ms cubic-bezier(0.2, 0, 0, 1), color 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.c2-sheet__close svg,\n.c2-sheet__close ::slotted(*) {\n  width: var(--c2-sheet__close--icon-size,18px);\n  height: var(--c2-sheet__close--icon-size,18px);\n}\n.c2-sheet__close:hover {\n  background: var(--c2-sheet__close__hover--background,#f4f4f5);\n  color: var(--c2-sheet__close__hover--color,#18181b);\n}\n.c2-sheet__close:focus-visible {\n  outline: var(--c2-sheet__close__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-offset: 1px;\n}\n\n.c2-sheet__body {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  padding-top: var(--c2-sheet__body--padding-top,12px);\n  padding-right: var(--c2-sheet__body--padding-right,24px);\n  padding-bottom: var(--c2-sheet__body--padding-bottom,20px);\n  padding-left: var(--c2-sheet__body--padding-left,24px);\n  font-size: var(--c2-sheet__body--font-size,14px);\n  line-height: var(--c2-sheet__body--line-height,1.6);\n  color: var(--c2-sheet__body--color);\n}\n\n.c2-sheet__footer {\n  display: flex;\n  align-items: center;\n  flex: none;\n  gap: var(--c2-sheet__footer--gap,8px);\n  justify-content: var(--c2-sheet__footer--justify-content,flex-end);\n  padding-top: var(--c2-sheet__footer--padding-top,12px);\n  padding-right: var(--c2-sheet__footer--padding-right,24px);\n  padding-bottom: var(--c2-sheet__footer--padding-bottom,20px);\n  padding-left: var(--c2-sheet__footer--padding-left,24px);\n  border-top: var(--c2-sheet__footer--border-top);\n}\n.c2-sheet__footer[hidden] {\n  display: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .c2-sheet {\n    --_c2-sheet-enter: none;\n    transition: display var(--c2-sheet--transition-duration,280ms) allow-discrete, overlay var(--c2-sheet--transition-duration,280ms) allow-discrete;\n  }\n}";
+//#endregion
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/sheet.ts
+var Sheet = class Sheet extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.open = false;
+		this.side = "right";
+		this.label = void 0;
+		this.noBackdropClose = false;
+		this.noEscape = false;
+		this.hideClose = false;
+		this.noScrollLock = false;
+		this.returnValue = "";
+		this.hasTitle = false;
+		this.hasFooter = false;
+		this.handleDialogClose = (event) => {
+			if (event.target !== this.dialog) return;
+			this.returnValue = this.dialog.returnValue;
+			this.unlockScroll();
+			this.open = false;
+			this.dispatchEvent(new CustomEvent("close", {
+				detail: { returnValue: this.returnValue },
+				bubbles: true,
+				composed: true
+			}));
+		};
+		this.handleDialogCancel = (event) => {
+			if (event.target !== this.dialog) return;
+			if (this.noEscape) {
+				event.preventDefault();
+				return;
+			}
+			if (!redispatchEvent(this, event)) event.preventDefault();
+		};
+		this.handleDialogClick = (event) => {
+			if (event.target === this.dialog && !this.noBackdropClose) this.close();
+		};
+	}
+	static {
+		this.styles = unsafeCSS(sheet_default);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.unlockScroll();
+	}
+	/** Opens the sheet (modal). */
+	show() {
+		this.open = true;
+	}
+	/** Closes the sheet with an optional `returnValue`. */
+	close(returnValue = "") {
+		this.returnValue = returnValue;
+		if (this.dialog?.open) this.dialog.close(returnValue);
+		else this.open = false;
+	}
+	lockScroll() {
+		if (this.noScrollLock || this.releaseScroll || isServer) return;
+		this.releaseScroll = lockPageScroll();
+	}
+	unlockScroll() {
+		this.releaseScroll?.();
+		this.releaseScroll = void 0;
+	}
+	handleSlotChange(event) {
+		this.updateSlot(event.target);
+	}
+	updateSlot(slot) {
+		const filled = slot.assignedNodes({ flatten: true }).some((n) => n.nodeType === Node.ELEMENT_NODE || (n.textContent ?? "").trim() !== "");
+		if (slot.name === "title") this.hasTitle = filled;
+		else if (slot.name === "footer") this.hasFooter = filled;
+	}
+	firstUpdated() {
+		for (const slot of this.renderRoot.querySelectorAll("slot")) this.updateSlot(slot);
+	}
+	updated(changed) {
+		if (changed.has("open") && !isServer && this.dialog) {
+			if (this.open && !this.dialog.open) {
+				this.dialog.showModal();
+				this.lockScroll();
+				this.dispatchEvent(new Event("open", {
+					bubbles: true,
+					composed: true
+				}));
+			} else if (!this.open && this.dialog.open) this.dialog.close(this.returnValue);
+		}
+	}
+	render() {
+		return html`
+      <dialog
+        class="c2-sheet"
+        part="panel"
+        aria-labelledby=${this.hasTitle ? "title" : nothing}
+        aria-label=${!this.hasTitle && this.label ? this.label : nothing}
+        @close=${this.handleDialogClose}
+        @cancel=${this.handleDialogCancel}
+        @click=${this.handleDialogClick}
+      >
+        <div class=${classMap({
+			"c2-sheet__panel": true,
+			"has-title": this.hasTitle,
+			"has-footer": this.hasFooter
+		})}>
+          <header class="c2-sheet__header" part="header" ?hidden=${!this.hasTitle && this.hideClose}>
+            <div class="c2-sheet__title" id="title"><slot name="title" @slotchange=${this.handleSlotChange}></slot></div>
+            ${this.hideClose ? nothing : html`<button class="c2-sheet__close" part="close" type="button" aria-label="Close" @click=${() => this.close()}>
+                    <slot name="close-icon">
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M18 6 6 18M6 6l12 12"></path>
+                      </svg>
+                    </slot>
+                  </button>`}
+          </header>
+          <div class="c2-sheet__body" part="body"><slot></slot></div>
+          <footer class="c2-sheet__footer" part="footer" ?hidden=${!this.hasFooter}>
+            <slot name="footer" @slotchange=${this.handleSlotChange}></slot>
+          </footer>
+        </div>
+      </dialog>
+    `;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Sheet.prototype, "open", void 0);
+__decorate([property({ reflect: true })], Sheet.prototype, "side", void 0);
+__decorate([property()], Sheet.prototype, "label", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "no-backdrop-close"
+})], Sheet.prototype, "noBackdropClose", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "no-escape"
+})], Sheet.prototype, "noEscape", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "hide-close"
+})], Sheet.prototype, "hideClose", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "no-scroll-lock"
+})], Sheet.prototype, "noScrollLock", void 0);
+__decorate([state()], Sheet.prototype, "hasTitle", void 0);
+__decorate([state()], Sheet.prototype, "hasFooter", void 0);
+__decorate([query("dialog")], Sheet.prototype, "dialog", void 0);
+Sheet = __decorate([customElement("c2-sheet")], Sheet);
+//#endregion
+export { Sheet };

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@c2n/sheet",
+  "version": "0.0.7",
+  "type": "module",
+  "main": "dist/sheet.js",
+  "exports": {
+    ".": {
+      "types": "./types/src/sheet.d.ts",
+      "default": "./dist/sheet.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
+  ],
+  "keywords": [
+    "sheet",
+    "web component",
+    "lit"
+  ],
+  "license": "MIT",
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "build:only": "vite build",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.7",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "c8db398a27f7cd417d665fdf5da455fee2d4e910"
+}

package/react.d.ts

@@ -0,0 +1,24 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// JSX types for the custom elements of @c2n/sheet. Import once, anywhere in the program:
+//
+//     import '@c2n/sheet/react'
+//
+// Register the elements at module scope before React renders, or React writes an object prop as an
+// attribute and it stringifies.
+
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+import type { Sheet } from '@c2n/sheet'
+
+/** Standard React host-element attributes plus the element's own public properties. */
+type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'c2-sheet': C2Props<Sheet>
+    }
+  }
+}
+
+export {}

package/react.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}

package/types/src/sheet.d.ts

@@ -0,0 +1,129 @@
+import { LitElement, type PropertyValues } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
+export type SheetSide = 'right' | 'left' | 'top' | 'bottom';
+/** Events fired by {@link Sheet}, keyed for `addEventListener`. */
+export interface SheetEventMap {
+    open: Event;
+    close: CustomEvent<{
+        returnValue: string;
+    }>;
+    cancel: Event;
+}
+export interface Sheet {
+    addEventListener: TypedAddEventListener<Sheet, SheetEventMap>;
+    removeEventListener: TypedRemoveEventListener<Sheet, SheetEventMap>;
+}
+/**
+ * Dialog pinned to an edge of the screen, for content that complements the page rather than interrupting it: filters,
+ * details, a form beside the record it edits. Built on the native `<dialog>` like `c2-modal`, so focus is trapped and
+ * restored, the page behind is inert and covered by a backdrop, and Escape closes — but the panel spans its edge and
+ * slides in from it instead of being centred.
+ *
+ * `side` picks the edge (`right` by default). `--c2-sheet--size` is the width of a left/right sheet and the height of
+ * a top/bottom one; the opposite axis always fills the screen. Open it with the `open` attribute or `show()`, close it
+ * with `close(returnValue)`, the built-in close button, a click on the backdrop or Escape (each can be turned off).
+ * Content is split into a `title` slot, the body (default slot) and a `footer` slot for actions, and the body scrolls
+ * on its own so the header and footer stay put in a full-height panel.
+ *
+ * Use `c2-modal` for a decision that blocks the page, and `c2-side-nav` for navigation that is part of the layout
+ * rather than a transient overlay.
+ *
+ * @tag c2-sheet
+ *
+ * @slot - Body content.
+ * @slot title - Heading shown in the header; the sheet is labelled by it.
+ * @slot footer - Actions row (a flex row, see the `footer--*` variables).
+ * @slot close-icon - Replaces the default × icon of the close button.
+ *
+ * @event {Event} open - Fired after the sheet has been shown.
+ * @event {CustomEvent<{ returnValue: string }>} close - Fired after the sheet has closed; `detail.returnValue` is what `close()` received (`''` for Escape / backdrop / the × button).
+ * @event {Event} cancel - Native, cancelable: fired on Escape before closing.
+ *
+ * @cssproperty {pixel} [--c2-sheet--size=380px] - Width of a `left`/`right` sheet, height of a `top`/`bottom` one. The other axis fills the screen.
+ * @cssproperty {background} [--c2-sheet--background=#ffffff]
+ * @cssproperty {color} [--c2-sheet--color=#18181b]
+ * @cssproperty {border} [--c2-sheet--border=none]
+ * @cssproperty {border-radius} [--c2-sheet--border-radius=0px] - Rounds the two corners facing the page; the edge stays square.
+ * @cssproperty {box-shadow} [--c2-sheet--box-shadow=0 24px 60px rgba(0, 0, 0, 0.25)]
+ * @cssproperty {time} [--c2-sheet--transition-duration=280ms] - Slide in and out; `0ms` disables it.
+ *
+ * @cssproperty {padding} [--c2-sheet__header--padding-top=20px]
+ * @cssproperty {padding} [--c2-sheet__header--padding-right=20px]
+ * @cssproperty {padding} [--c2-sheet__header--padding-bottom=0px]
+ * @cssproperty {padding} [--c2-sheet__header--padding-left=24px]
+ * @cssproperty {font-size} [--c2-sheet__header--font-size=17px]
+ * @cssproperty {font-weight} [--c2-sheet__header--font-weight=600]
+ * @cssproperty {line-height} [--c2-sheet__header--line-height=1.35]
+ * @cssproperty {border} --c2-sheet__header--border-bottom - Divider under the header; raise `header--padding-bottom` with it.
+ *
+ * @cssproperty {padding} [--c2-sheet__body--padding-top=12px]
+ * @cssproperty {padding} [--c2-sheet__body--padding-right=24px]
+ * @cssproperty {padding} [--c2-sheet__body--padding-bottom=20px]
+ * @cssproperty {padding} [--c2-sheet__body--padding-left=24px]
+ * @cssproperty {font-size} [--c2-sheet__body--font-size=14px]
+ * @cssproperty {line-height} [--c2-sheet__body--line-height=1.6]
+ * @cssproperty {color} --c2-sheet__body--color - Defaults to the sheet colour.
+ *
+ * @cssproperty {padding} [--c2-sheet__footer--padding-top=12px]
+ * @cssproperty {padding} [--c2-sheet__footer--padding-right=24px]
+ * @cssproperty {padding} [--c2-sheet__footer--padding-bottom=20px]
+ * @cssproperty {padding} [--c2-sheet__footer--padding-left=24px]
+ * @cssproperty {pixel} [--c2-sheet__footer--gap=8px]
+ * @cssproperty {justify-content} [--c2-sheet__footer--justify-content=flex-end]
+ * @cssproperty {border} --c2-sheet__footer--border-top - Divider above the footer; raise `footer--padding-top` with it.
+ *
+ * @cssproperty {pixel} [--c2-sheet__close--size=32px]
+ * @cssproperty {pixel} [--c2-sheet__close--icon-size=18px]
+ * @cssproperty {border-radius} [--c2-sheet__close--border-radius=8px]
+ * @cssproperty {color} [--c2-sheet__close--color=#71717a]
+ * @cssproperty {background} [--c2-sheet__close__hover--background=#f4f4f5]
+ * @cssproperty {color} [--c2-sheet__close__hover--color=#18181b]
+ * @cssproperty {outline} [--c2-sheet__close__focus--outline=2px solid rgba(2, 101, 220, 0.4)]
+ *
+ * @cssproperty {background} [--c2-sheet__backdrop--background=rgba(9, 9, 11, 0.45)]
+ * @cssproperty {backdrop-filter} --c2-sheet__backdrop--backdrop-filter - e.g. `blur(4px)`.
+ */
+export declare class Sheet extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Open state. Setting it shows or closes the sheet. */
+    open: boolean;
+    /** Edge the sheet is pinned to and slides in from. */
+    side: SheetSide;
+    /** Accessible name when there is no `title` slot. */
+    label: string | undefined;
+    /** Keep the sheet open when the backdrop is clicked. */
+    noBackdropClose: boolean;
+    /** Ignore Escape. */
+    noEscape: boolean;
+    /** Hide the built-in × button. */
+    hideClose: boolean;
+    /** Leave the page scrollable while the sheet is open. */
+    noScrollLock: boolean;
+    /** Value passed to the last `close()` call, mirrors `HTMLDialogElement.returnValue`. */
+    returnValue: string;
+    private hasTitle;
+    private hasFooter;
+    private dialog;
+    private releaseScroll;
+    disconnectedCallback(): void;
+    /** Opens the sheet (modal). */
+    show(): void;
+    /** Closes the sheet with an optional `returnValue`. */
+    close(returnValue?: string): void;
+    private lockScroll;
+    private unlockScroll;
+    private handleDialogClose;
+    private handleDialogCancel;
+    private handleDialogClick;
+    private handleSlotChange;
+    private updateSlot;
+    firstUpdated(): void;
+    updated(changed: PropertyValues<this>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-sheet': Sheet;
+    }
+}
+//# sourceMappingURL=sheet.d.ts.map

package/types/src/sheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../src/sheet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAI/E,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAKhG,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAA;AAE3D,mEAAmE;AACnE,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,KAAK,CAAA;IACX,KAAK,EAAE,WAAW,CAAC;QAAE,WAAW,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IAC3C,MAAM,EAAE,KAAK,CAAA;CACd;AAED,MAAM,WAAW,KAAK;IACpB,gBAAgB,EAAE,qBAAqB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAA;IAC7D,mBAAmB,EAAE,wBAAwB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAA;CACpE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AACH,qBACa,KAAM,SAAQ,UAAU;IACnC,OAAgB,MAAM,0BAAoB;IAE1C,wDAAwD;IACZ,IAAI,UAAQ;IAExD,sDAAsD;IACzB,IAAI,EAAE,SAAS,CAAU;IAEtD,qDAAqD;IACzC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAY;IAEjD,wDAAwD;IACK,eAAe,UAAQ;IAEpF,qBAAqB;IACgC,QAAQ,UAAQ;IAErE,kCAAkC;IACmC,SAAS,UAAQ;IAEtF,yDAAyD;IACC,YAAY,UAAQ;IAE9E,wFAAwF;IACxF,WAAW,SAAK;IAEP,OAAO,CAAC,QAAQ,CAAQ;IACxB,OAAO,CAAC,SAAS,CAAQ;IAEjB,OAAO,CAAC,MAAM,CAAoB;IAEnD,OAAO,CAAC,aAAa,CAA0B;IAEtC,oBAAoB;IAK7B,+BAA+B;IAC/B,IAAI;IAIJ,uDAAuD;IACvD,KAAK,CAAC,WAAW,SAAK;IAMtB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,iBAAiB,CAOxB;IAED,OAAO,CAAC,kBAAkB,CAOzB;IAED,OAAO,CAAC,iBAAiB,CAGxB;IAED,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,UAAU;IAMT,YAAY;IAIZ,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAYrC,MAAM;CAkChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,KAAK,CAAA;KAClB;CACF"}

package/vue.d.ts

@@ -0,0 +1,39 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/sheet. Import once, anywhere in the program:
+//
+//     import '@c2n/sheet/vue'
+//
+// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
+// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
+
+import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { Sheet, SheetEventMap } from '@c2n/sheet'
+
+/** The element's own public properties, plus every attribute Vue understands on a host element. */
+type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
+
+declare module 'vue' {
+  interface GlobalComponents {
+    'c2-sheet': DefineComponent<
+      C2Props<Sheet> & {
+        'no-backdrop-close'?: unknown
+        'no-escape'?: unknown
+        'hide-close'?: unknown
+        'no-scroll-lock'?: unknown
+        onOpen?: (event: SheetEventMap['open']) => void
+        onClose?: (event: SheetEventMap['close']) => void
+        onCancel?: (event: SheetEventMap['cancel']) => void
+      }
+    >
+  }
+}
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    /** Vue's own definition omits it, and slotting a plain element into a component needs it. */
+    slot?: string
+  }
+}
+
+export {}

package/vue.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}