@threadlabs/looma 0.1.22 → 0.1.24

package/dist/cjs/ui-tooltip.cjs.entry.js

@@ -1,25 +1,35 @@
 'use strict';
 
-var index = require('./index-D07f6BOw.js');
-var manager = require('./manager-C9j3HZay.js');
+var index = require('./index-BHG9Rpil.js');
+var manager = require('./manager-Ce25WRtl.js');
 var events = require('./events-TcQIzpNv.js');
+var controlledState = require('./controlled-state-BFya8rAX.js');
 var positioning = require('./positioning-i0WrCAdF.js');
 
-const uiTooltipCss = () => `:host{position:fixed;inset:auto;margin:0;display:inline-block;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background:var(--ui-surface-elevated);color:var(--ui-text-primary);padding:var(--ui-space-2) var(--ui-space-3);font-size:var(--ui-font-size-sm);box-shadow:var(--ui-shadow-md);opacity:0;transform:translateY(4px);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease),     display var(--ui-motion-fast) allow-discrete,     overlay var(--ui-motion-fast) allow-discrete}:host(:popover-open){opacity:1;transform:translateY(0)}@starting-style{:host(:popover-open){opacity:0;transform:translateY(4px)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host{transition:none}}`;
+const uiTooltipCss = () => `:host{position:fixed;inset:auto;margin:0;display:inline-block;box-sizing:border-box;padding:0;border:0;border-radius:0;background:transparent;opacity:0;transform:translateY(4px);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease),     display var(--ui-motion-fast) allow-discrete,     overlay var(--ui-motion-fast) allow-discrete}.tooltip__surface{box-sizing:border-box;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background:var(--ui-surface-elevated);color:var(--ui-text-primary);padding:var(--ui-space-2) var(--ui-space-3);font-size:var(--ui-font-size-sm);box-shadow:var(--ui-shadow-md)}:host(:popover-open){opacity:1;transform:translateY(0)}@starting-style{:host(:popover-open){opacity:0;transform:translateY(4px)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host{transition:none}}`;
 
 const UITooltip = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.opened = index.createEvent(this, "open");
+        this.closed = index.createEvent(this, "close");
     }
     get host() { return index.getElement(this); }
     for = '';
-    open = false;
+    /** Controlled open state. Omit it to use defaultOpen and local interaction state. */
+    open;
     defaultOpen = false;
     placement = 'top-start';
     /** Pointer hover intent delay in milliseconds. Keyboard focus is immediate. */
     showDelay = 500;
     /** Pointer leave grace period in milliseconds. */
     hideDelay = 100;
+    /** Click or tap pins the description; activate again to dismiss. */
+    toggleOnClick = false;
+    pinned = false;
+    focused = false;
+    opened;
+    closed;
     internalOpen = false;
     overlayId = `ui-tooltip-${Math.random().toString(36).slice(2, 11)}`;
     trigger = null;
