@data-slot/tooltip 0.2.11 → 0.2.13

package/README.md

@@ -270,6 +270,8 @@ If the trigger has `disabled` attribute or `aria-disabled="true"`:
 
 ## Events
 
+### Outbound Events
+
 Listen for changes via custom events:
 
 ```javascript
@@ -279,7 +281,7 @@ element.addEventListener("tooltip:change", (e) => {
 });
 ```
 
-### Event Detail
+#### Event Detail
 
 | Property | Type | Description |
 |----------|------|-------------|
@@ -288,6 +290,41 @@ element.addEventListener("tooltip:change", (e) => {
 | `content` | `HTMLElement` | The content element |
 | `reason` | `string` | What caused the change: `"pointer"`, `"focus"`, `"blur"`, `"escape"`, `"api"` |
 
+### Inbound Events
+
+Control the tooltip via events:
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `tooltip:set` | `{ open: boolean }` | Set visibility programmatically |
+
+```javascript
+// Show the tooltip
+element.dispatchEvent(
+  new CustomEvent("tooltip:set", { detail: { open: true } })
+);
+
+// Hide the tooltip
+element.dispatchEvent(
+  new CustomEvent("tooltip:set", { detail: { open: false } })
+);
+```
+
+**Note:** Opening respects disabled state (trigger has `disabled` attribute or `aria-disabled="true"`). Closing is always allowed.
+
+#### Deprecated Shapes
+
+The following shape is deprecated and will be removed in v1.0:
+
+```javascript
+// Deprecated: { value: boolean }
+element.dispatchEvent(
+  new CustomEvent("tooltip:set", { detail: { value: true } })
+);
+```
+
+Use `{ open: boolean }` instead.
+
 ## License
 
 MIT

package/dist/index.cjs

@@ -1 +1 @@
-const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=new WeakMap;function r(e,t,r){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=n.get(e);i||(i=new Set,n.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${r}`))}function i(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function a(e,t){for(let n of i(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function o(e,t){let n=a(e,t);if(n===null||n===``)return;let i=Number(n);if(Number.isNaN(i)||!Number.isFinite(i)){r(e,t,`Invalid number value "${n}" for data-${t}.`);return}return i}function s(e,t,n){let i=a(e,t);if(i!==null){if(n.includes(i))return i;r(e,t,`Invalid value "${i}" for data-${t}. Expected one of: ${n.join(`, `)}.`)}}let c=0;const l=(e,t)=>e.id||=`${t}-${++c}`;function u(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const d=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n}));let f=0;const p=[`top`,`right`,`bottom`,`left`],m=[`start`,`center`,`end`];function h(t,n={}){let r=e(t,`tooltip-trigger`),i=e(t,`tooltip-content`);if(!r||!i)throw Error(`Tooltip requires trigger and content slots`);let a=n.delay??o(t,`delay`)??300,c=n.skipDelayDuration??o(t,`skipDelayDuration`)??300,h=n.onOpenChange,g=n.side??s(i,`side`,p)??s(t,`side`,p)??`top`,_=n.align??s(i,`align`,m)??s(t,`align`,m)??`center`,v=!1,y=!1,b=null,x=null,S=[],C=l(i,`tooltip-content`);i.setAttribute(`role`,`tooltip`),i.setAttribute(`data-side`,g),i.setAttribute(`data-align`,_);let w=()=>r.hasAttribute(`disabled`)||r.getAttribute(`aria-disabled`)===`true`,T=()=>{x||=u(document,`keydown`,e=>{e.key===`Escape`&&v&&k(`escape`)})},E=()=>{x?.(),x=null},D=(e,n)=>{if(v===e)return;v=e;let a=v?`open`:`closed`;t.setAttribute(`data-state`,a),i.setAttribute(`data-state`,a),v?(r.setAttribute(`aria-describedby`,C),i.setAttribute(`aria-hidden`,`false`),T()):(r.removeAttribute(`aria-describedby`),i.setAttribute(`aria-hidden`,`true`),E()),d(t,`tooltip:change`,{open:v,trigger:r,content:i,reason:n}),h?.(v)},O=e=>{if(b&&(clearTimeout(b),b=null),Date.now()<f){D(!0,e);return}b=setTimeout(()=>{D(!0,e),b=null},a)},k=e=>{b&&(clearTimeout(b),b=null),v&&c>0&&(f=Date.now()+c),D(!1,e)};i.setAttribute(`aria-hidden`,`true`),t.setAttribute(`data-state`,`closed`),i.setAttribute(`data-state`,`closed`),S.push(u(r,`pointerenter`,e=>{e.pointerType!==`touch`&&(w()||O(`pointer`))}),u(r,`pointerleave`,e=>{if(e.pointerType===`touch`||y)return;let t=e.relatedTarget;t&&i.contains(t)||k(`pointer`)}),u(r,`focus`,()=>{y=!0,!w()&&O(`focus`)}),u(r,`blur`,()=>{y=!1,k(`blur`)})),S.push(u(i,`pointerleave`,e=>{if(e.pointerType===`touch`||y)return;let t=e.relatedTarget;t&&r.contains(t)||k(`pointer`)}));let A={show:()=>{w()||(b&&(clearTimeout(b),b=null),D(!0,`api`))},hide:()=>k(`api`),get isOpen(){return v},destroy:()=>{b&&clearTimeout(b),E(),S.forEach(e=>e()),S.length=0}};return A}const g=new WeakSet;function _(e=document){let n=[];for(let r of t(e,`tooltip`)){if(g.has(r))continue;g.add(r),n.push(h(r))}return n}exports.create=_,exports.createTooltip=h;
+const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=new WeakMap;function r(e,t,r){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=n.get(e);i||(i=new Set,n.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${r}`))}function i(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function a(e,t){for(let n of i(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function o(e,t){let n=a(e,t);if(n===null||n===``)return;let i=Number(n);if(Number.isNaN(i)||!Number.isFinite(i)){r(e,t,`Invalid number value "${n}" for data-${t}.`);return}return i}function s(e,t,n){let i=a(e,t);if(i!==null){if(n.includes(i))return i;r(e,t,`Invalid value "${i}" for data-${t}. Expected one of: ${n.join(`, `)}.`)}}let c=0;const l=(e,t)=>e.id||=`${t}-${++c}`;function u(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const d=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n}));let f=0;const p=[`top`,`right`,`bottom`,`left`],m=[`start`,`center`,`end`];function h(t,n={}){let r=e(t,`tooltip-trigger`),i=e(t,`tooltip-content`);if(!r||!i)throw Error(`Tooltip requires trigger and content slots`);let a=n.delay??o(t,`delay`)??300,c=n.skipDelayDuration??o(t,`skipDelayDuration`)??300,h=n.onOpenChange,g=n.side??s(i,`side`,p)??s(t,`side`,p)??`top`,_=n.align??s(i,`align`,m)??s(t,`align`,m)??`center`,v=!1,y=!1,b=null,x=null,S=[],C=l(i,`tooltip-content`);i.setAttribute(`role`,`tooltip`),i.setAttribute(`data-side`,g),i.setAttribute(`data-align`,_);let w=()=>r.hasAttribute(`disabled`)||r.getAttribute(`aria-disabled`)===`true`,T=()=>{x||=u(document,`keydown`,e=>{e.key===`Escape`&&v&&k(`escape`)})},E=()=>{x?.(),x=null},D=(e,n)=>{if(v===e)return;v=e;let a=v?`open`:`closed`;t.setAttribute(`data-state`,a),i.setAttribute(`data-state`,a),v?(r.setAttribute(`aria-describedby`,C),i.setAttribute(`aria-hidden`,`false`),T()):(r.removeAttribute(`aria-describedby`),i.setAttribute(`aria-hidden`,`true`),E()),d(t,`tooltip:change`,{open:v,trigger:r,content:i,reason:n}),h?.(v)},O=e=>{if(b&&(clearTimeout(b),b=null),Date.now()<f){D(!0,e);return}b=setTimeout(()=>{D(!0,e),b=null},a)},k=e=>{b&&(clearTimeout(b),b=null),v&&c>0&&(f=Date.now()+c),D(!1,e)};i.setAttribute(`aria-hidden`,`true`),t.setAttribute(`data-state`,`closed`),i.setAttribute(`data-state`,`closed`),S.push(u(r,`pointerenter`,e=>{e.pointerType!==`touch`&&(w()||O(`pointer`))}),u(r,`pointerleave`,e=>{if(e.pointerType===`touch`||y)return;let t=e.relatedTarget;t&&i.contains(t)||k(`pointer`)}),u(r,`focus`,()=>{y=!0,!w()&&O(`focus`)}),u(r,`blur`,()=>{y=!1,k(`blur`)})),S.push(u(i,`pointerleave`,e=>{if(e.pointerType===`touch`||y)return;let t=e.relatedTarget;t&&r.contains(t)||k(`pointer`)})),S.push(u(t,`tooltip:set`,e=>{let t=e.detail,n;if(t?.open===void 0?t?.value!==void 0&&(n=t.value):n=t.open,typeof n==`boolean`)if(n){if(w())return;b&&(clearTimeout(b),b=null),D(!0,`api`)}else k(`api`)}));let A={show:()=>{w()||(b&&(clearTimeout(b),b=null),D(!0,`api`))},hide:()=>k(`api`),get isOpen(){return v},destroy:()=>{b&&clearTimeout(b),E(),S.forEach(e=>e()),S.length=0}};return A}const g=new WeakSet;function _(e=document){let n=[];for(let r of t(e,`tooltip`)){if(g.has(r))continue;g.add(r),n.push(h(r))}return n}exports.create=_,exports.createTooltip=h;

package/dist/index.js

@@ -1 +1 @@
-const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=new WeakMap;function r(e,t,r){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=n.get(e);i||(i=new Set,n.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${r}`))}function i(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function a(e,t){for(let n of i(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function o(e,t){let n=a(e,t);if(n===null||n===``)return;let i=Number(n);if(Number.isNaN(i)||!Number.isFinite(i)){r(e,t,`Invalid number value "${n}" for data-${t}.`);return}return i}function s(e,t,n){let i=a(e,t);if(i!==null){if(n.includes(i))return i;r(e,t,`Invalid value "${i}" for data-${t}. Expected one of: ${n.join(`, `)}.`)}}let c=0;const l=(e,t)=>e.id||=`${t}-${++c}`;function u(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const d=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n}));let f=0;const p=[`top`,`right`,`bottom`,`left`],m=[`start`,`center`,`end`];function h(t,n={}){let r=e(t,`tooltip-trigger`),i=e(t,`tooltip-content`);if(!r||!i)throw Error(`Tooltip requires trigger and content slots`);let a=n.delay??o(t,`delay`)??300,c=n.skipDelayDuration??o(t,`skipDelayDuration`)??300,h=n.onOpenChange,g=n.side??s(i,`side`,p)??s(t,`side`,p)??`top`,_=n.align??s(i,`align`,m)??s(t,`align`,m)??`center`,v=!1,y=!1,b=null,x=null,S=[],C=l(i,`tooltip-content`);i.setAttribute(`role`,`tooltip`),i.setAttribute(`data-side`,g),i.setAttribute(`data-align`,_);let w=()=>r.hasAttribute(`disabled`)||r.getAttribute(`aria-disabled`)===`true`,T=()=>{x||=u(document,`keydown`,e=>{e.key===`Escape`&&v&&k(`escape`)})},E=()=>{x?.(),x=null},D=(e,n)=>{if(v===e)return;v=e;let a=v?`open`:`closed`;t.setAttribute(`data-state`,a),i.setAttribute(`data-state`,a),v?(r.setAttribute(`aria-describedby`,C),i.setAttribute(`aria-hidden`,`false`),T()):(r.removeAttribute(`aria-describedby`),i.setAttribute(`aria-hidden`,`true`),E()),d(t,`tooltip:change`,{open:v,trigger:r,content:i,reason:n}),h?.(v)},O=e=>{if(b&&(clearTimeout(b),b=null),Date.now()<f){D(!0,e);return}b=setTimeout(()=>{D(!0,e),b=null},a)},k=e=>{b&&(clearTimeout(b),b=null),v&&c>0&&(f=Date.now()+c),D(!1,e)};i.setAttribute(`aria-hidden`,`true`),t.setAttribute(`data-state`,`closed`),i.setAttribute(`data-state`,`closed`),S.push(u(r,`pointerenter`,e=>{e.pointerType!==`touch`&&(w()||O(`pointer`))}),u(r,`pointerleave`,e=>{if(e.pointerType===`touch`||y)return;let t=e.relatedTarget;t&&i.contains(t)||k(`pointer`)}),u(r,`focus`,()=>{y=!0,!w()&&O(`focus`)}),u(r,`blur`,()=>{y=!1,k(`blur`)})),S.push(u(i,`pointerleave`,e=>{if(e.pointerType===`touch`||y)return;let t=e.relatedTarget;t&&r.contains(t)||k(`pointer`)}));let A={show:()=>{w()||(b&&(clearTimeout(b),b=null),D(!0,`api`))},hide:()=>k(`api`),get isOpen(){return v},destroy:()=>{b&&clearTimeout(b),E(),S.forEach(e=>e()),S.length=0}};return A}const g=new WeakSet;function _(e=document){let n=[];for(let r of t(e,`tooltip`)){if(g.has(r))continue;g.add(r),n.push(h(r))}return n}export{_ as create,h as createTooltip};
+const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=new WeakMap;function r(e,t,r){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=n.get(e);i||(i=new Set,n.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${r}`))}function i(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function a(e,t){for(let n of i(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function o(e,t){let n=a(e,t);if(n===null||n===``)return;let i=Number(n);if(Number.isNaN(i)||!Number.isFinite(i)){r(e,t,`Invalid number value "${n}" for data-${t}.`);return}return i}function s(e,t,n){let i=a(e,t);if(i!==null){if(n.includes(i))return i;r(e,t,`Invalid value "${i}" for data-${t}. Expected one of: ${n.join(`, `)}.`)}}let c=0;const l=(e,t)=>e.id||=`${t}-${++c}`;function u(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const d=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n}));let f=0;const p=[`top`,`right`,`bottom`,`left`],m=[`start`,`center`,`end`];function h(t,n={}){let r=e(t,`tooltip-trigger`),i=e(t,`tooltip-content`);if(!r||!i)throw Error(`Tooltip requires trigger and content slots`);let a=n.delay??o(t,`delay`)??300,c=n.skipDelayDuration??o(t,`skipDelayDuration`)??300,h=n.onOpenChange,g=n.side??s(i,`side`,p)??s(t,`side`,p)??`top`,_=n.align??s(i,`align`,m)??s(t,`align`,m)??`center`,v=!1,y=!1,b=null,x=null,S=[],C=l(i,`tooltip-content`);i.setAttribute(`role`,`tooltip`),i.setAttribute(`data-side`,g),i.setAttribute(`data-align`,_);let w=()=>r.hasAttribute(`disabled`)||r.getAttribute(`aria-disabled`)===`true`,T=()=>{x||=u(document,`keydown`,e=>{e.key===`Escape`&&v&&k(`escape`)})},E=()=>{x?.(),x=null},D=(e,n)=>{if(v===e)return;v=e;let a=v?`open`:`closed`;t.setAttribute(`data-state`,a),i.setAttribute(`data-state`,a),v?(r.setAttribute(`aria-describedby`,C),i.setAttribute(`aria-hidden`,`false`),T()):(r.removeAttribute(`aria-describedby`),i.setAttribute(`aria-hidden`,`true`),E()),d(t,`tooltip:change`,{open:v,trigger:r,content:i,reason:n}),h?.(v)},O=e=>{if(b&&(clearTimeout(b),b=null),Date.now()<f){D(!0,e);return}b=setTimeout(()=>{D(!0,e),b=null},a)},k=e=>{b&&(clearTimeout(b),b=null),v&&c>0&&(f=Date.now()+c),D(!1,e)};i.setAttribute(`aria-hidden`,`true`),t.setAttribute(`data-state`,`closed`),i.setAttribute(`data-state`,`closed`),S.push(u(r,`pointerenter`,e=>{e.pointerType!==`touch`&&(w()||O(`pointer`))}),u(r,`pointerleave`,e=>{if(e.pointerType===`touch`||y)return;let t=e.relatedTarget;t&&i.contains(t)||k(`pointer`)}),u(r,`focus`,()=>{y=!0,!w()&&O(`focus`)}),u(r,`blur`,()=>{y=!1,k(`blur`)})),S.push(u(i,`pointerleave`,e=>{if(e.pointerType===`touch`||y)return;let t=e.relatedTarget;t&&r.contains(t)||k(`pointer`)})),S.push(u(t,`tooltip:set`,e=>{let t=e.detail,n;if(t?.open===void 0?t?.value!==void 0&&(n=t.value):n=t.open,typeof n==`boolean`)if(n){if(w())return;b&&(clearTimeout(b),b=null),D(!0,`api`)}else k(`api`)}));let A={show:()=>{w()||(b&&(clearTimeout(b),b=null),D(!0,`api`))},hide:()=>k(`api`),get isOpen(){return v},destroy:()=>{b&&clearTimeout(b),E(),S.forEach(e=>e()),S.length=0}};return A}const g=new WeakSet;function _(e=document){let n=[];for(let r of t(e,`tooltip`)){if(g.has(r))continue;g.add(r),n.push(h(r))}return n}export{_ as create,h as createTooltip};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-slot/tooltip",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/index.cjs",