@jxsuite/ui 0.0.0 → 0.2.0

package/components/jx-listbox.json

@@ -0,0 +1,76 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "JxListbox",
+  "tagName": "jx-listbox",
+  "observedAttributes": ["label", "labelledby", "active"],
+  "state": {
+    "label": {
+      "type": "string",
+      "default": "",
+      "attribute": "label",
+      "description": "The list's accessible name, forwarded as aria-label. REQUIRED unless labelledby names a visible heading: listbox takes its name from a label rather than from its rows, so an unnamed one is announced as \"listbox\" and nothing else. Nothing lints it — a bound role makes the naming rules stand down — so the element's own test is what holds it."
+    },
+    "labelledby": {
+      "type": "string",
+      "default": "",
+      "attribute": "labelledby",
+      "description": "Forwarded as aria-labelledby, naming the element that already says what this list is."
+    },
+    "active": {
+      "type": "string",
+      "default": "",
+      "attribute": "active",
+      "description": "The ID of the row the caret is on; the empty string when none is. THIS IS THE ONE STRING A CONSUMER WRITES: the same id its owning field points aria-activedescendant at, so the field and the row are told the same thing once instead of the question being re-decided per row. The sidecar turns it into each row's selected and scrolls the new one back into view."
+    },
+    "onMount": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/listbox.ts",
+      "$export": "mountListbox",
+      "description": "Keeps every row's selected in step with active for as long as the element lives, and scrolls the active row into view. Both are things a document body cannot say: the flag lives on a foreign element, and scrolling is a measurement."
+    }
+  },
+  "attributes": {
+    "role": "listbox",
+    "aria-label": "${state.label || null}",
+    "aria-labelledby": "${state.labelledby || null}",
+    "data-active": "${state.active}"
+  },
+  "style": {
+    "$description": "There is deliberately NO tabindex here, and no rule that draws a focus ring: the element never takes DOM focus. One of its two owners is a field that must keep the caret, and the other is nothing at all — a panel filtering for a caret in another realm. A listbox that is operated from somewhere else is exactly the shape ARIA's aria-activedescendant exists for.",
+    "display": "block",
+    "&[hidden]": {
+      "display": "none"
+    },
+    "boxSizing": "border-box",
+    "minHeight": "0",
+    "maxBlockSize": "var(--jx-listbox-max-block-size, none)",
+    "overflowY": "auto",
+    "margin": "0",
+    "padding": "0",
+    "color": "var(--jx-fg)",
+    "fontFamily": "var(--jx-font-sans)",
+    "fontSize": "var(--jx-text-md)",
+    "lineHeight": "var(--jx-leading-md)",
+    "& [part=\"group-heading\"]": {
+      "$description": "A furniture part a CONSUMER writes, styled from here because this is the definition that owns the box it sits in (ui.md 3.1). A grouped list is a role=\"group\" wrapper holding a heading and its rows — the formula palette's shape — and in a light DOM the container's own rule reaches it without a class, which is the whole point of the cascade being one.",
+      "display": "block",
+      "padding": "var(--jx-space-3) var(--jx-space-3) var(--jx-space-1)",
+      "fontSize": "var(--jx-text-xs)",
+      "textTransform": "uppercase",
+      "letterSpacing": "0.5px",
+      "color": "var(--jx-fg-muted)"
+    },
+    "& [part=\"empty\"]": {
+      "$description": "The other furniture part: the sentence a consumer draws when its own filter matched nothing. What that sentence SAYS belongs to the surface — \"No matches\", \"Nothing here yet\", a hint about the mode — so the element draws it and never writes it.",
+      "display": "block",
+      "padding": "var(--jx-space-4) var(--jx-space-3)",
+      "textAlign": "center",
+      "color": "var(--jx-fg-muted)"
+    }
+  },
+  "children": [
+    {
+      "tagName": "slot"
+    }
+  ]
+}

package/components/jx-menu-item.json

@@ -31,7 +31,7 @@
       "type": "string",
       "default": "",
       "attribute": "requires",
-      "description": "The one-sentence reason a disabled row cannot act, printed as its tooltip."
+      "description": "The one-sentence reason a DISABLED row cannot act, drawn as the row's native title while it is disabled and nowhere at all while it is not. The title is the whole contract here, and deliberately not the tooltip hybrid jx-button, jx-action-button and jx-switch ship: a disabled row can open no tip, so the hybrid collapses to its disabled half, and an ENABLED row never carries a requires — every Studio projection fills it from the registry's disabledReason, which is undefined for a command that can run, and a reason on a row that can act is a contradiction rather than a hint. Studio's menu surface also prints the same sentence as the row's visible description (`Needs …`), so a keyboard reader hears it without the title."
     },
     "checked": {
       "type": "string",
@@ -175,8 +175,7 @@
         {
           "tagName": "slot",
           "attributes": {
-            "name": "icon",
-            "part": "icon-slot"
+            "name": "icon"
           }
         }
       ]
@@ -194,10 +193,7 @@
           },
           "children": [
             {
-              "tagName": "slot",
-              "attributes": {
-                "part": "label-slot"
-              }
+              "tagName": "slot"
             }
           ]
         },
@@ -210,8 +206,7 @@
             {
               "tagName": "slot",
               "attributes": {
-                "name": "description",
-                "part": "description-slot"
+                "name": "description"
               }
             }
           ]
