@jxsuite/ui 0.0.0 → 0.1.0

package/components/jx-toast-host.json

@@ -0,0 +1,121 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "JxToastHost",
+  "tagName": "jx-toast-host",
+  "observedAttributes": ["label", "live", "placement", "hotkey"],
+  "state": {
+    "label": {
+      "type": "string",
+      "default": "Notifications",
+      "attribute": "label",
+      "description": "The region's accessible name, so a reader who lands in it is told what it is rather than hearing a message with no provenance. It names the STACK and never a toast: the messages inside it change, and a region renamed on every arrival is a region announced on every arrival."
+    },
+    "live": {
+      "type": "string",
+      "default": "polite",
+      "attribute": "live",
+      "description": "polite, assertive or off: how the stack is announced. polite waits for a pause and is right for an outcome; assertive interrupts and is for the rare message that cannot wait. off is for a host that already says these things somewhere else — Jx Studio announces through its own single announcer, and a region here as well would say every notification twice. Role and attribute move together: polite writes role=status, assertive writes role=alert, off writes neither, so an assistive technology reading the role and one reading the attribute agree."
+    },
+    "placement": {
+      "type": "string",
+      "default": "bottom-end",
+      "attribute": "placement",
+      "description": "bottom-end, bottom-start, top-end or top-start: which corner the stack is pinned to. It moves the box and NOT the order — the toasts are drawn in the order they are written, whichever corner they are in, so the order a reader hears, the order they tab through and the order they see stay one order. A host that wants the stack in the flow of its own layout overrides position in its own stylesheet; nothing here depends on the fixed box."
+    },
+    "hotkey": {
+      "type": "string",
+      "default": "F8",
+      "attribute": "hotkey",
+      "description": "The key that moves focus to the first control in the stack. It is what makes a recovery control reachable at all: the stack is at the end of the document and a toast may expire before a reader could Tab to it, so the reader asks for it in one press instead — and arriving suspends every clock in the stack, so nothing then expires under their hand. Escape gives focus back to where it came from, and so does a toast closing while the reader is in it. A press carrying Ctrl, Alt or Meta is left alone. Empty turns the gesture off, for an application that owns a command of its own for this."
+    },
+    "onMount": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/toast-host.ts",
+      "$export": "onHostMount",
+      "description": "Registers the stack's key on the document. It has to be the document: a key that only worked once focus was already in the stack would answer the question it exists to answer with itself."
+    },
+    "onUnmount": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/toast-host.ts",
+      "$export": "onHostUnmount",
+      "description": "Takes the key back when the stack leaves the document, so a removed host cannot go on answering a press for a stack it can no longer show."
+    },
+    "onHold": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/toast-host.ts",
+      "$export": "onStackHold",
+      "description": "Pointer or focus arrived anywhere in the stack: every toast in it is told to suspend its clock, not only the one underneath. An older toast retiring while the reader answers a newer one would move the very control they were reaching for."
+    },
+    "onRelease": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/toast-host.ts",
+      "$export": "onStackRelease",
+      "description": "The pointer or the focus left the stack for something outside it, so the clocks run again. A move between two toasts of one stack is not a departure and releases nothing."
+    },
+    "onClose": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/toast-host.ts",
+      "$export": "onStackClose",
+      "description": "A toast closed. If it took the reader's focus with it, focus goes back to where the hotkey found it; if the reader was somewhere else entirely, nothing moves."
+    }
+  },
+  "onpointerover": {
+    "$ref": "#/state/onHold"
+  },
+  "onpointerout": {
+    "$ref": "#/state/onRelease"
+  },
+  "onfocusin": {
+    "$ref": "#/state/onHold"
+  },
+  "onfocusout": {
+    "$ref": "#/state/onRelease"
+  },
+  "onclose": {
+    "$ref": "#/state/onClose"
+  },
+  "attributes": {
+    "role": "${state.live === 'off' ? null : state.live === 'assertive' ? 'alert' : 'status'}",
+    "aria-live": "${state.live}",
+    "aria-atomic": "false",
+    "aria-label": "${state.label || null}",
+    "data-placement": "${state.placement}"
+  },
+  "style": {
+    "$description": "aria-atomic is false and written out rather than left to the role, which supplies true: a stack re-read whole on every arrival would announce three old messages to deliver one new one. pointer-events is none on the box and auto on each toast, so the empty corner the stack reserves is not a hole the page cannot be clicked through.",
+    "display": "flex",
+    "flexDirection": "column",
+    "gap": "var(--jx-space-3)",
+    "position": "fixed",
+    "zIndex": "1000",
+    "insetBlockEnd": "var(--jx-space-4)",
+    "insetInlineEnd": "var(--jx-space-4)",
+    "alignItems": "flex-end",
+    "maxInlineSize": "min(420px, calc(100vw - 2 * var(--jx-space-4)))",
+    "pointerEvents": "none",
+    "&[hidden]": {
+      "display": "none"
+    },
+    "&[data-placement=\"top-end\"]": {
+      "insetBlockStart": "var(--jx-space-4)",
+      "insetBlockEnd": "auto"
+    },
+    "&[data-placement=\"bottom-start\"]": {
+      "insetInlineStart": "var(--jx-space-4)",
+      "insetInlineEnd": "auto",
+      "alignItems": "flex-start"
+    },
+    "&[data-placement=\"top-start\"]": {
+      "insetBlockStart": "var(--jx-space-4)",
+      "insetBlockEnd": "auto",
+      "insetInlineStart": "var(--jx-space-4)",
+      "insetInlineEnd": "auto",
+      "alignItems": "flex-start"
+    }
+  },
+  "children": [
+    {
+      "tagName": "slot"
+    }
+  ]
+}

