@jxsuite/ui 0.0.0 → 0.2.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": {
@@ -212,18 +297,24 @@
       }
     },
     "&[data-size=\"sm\"] > [part=\"control\"]": {
+      "$description": "A small button draws 4px under the kit's control height, and the control height is the WCAG 2.2 SC 2.5.8 floor (ui.md §4.3), so the drawn box alone would be a 20px pointer target at the default density. The `::before` is the hit area: an empty pseudo-element that reaches 2px past the drawn box on every side, so what accepts the pointer is exactly `--jx-control-h` square while the picture stays small — jx-tab's close button's technique, and the criterion measures the region that accepts the pointer, not the paint. The inset is -3px and not -2px because an absolutely positioned box is offset from its containing block's PADDING edge, and this control draws a 1px border: the border width comes first, then half of the 4px the box is under. jx-tab's close button is borderless, which is why -4px was exact there, and why the number did not carry over unchanged. In a jx-toolbar (a 4px gap) two extended neighbours abut and neither loses a pixel; jx-action-group's own sheet zeroes the packed axis in a compact group, where the boxes touch and an extension could only steal a strip of the neighbour. Held by target-size.test.ts and the conformance gate, both of which read the border and subtract it.",
+      "position": "relative",
       "minHeight": "calc(var(--jx-control-h) - 4px)",
       "padding": "0 var(--jx-space-3)",
-      "fontSize": "var(--jx-text-sm)"
+      "fontSize": "var(--jx-text-sm)",
+      "::before": {
+        "content": "\"\"",
+        "position": "absolute",
+        "inset": "-3px"
+      }
     },
     "&[data-size=\"lg\"] > [part=\"control\"]": {
       "minHeight": "calc(var(--jx-control-h) + 8px)",
       "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 +322,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 +343,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 +366,7 @@
             {
               "tagName": "slot",
               "attributes": {
-                "name": "icon",
-                "part": "icon-slot"
+                "name": "icon"
               }
             }
           ]
@@ -275,36 +378,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,222 @@
+{
+  "$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\"]": {
+      "$description": "The control is the `<label>` wrapping the input, and the label is the pointer target: a click anywhere on it toggles the box. At `sm` it draws 4px under the kit's control height, the WCAG 2.2 SC 2.5.8 floor (ui.md \u00a74.3), so the `::before` extends the hit area 2px beyond the box on every side — jx-tab's close-button technique, the same shape jx-button carries — and the region that accepts the pointer is `--jx-control-h` tall while the row stays 20px. -2px is exact here where jx-button needs -3px: an absolutely positioned box is offset from the PADDING edge, and the label draws no border, so its padding edge is its drawn edge. The label needs `position: relative` here for the pseudo-element to measure against; the input inside is 14px and needs nothing of its own, because the label around it is the target. Held by target-size.test.ts and the conformance gate.",
+      "position": "relative",
+      "minHeight": "calc(var(--jx-control-h) - 4px)",
+      "fontSize": "var(--jx-text-sm)",
+      "lineHeight": "var(--jx-leading-sm)",
+      "::before": {
+        "content": "\"\"",
+        "position": "absolute",
+        "inset": "-2px"
+      }
+    },
+    "&[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"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}