@c2n/overlay 0.0.6

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@c2n/overlay",
+  "version": "0.0.6",
+  "type": "module",
+  "main": "dist/overlay.js",
+  "exports": {
+    ".": {
+      "default": "./dist/overlay.js",
+      "types": "./types/src/overlay.d.ts"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "keywords": [
+    "overlay",
+    "web component",
+    "lit"
+  ],
+  "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",
+    "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.6",
+    "@floating-ui/dom": "1.8.0",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+}

package/types/src/overlay.d.ts

@@ -0,0 +1,62 @@
+import { LitElement, type PropertyValues } from 'lit';
+import { type Placement } from '@floating-ui/dom';
+export type { Placement };
+/**
+ * Anchored popup built on the browser Popover API: the element sits in the top layer, opens and light-dismisses
+ * natively (Escape, click outside) and is positioned next to its anchor with floating-ui. The anchor is found in
+ * this order: the `anchor` property (an element), the `anchor` attribute (an element id in the same tree), or the
+ * element whose `popovertarget` points at this overlay's `id`. The overlay only positions itself; the content brings
+ * its own surface (background, border, shadow), so it fits menus, pickers and cards alike.
+ *
+ * The preferred `placement` may flip or shift to stay in the viewport; the placement actually used is exposed as the
+ * `current-placement` attribute, and the space available on that side as `--c2-overlay--available-height` /
+ * `--c2-overlay--available-width` custom properties (use them to cap a scrolling list).
+ *
+ * @tag c2-overlay
+ *
+ * @slot - Content of the overlay.
+ *
+ * @event {ToggleEvent} toggle - Native popover toggle: `newState` is `open` or `closed`.
+ * @event {ToggleEvent} beforetoggle - Native, cancelable, fired before the state changes.
+ *
+ * @cssproperty {pixel} [--c2-overlay--offset-y=8px] - Distance between the anchor and the overlay along the main axis.
+ * @cssproperty {pixel} [--c2-overlay--offset-x=0px] - Shift along the cross axis (towards the end for `*-start`, the start for `*-end`).
+ * @cssproperty {pixel} [--c2-overlay--viewport-padding=8px] - Minimum gap kept between the overlay and the viewport edges.
+ * @cssproperty {time} [--c2-overlay--transition-duration=150ms] - Open/close fade and scale; `0ms` disables it.
+ * @cssproperty {color} [--c2-overlay__backdrop--background=transparent] - The `::backdrop` behind the popover.
+ */
+export declare class Overlay extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Open state, kept in sync with the native popover (setting it shows or hides the popover). */
+    open: boolean;
+    /** Preferred placement (floating-ui names). The one in use is reflected as `current-placement`. */
+    placement: Placement;
+    /** Do not flip across the cross axis when there is no room (only along the main axis). */
+    disabledCrossAxis: boolean;
+    /** Make the overlay exactly as wide as the anchor. */
+    fitTarget: boolean;
+    /** By default the overlay is at least as wide as its anchor; set this to size it by its content only. */
+    freeWidth: boolean;
+    /** Anchor element, or (attribute) the id of the anchor. Falls back to the element whose `popovertarget` is this overlay's id. */
+    anchor: string | HTMLElement | undefined;
+    private cleanupPosition;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** The resolved anchor element, if any. */
+    get anchorElement(): HTMLElement | null;
+    private handleBeforeToggle;
+    private handleToggle;
+    private readPixels;
+    private startPositioning;
+    private stopPositioning;
+    private updatePosition;
+    updated(changed: PropertyValues<this>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-overlay': Overlay;
+    }
+}
+//# sourceMappingURL=overlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAGtE,OAAO,EAA0D,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAGzG,YAAY,EAAE,SAAS,EAAE,CAAA;AAEzB;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,0BAAoB;IAE1C,gGAAgG;IACpD,IAAI,UAAQ;IAExD,mGAAmG;IACtE,SAAS,EAAE,SAAS,CAAiB;IAElE,0FAA0F;IACZ,iBAAiB,UAAQ;IAEvG,sDAAsD;IACA,SAAS,UAAQ;IAEvE,yGAAyG;IACnD,SAAS,UAAQ;IAEvE,iIAAiI;IACrH,MAAM,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,CAAY;IAEhE,OAAO,CAAC,eAAe,CAA4B;;IAU1C,iBAAiB;IAKjB,oBAAoB;IAK7B,2CAA2C;IAC3C,IAAI,aAAa,IAAI,WAAW,GAAG,IAAI,CAetC;IAED,OAAO,CAAC,kBAAkB,CAGzB;IAED,OAAO,CAAC,YAAY,CAEnB;IAED,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,eAAe;YAKT,cAAc;IA8BnB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAarC,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,OAAO,CAAA;KACtB;CACF"}