package/components/jx-toast.json

@@ -0,0 +1,255 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "JxToast",
+  "tagName": "jx-toast",
+  "observedAttributes": ["variant", "open", "timeout", "dismiss-label"],
+  "$elements": [
+    {
+      "$ref": "./jx-icon.json"
+    },
+    {
+      "$ref": "./jx-action-button.json"
+    }
+  ],
+  "state": {
+    "variant": {
+      "type": "string",
+      "default": "info",
+      "attribute": "variant",
+      "description": "info, positive, negative or warning: what kind of outcome this is. It picks the accent along the toast's leading edge AND the glyph beside the message, so the severity survives greyscale, a colour-blind reader and a forced-colours theme — colour alone would be a WCAG 1.4.1 failure. It is not announced: the glyph is decorative and the toast carries no role of its own, so what a screen reader hears is the message, which is why the message has to SAY what happened rather than lean on the colour to say it."
+    },
+    "open": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "open",
+      "description": "Whether the toast is showing. It is the host's to write — a toast appended with no open attribute draws nothing, deliberately, so that arriving and appearing are two decisions rather than one — and the element writes it back to false when it retires itself. It is also what runs the clock: opening starts timeout, and closing stops it."
+    },
+    "timeout": {
+      "type": "number",
+      "default": 0,
+      "attribute": "timeout",
+      "description": "How long the toast rests before retiring itself, in milliseconds. 0 is sticky and is the DEFAULT, which is what makes the number safe as a number: a removed attribute coerces through Number() to 0 (ui.md §5.3), and here that lands on the reading a numeric prop can never spell otherwise — nothing disappears unless a host asked for it to. The clock is suspended while the pointer is on the toast, while focus is inside it, and while the stack it belongs to is being read, and resumes with what was LEFT, so a reader who reaches the recovery control cannot have it expire under their hand."
+    },
+    "dismissLabel": {
+      "type": "string",
+      "default": "Dismiss",
+      "attribute": "dismiss-label",
+      "description": "The name of the dismiss button, which is always drawn: a toast that can only be waited out is one a reader cannot get rid of, and a sticky one would then be permanent. Write what is being dismissed where a page raises several kinds (\"Dismiss notification\"), because the button is named by this alone — the message beside it is a consumer's slotted content and cannot be read into a name."
+    },
+    "icon": "${state.variant === 'positive' ? 'check' : state.variant === 'negative' ? 'warning-circle' : state.variant === 'warning' ? 'warning' : 'info'}",
+    "onMount": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/toast.ts",
+      "$export": "onToastMount",
+      "emits": [
+        {
+          "name": "close",
+          "description": "The toast closed itself; detail.reason is timeout when the clock ran out."
+        }
+      ],
+      "description": "Learns the element and starts the clock, then follows open through data-open for the rest of the toast's life."
+    },
+    "onUnmount": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/toast.ts",
+      "$export": "onToastUnmount",
+      "description": "Stops the clock when the toast leaves the document, so a toast the host has already taken away cannot retire itself afterwards."
+    },
+    "onHold": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/toast.ts",
+      "$export": "onToastHold",
+      "description": "The pointer arrived, focus arrived, or the stack said to wait: the clock is suspended with its remaining time kept. Three separate reasons, held together, because a pointer leaving a toast the reader has tabbed into must not restart a clock the focus is still holding."
+    },
+    "onRelease": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/toast.ts",
+      "$export": "onToastRelease",
+      "description": "The last of those reasons went away, so the clock runs again for what was left of it. A focusout whose focus landed on another control inside this same toast is not a departure and releases nothing."
+    },
+    "onDismiss": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/toast.ts",
+      "$export": "onToastDismiss",
+      "emits": [
+        {
+          "name": "close",
+          "description": "The reader dismissed the toast; detail.reason is dismissed."
+        }
+      ],
+      "description": "The dismiss button closes the toast and says who closed it."
+    },
+    "onAction": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/toast.ts",
+      "$export": "onToastAction",
+      "emits": [
+        {
+          "name": "close",
+          "description": "The recovery control was used; detail.reason is action."
+        }
+      ],
+      "description": "A click on the control slotted into action closes the toast, without stopping the click: the control is the target, so its own handler has already run and a host listening above the toast is entitled to hear it. An answer that has been given is not still being asked."
+    }
+  },
+  "onpointerenter": {
+    "$ref": "#/state/onHold"
+  },
+  "onpointerleave": {
+    "$ref": "#/state/onRelease"
+  },
+  "onfocusin": {
+    "$ref": "#/state/onHold"
+  },
+  "onfocusout": {
+    "$ref": "#/state/onRelease"
+  },
+  "onjx-toast-pause": {
+    "$ref": "#/state/onHold"
+  },
+  "onjx-toast-resume": {
+    "$ref": "#/state/onRelease"
+  },
+  "attributes": {
+    "data-variant": "${state.variant}",
+    "data-open": "${state.open ? '' : null}"
+  },
+  "style": {
+    "$description": "The toast carries NO live region and no role of its own, which is the one decision in this block that is about sound rather than about pixels: jx-toast-host owns the region, and a role here would announce every toast twice in the one arrangement the kit exists to serve. A toast used without a host is drawn and not announced, and the answer to that is a host.",
+    "display": "none",
+    "boxSizing": "border-box",
+    "alignItems": "center",
+    "gap": "var(--jx-space-3)",
+    "maxInlineSize": "min(420px, calc(100vw - 2 * var(--jx-space-4)))",
+    "padding": "var(--jx-space-3)",
+    "border": "1px solid var(--jx-border)",
+    "borderInlineStartWidth": "3px",
+    "borderInlineStartColor": "var(--jx-toast-accent)",
+    "borderRadius": "var(--jx-radius-md)",
+    "background": "var(--jx-bg-overlay)",
+    "color": "var(--jx-fg)",
+    "boxShadow": "var(--jx-shadow-popover)",
+    "fontFamily": "var(--jx-font-sans)",
+    "fontSize": "var(--jx-text-sm)",
+    "lineHeight": "var(--jx-leading-sm)",
+    "textAlign": "start",
+    "pointerEvents": "auto",
+    "opacity": "0",
+    "translate": "0 var(--jx-space-3)",
+    "transition": "opacity var(--jx-dur-1) var(--jx-ease-out), translate var(--jx-dur-1) var(--jx-ease-out), display var(--jx-dur-1) allow-discrete",
+    "--jx-toast-accent": "var(--jx-accent)",
+    "&[data-variant=\"positive\"]": {
+      "--jx-toast-accent": "var(--jx-success)"
+    },
+    "&[data-variant=\"negative\"]": {
+      "--jx-toast-accent": "var(--jx-danger)"
+    },
+    "&[data-variant=\"warning\"]": {
+      "--jx-toast-accent": "var(--jx-warning)"
+    },
+    "&[data-open]": {
+      "display": "flex",
+      "opacity": "1",
+      "translate": "0 0"
+    },
+    "@starting-style": {
+      "&[data-open]": {
+        "opacity": "0",
+        "translate": "0 var(--jx-space-3)"
+      }
+    },
+    "&[hidden]": {
+      "$description": "AFTER the open rule, and only because of it: [data-jx][hidden] and [data-jx][data-open] weigh the same, so the later one wins and a hidden open toast would otherwise still be drawn. The UA's own [hidden] rule cannot settle it either, since the element's own display beats it at any specificity.",
+      "display": "none"
+    },
+    "& [part=\"icon\"]": {
+      "display": "inline-flex",
+      "flex": "none",
+      "alignSelf": "flex-start",
+      "color": "var(--jx-toast-accent)"
+    },
+    "& [part=\"message\"]": {
+      "flex": "1",
+      "minInlineSize": "0",
+      "overflowWrap": "anywhere"
+    },
+    "& [part=\"action-slot\"]": {
+      "display": "contents"
+    },
+    "& [part=\"dismiss\"]": {
+      "flex": "none",
+      "alignSelf": "flex-start"
+    }
+  },
+  "children": [
+    {
+      "tagName": "span",
+      "attributes": {
+        "part": "icon",
+        "aria-hidden": "true"
+      },
+      "children": [
+        {
+          "tagName": "jx-icon",
+          "attributes": {
+            "part": "glyph"
+          },
+          "$props": {
+            "name": {
+              "$ref": "#/state/icon"
+            },
+            "weight": "bold"
+          }
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "part": "message"
+      },
+      "children": [
+        {
+          "tagName": "slot"
+        }
+      ]
+    },
+    {
+      "tagName": "span",
+      "attributes": {
+        "part": "action-slot",
+        "role": "none"
+      },
+      "onclick": {
+        "$ref": "#/state/onAction"
+      },
+      "children": [
+        {
+          "tagName": "slot",
+          "attributes": {
+            "name": "action"
+          }
+        }
+      ]
+    },
+    {
+      "tagName": "jx-action-button",
+      "attributes": {
+        "part": "dismiss"
+      },
+      "$props": {
+        "icon": "x",
+        "size": "sm",
+        "label": {
+          "$ref": "#/state/dismissLabel"
+        },
+        "hint": {
+          "$ref": "#/state/dismissLabel"
+        }
+      },
+      "onclick": {
+        "$ref": "#/state/onDismiss"
+      }
+    }
+  ]
+}

