@jxsuite/ui 0.0.0 → 0.1.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

@@ -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"
     }
   ]
 }

package/components/jx-number-field.json

@@ -0,0 +1,441 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "JxNumberField",
+  "tagName": "jx-number-field",
+  "$elements": [
+    {
+      "$ref": "./jx-icon.json"
+    }
+  ],
+  "observedAttributes": [
+    "value",
+    "min",
+    "max",
+    "step",
+    "placeholder",
+    "label",
+    "labelledby",
+    "describedby",
+    "disabled",
+    "stepper",
+    "step-up-label",
+    "step-down-label",
+    "name",
+    "size"
+  ],
+  "state": {
+    "value": {
+      "type": "string",
+      "default": "",
+      "attribute": "value",
+      "description": "The field's text, as a string rather than a number. An empty value means empty: a numeric entry would read a removed attribute as 0, so clearing a numeric key would write 0 into the document instead of deleting it. It is bound twice, as the control's value property AND as its value content attribute: the property is what tracks state once the reader has typed (typing sets the control's dirty value flag, after which the attribute no longer moves the live value), and the attribute keeps the control's DEFAULT value equal to its current one. The price of that mirror is that form.reset() is a no-op here, and it is deliberate: the element is not form-associated (specs/ui.md §3.2), so it never hears the reset, and an unmirrored default would move the control while leaving this state where it was — the element and its control disagreeing silently, which is worse than a reset that does nothing."
+    },
+    "min": {
+      "type": "string",
+      "default": "",
+      "attribute": "min",
+      "description": "The smallest value the control accepts, as a string. Empty removes the attribute rather than setting an empty one, and the step grid is measured from it."
+    },
+    "max": {
+      "type": "string",
+      "default": "",
+      "attribute": "max",
+      "description": "The largest value the control accepts, as a string. Empty removes the attribute."
+    },
+    "step": {
+      "type": "string",
+      "default": "",
+      "attribute": "step",
+      "description": "The stepping interval, as a string. Empty removes the attribute, leaving the platform's default of 1."
+    },
+    "placeholder": {
+      "type": "string",
+      "default": "",
+      "attribute": "placeholder",
+      "description": "Shown while the field is empty. Not a label."
+    },
+    "label": {
+      "type": "string",
+      "default": "",
+      "attribute": "label",
+      "description": "The accessible name, forwarded to the control as aria-label. Required unless a visible label points at the control."
+    },
+    "labelledby": {
+      "type": "string",
+      "default": "",
+      "attribute": "labelledby",
+      "description": "Forwarded to the inner control as aria-labelledby."
+    },
+    "describedby": {
+      "type": "string",
+      "default": "",
+      "attribute": "describedby",
+      "description": "Forwarded to the inner control as aria-describedby. The help sentence under a row is the row's, not the field's."
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "disabled",
+      "description": "Cannot be edited, stepped or focused."
+    },
+    "stepper": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "stepper",
+      "description": "Draw the two stepping buttons. The Arrow keys step whether or not they are drawn; the buttons are for a pointer."
+    },
+    "stepUpLabel": {
+      "type": "string",
+      "default": "Increase",
+      "attribute": "step-up-label",
+      "description": "The step-up button's accessible name. It is a real name rather than aria-hidden: a button with no name is reported as unnamed whether or not it is hidden from assistive technology."
+    },
+    "stepDownLabel": {
+      "type": "string",
+      "default": "Decrease",
+      "attribute": "step-down-label",
+      "description": "The step-down button's accessible name."
+    },
+    "name": {
+      "type": "string",
+      "default": "",
+      "attribute": "name",
+      "description": "The form field name, forwarded to the control."
+    },
+    "size": {
+      "type": "string",
+      "default": "md",
+      "attribute": "size",
+      "description": "sm, md or lg. The control height is the kit's, so a row of controls lines up."
+    },
+    "badInput": {
+      "type": "boolean",
+      "default": false,
+      "description": "Mirrored from the control, never authored: the reader has typed something that is not a number, so the sanitized value reads empty while an edit is still in progress. A host that deletes a key on an empty value must not delete on this one, and it reads the case off the ELEMENT rather than off an event — this prop, or the data-bad-input attribute it mirrors, reached from a handler as event.target.closest('jx-number-field')."
+    },
+    "onInput": {
+      "$prototype": "Function",
+      "body": [
+        {
+          "operator": "=",
+          "target": {
+            "$ref": "#/state/value"
+          },
+          "value": {
+            "$ref": "event#/target/value"
+          }
+        },
+        {
+          "operator": "=",
+          "target": {
+            "$ref": "#/state/badInput"
+          },
+          "value": {
+            "$ref": "event#/target/validity/badInput"
+          }
+        }
+      ],
+      "description": "Mirrors what the reader types, and whether the control could parse it. The platform's own input event is left alone and goes on bubbling from the control, so a host's event.target is the live input."
+    },
+    "onChange": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/number-field.ts",
+      "$export": "onNumberChange",
+      "description": "The reader committed an edit: reads the control back into state. The platform's own change event is neither stopped nor re-sent, so a host still reaches event.target.valueAsNumber (NaN when empty), .validity and .form on the live control; the sanitization case is read off the element as badInput, not off a detail."
+    },
+    "onKeydown": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/number-field.ts",
+      "$export": "onNumberKeydown",
+      "description": "Shift and an Arrow move ten steps, through the control's own stepping API.",
+      "emits": [
+        {
+          "name": "input",
+          "description": "The value moved. Dispatched from the element, because the platform fires nothing for a value the element wrote itself. No detail: event.target is the element, whose own value is the same string."
+        },
+        {
+          "name": "change",
+          "description": "The value was committed. Dispatched from the element for the same reason, with no detail; the sanitization case is the element's own badInput."
+        }
+      ]
+    },
+    "onStepUp": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/number-field.ts",
+      "$export": "onStepUp",
+      "description": "The step-up button: one step up.",
+      "emits": [
+        {
+          "name": "input",
+          "description": "The value moved. Dispatched from the element, because the platform fires nothing for a value the element wrote itself. No detail: event.target is the element, whose own value is the same string."
+        },
+        {
+          "name": "change",
+          "description": "The value was committed. Dispatched from the element for the same reason, with no detail; the sanitization case is the element's own badInput."
+        }
+      ]
+    },
+    "onStepDown": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/number-field.ts",
+      "$export": "onStepDown",
+      "description": "The step-down button: one step down.",
+      "emits": [
+        {
+          "name": "input",
+          "description": "The value moved. Dispatched from the element, because the platform fires nothing for a value the element wrote itself. No detail: event.target is the element, whose own value is the same string."
+        },
+        {
+          "name": "change",
+          "description": "The value was committed. Dispatched from the element for the same reason, with no detail; the sanitization case is the element's own badInput."
+        }
+      ]
+    },
+    "onStepperPointerDown": {
+      "$prototype": "Function",
+      "body": [
+        {
+          "preventDefault": true
+        }
+      ],
+      "description": "Keeps focus in the field while a stepping button is pressed. Without it the blur that follows the press fires a second change for the same edit."
+    }
+  },
+  "attributes": {
+    "data-size": "${state.size}",
+    "data-disabled": "${state.disabled ? '' : null}",
+    "data-stepper": "${state.stepper ? '' : null}",
+    "data-bad-input": "${state.badInput ? '' : null}"
+  },
+  "style": {
+    "display": "inline-flex",
+    "verticalAlign": "middle",
+    "minWidth": "0",
+    "&[hidden]": {
+      "display": "none"
+    },
+    "& [part=\"field\"]": {
+      "display": "flex",
+      "alignItems": "stretch",
+      "minWidth": "0",
+      "width": "100%"
+    },
+    "& [part=\"input\"]": {
+      "appearance": "none",
+      "boxSizing": "border-box",
+      "flex": "1 1 auto",
+      "width": "100%",
+      "minWidth": "0",
+      "minHeight": "var(--jx-control-h)",
+      "margin": "0",
+      "padding": "0 var(--jx-space-3)",
+      "border": "1px solid var(--jx-border-strong)",
+      "borderRadius": "var(--jx-radius-sm)",
+      "background": "var(--jx-bg-input)",
+      "color": "var(--jx-fg)",
+      "font": "inherit",
+      "fontFamily": "var(--jx-font-sans)",
+      "fontSize": "var(--jx-text-md)",
+      "lineHeight": "var(--jx-leading-md)",
+      "fontVariantNumeric": "tabular-nums",
+      "outline": "none",
+      "transition": "border-color var(--jx-dur-1) var(--jx-ease-out)",
+      "::placeholder": {
+        "color": "var(--jx-fg-muted)"
+      },
+      "::-webkit-inner-spin-button": {
+        "appearance": "none",
+        "margin": "0"
+      },
+      "::-webkit-outer-spin-button": {
+        "appearance": "none",
+        "margin": "0"
+      },
+      ":hover": {
+        "borderColor": "var(--jx-fg-muted)"
+      },
+      ":focus-visible": {
+        "outline": "var(--jx-focus-ring)",
+        "outlineOffset": "-1px"
+      },
+      ":disabled": {
+        "opacity": "0.5",
+        "cursor": "default"
+      }
+    },
+    "& [part=\"stepper-slot\"]": {
+      "display": "contents"
+    },
+    "& [part=\"stepper\"]": {
+      "display": "flex",
+      "flexDirection": "column",
+      "marginInlineStart": "var(--jx-space-1)"
+    },
+    "& [part=\"step-up\"], & [part=\"step-down\"]": {
+      "appearance": "none",
+      "display": "inline-flex",
+      "alignItems": "center",
+      "justifyContent": "center",
+      "flex": "1 1 0",
+      "width": "var(--jx-space-5)",
+      "padding": "0",
+      "margin": "0",
+      "border": "1px solid var(--jx-border-strong)",
+      "background": "var(--jx-bg-input)",
+      "color": "var(--jx-fg-dim)",
+      "cursor": "default",
+      "--jx-icon-size": "10px",
+      ":hover": {
+        "background": "var(--jx-hover-bg)",
+        "color": "var(--jx-fg)"
+      },
+      ":focus-visible": {
+        "outline": "var(--jx-focus-ring)",
+        "outlineOffset": "-1px"
+      },
+      ":disabled": {
+        "opacity": "0.5"
+      }
+    },
+    "& [part=\"step-up\"]": {
+      "borderRadius": "var(--jx-radius-sm) var(--jx-radius-sm) 0 0",
+      "borderBottom": "0"
+    },
+    "& [part=\"step-down\"]": {
+      "borderRadius": "0 0 var(--jx-radius-sm) var(--jx-radius-sm)"
+    },
+    "&[data-size=\"sm\"] [part=\"input\"]": {
+      "minHeight": "calc(var(--jx-control-h) - 4px)",
+      "fontSize": "var(--jx-text-sm)",
+      "padding": "0 var(--jx-space-2)"
+    },
+    "&[data-size=\"lg\"] [part=\"input\"]": {
+      "minHeight": "calc(var(--jx-control-h) + 8px)",
+      "fontSize": "var(--jx-text-lg)"
+    }
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "attributes": {
+        "part": "field",
+        "role": "none"
+      },
+      "children": [
+        {
+          "tagName": "input",
+          "attributes": {
+            "part": "input",
+            "type": "number",
+            "inputmode": "decimal",
+            "placeholder": "${state.placeholder || null}",
+            "aria-label": "${state.label || null}",
+            "aria-labelledby": "${state.labelledby || null}",
+            "aria-describedby": "${state.describedby || null}",
+            "name": "${state.name || null}",
+            "min": "${state.min || null}",
+            "max": "${state.max || null}",
+            "step": "${state.step || null}",
+            "disabled": {
+              "$ref": "#/state/disabled"
+            },
+            "value": "${state.value}"
+          },
+          "value": {
+            "$ref": "#/state/value"
+          },
+          "oninput": {
+            "$ref": "#/state/onInput"
+          },
+          "onchange": {
+            "$ref": "#/state/onChange"
+          },
+          "onkeydown": {
+            "$ref": "#/state/onKeydown"
+          }
+        },
+        {
+          "tagName": "div",
+          "attributes": {
+            "part": "stepper-slot",
+            "role": "none"
+          },
+          "$switch": {
+            "$ref": "#/state/stepper"
+          },
+          "cases": {
+            "true": {
+              "tagName": "div",
+              "attributes": {
+                "part": "stepper",
+                "role": "none"
+              },
+              "children": [
+                {
+                  "tagName": "button",
+                  "attributes": {
+                    "part": "step-up",
+                    "type": "button",
+                    "tabindex": "-1",
+                    "aria-label": "${state.stepUpLabel}",
+                    "disabled": {
+                      "$ref": "#/state/disabled"
+                    }
+                  },
+                  "onclick": {
+                    "$ref": "#/state/onStepUp"
+                  },
+                  "onpointerdown": {
+                    "$ref": "#/state/onStepperPointerDown"
+                  },
+                  "children": [
+                    {
+                      "tagName": "jx-icon",
+                      "$props": {
+                        "name": "caret-up",
+                        "weight": "bold"
+                      },
+                      "attributes": {
+                        "part": "step-up-icon"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "tagName": "button",
+                  "attributes": {
+                    "part": "step-down",
+                    "type": "button",
+                    "tabindex": "-1",
+                    "aria-label": "${state.stepDownLabel}",
+                    "disabled": {
+                      "$ref": "#/state/disabled"
+                    }
+                  },
+                  "onclick": {
+                    "$ref": "#/state/onStepDown"
+                  },
+                  "onpointerdown": {
+                    "$ref": "#/state/onStepperPointerDown"
+                  },
+                  "children": [
+                    {
+                      "tagName": "jx-icon",
+                      "$props": {
+                        "name": "caret-down",
+                        "weight": "bold"
+                      },
+                      "attributes": {
+                        "part": "step-down-icon"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          }
+        }
+      ]
+    }
+  ]
+}