@c2n/overlay 0.0.6 → 0.0.7

package/dist/overlay.js

@@ -1,6 +1,7 @@
 import { LitElement, html, unsafeCSS } from "lit";
 import { isServer } from "lit-html/is-server.js";
-import { customElement, property } from "lit/decorators.js";
+import { property } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
 //#region ../../../node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
 var min = Math.min;
 var max = Math.max;
@@ -1163,6 +1164,8 @@ var Overlay = class Overlay extends LitElement {
 		super();
 		this.open = false;
 		this.placement = "bottom-start";
+		this.offset = void 0;
+		this.crossOffset = void 0;
 		this.disabledCrossAxis = false;
 		this.fitTarget = false;
 		this.freeWidth = false;
@@ -1217,8 +1220,8 @@ var Overlay = class Overlay extends LitElement {
 		this.cleanupPosition = null;
 	}
 	async updatePosition(anchor) {
-		const mainAxis = this.readPixels("--c2-overlay--offset-y", 8);
-		const crossAxis = this.readPixels("--c2-overlay--offset-x", 0);
+		const mainAxis = Number.isFinite(this.offset) ? this.offset : this.readPixels("--c2-overlay--offset-y", 8);
+		const crossAxis = Number.isFinite(this.crossOffset) ? this.crossOffset : this.readPixels("--c2-overlay--offset-x", 0);
 		const padding = this.readPixels("--c2-overlay--viewport-padding", 8);
 		if (this.fitTarget) this.style.width = `${anchor.offsetWidth}px`;
 		else this.style.removeProperty("width");
@@ -1257,7 +1260,7 @@ var Overlay = class Overlay extends LitElement {
 				else if (!this.open && isOpen) this.hidePopover();
 			} catch {}
 		}
-		if (changed.has("placement") && this.matches(":popover-open")) this.startPositioning();
+		if ((changed.has("placement") || changed.has("offset") || changed.has("crossOffset")) && this.matches(":popover-open")) this.startPositioning();
 	}
 	render() {
 		return html`<slot></slot>`;
@@ -1268,6 +1271,11 @@ __decorate([property({
 	reflect: true
 })], Overlay.prototype, "open", void 0);
 __decorate([property({ reflect: true })], Overlay.prototype, "placement", void 0);
+__decorate([property({ type: Number })], Overlay.prototype, "offset", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "cross-offset"
+})], Overlay.prototype, "crossOffset", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true,

package/package.json

@@ -1,18 +1,30 @@
 {
   "name": "@c2n/overlay",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "module",
   "main": "dist/overlay.js",
   "exports": {
     ".": {
-      "default": "./dist/overlay.js",
-      "types": "./types/src/overlay.d.ts"
+      "types": "./types/src/overlay.d.ts",
+      "default": "./dist/overlay.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"
+    "types",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
   ],
   "keywords": [
     "overlay",
@@ -48,7 +60,7 @@
     }
   },
   "dependencies": {
-    "@c2n/core": "0.0.6",
+    "@c2n/core": "0.0.7",
     "@floating-ui/dom": "1.8.0",
     "lit": "3.3.3"
   },
@@ -56,5 +68,5 @@
     "@c2n/config": "*"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+  "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/overlay. Import once, anywhere in the program:
+//
+//     import '@c2n/overlay/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 { Overlay } from '@c2n/overlay'
+
+/** 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-overlay': C2Props<Overlay>
+    }
+  }
+}
+
+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/overlay.d.ts

@@ -1,6 +1,16 @@
 import { LitElement, type PropertyValues } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
 import { type Placement } from '@floating-ui/dom';
 export type { Placement };
+/** Events fired by {@link Overlay}, keyed for `addEventListener`. */
+export interface OverlayEventMap {
+    toggle: ToggleEvent;
+    beforetoggle: ToggleEvent;
+}
+export interface Overlay {
+    addEventListener: TypedAddEventListener<Overlay, OverlayEventMap>;
+    removeEventListener: TypedRemoveEventListener<Overlay, OverlayEventMap>;
+}
 /**
  * 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
@@ -30,7 +40,11 @@ export declare class Overlay extends LitElement {
     /** 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;
+    placement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+    /** Distance in pixels from the anchor along the placement direction. Falls back to `--c2-overlay--offset-y`. */
+    offset: number | undefined;
+    /** Shift in pixels perpendicular to the placement direction. Falls back to `--c2-overlay--offset-x`. */
+    crossOffset: number | undefined;
     /** 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. */

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

@@ -1 +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"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAItE,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAChG,OAAO,EAA0D,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAGzG,YAAY,EAAE,SAAS,EAAE,CAAA;AAEzB,qEAAqE;AACrE,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,WAAW,CAAA;IACnB,YAAY,EAAE,WAAW,CAAA;CAC1B;AAED,MAAM,WAAW,OAAO;IACtB,gBAAgB,EAAE,qBAAqB,CAAC,OAAO,EAAE,eAAe,CAAC,CAAA;IACjE,mBAAmB,EAAE,wBAAwB,CAAC,OAAO,EAAE,eAAe,CAAC,CAAA;CACxE;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,0BAAoB;IAE1C,gGAAgG;IACpD,IAAI,UAAQ;IAExD,mGAAmG;IAEnG,SAAS,EACP,KAAK,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,GAAG,WAAW,GAAG,QAAQ,GAAG,cAAc,GAAG,YAAY,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CACzI;IAEhB,gHAAgH;IACpF,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAElE,wGAAwG;IACjD,WAAW,EAAE,MAAM,GAAG,SAAS,CAAY;IAElG,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"}

package/vue.d.ts

@@ -0,0 +1,38 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/overlay. Import once, anywhere in the program:
+//
+//     import '@c2n/overlay/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 { Overlay, OverlayEventMap } from '@c2n/overlay'
+
+/** 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-overlay': DefineComponent<
+      C2Props<Overlay> & {
+        'cross-offset'?: unknown
+        'disabled-cross-axis'?: unknown
+        'fit-anchor'?: unknown
+        'free-width'?: unknown
+        onToggle?: (event: OverlayEventMap['toggle']) => void
+        onBeforetoggle?: (event: OverlayEventMap['beforetoggle']) => 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 {}