package/components/jx-toolbar.json

@@ -0,0 +1,81 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "JxToolbar",
+  "tagName": "jx-toolbar",
+  "observedAttributes": ["label", "orientation"],
+  "state": {
+    "label": {
+      "type": "string",
+      "default": "",
+      "attribute": "label",
+      "description": "The accessible name of the toolbar, and it is not optional in practice: a toolbar is a container a reader is told they have entered, and an unnamed one is announced by its role alone. toolbar is in neither of the accessibility lint's named-role sets, so nothing lints its absence — the element's own test pins it instead, and so does every surface that mounts one."
+    },
+    "orientation": {
+      "type": "string",
+      "default": "horizontal",
+      "attribute": "orientation",
+      "description": "horizontal or vertical. It chooses which arrow pair moves the caret between controls, and it turns the row through 90 degrees off aria-orientation — which role=toolbar both supports and defaults to horizontal, so unlike jx-action-group there is no second data- attribute to key the layout on."
+    },
+    "onKeydown": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/toolbar.ts",
+      "$export": "onToolbarKeydown",
+      "description": "The toolbar keyboard contract: the arrow pair of its own axis moves the roving caret between reachable controls with wrap, Home and End go to the ends, and a control that answers the key itself keeps it — a text field holds the arrows while its caret has text left to walk in that direction, and holds Home and End always."
+    },
+    "onReady": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/toolbar.ts",
+      "$export": "onToolbarReady",
+      "description": "Collapses the toolbar to one tab stop once it has rendered, and keeps it collapsed to one as controls come and go. It listens for the element's own jx-ready because onMount is handed the reactive scope alone, and placing a caret needs the host."
+    },
+    "onMount": {
+      "$prototype": "Function",
+      "body": [
+        {
+          "dispatchEvent": "jx-ready",
+          "bubbles": true
+        }
+      ],
+      "emits": [
+        {
+          "name": "jx-ready",
+          "description": "The toolbar has rendered and distributed its children, so its caret can be placed."
+        }
+      ],
+      "description": "Announces that the element has rendered. The toolbar's own onReady listens for it, and a host may too."
+    }
+  },
+  "attributes": {
+    "role": "toolbar",
+    "aria-label": "${state.label || null}",
+    "aria-orientation": "${state.orientation}"
+  },
+  "onkeydown": {
+    "$ref": "#/state/onKeydown"
+  },
+  "onjx-ready": {
+    "$ref": "#/state/onReady"
+  },
+  "style": {
+    "display": "flex",
+    "&[hidden]": {
+      "display": "none"
+    },
+    "boxSizing": "border-box",
+    "alignItems": "center",
+    "gap": "var(--jx-space-2)",
+    "minWidth": "0",
+    "fontFamily": "var(--jx-font-sans)",
+    "fontSize": "var(--jx-text-md)",
+    "color": "var(--jx-fg)",
+    "&[aria-orientation=\"vertical\"]": {
+      "flexDirection": "column",
+      "alignItems": "stretch"
+    }
+  },
+  "children": [
+    {
+      "tagName": "slot"
+    }
+  ]
+}