@@ -28,7 +38,8 @@ const UITooltip = class {
     hideTimer = null;
     syncFromProp() {
         this.clearTimers();
-        this.internalOpen = this.open;
+        if (controlledState.isControlled(this.open))
+            this.internalOpen = this.open;
     }
     resetSurface() {
         this.syncTrigger();
@@ -53,11 +64,13 @@ const UITooltip = class {
         }
     }
     componentDidLoad() {
-        this.syncFromProp();
-        this.internalOpen = this.internalOpen || this.defaultOpen;
+        if (!this.host.id)
+            this.host.id = this.overlayId;
+        this.internalOpen = controlledState.controlledOrDefault(this.open, this.defaultOpen);
         this.syncTrigger();
         this.setupSurface();
-        this.host.addEventListener('keydown', this.onKeydown);
+        this.host.addEventListener('pointerenter', this.onSurfaceEnter);
+        this.host.addEventListener('pointerleave', this.onTriggerLeave);
         this.syncOverlay();
     }
     componentDidUpdate() {
@@ -68,12 +81,13 @@ const UITooltip = class {
         this.detachTriggerListeners();
         this.surface?.destroy();
         this.surface = null;
-        this.host.removeEventListener('keydown', this.onKeydown);
+        this.host.removeEventListener('pointerenter', this.onSurfaceEnter);
+        this.host.removeEventListener('pointerleave', this.onTriggerLeave);
         manager.closeOverlay(this.overlayId);
     }
     syncTrigger() {
         const next = this.for
-            ? this.host.ownerDocument.getElementById(this.for)
+            ? this.host.getRootNode().getElementById(this.for)
             : this.host.previousElementSibling;
         if (next === this.trigger)
             return;
@@ -93,6 +107,11 @@ const UITooltip = class {
         this.detachTriggerListeners();
         if (!this.trigger)
             return;
+        const ids = new Set((this.trigger.getAttribute('aria-describedby') || '').split(/\s+/).filter(Boolean));
+        ids.add(this.host.id);
+        this.trigger.setAttribute('aria-describedby', [...ids].join(' '));
+        this.trigger.addEventListener('click', this.onTriggerClick);
+        this.trigger.addEventListener('keydown', this.onTriggerKeydown);
         this.trigger.addEventListener('pointerenter', this.onTriggerEnter);
         this.trigger.addEventListener('pointerleave', this.onTriggerLeave);
         this.trigger.addEventListener('focusin', this.onTriggerFocusIn);
@@ -101,6 +120,13 @@ const UITooltip = class {
     detachTriggerListeners() {
         if (!this.trigger)
             return;
+        const ids = (this.trigger.getAttribute('aria-describedby') || '').split(/\s+/).filter(id => id && id !== this.host.id);
+        if (ids.length)
+            this.trigger.setAttribute('aria-describedby', ids.join(' '));
+        else
+            this.trigger.removeAttribute('aria-describedby');
+        this.trigger.removeEventListener('click', this.onTriggerClick);
+        this.trigger.removeEventListener('keydown', this.onTriggerKeydown);
         this.trigger.removeEventListener('pointerenter', this.onTriggerEnter);
         this.trigger.removeEventListener('pointerleave', this.onTriggerLeave);
         this.trigger.removeEventListener('focusin', this.onTriggerFocusIn);
@@ -125,14 +151,29 @@ const UITooltip = class {
     setInteractionOpen(nextOpen, trigger) {
         if (this.internalOpen === nextOpen)
             return;
-        this.internalOpen = nextOpen;
+        if (!controlledState.isControlled(this.open))
+            this.internalOpen = nextOpen;
         events.dispatchDetail(this.host, nextOpen ? 'open' : 'close', {
             open: nextOpen,
             reason: 'action',
             trigger,
         });
     }
-    onTriggerEnter = () => {
+    onSurfaceEnter = () => this.clearHideTimer();
+    onTriggerClick = (event) => {
+        if (!this.toggleOnClick)
+            return;
+        this.clearTimers();
+        this.pinned = !this.pinned;
+        this.setInteractionOpen(this.pinned, event.detail === 0 ? 'keyboard' : 'pointer');
+    };
+    onTriggerKeydown = (event) => {
+        if (event.key === 'Escape')
+            this.clearTimers();
+    };
+    onTriggerEnter = (event) => {
+        if (event.pointerType === 'touch')
+            return;
         this.clearHideTimer();
         if (this.internalOpen || this.showTimer !== null)
             return;
@@ -143,7 +184,7 @@ const UITooltip = class {
     };
     onTriggerLeave = () => {
         this.clearShowTimer();
-        if (!this.internalOpen || this.hideTimer !== null)
+        if (this.focused || this.pinned || !this.internalOpen || this.hideTimer !== null)
             return;
         this.hideTimer = setTimeout(() => {
             this.hideTimer = null;
@@ -151,6 +192,7 @@ const UITooltip = class {
         }, Math.max(0, this.hideDelay));
     };
     onTriggerFocusIn = () => {
+        this.focused = true;
         this.clearTimers();
         this.setInteractionOpen(true, 'keyboard');
     };
@@ -158,28 +200,26 @@ const UITooltip = class {
         const related = e.relatedTarget;
         if (related && this.host.contains(related))
             return;
+        this.focused = false;
+        this.pinned = false;
         this.clearTimers();
         this.setInteractionOpen(false, 'keyboard');
     };
     handleRequestClose(reason, trigger) {
-        if (reason === 'escape') {
+        if (reason === 'escape' || (reason === 'light-dismiss' && this.toggleOnClick)) {
+            this.pinned = false;
             this.clearTimers();
-            this.internalOpen = false;
+            if (!controlledState.isControlled(this.open))
+                this.internalOpen = false;
             events.dispatchDetail(this.host, 'close', {
                 open: false,
-                reason: 'escape',
+                reason,
                 trigger: trigger,
             });
-            this.trigger?.focus();
         }
     }
-    onKeydown = (e) => {
-        if (e.key === 'Escape') {
-            manager.requestTopOverlayClose('escape', 'keyboard');
-        }
-    };
     render() {
-        return (index.h(index.Host, { key: '4c3890a7371508ede06a5b370d1cec32db25280f', role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, index.h("slot", { key: '2e3bcd0dc69b0c3e3376d73dc4efc82e4f4cfaaa' })));
+        return (index.h(index.Host, { key: 'ce34c51bc3a9c9f7f31b7f0d329175df0cee1ab3', role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? '' : undefined }, index.h("div", { key: 'e5bb2bcb146fe8ec3b4e9a6abb550961181e3c06', class: "tooltip__surface" }, index.h("slot", { key: 'bdb71bfcb0f72c212cbb5c64fb69510fdded4afb' }))));
     }
     static get watchers() { return {
         "open": [{

package/dist/cjs/ui-top-bar.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D07f6BOw.js');
+var index = require('./index-BHG9Rpil.js');
 
 const uiTopBarCss = () => `:host{position:sticky;inset-block-start:0;z-index:var(--ui-top-bar-z-index, 100);display:block}.top-bar{min-block-size:calc(var(--ui-top-bar-height, 56px) + env(safe-area-inset-top));display:flex;align-items:center;gap:var(--ui-top-bar-gap, var(--ui-space-3, 0.75rem));padding-block-start:env(safe-area-inset-top);padding-inline-start:max(     var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)),     env(safe-area-inset-left)   );padding-inline-end:max(     var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)),     env(safe-area-inset-right)   );background:var(--ui-top-bar-bg, var(--ui-surface, #ffffff));border-block-end:1px solid var(--ui-top-bar-border, var(--ui-border, #e5e7eb))}.top-bar__leading,.top-bar__search,.top-bar__actions{display:flex;align-items:center;flex-shrink:0}.top-bar__actions{gap:var(--ui-top-bar-actions-gap, var(--ui-space-1, 0.25rem))}.top-bar__title{min-inline-size:0;flex:1}[hidden]{display:none}@media (min-width: 768px){:host{display:none}}`;
 
@@ -35,7 +35,7 @@ const UITopBar = class {
         this.hasActions = slotHasContent(this.actionsSlot);
     };
     render() {
-        return (index.h(index.Host, { key: '15c840c082724df0ec39ab6ad4e55f99192df5be' }, index.h("header", { key: '790afaeecdb3e598b8365391f57ee1e2d8ca69a2', class: "top-bar", part: "base" }, index.h("div", { key: 'fab822f5875c7e3b8e267be42c075597d79374fa', class: "top-bar__leading", hidden: !this.hasLeading }, index.h("slot", { key: '0723013c4b674964e4029442b715daa9eb0036db', name: "leading", ref: (el) => (this.leadingSlot = el), onSlotchange: this.syncSlots })), index.h("div", { key: '77fc006257b7fa6a191191d9969ea66445b8bc3e', class: "top-bar__title" }, index.h("slot", { key: 'e8a07f1f767c1c0fa1244abcf3bb0e697e36a4fe' })), index.h("div", { key: 'bde5cdf797ae898f68eddeab362b8395f89bdf28', class: "top-bar__search", hidden: !this.hasSearch }, index.h("slot", { key: '8b059d6123e94f3b7e18c15c88828ee9c6436136', name: "search", ref: (el) => (this.searchSlot = el), onSlotchange: this.syncSlots })), index.h("div", { key: 'c262446cf29873903530ea3f840de4de9db3de82', class: "top-bar__actions", hidden: !this.hasActions }, index.h("slot", { key: 'f417dbc8cc0115a455a72ce0feb5f32b323ce68f', name: "actions", ref: (el) => (this.actionsSlot = el), onSlotchange: this.syncSlots })))));
+        return (index.h(index.Host, { key: 'b92aa4e03475b3e623212a1e98f45d5532860b51' }, index.h("header", { key: 'a3552708b0e424e762e100ee55fc6bfac4cd830a', class: "top-bar", part: "base" }, index.h("div", { key: '4c8a9e3a04ff23a615bf09e368f4212dd5b38157', class: "top-bar__leading", hidden: !this.hasLeading }, index.h("slot", { key: '64ecc99672b8fd37305810e0776a24bf87ea6f08', name: "leading", ref: (el) => (this.leadingSlot = el), onSlotchange: this.syncSlots })), index.h("div", { key: '37fc003aba2b87f7c8c0e654cd6810d7f231f365', class: "top-bar__title" }, index.h("slot", { key: 'e6c901c15852e83340ca8ad1e264fd5e35445e84' })), index.h("div", { key: '37b1ac319367eeded4182ada401a31e0b9c2555a', class: "top-bar__search", hidden: !this.hasSearch }, index.h("slot", { key: '0a8b5ef500dd843909bb35a1133be548411f3b71', name: "search", ref: (el) => (this.searchSlot = el), onSlotchange: this.syncSlots })), index.h("div", { key: '7e5054a3ed6ecfe8d9d8b1b36992843aa0fb62eb', class: "top-bar__actions", hidden: !this.hasActions }, index.h("slot", { key: '19fe59c5ba4da7f0ceda764948f1288bfaa2a41d', name: "actions", ref: (el) => (this.actionsSlot = el), onSlotchange: this.syncSlots })))));
     }
 };
 UITopBar.style = uiTopBarCss();