@c2n/tooltip 0.0.6

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@c2n/tooltip",
+  "version": "0.0.6",
+  "type": "module",
+  "main": "dist/tooltip.js",
+  "exports": {
+    ".": {
+      "default": "./dist/tooltip.js",
+      "types": "./types/src/tooltip.d.ts"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "keywords": [
+    "tooltip",
+    "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/tooltip.d.ts

@@ -0,0 +1,101 @@
+import { LitElement, type PropertyValues } from 'lit';
+import { type Placement } from '@floating-ui/dom';
+export type { Placement };
+/**
+ * Contextual hint shown when its target is hovered or focused. Drop it inside the element it describes (the parent is
+ * the target), point it at another element with `for="<id>"`, or use `target-strategy="previousElement"`. The text is
+ * the slotted content, or the target's `data-tooltip` attribute when the slot is empty.
+ *
+ * The tooltip is a `popover="manual"` element: it renders in the top layer, so it is never clipped by scrolling or
+ * `overflow: hidden` ancestors and the target is left untouched. floating-ui keeps it beside the target and flips it
+ * when there is no room; the side in use is reflected as `current-placement`. It has `role="tooltip"` and the target
+ * gets `aria-describedby`, so assistive technology reads it. Escape, pressing on the target, blur and leaving hide it.
+ *
+ * @tag c2-tooltip
+ *
+ * @slot - Tooltip content. Falls back to the target's `data-tooltip`.
+ *
+ * @event {Event} show - Fired when the tooltip becomes visible.
+ * @event {Event} hide - Fired when it starts hiding.
+ *
+ * @cssproperty {background-color} [--c2-tooltip--background-color=#18181b]
+ * @cssproperty {color} [--c2-tooltip--color=#fafafa]
+ * @cssproperty {border-radius} [--c2-tooltip--border-radius=6px]
+ * @cssproperty {box-shadow} [--c2-tooltip--box-shadow=0 4px 12px rgba(0, 0, 0, 0.15)]
+ * @cssproperty {border} --c2-tooltip--border
+ * @cssproperty {font-size} [--c2-tooltip--font-size=12px]
+ * @cssproperty {font-weight} [--c2-tooltip--font-weight=500]
+ * @cssproperty {font-style} --c2-tooltip--font-style
+ * @cssproperty {font-family} --c2-tooltip--font-family
+ * @cssproperty {line-height} [--c2-tooltip--line-height=1.4]
+ *
+ * @cssproperty {padding} [--c2-tooltip--padding-top=5px]
+ * @cssproperty {padding} [--c2-tooltip--padding-right=8px]
+ * @cssproperty {padding} [--c2-tooltip--padding-bottom=5px]
+ * @cssproperty {padding} [--c2-tooltip--padding-left=8px]
+ *
+ * @cssproperty {pixel} [--c2-tooltip--max-width=240px]
+ * @cssproperty {pixel} [--c2-tooltip--offset=8px] - Distance between the target and the tooltip (arrow included).
+ * @cssproperty {pixel} [--c2-tooltip__arrow--size=8px] - Side of the arrow square; `0px` hides it like `hide-arrow`.
+ * @cssproperty {time} [--c2-tooltip--transition-duration=120ms]
+ * @cssproperty {transform} [--c2-tooltip--enter-transform=scale(0.92)] - Start of the enter animation.
+ */
+export declare class Tooltip extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Preferred side; flips when there is no room. */
+    placement: Placement;
+    /**
+     * Legacy: comma-separated list of allowed placements (`"top,bottom"`). When set, the best of those is chosen
+     * automatically instead of `placement`.
+     */
+    position: string | undefined;
+    /** Delay before showing, in milliseconds. */
+    delay: number;
+    /** Delay before hiding, in milliseconds. */
+    hideDelay: number;
+    hideArrow: boolean;
+    /** `parent` (default) or `previousElement`; ignored when `for` is set. */
+    targetStrategy: 'parent' | 'previousElement';
+    /** Id of the target element (same document or shadow root). */
+    for: string | undefined;
+    /** Visible state. Set it to show or hide the tooltip programmatically. */
+    open: boolean;
+    /** @deprecated Use `open`. */
+    get showing(): boolean;
+    private targetText;
+    private arrowElement?;
+    private _target;
+    private showTimer;
+    private hideTimer;
+    private cleanupPosition;
+    /** The element the tooltip describes. Assignable. */
+    get target(): HTMLElement | null;
+    set target(target: HTMLElement | null);
+    /**
+     * `targetText` is only the slot's fallback content, and the target is resolved from the live DOM, so it is
+     * necessarily unknown when the element is server-rendered. Assigning it before the first update would be lost:
+     * hydration adopts the server-rendered markup as-is and records the new value as already committed, so the
+     * bubble would stay empty forever. Wait for that first update before touching it.
+     */
+    private syncTargetText;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private resolveTarget;
+    private detachTarget;
+    private handleEnter;
+    private handleLeave;
+    private handleTargetKeydown;
+    private clearTimers;
+    private readPixels;
+    private startPositioning;
+    private stopPositioning;
+    private updatePosition;
+    updated(changed: PropertyValues<this>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-tooltip': Tooltip;
+    }
+}
+//# sourceMappingURL=tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAG/E,OAAO,EAA0E,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAGzH,YAAY,EAAE,SAAS,EAAE,CAAA;AAOzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,0BAAoB;IAE1C,mDAAmD;IACtB,SAAS,EAAE,SAAS,CAAQ;IAEzD;;;OAGG;IACS,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAY;IAEpD,6CAA6C;IACjB,KAAK,SAAM;IAEvC,4CAA4C;IACS,SAAS,SAAI;IAEG,SAAS,UAAQ;IAEtF,0EAA0E;IAC9B,cAAc,EAAE,QAAQ,GAAG,iBAAiB,CAAW;IAEnG,+DAA+D;IACnD,GAAG,EAAE,MAAM,GAAG,SAAS,CAAY;IAE/C,0EAA0E;IAC9B,IAAI,UAAQ;IAExD,8BAA8B;IAC9B,IAAI,OAAO,YAEV;IAEQ,OAAO,CAAC,UAAU,CAAK;IAEH,OAAO,CAAC,YAAY,CAAC,CAAa;IAE/D,OAAO,CAAC,OAAO,CAA2B;IAC1C,OAAO,CAAC,SAAS,CAA2C;IAC5D,OAAO,CAAC,SAAS,CAA2C;IAC5D,OAAO,CAAC,eAAe,CAA4B;IAEnD,qDAAqD;IACrD,IAAI,MAAM,IAAI,WAAW,GAAG,IAAI,CAE/B;IAED,IAAI,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,EAapC;IAED;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IAOb,iBAAiB;IAQjB,oBAAoB;IAO7B,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,WAAW,CAOlB;IAED,OAAO,CAAC,WAAW,CAUlB;IAED,OAAO,CAAC,mBAAmB,CAE1B;IAED,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,eAAe;YAKT,cAAc;IAuCnB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAyBrC,MAAM;CAQhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,OAAO,CAAA;KACtB;CACF"}