@@ -227,8 +222,7 @@
         {
           "tagName": "slot",
           "attributes": {
-            "name": "value",
-            "part": "value-slot"
+            "name": "value"
           }
         }
       ]
@@ -257,8 +251,7 @@
     {
       "tagName": "slot",
       "attributes": {
-        "name": "submenu",
-        "part": "submenu-slot"
+        "name": "submenu"
       }
     }
   ]

package/components/jx-menu.json

@@ -2,7 +2,7 @@
   "$schema": "https://jxsuite.com/schema/v1",
   "$id": "JxMenu",
   "tagName": "jx-menu",
-  "observedAttributes": ["label", "x", "y", "floor"],
+  "observedAttributes": ["label", "placement", "x", "y", "floor"],
   "state": {
     "label": {
       "type": "string",
@@ -10,6 +10,12 @@
       "attribute": "label",
       "description": "The accessible name of the menu."
     },
+    "placement": {
+      "type": "string",
+      "default": "",
+      "attribute": "placement",
+      "description": "Where the menu sits relative to the element it was opened from, as a CSS position-area value, or empty. Empty is the default and means placement by x and y, because a menu's usual opening is at a POINTER — a context menu — where the source it was shown from is what gets the keyboard back and not where the panel hangs. A menu that hangs from a button sets it (block-end span-inline-end, below and leading-aligned; block-end span-inline-start for a trailing edge) and is then placed by the platform against that button, followed through scroll and resize, and flipped when it would overflow; a submenu is placed inline-end span-block-end of its row without being asked. The value is passed to the property as written. A stack with a floor is never anchored: a floor is a limit the platform's fallbacks cannot express, so it keeps the coordinate placement the clamp honours."
+    },
     "x": {
       "type": "number",
       "default": 0,
@@ -28,6 +34,16 @@
       "attribute": "floor",
       "description": "The lowest edge this panel and its submenus may reach, in viewport pixels; 0 means the viewport. A menu opened from a rail that abuts a status bar sets it to the rail's bottom, so a tall submenu never runs down over the bar."
     },
+    "anchored": {
+      "type": "boolean",
+      "default": false,
+      "description": "Whether this panel is placed by the platform against the element it was shown from: an opening with a source, an area to use (placement, or the submenu default), and no floor on the stack's root. 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."
+    },
+    "area": {
+      "type": "string",
+      "default": "",
+      "description": "The position-area the anchored rule reads: placement when it is set, else the submenu default for a menu inside a row, else empty. Derived by the behaviour on beforetoggle rather than by the document, because only the behaviour can see whether this menu is a submenu."
+    },
     "open": {
       "type": "boolean",
       "default": false,
@@ -39,6 +55,12 @@
       "$export": "onMenuKeydown",
       "description": "The menu keyboard contract: Arrow keys, Home, End and typeahead move; Enter and Space activate; ArrowRight opens a submenu and ArrowLeft leaves it; Escape closes one level; Tab closes the whole stack."
     },
+    "onBeforeToggle": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/menu.ts",
+      "$export": "onMenuBeforeToggle",
+      "description": "Decides anchored and area before the panel is laid out (see the two)."
+    },
     "onToggle": {
       "$prototype": "Function",
       "$src": "jx-ui:/behaviors/menu.ts",
@@ -66,11 +88,15 @@
     "role": "menu",
     "aria-label": "${state.label}",
     "popover": "auto",
-    "tabindex": "-1"
+    "tabindex": "-1",
+    "data-anchored": "${state.anchored ? '' : null}"
   },
   "onkeydown": {
     "$ref": "#/state/onKeydown"
   },
+  "onbeforetoggle": {
+    "$ref": "#/state/onBeforeToggle"
+  },
   "ontoggle": {
     "$ref": "#/state/onToggle"
   },
@@ -78,6 +104,10 @@
     "$ref": "#/state/onPointerOver"
   },
   "style": {
+    "display": "revert-layer",
+    "&[hidden]": {
+      "display": "none"
+    },
     "position": "fixed",
     "insetInlineStart": "${state.x}px",
     "insetBlockStart": "${state.y}px",
@@ -105,6 +135,18 @@
     ":popover-open": {
       "display": "flex"
     },
+    "&[hidden]:popover-open": {
+      "display": "none"
+    },
+    "@supports (position-area: block-end)": {
+      "$description": "The anchored placement, for a menu that hangs from a button and for every submenu: the platform puts it against its IMPLICIT anchor — the element it was shown from — follows that element through scroll and resize, and flips it when the first placement would overflow, which for a submenu is the flip to its parent's inline-start the clamp used to compute by hand. No anchor-name is involved; a popover's invoker is its implicit anchor by the platform's own rule (ui.md 5.2, 6). The insets are released so x and y stop mattering. Outside this block, and for a menu at a pointer or on a stack with a floor, the coordinate placement above is the answer, unchanged.",
+      "&[data-anchored]": {
+        "insetInlineStart": "auto",
+        "insetBlockStart": "auto",
+        "positionArea": "${state.area}",
+        "positionTryFallbacks": "flip-block, flip-inline, flip-block flip-inline"
+      }
+    },
     "& hr": {
       "border": "0",
       "borderTop": "1px solid var(--jx-border)",
@@ -113,10 +155,7 @@
   },
   "children": [
     {
-      "tagName": "slot",
-      "attributes": {
-        "part": "items"
-      }
+      "tagName": "slot"
     }
   ]
 }