package/components/jx-tooltip.json

@@ -0,0 +1,207 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "JxTooltip",
+  "tagName": "jx-tooltip",
+  "observedAttributes": ["delay", "for", "placement", "x", "y", "arrow"],
+  "state": {
+    "delay": {
+      "type": "number",
+      "default": 500,
+      "attribute": "delay",
+      "description": "How long the pointer must rest on the control before the tip appears, in milliseconds. Keyboard focus never waits: a reader who tabbed to the control has already committed. Read only on the FALLBACK path — where the engine implements interest invokers and the control carries interestfor, the wait is the platform's own interest-delay-start and this number is not consulted, so set the CSS property on the control if you need to change it there."
+    },
+    "for": {
+      "type": "string",
+      "default": "",
+      "attribute": "for",
+      "description": "The id of the control this tip describes, in the same root. The declarative wiring is the other way round and is preferred — interestfor on the control, naming this tip's id, and this prop left unset — and it works on every engine: where interest invokers are missing the tip binds an interestfor control's pointer and focus events itself, exactly as it does for a control this prop names. Either way the listeners come off again when the tip leaves the document. It is read once, at mount; a host that wires a tip up later calls bindTooltip from jx-ui:/behaviors/tooltip.ts itself."
+    },
+    "placement": {
+      "type": "string",
+      "default": "block-end span-inline-end",
+      "attribute": "placement",
+      "description": "Where the tip sits relative to its control, as a CSS position-area value: below it with leading edges aligned by default, which is where the arrow points from. It applies while the tip is anchored — shown from a control the platform knows, by interestfor or by the element's own binding — on an engine with CSS anchor positioning; the platform then follows the control through scroll and resize and flips the tip above it when it would overflow (the --jx-tooltip-above try option, which keeps the gap on the right side). Elsewhere the tip stands at x and y, placed and flipped by the element itself."
+    },
+    "x": {
+      "type": "number",
+      "default": 0,
+      "attribute": "x",
+      "description": "Where the tip's inline-start edge sits, in viewport pixels, whenever the tip is NOT anchored: on an engine without CSS anchor positioning, or shown from nothing. Written by the element when it opens, from the box of the control it describes; a host that places the tip itself sets it and names no control."
+    },
+    "y": {
+      "type": "number",
+      "default": 0,
+      "attribute": "y",
+      "description": "Where the tip's block-start edge sits, in viewport pixels. The tip is placed under its control, or above it when there is no room below — never over it, because a tip that covers the control it describes hides what the reader is pointing at."
+    },
+    "arrow": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "arrow",
+      "description": "Draws a pointer at the edge of the tip that faces its control — the block-start edge for a tip below it, the block-end edge for one that flipped above. Decorative, and aria-hidden: it says nothing the tip's own text does not."
+    },
+    "flipped": {
+      "type": "boolean",
+      "default": false,
+      "description": "Whether the tip landed ABOVE its control because there was no room below. Written by the element when it opens, and read by nothing but the arrow: a pointer pinned to the block-start edge of a tip that flipped points away from the control it belongs to. A host that places the tip itself sets x and y, and sets this to say which way its arrow faces. Anchored, the flip is the platform's and this is MEASURED — the tip's box above its control's — a frame after the tip shows and again, at most once per frame, whenever the page scrolls, the window resizes or either box changes size, until the tip closes, so the arrow follows a flip the element did not make, including one the platform makes while the tip is up."
+    },
+    "anchored": {
+      "type": "boolean",
+      "default": false,
+      "description": "Whether the platform is placing the tip against the control it was shown from. Written by the behaviour on beforetoggle, before layout, so the first frame is already in place; cleared on close; mirrored as data-anchored for the anchored rule. Not an attribute, because it is the platform's fact."
+    },
+    "open": {
+      "type": "boolean",
+      "default": false,
+      "description": "Whether the tip is showing. Follows the platform's toggle event; write it through showPopover() and hidePopover(), not directly."
+    },
+    "noArrow": {
+      "$expression": {
+        "operator": "!",
+        "target": {
+          "$ref": "#/state/arrow"
+        }
+      }
+    },
+    "onBeforeToggle": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/tooltip.ts",
+      "$export": "onTooltipBeforeToggle",
+      "description": "Decides anchored before the tip is laid out: an opening shown from a control the platform or the binding names is anchored; a closing clears it. Before layout, so a tip that learned it was anchored a frame late would not paint once at its coordinates and jump."
+    },
+    "onToggle": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/tooltip.ts",
+      "$export": "onTooltipToggle",
+      "description": "Mirrors the platform's toggle into open, and places a freshly shown tip under the control it describes — or, when the platform is placing it by anchor, only reads back which side of the control it is on — a frame later and then on every scroll, resize and size change while it shows — so the arrow can follow; the closing toggle stops that reading. Placing here rather than on the gesture is what lets the declarative path work: an interestfor control shows the tip without telling the element anything, and the toggle is the first the element hears of it."
+    },
+    "onReady": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/tooltip.ts",
+      "$export": "onTooltipReady",
+      "description": "Binds the control the tip is wired to — the one for names, or the one declaring interestfor at this tip — on the fallback path. Nothing is bound where the engine implements interest invokers and the control declares one, because there the platform owns the pair."
+    },
+    "onUnmount": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/tooltip.ts",
+      "$export": "onTooltipUnmount",
+      "description": "Takes the fallback listeners off the control again, one microtask after the tip left the document and only if it is still out by then. They sit on an element the kit does not own and which outlives the tip, so without this a removed tip keeps answering its control's pointer; but a tip that is MOVED, by a keyed $map reordering its rows or a host re-parenting the control, is disconnected and reconnected in one step and never mounts again, so an unmount that disposed at once would leave it silent for good."
+    },
+    "onMount": {
+      "$prototype": "Function",
+      "body": [
+        {
+          "dispatchEvent": "jx-ready",
+          "bubbles": true
+        }
+      ],
+      "description": "Announces that the element has rendered and carries its popover attribute, so a host may show it — and gives the element its own first sight of itself, which is how onReady reaches the control that for names."
+    }
+  },
+  "onbeforetoggle": {
+    "$ref": "#/state/onBeforeToggle"
+  },
+  "ontoggle": {
+    "$ref": "#/state/onToggle"
+  },
+  "onjx-ready": {
+    "$ref": "#/state/onReady"
+  },
+  "attributes": {
+    "role": "tooltip",
+    "popover": "hint",
+    "data-open": "${state.open ? '' : null}",
+    "data-flipped": "${state.flipped ? '' : null}",
+    "data-anchored": "${state.anchored ? '' : null}"
+  },
+  "style": {
+    "display": "revert-layer",
+    "&[hidden]": {
+      "display": "none"
+    },
+    "position": "fixed",
+    "insetInlineStart": "${state.x}px",
+    "insetBlockStart": "${state.y}px",
+    "insetInlineEnd": "auto",
+    "insetBlockEnd": "auto",
+    "boxSizing": "border-box",
+    "margin": "0",
+    "padding": "var(--jx-space-1) var(--jx-space-3)",
+    "maxWidth": "min(280px, calc(100vw - 8px))",
+    "background": "var(--jx-bg-overlay)",
+    "color": "var(--jx-fg)",
+    "border": "1px solid var(--jx-border-strong)",
+    "borderRadius": "var(--jx-radius-sm)",
+    "boxShadow": "var(--jx-shadow-popover)",
+    "fontFamily": "var(--jx-font-sans)",
+    "fontSize": "var(--jx-text-sm)",
+    "lineHeight": "var(--jx-leading-sm)",
+    "textAlign": "start",
+    "opacity": "1",
+    "pointerEvents": "auto",
+    "transition": "opacity var(--jx-dur-1) var(--jx-ease-out), display var(--jx-dur-1) allow-discrete, overlay var(--jx-dur-1) allow-discrete",
+    ":popover-open": {
+      "display": "block"
+    },
+    "&[hidden]:popover-open": {
+      "display": "none"
+    },
+    "@position-try --jx-tooltip-above": {
+      "positionArea": "block-start span-inline-end",
+      "marginBlockStart": "0",
+      "marginBlockEnd": "6px"
+    },
+    "@supports (position-area: block-end)": {
+      "$description": "The anchored placement: the platform puts the tip against its IMPLICIT anchor — the control it was shown from, by interestfor or by the binding's showPopover({ source }) — follows that control through scroll and resize, and flips the tip above it when it would overflow, through the --jx-tooltip-above try option rather than a bare flip-block so the 6px gap the arrow fills moves to the other side with it. No anchor-name is involved (ui.md 5.2, 6). The insets are released so x and y stop mattering. Outside this block the coordinate placement above is the answer, unchanged.",
+      "&[data-anchored]": {
+        "insetInlineStart": "auto",
+        "insetBlockStart": "auto",
+        "marginBlockStart": "6px",
+        "positionArea": "${state.placement}",
+        "positionTryFallbacks": "--jx-tooltip-above, flip-inline, --jx-tooltip-above flip-inline"
+      }
+    },
+    "@starting-style": {
+      "&:popover-open": {
+        "opacity": "0"
+      }
+    },
+    "& > [part=\"arrow\"]": {
+      "position": "absolute",
+      "insetBlockEnd": "100%",
+      "insetInlineStart": "var(--jx-space-4)",
+      "width": "8px",
+      "height": "8px",
+      "marginBlockEnd": "-5px",
+      "background": "var(--jx-bg-overlay)",
+      "borderInlineStart": "1px solid var(--jx-border-strong)",
+      "borderBlockStart": "1px solid var(--jx-border-strong)",
+      "transform": "rotate(45deg)"
+    },
+    "&[data-flipped] > [part=\"arrow\"]": {
+      "insetBlockEnd": "auto",
+      "insetBlockStart": "100%",
+      "marginBlockEnd": "0",
+      "marginBlockStart": "-5px",
+      "borderInlineStart": "none",
+      "borderBlockStart": "none",
+      "borderInlineEnd": "1px solid var(--jx-border-strong)",
+      "borderBlockEnd": "1px solid var(--jx-border-strong)"
+    }
+  },
+  "children": [
+    {
+      "tagName": "slot"
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "part": "arrow",
+        "aria-hidden": "true"
+      },
+      "hidden": {
+        "$ref": "#/state/noArrow"
+      }
+    }
+  ]
+}