@jxsuite/ui 0.0.0 → 0.1.0

package/components/jx-button.json

@@ -9,7 +9,9 @@
     "disabled",
     "loading",
     "type",
+    "autofocus",
     "label",
+    "hint",
     "labelledby",
     "describedby",
     "popovertarget",
@@ -20,6 +22,12 @@
   "$elements": [
     {
       "$ref": "./jx-icon.json"
+    },
+    {
+      "$ref": "./jx-spinner.json"
+    },
+    {
+      "$ref": "./jx-tooltip.json"
     }
   ],
   "state": {
@@ -41,11 +49,16 @@
       "attribute": "quiet",
       "description": "No fill and no border until hovered: a button that sits in a toolbar or beside text."
     },
+    "tabindex": {
+      "type": "string",
+      "default": "",
+      "description": "Forwarded to the inner control as its tabindex, which is what makes a roving caret possible: the focusable node is the control inside, not the host, so a jx-toolbar moving focus writes this rather than reaching into a child's internals. It is a PROPERTY ONLY (el.tabindex = \"0\") and deliberately not an observed attribute: written as an attribute it would land on the host as well, and a host carrying tabindex is itself focusable, so the one control would become two tab stops."
+    },
     "disabled": {
       "type": "boolean",
       "default": false,
       "attribute": "disabled",
-      "description": "Cannot act. Disabled, never absent; a reason belongs in the surrounding text."
+      "description": "Cannot act. Disabled, never absent; a reason belongs in the surrounding text or in hint, which a disabled button draws as the control's native title because a disabled control can open no tip."
     },
     "loading": {
       "type": "boolean",
@@ -59,12 +72,24 @@
       "attribute": "type",
       "description": "The native button type: button, submit or reset."
     },
+    "autofocus": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "autofocus",
+      "description": "Takes focus when the surface it is on opens. Forwarded to the inner control, which is the element the platform reads it from: a dialog's showModal() focuses the first focusable descendant unless one claims autofocus."
+    },
     "label": {
       "type": "string",
       "default": "",
       "attribute": "label",
       "description": "The accessible name when the visible text is not it, or there is none. Forwarded to the inner control as aria-label."
     },
+    "hint": {
+      "type": "string",
+      "default": "",
+      "attribute": "hint",
+      "description": "A tooltip beside the name, for a button whose visible text is cut short or whose disabled state needs a reason; empty, the usual case, draws nothing. The same shape as jx-action-button's: while the button is ENABLED it is a jx-tooltip child of this element — shown on keyboard focus at once and on hover after the tip's delay, hoverable and dismissible with Escape (SC 1.4.13) — named on the control in aria-describedby so it describes rather than names; while the button is DISABLED it is the control's native title instead, the one affordance a control that receives no focus and no pointer still has. Never both at once."
+    },
     "labelledby": {
       "type": "string",
       "default": "",
@@ -75,7 +100,48 @@
       "type": "string",
       "default": "",
       "attribute": "describedby",
-      "description": "Forwarded to the inner control as aria-describedby."
+      "description": "Forwarded to the inner control as aria-describedby, after the hint's own tip when there is one."
+    },
+    "uid": {
+      "type": "string",
+      "default": "",
+      "description": "This button's own id stem, minted on mount by the tooltip sidecar. The control's id, the tip's id and the three attributes that wire one to the other are all built from it, so a consumer writes none of them. Empty until the mount microtask, which is why every binding that reads it guards on it."
+    },
+    "hasTip": {
+      "$expression": {
+        "operator": "&&",
+        "target": {
+          "operator": "!",
+          "target": {
+            "operator": "!",
+            "target": {
+              "$ref": "#/state/hint"
+            }
+          }
+        },
+        "value": {
+          "operator": "&&",
+          "target": {
+            "operator": "!",
+            "target": {
+              "$ref": "#/state/disabled"
+            }
+          },
+          "value": {
+            "operator": "!==",
+            "target": {
+              "$ref": "#/state/uid"
+            },
+            "value": ""
+          }
+        }
+      }
+    },
+    "onMount": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/tooltip.ts",
+      "$export": "mintHintId",
+      "description": "Mints the id stem the hint's tooltip is wired by. A document cannot: the closed operator set has no counter and no identity."
     },
     "popovertarget": {
       "type": "string",
@@ -109,6 +175,25 @@
         }
       }
     },
