@jxsuite/ui 0.0.0 → 0.2.0

package/stylebook/jx-listbox.json

@@ -0,0 +1,337 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "StylebookListbox",
+  "tagName": "main",
+  "$elements": [
+    {
+      "$ref": "../components/jx-icon.json"
+    },
+    {
+      "$ref": "../components/jx-option.json"
+    },
+    {
+      "$ref": "../components/jx-listbox.json"
+    }
+  ],
+  "state": {
+    "active": "owned-o0",
+    "picked": "",
+    "hover": {
+      "$prototype": "Function",
+      "body": [
+        {
+          "operator": "=",
+          "target": {
+            "$ref": "#/state/active"
+          },
+          "value": {
+            "$ref": "event#/currentTarget/id"
+          }
+        }
+      ]
+    },
+    "note": {
+      "$prototype": "Function",
+      "body": [
+        {
+          "operator": "=",
+          "target": {
+            "$ref": "#/state/picked"
+          },
+          "value": {
+            "$ref": "event#/detail"
+          }
+        }
+      ]
+    }
+  },
+  "style": {
+    "fontFamily": "var(--jx-font-sans)",
+    "fontSize": "var(--jx-text-md)",
+    "color": "var(--jx-fg)",
+    "background": "var(--jx-bg)",
+    "padding": "var(--jx-space-6)",
+    "minHeight": "100vh",
+    "& > h1": {
+      "fontSize": "var(--jx-text-lg)",
+      "fontWeight": "600",
+      "margin": "0 0 var(--jx-space-5)"
+    },
+    "& > h2": {
+      "fontSize": "var(--jx-text-md)",
+      "fontWeight": "600",
+      "margin": "var(--jx-space-6) 0 var(--jx-space-3)"
+    },
+    "& > p": {
+      "color": "var(--jx-fg-dim)",
+      "margin": "0 0 var(--jx-space-5)"
+    },
+    "& [part=\"panel\"]": {
+      "width": "420px",
+      "maxWidth": "100%",
+      "display": "flex",
+      "flexDirection": "column",
+      "minHeight": "0",
+      "overflow": "hidden",
+      "border": "1px solid var(--jx-border)",
+      "borderRadius": "var(--jx-radius-md)",
+      "background": "var(--jx-bg-overlay)"
+    },
+    "& [part=\"filter\"]": {
+      "display": "block",
+      "width": "100%",
+      "boxSizing": "border-box",
+      "flex": "0 0 auto",
+      "padding": "var(--jx-space-2) var(--jx-space-3)",
+      "border": "none",
+      "borderBottom": "1px solid var(--jx-border)",
+      "background": "transparent",
+      "color": "inherit",
+      "font": "inherit",
+      "outline": "none",
+      ":focus-visible": {
+        "outline": "var(--jx-focus-ring)",
+        "outlineOffset": "-2px"
+      }
+    },
+    "& jx-listbox": {
+      "--jx-listbox-max-block-size": "220px",
+      "padding": "var(--jx-space-2)"
+    },
+    "& [part=\"picked\"]": {
+      "margin": "var(--jx-space-3) 0 0",
+      "color": "var(--jx-fg-muted)",
+      "fontSize": "var(--jx-text-sm)"
+    }
+  },
+  "children": [
+    {
+      "tagName": "h1",
+      "textContent": "jx-listbox"
+    },
+    {
+      "tagName": "p",
+      "textContent": "A named list of rows whose keyboard belongs to somebody else. It has no tab stop and never calls 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 that is somewhere else entirely. A consumer moves the highlight by writing ONE string, active, which is the same id its field points aria-activedescendant at."
+    },
+    {
+      "tagName": "h2",
+      "textContent": "Owned by a field"
+    },
+    {
+      "tagName": "p",
+      "textContent": "The palette shape: a borderless field over the list, aria-controls naming it and aria-activedescendant naming the row. The field keeps the caret, so every character typed still lands in it. Hover the rows — the pointer writes the same id an arrow key would."
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "part": "panel"
+      },
+      "children": [
+        {
+          "tagName": "input",
+          "attributes": {
+            "part": "filter",
+            "type": "text",
+            "role": "combobox",
+            "autocomplete": "off",
+            "aria-autocomplete": "list",
+            "aria-controls": "owned",
+            "aria-expanded": "true",
+            "aria-activedescendant": "${state.active}",
+            "aria-label": "Filter commands",
+            "placeholder": "Filter…"
+          }
+        },
+        {
+          "tagName": "jx-listbox",
+          "attributes": {
+            "id": "owned"
+          },
+          "$props": {
+            "label": "Commands",
+            "active": "${state.active}"
+          },
+          "onselect": {
+            "$ref": "#/state/note"
+          },
+          "children": [
+            {
+              "tagName": "jx-option",
+              "attributes": {
+                "id": "owned-o0"
+              },
+              "$props": {
+                "value": "open",
+                "label": "Open file…",
+                "description": "workspace"
+              },
+              "onmouseenter": {
+                "$ref": "#/state/hover"
+              }
+            },
+            {
+              "tagName": "jx-option",
+              "attributes": {
+                "id": "owned-o1"
+              },
+              "$props": {
+                "value": "save",
+                "label": "Save",
+                "description": "document"
+              },
+              "onmouseenter": {
+                "$ref": "#/state/hover"
+              }
+            },
+            {
+              "tagName": "jx-option",
+              "attributes": {
+                "id": "owned-o2"
+              },
+              "$props": {
+                "value": "publish",
+                "label": "Publish site",
+                "description": "project"
+              },
+              "onmouseenter": {
+                "$ref": "#/state/hover"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "tagName": "p",
+      "attributes": {
+        "part": "picked"
+      },
+      "textContent": "Active: ${state.active} · picked: ${state.picked}"
+    },
+    {
+      "tagName": "h2",
+      "textContent": "Owned by nothing at all"
+    },
+    {
+      "tagName": "p",
+      "textContent": "The slash-menu shape: no field, no focus, nothing in the panel a Tab can reach. The caret it is filtering for is in the canvas, often in another realm, so the panel marks its row and stays out of the way. Its heading and its empty sentence are nodes the consumer writes, carrying part=group-heading and part=empty, which this element draws because it owns the box they sit in."
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "part": "panel"
+      },
+      "children": [
+        {
+          "tagName": "jx-listbox",
+          "attributes": {
+            "id": "unowned"
+          },
+          "$props": {
+            "label": "Elements",
+            "active": "unowned-o1"
+          },
+          "children": [
+            {
+              "tagName": "div",
+              "attributes": {
+                "role": "group",
+                "aria-label": "Text"
+              },
+              "children": [
+                {
+                  "tagName": "div",
+                  "attributes": {
+                    "part": "group-heading",
+                    "aria-hidden": "true"
+                  },
+                  "textContent": "Text"
+                },
+                {
+                  "tagName": "jx-option",
+                  "attributes": {
+                    "id": "unowned-o0"
+                  },
+                  "$props": {
+                    "value": "h1",
+                    "label": "Heading",
+                    "description": "h1"
+                  }
+                },
+                {
+                  "tagName": "jx-option",
+                  "attributes": {
+                    "id": "unowned-o1"
+                  },
+                  "$props": {
+                    "value": "p",
+                    "label": "Paragraph",
+                    "description": "p"
+                  }
+                }
+              ]
+            },
+            {
+              "tagName": "div",
+              "attributes": {
+                "role": "group",
+                "aria-label": "Media"
+              },
+              "children": [
+                {
+                  "tagName": "div",
+                  "attributes": {
+                    "part": "group-heading",
+                    "aria-hidden": "true"
+                  },
+                  "textContent": "Media"
+                },
+                {
+                  "tagName": "jx-option",
+                  "attributes": {
+                    "id": "unowned-o2"
+                  },
+                  "$props": {
+                    "value": "img",
+                    "label": "Image",
+                    "description": "img"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "tagName": "h2",
+      "textContent": "Nothing matched"
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "part": "panel"
+      },
+      "children": [
+        {
+          "tagName": "jx-listbox",
+          "attributes": {
+            "id": "nothing"
+          },
+          "$props": {
+            "label": "Results"
+          },
+          "children": [
+            {
+              "tagName": "div",
+              "attributes": {
+                "part": "empty"
+              },
+              "textContent": "No matches"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/stylebook/jx-menu.json

@@ -108,7 +108,6 @@
     "last": "",
     "note": {
       "$prototype": "Function",
-      "parameters": ["event"],
       "body": [
         {
           "operator": "=",

package/stylebook/jx-number-field.json

@@ -0,0 +1,203 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "StylebookNumberField",
+  "tagName": "main",
+  "$elements": [
+    {
+      "$ref": "../components/jx-field.json"
+    },
+    {
+      "$ref": "../components/jx-number-field.json"
+    }
+  ],
+  "state": {
+    "opacity": "0.5"
+  },
+  "style": {
+    "fontFamily": "var(--jx-font-sans)",
+    "fontSize": "var(--jx-text-md)",
+    "color": "var(--jx-fg)",
+    "background": "var(--jx-bg)",
+    "padding": "var(--jx-space-6)",
+    "minHeight": "100vh",
+    "& > h1": {
+      "fontSize": "var(--jx-text-lg)",
+      "fontWeight": "600",
+      "margin": "0 0 var(--jx-space-5)"
+    },
+    "& > h2": {
+      "fontSize": "var(--jx-text-md)",
+      "fontWeight": "600",
+      "margin": "var(--jx-space-6) 0 var(--jx-space-3)"
+    },
+    "& > p": {
+      "color": "var(--jx-fg-dim)",
+      "margin": "0 0 var(--jx-space-5)"
+    },
+    "& [role=\"group\"]": {
+      "display": "flex",
+      "alignItems": "flex-start",
+      "flexWrap": "wrap",
+      "gap": "var(--jx-space-3)",
+      "margin": "0 0 var(--jx-space-4)"
+    },
+    "& [role=\"group\"] > span": {
+      "width": "80px",
+      "color": "var(--jx-fg-muted)",
+      "fontSize": "var(--jx-text-sm)"
+    }
+  },
+  "children": [
+    {
+      "tagName": "h1",
+      "textContent": "jx-number-field"
+    },
+    {
+      "tagName": "p",
+      "textContent": "A native number input. The platform supplies the spinbutton role, the announced value, the Arrow keys and the range; the element adds a ten-step Shift+Arrow, the two stepping buttons, and the difference between an empty value and a half-typed one."
+    },
+    {
+      "tagName": "p",
+      "textContent": "The events are the platform's own two names and nothing else. On the reader's own paths the native input and change bubble out of the control untouched, so a host reads event.target.valueAsNumber (NaN when the field is empty), event.target.validity and event.target.form; on the paths the element writes the value itself, the stepper buttons and Shift+Arrow, the same two names come from the element. Whether an empty value is a clear or a half-typed number is read off the element, as its badInput prop or the data-bad-input attribute it mirrors."
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "role": "group",
+        "aria-label": "Bound value"
+      },
+      "children": [
+        {
+          "tagName": "jx-number-field",
+          "$props": {
+            "label": "Opacity",
+            "min": "0",
+            "max": "1",
+            "step": "0.1",
+            "stepper": true,
+            "value": {
+              "$ref": "#/state/opacity"
+            }
+          },
+          "onchange": {
+            "$prototype": "Function",
+            "body": [
+              {
+                "operator": "=",
+                "target": {
+                  "$ref": "#/state/opacity"
+                },
+                "value": {
+                  "$ref": "event#/target/value"
+                }
+              }
+            ]
+          }
+        },
+        {
+          "tagName": "span",
+          "textContent": "${state.opacity}"
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "role": "group",
+        "aria-label": "Sizes"
+      },
+      "children": [
+        {
+          "tagName": "jx-number-field",
+          "$props": {
+            "label": "Small",
+            "size": "sm",
+            "stepper": true,
+            "value": "1"
+          }
+        },
+        {
+          "tagName": "jx-number-field",
+          "$props": {
+            "label": "Medium",
+            "stepper": true,
+            "value": "2"
+          }
+        },
+        {
+          "tagName": "jx-number-field",
+          "$props": {
+            "label": "Large",
+            "size": "lg",
+            "stepper": true,
+            "value": "3"
+          }
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "role": "group",
+        "aria-label": "Range and states"
+      },
+      "children": [
+        {
+          "tagName": "jx-number-field",
+          "$props": {
+            "label": "Unbounded",
+            "placeholder": "auto"
+          }
+        },
+        {
+          "tagName": "jx-number-field",
+          "$props": {
+            "label": "Off the step grid",
+            "min": "0",
+            "step": "0.3",
+            "value": "0.5"
+          }
+        },
+        {
+          "tagName": "jx-number-field",
+          "$props": {
+            "label": "Disabled",
+            "disabled": true,
+            "stepper": true,
+            "value": "12"
+          }
+        }
+      ]
+    },
+    {
+      "tagName": "h2",
+      "textContent": "In a field row"
+    },
+    {
+      "tagName": "p",
+      "textContent": "The row is jx-field. It mints the ids its label and its help sentence carry, and hands them to the field as labelledby and describedby, so nothing on this page writes an id."
+    },
+    {
+      "tagName": "jx-field",
+      "$props": {
+        "label": "Columns",
+        "description": "Between 1 and 12. Hold Shift with an Arrow key to move ten at a time."
+      },
+      "attributes": {
+        "data-prop": "columns"
+      },
+      "children": [
+        {
+          "tagName": "jx-number-field",
+          "$props": {
+            "min": "1",
+            "max": "12",
+            "step": "1",
+            "stepper": true,
+            "value": "3"
+          }
+        }
+      ]
+    }
+  ]
+}