@c2n/tooltip 0.0.11 → 0.0.13

package/custom-elements.json

@@ -0,0 +1 @@
+{"schemaVersion":"1.0.0","readme":"","modules":[{"kind":"javascript-module","path":"src/tooltip.ts","declarations":[{"kind":"class","description":"Contextual hint shown when its target is hovered or focused. Drop it inside the element it describes (the parent is\nthe target), point it at another element with `for=\"<id>\"`, or use `target-strategy=\"previousElement\"`. The text is\nthe slotted content, or the target's `data-tooltip` attribute when the slot is empty.\n\nThe tooltip is a `popover=\"manual\"` element: it renders in the top layer, so it is never clipped by scrolling or\n`overflow: hidden` ancestors and the target is left untouched. floating-ui keeps it beside the target and flips it\nwhen there is no room; the side in use is reflected as `current-placement`. It has `role=\"tooltip\"` and the target\ngets `aria-describedby`, so assistive technology reads it. Escape, pressing on the target, blur and leaving hide it.","name":"Tooltip","cssProperties":[{"type":{"text":"background-color"},"name":"--c2-tooltip--background-color","default":"#18181b"},{"type":{"text":"color"},"name":"--c2-tooltip--color","default":"#fafafa"},{"type":{"text":"border-radius"},"name":"--c2-tooltip--border-radius","default":"6px"},{"type":{"text":"box-shadow"},"name":"--c2-tooltip--box-shadow","default":"0 4px 12px rgba(0, 0, 0, 0.15)"},{"type":{"text":"border"},"name":"--c2-tooltip--border"},{"type":{"text":"font-size"},"name":"--c2-tooltip--font-size","default":"12px"},{"type":{"text":"font-weight"},"name":"--c2-tooltip--font-weight","default":"500"},{"type":{"text":"font-style"},"name":"--c2-tooltip--font-style"},{"type":{"text":"font-family"},"name":"--c2-tooltip--font-family"},{"type":{"text":"line-height"},"name":"--c2-tooltip--line-height","default":"1.4"},{"type":{"text":"padding"},"name":"--c2-tooltip--padding-top","default":"5px"},{"type":{"text":"padding"},"name":"--c2-tooltip--padding-right","default":"8px"},{"type":{"text":"padding"},"name":"--c2-tooltip--padding-bottom","default":"5px"},{"type":{"text":"padding"},"name":"--c2-tooltip--padding-left","default":"8px"},{"type":{"text":"pixel"},"name":"--c2-tooltip--max-width","default":"240px"},{"type":{"text":"pixel"},"description":"Distance between the target and the tooltip (arrow included).","name":"--c2-tooltip--offset","default":"8px"},{"type":{"text":"pixel"},"description":"Side of the arrow square; `0px` hides it like `hide-arrow`.","name":"--c2-tooltip__arrow--size","default":"8px"},{"type":{"text":"time"},"name":"--c2-tooltip--transition-duration","default":"120ms"},{"type":{"text":"transform"},"description":"Start of the enter animation.","name":"--c2-tooltip--enter-transform","default":"scale(0.92)"}],"slots":[{"description":"Tooltip content. Falls back to the target's `data-tooltip`.","name":""}],"members":[{"kind":"field","name":"placement","type":{"text":"Placement"},"default":"'top'","description":"Preferred side; flips when there is no room.","attribute":"placement","reflects":true},{"kind":"field","name":"position","type":{"text":"string | undefined"},"default":"undefined","description":"Legacy: comma-separated list of allowed placements (`\"top,bottom\"`). When set, the best of those is chosen\nautomatically instead of `placement`.","attribute":"position"},{"kind":"field","name":"delay","type":{"text":"number"},"default":"300","description":"Delay before showing, in milliseconds.","attribute":"delay"},{"kind":"field","name":"hideDelay","type":{"text":"number"},"default":"0","description":"Delay before hiding, in milliseconds.","attribute":"hide-delay"},{"kind":"field","name":"hideArrow","type":{"text":"boolean"},"default":"false","description":"Hides the arrow that points towards the target.","attribute":"hide-arrow","reflects":true},{"kind":"field","name":"targetStrategy","type":{"text":"'parent' | 'previousElement'"},"default":"'parent'","description":"`parent` (default) or `previousElement`; ignored when `for` is set.","attribute":"target-strategy"},{"kind":"field","name":"for","type":{"text":"string | undefined"},"default":"undefined","description":"Id of the target element (same document or shadow root).","attribute":"for"},{"kind":"field","name":"open","type":{"text":"boolean"},"default":"false","description":"Visible state. Set it to show or hide the tooltip programmatically.","attribute":"open","reflects":true},{"kind":"field","name":"showing","deprecated":"Use `open`.","readonly":true},{"kind":"field","name":"targetText","type":{"text":"string"},"privacy":"private","default":"''"},{"kind":"field","name":"arrowElement","type":{"text":"HTMLElement | undefined"},"privacy":"private"},{"kind":"field","name":"_target","type":{"text":"HTMLElement | null"},"privacy":"private","default":"null"},{"kind":"field","name":"showTimer","type":{"text":"ReturnType<typeof setTimeout> | undefined"},"privacy":"private"},{"kind":"field","name":"hideTimer","type":{"text":"ReturnType<typeof setTimeout> | undefined"},"privacy":"private"},{"kind":"field","name":"cleanupPosition","type":{"text":"(() => void) | null"},"privacy":"private","default":"null"},{"kind":"field","name":"target","type":{"text":"HTMLElement | null"},"description":"The element the tooltip describes. Assignable."},{"kind":"method","name":"syncTargetText","privacy":"private","description":"`targetText` is only the slot's fallback content, and the target is resolved from the live DOM, so it is\nnecessarily unknown when the element is server-rendered. Assigning it before the first update would be lost:\nhydration adopts the server-rendered markup as-is and records the new value as already committed, so the\nbubble would stay empty forever. Wait for that first update before touching it."},{"kind":"method","name":"resolveTarget","privacy":"private"},{"kind":"method","name":"detachTarget","privacy":"private"},{"kind":"field","name":"handleEnter","privacy":"private"},{"kind":"field","name":"handleLeave","privacy":"private"},{"kind":"field","name":"handleTargetKeydown","privacy":"private"},{"kind":"method","name":"clearTimers","privacy":"private"},{"kind":"method","name":"readPixels","privacy":"private","parameters":[{"name":"name","type":{"text":"string"}},{"name":"fallback","type":{"text":"number"}}]},{"kind":"method","name":"startPositioning","privacy":"private"},{"kind":"method","name":"stopPositioning","privacy":"private"},{"kind":"method","name":"updatePosition","privacy":"private","parameters":[{"name":"target","type":{"text":"HTMLElement"}}]}],"events":[{"name":"show","type":{"text":"Event"},"description":"Fired when the tooltip becomes visible."},{"name":"hide","type":{"text":"Event"},"description":"Fired when it starts hiding."}],"attributes":[{"name":"placement","type":{"text":"Placement"},"default":"'top'","description":"Preferred side; flips when there is no room.","fieldName":"placement"},{"name":"position","type":{"text":"string | undefined"},"default":"undefined","description":"Legacy: comma-separated list of allowed placements (`\"top,bottom\"`). When set, the best of those is chosen\nautomatically instead of `placement`.","fieldName":"position"},{"name":"delay","type":{"text":"number"},"default":"300","description":"Delay before showing, in milliseconds.","fieldName":"delay"},{"name":"hide-delay","type":{"text":"number"},"default":"0","description":"Delay before hiding, in milliseconds.","fieldName":"hideDelay"},{"name":"hide-arrow","type":{"text":"boolean"},"default":"false","description":"Hides the arrow that points towards the target.","fieldName":"hideArrow"},{"name":"target-strategy","type":{"text":"'parent' | 'previousElement'"},"default":"'parent'","description":"`parent` (default) or `previousElement`; ignored when `for` is set.","fieldName":"targetStrategy"},{"name":"for","type":{"text":"string | undefined"},"default":"undefined","description":"Id of the target element (same document or shadow root).","fieldName":"for"},{"name":"open","type":{"text":"boolean"},"default":"false","description":"Visible state. Set it to show or hide the tooltip programmatically.","fieldName":"open"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"c2-tooltip","customElement":true}],"exports":[{"kind":"js","name":"Placement","declaration":{"name":"Placement","module":"src/tooltip.ts"}},{"kind":"js","name":"Tooltip","declaration":{"name":"Tooltip","module":"src/tooltip.ts"}},{"kind":"custom-element-definition","name":"c2-tooltip","declaration":{"name":"Tooltip","module":"src/tooltip.ts"}}]}]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c2n/tooltip",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "type": "module",
   "main": "dist/tooltip.js",
   "exports": {
@@ -21,6 +21,7 @@
   "files": [
     "dist",
     "types",
+    "custom-elements.json",
     "react.d.ts",
     "react.js",
     "vue.d.ts",
@@ -60,7 +61,7 @@
     }
   },
   "dependencies": {
-    "@c2n/core": "0.0.11",
+    "@c2n/core": "0.0.13",
     "@floating-ui/dom": "1.8.0",
     "lit": "3.3.3"
   },
@@ -68,5 +69,5 @@
     "@c2n/config": "*"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "bf962fba5e49a0ac7555a082584e262949d323a5"
+  "gitHead": "aa19b641f64fbc54c36b7649a8171d7a686abbdd"
 }

package/react.d.ts

@@ -6,17 +6,27 @@
 //
 // Register the elements at module scope before React renders, or React writes an object prop as an
 // attribute and it stringifies.
+//
+// On a server-rendered page (Next.js, React Router SSR) write a camelCase property by its kebab-case attribute
+// name ('row-key', not rowKey): the server emits props verbatim, HTML lowercases them, and hydration does not
+// set properties. Those names are listed next to the properties below.
 
 import type { DetailedHTMLProps, HTMLAttributes } from 'react'
 import type { Tooltip } from '@c2n/tooltip'
 
 /** Standard React host-element attributes plus the element's own public properties. */
 type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+/** What React writes to a custom element's attribute: true becomes the empty string, false removes it. */
+type Attribute = string | number | boolean
 
 declare module 'react' {
   namespace JSX {
     interface IntrinsicElements {
-      'c2-tooltip': C2Props<Tooltip>
+      'c2-tooltip': C2Props<Tooltip> & {
+        'hide-delay'?: Attribute
+        'hide-arrow'?: Attribute
+        'target-strategy'?: Attribute
+      }
     }
   }
 }