+    "onSwallow": {
+      "$prototype": "Function",
+      "body": [
+        {
+          "if": {
+            "$ref": "#/state/loading"
+          },
+          "then": [
+            {
+              "stopPropagation": true
+            },
+            {
+              "preventDefault": true
+            }
+          ]
+        }
+      ],
+      "description": "The swallow, on the INNER CONTROL rather than the host: stopPropagation halts an event at the node it is called on and every node after it, not the other listeners on that same node — so a swallow on the host cancels the default and then runs the host's own click listeners anyway, which is the one path a consumer actually uses. Called one node earlier, the click never reaches the host at all."
+    },
     "onClick": {
       "$prototype": "Function",
       "body": [
@@ -126,7 +211,7 @@
           ]
         }
       ],
-      "description": "A loading button swallows the activation: the click stops here and its default (a form submission, a popover, a command) is cancelled. A disabled button never gets this far, because its inner control is disabled."
+      "description": "The second half of the swallow, for a click dispatched AT the host: that one never passes the inner control, so this is the only guard that sees it. Its default (a form submission, a popover, a command) is cancelled either way. A disabled button never gets this far, because its inner control is disabled."
     }
   },
   "onclick": {
@@ -221,9 +306,8 @@
       "padding": "0 var(--jx-space-5)",
       "fontSize": "var(--jx-text-lg)"
     },
-    "& [part=\"icon\"]": {
-      "display": "inline-flex",
-      "color": "inherit"
+    "& > [part=\"control\"] > [part=\"icon\"]": {
+      "display": "contents"
     },
     "& [part=\"spinner\"]": {
       "display": "inline-flex",
@@ -231,13 +315,20 @@
     },
     "& [part=\"spinner\"][hidden]": {
       "display": "none"
+    },
+    "& > [part=\"tooltip\"]": {
+      "display": "contents"
     }
   },
   "children": [
     {
       "tagName": "button",
+      "onclick": {
+        "$ref": "#/state/onSwallow"
+      },
       "attributes": {
         "part": "control",
+        "id": "${state.uid || null}",
         "type": "${state.type}",
         "disabled": {
           "$ref": "#/state/disabled"
@@ -245,12 +336,18 @@
         "aria-disabled": "${state.loading ? 'true' : null}",
         "aria-busy": "${state.loading ? 'true' : null}",
         "aria-label": "${state.label || null}",
+        "title": "${state.disabled && state.hint ? state.hint : null}",
+        "interestfor": "${state.hasTip ? state.uid + '-tip' : null}",
         "aria-labelledby": "${state.labelledby || null}",
-        "aria-describedby": "${state.describedby || null}",
+        "aria-describedby": "${[state.hasTip ? state.uid + '-tip' : null, state.describedby || null].filter(Boolean).join(' ') || null}",
+        "tabindex": "${state.tabindex || null}",
         "popovertarget": "${state.popovertarget || null}",
         "popovertargetaction": "${state.popovertargetaction || null}",
         "command": "${state.command || null}",
-        "commandfor": "${state.commandfor || null}"
+        "commandfor": "${state.commandfor || null}",
+        "autofocus": {
+          "$ref": "#/state/autofocus"
+        }
       },
       "children": [
         {
@@ -262,8 +359,7 @@
             {
               "tagName": "slot",
               "attributes": {
-                "name": "icon",
-                "part": "icon-slot"
+                "name": "icon"
               }
             }
           ]
@@ -275,36 +371,48 @@
           },
           "children": [
             {
-              "tagName": "slot",
-              "attributes": {
-                "part": "label-slot"
-              }
+              "tagName": "slot"
             }
           ]
         },
         {
-          "tagName": "span",
+          "tagName": "jx-spinner",
           "attributes": {
-            "part": "spinner",
-            "aria-hidden": "true"
+            "part": "spinner"
           },
           "hidden": {
             "$ref": "#/state/notLoading"
+          }
+        }
+      ]
+    },
+    {
+      "tagName": "span",
+      "attributes": {
+        "part": "tooltip"
+      },
+      "$switch": {
+        "$ref": "#/state/hasTip"
+      },
+      "cases": {
+        "true": {
+          "tagName": "jx-tooltip",
+          "attributes": {
+            "part": "tip",
+            "id": "${state.uid}-tip",
+            "for": "${state.uid}"
           },
           "children": [
             {
-              "tagName": "jx-icon",
-              "$props": {
-                "name": "spinner",
-                "weight": "bold"
-              },
+              "tagName": "span",
               "attributes": {
-                "part": "spinner-icon"
-              }
+                "part": "tip-text"
+              },
+              "textContent": "${state.hint}"
             }
           ]
         }
-      ]
+      }
     }
   ]
 }

package/components/jx-checkbox.json

@@ -0,0 +1,215 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "JxCheckbox",
+  "tagName": "jx-checkbox",
+  "observedAttributes": [
+    "checked",
+    "indeterminate",
+    "disabled",
+    "label",
+    "labelledby",
+    "describedby",
+    "name",
+    "size"
+  ],
+  "state": {
+    "checked": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "checked",
+      "description": "Whether the box is ticked. Bound to the control BOTH ways, and each binding answers a different question. The PROPERTY is the live state: once the reader clicks, the checkedness dirty flag is set and the content attribute stops controlling the box, so a property binding is the only one that keeps tracking a host write after the first click. The content ATTRIBUTE is the control's DEFAULT checkedness, and it is mirrored because this element is not form-associated (specs/ui.md 3.2): it never hears form.reset(), so without the mirror a reset would move the CONTROL to the authored default and leave the element's state where it was, and the two would disagree silently. With it, a reset is a visible no-op, which is a missing feature rather than a lie."
+    },
+    "indeterminate": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "indeterminate",
+      "description": "The mixed state: neither ticked nor clear, for a box standing over a set that is partly on. HTML gives it no content attribute at all — it exists only as a property — which is the reason this element exists: written into attributes it would parse, validate and silently do nothing. So there is nothing to mirror and no default for a form reset to return to, and a click clears it in the platform."
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "disabled",
+      "description": "Cannot be ticked or focused. Disabled, never absent."
+    },
+    "label": {
+      "type": "string",
+      "default": "",
+      "attribute": "label",
+      "description": "The accessible name, forwarded to the control as aria-label. Leave it empty when the slotted text is on screen: the empty value REMOVES the attribute so the wrapping label's text names the box, rather than naming it twice."
+    },
+    "labelledby": {
+      "type": "string",
+      "default": "",
+      "attribute": "labelledby",
+      "description": "Forwarded to the inner control as aria-labelledby, for a visible label the box does not wrap."
+    },
+    "describedby": {
+      "type": "string",
+      "default": "",
+      "attribute": "describedby",
+      "description": "Forwarded to the inner control as aria-describedby, for a help or error sentence the row owns."
+    },
+    "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 row height is the kit's, so a column of controls lines up."
+    },
+    "tabindex": {
+      "type": "string",
+      "default": "",
+      "description": "Forwarded to the inner control as its tabindex, which is what makes a roving caret possible: the focusable node is the input inside, not the host and not the label that wraps it, so a jx-toolbar moving focus writes this rather than reaching into a child's internals. It is a PROPERTY ONLY (el.tabindex = \"0\") and deliberately not an observed attribute: written as an attribute it would land on the host as well, and a host carrying tabindex is itself focusable, so the one control would become two tab stops."
+    },
+    "onChange": {
+      "$prototype": "Function",
+      "body": [
+        {
+          "operator": "=",
+          "target": {
+            "$ref": "#/state/checked"
+          },
+          "value": {
+            "$ref": "event#/target/checked"
+          }
+        },
+        {
+          "operator": "=",
+          "target": {
+            "$ref": "#/state/indeterminate"
+          },
+          "value": {
+            "$ref": "event#/target/indeterminate"
+          }
+        }
+      ],
+      "description": "Mirrors both halves of the control's state back. A click on a mixed box clears indeterminate and toggles checked in the platform; reading only checked would let the next flush re-assert mixed over the reader's own tick. The native change and input events bubble from the control as they always do."
+    }
+  },
+  "attributes": {
+    "data-size": "${state.size}",
+    "data-checked": "${state.checked ? '' : null}",
+    "data-indeterminate": "${state.indeterminate ? '' : null}",
+    "data-disabled": "${state.disabled ? '' : null}"
+  },
+  "style": {
+    "display": "inline-flex",
+    "verticalAlign": "middle",
+    "minWidth": "0",
+    "&[hidden]": {
+      "display": "none"
+    },
+    "& > [part=\"control\"]": {
+      "display": "inline-flex",
+      "alignItems": "center",
+      "gap": "var(--jx-space-2)",
+      "minHeight": "var(--jx-control-h)",
+      "minWidth": "0",
+      "font": "inherit",
+      "fontFamily": "var(--jx-font-sans)",
+      "fontSize": "var(--jx-text-md)",
+      "lineHeight": "var(--jx-leading-md)",
+      "color": "var(--jx-fg)",
+      "cursor": "pointer"
+    },
+    "& [part=\"input\"]": {
+      "accentColor": "var(--jx-accent-solid)",
+      "flex": "none",
+      "width": "var(--jx-icon-size)",
+      "height": "var(--jx-icon-size)",
+      "margin": "0",
+      "cursor": "inherit",
+      "outline": "none",
+      ":focus-visible": {
+        "outline": "var(--jx-focus-ring)",
+        "outlineOffset": "2px",
+        "borderRadius": "var(--jx-radius-xs)"
+      }
+    },
+    "& [part=\"label\"]": {
+      "minWidth": "0",
+      "overflow": "hidden",
+      "textOverflow": "ellipsis",
+      "whiteSpace": "nowrap"
+    },
+    "& [part=\"label\"]:empty": {
+      "display": "none"
+    },
+    "&[data-disabled] > [part=\"control\"]": {
+      "opacity": "0.5",
+      "cursor": "default",
+      "color": "var(--jx-fg-dim)"
+    },
+    "&[data-size=\"sm\"] > [part=\"control\"]": {
+      "minHeight": "calc(var(--jx-control-h) - 4px)",
+      "fontSize": "var(--jx-text-sm)",
+      "lineHeight": "var(--jx-leading-sm)"
+    },
+    "&[data-size=\"sm\"] [part=\"input\"]": {
+      "width": "calc(var(--jx-icon-size) - 2px)",
+      "height": "calc(var(--jx-icon-size) - 2px)"
+    },
+    "&[data-size=\"lg\"] > [part=\"control\"]": {
+      "minHeight": "calc(var(--jx-control-h) + 8px)",
+      "fontSize": "var(--jx-text-lg)",
+      "lineHeight": "var(--jx-leading-lg)"
+    },
+    "&[data-size=\"lg\"] [part=\"input\"]": {
+      "width": "calc(var(--jx-icon-size) + 2px)",
+      "height": "calc(var(--jx-icon-size) + 2px)"
+    }
+  },
+  "children": [
+    {
+      "tagName": "label",
+      "attributes": {
+        "part": "control"
+      },
+      "children": [
+        {
+          "tagName": "input",
+          "attributes": {
+            "part": "input",
+            "type": "checkbox",
+            "aria-label": "${state.label || null}",
+            "aria-labelledby": "${state.labelledby || null}",
+            "aria-describedby": "${state.describedby || null}",
+            "tabindex": "${state.tabindex || null}",
+            "name": "${state.name || null}",
+            "disabled": {
+              "$ref": "#/state/disabled"
+            },
+            "checked": {
+              "$ref": "#/state/checked"
+            }
+          },
+          "checked": {
+            "$ref": "#/state/checked"
+          },
+          "indeterminate": {
+            "$ref": "#/state/indeterminate"
+          },
+          "onchange": {
+            "$ref": "#/state/onChange"
+          }
+        },
+        {
+          "tagName": "span",
+          "attributes": {
+            "part": "label"
+          },
+          "children": [
+            {
+              "tagName": "slot"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}