@jxsuite/ui 0.0.0 → 0.2.0

package/components/jx-dialog.json

@@ -0,0 +1,416 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "JxDialog",
+  "tagName": "jx-dialog",
+  "observedAttributes": [
+    "headline",
+    "confirm-label",
+    "secondary-label",
+    "cancel-label",
+    "destructive",
+    "dismissible",
+    "size"
+  ],
+  "$elements": [
+    {
+      "$ref": "./jx-button.json"
+    }
+  ],
+  "state": {
+    "headline": {
+      "type": "string",
+      "default": "",
+      "attribute": "headline",
+      "description": "The dialog's title, which is also its accessible name. Empty for a dialog named by its content."
+    },
+    "confirmLabel": {
+      "type": "string",
+      "default": "OK",
+      "attribute": "confirm-label",
+      "description": "The primary button's text; empty for no primary button."
+    },
+    "secondaryLabel": {
+      "type": "string",
+      "default": "",
+      "attribute": "secondary-label",
+      "description": "A third answer beside confirm and cancel, such as Discard; empty for none."
+    },
+    "cancelLabel": {
+      "type": "string",
+      "default": "Cancel",
+      "attribute": "cancel-label",
+      "description": "The cancel button's text; empty for no cancel button."
+    },
+    "destructive": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "destructive",
+      "description": "The primary action destroys something: its button draws in the negative variant, and the dialog opens with CANCEL focused instead of it, so a reader who answers with Enter does not destroy anything."
+    },
+    "dismissible": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "dismissible",
+      "description": "A click outside the dialog closes it, as Escape always does. Off for an answer the reader must give."
+    },
+    "size": {
+      "type": "string",
+      "default": "sm",
+      "attribute": "size",
+      "description": "sm, md or lg: the dialog's width."
+    },
+    "open": {
+      "type": "boolean",
+      "default": false,
+      "description": "Whether the dialog is showing. Read-only state, mirrored from the platform: open it with showModal(host) from the behaviours module, or with a --show invoker command aimed at the element."
+    },
+    "hasHeadline": {
+      "$expression": {
+        "operator": "!==",
+        "target": {
+          "$ref": "#/state/headline"
+        },
+        "value": ""
+      }
+    },
+    "hasConfirm": {
+      "$expression": {
+        "operator": "!==",
+        "target": {
+          "$ref": "#/state/confirmLabel"
+        },
+        "value": ""
+      }
+    },
+    "hasSecondary": {
+      "$expression": {
+        "operator": "!==",
+        "target": {
+          "$ref": "#/state/secondaryLabel"
+        },
+        "value": ""
+      }
+    },
+    "hasCancel": {
+      "$expression": {
+        "operator": "!==",
+        "target": {
+          "$ref": "#/state/cancelLabel"
+        },
+        "value": ""
+      }
+    },
+    "confirmVariant": "${state.destructive ? 'negative' : 'accent'}",
+    "closedby": "${state.dismissible ? 'any' : 'closerequest'}",
+    "onToggle": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/dialog.ts",
+      "$export": "onToggle",
+      "description": "The platform's toggle on the inner dialog, mirrored into open."
+    },
+    "onNativeCancel": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/dialog.ts",
+      "$export": "onNativeCancel",
+      "description": "Escape or a light dismissal: the platform closes the dialog, and the element dispatches cancel.",
+      "emits": [
+        {
+          "name": "cancel",
+          "description": "The reader declined: Escape, a dismissal, or the cancel button."
+        }
+      ]
+    },
+    "onNativeClose": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/dialog.ts",
+      "$export": "onNativeClose",
+      "description": "The platform's close, whatever closed it, dispatched as close.",
+      "emits": [
+        {
+          "name": "close",
+          "description": "The dialog closed, for any reason."
+        }
+      ]
+    },
+    "onCommand": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/dialog.ts",
+      "$export": "onCommand",
+      "description": "An invoker command aimed at the element: --show opens it modally, --close closes it."
+    },
+    "onConfirm": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/dialog.ts",
+      "$export": "onConfirm",
+      "description": "The primary button: dispatches confirm and leaves closing to the host, so a refused value can keep the dialog open.",
+      "emits": [
+        {
+          "name": "confirm",
+          "description": "The primary button was activated."
+        }
+      ]
+    },
+    "onSecondary": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/dialog.ts",
+      "$export": "onSecondary",
+      "description": "The secondary button: dispatches secondary.",
+      "emits": [
+        {
+          "name": "secondary",
+          "description": "The secondary button was activated."
+        }
+      ]
+    },
+    "onCancelClick": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/dialog.ts",
+      "$export": "onCancelClick",
+      "description": "The cancel button: dispatches cancel and closes the dialog."
+    },
+    "onMount": {
+      "$prototype": "Function",
+      "body": [
+        {
+          "dispatchEvent": "jx-ready",
+          "bubbles": true
+        }
+      ],
+      "description": "Announces that the element has rendered and carries its native dialog, so a host may open it."
+    }
+  },
+  "oncommand": {
+    "$ref": "#/state/onCommand"
+  },
+  "attributes": {
+    "data-size": "${state.size}",
+    "data-open": "${state.open ? '' : null}",
+    "data-destructive": "${state.destructive ? '' : null}"
+  },
+  "style": {
+    "display": "contents",
+    "&[hidden]": {
+      "display": "none"
+    },
+    "& > [part=\"dialog\"]": {
+      "boxSizing": "border-box",
+      "width": "min(90vw, 24rem)",
+      "maxHeight": "85vh",
+      "margin": "auto",
+      "padding": "0",
+      "border": "1px solid var(--jx-border)",
+      "borderRadius": "var(--jx-radius-md)",
+      "background": "var(--jx-bg-overlay)",
+      "color": "var(--jx-fg)",
+      "boxShadow": "var(--jx-shadow-dialog)",
+      "fontFamily": "var(--jx-font-sans)",
+      "fontSize": "var(--jx-text-md)",
+      "lineHeight": "var(--jx-leading-md)",
+      "overflow": "auto",
+      "&::backdrop": {
+        "background": "rgba(0, 0, 0, 0.4)"
+      },
+      ":focus-visible": {
+        "outline": "var(--jx-focus-ring)"
+      }
+    },
+    "&[data-size=\"md\"] > [part=\"dialog\"]": {
+      "width": "min(90vw, 32rem)"
+    },
+    "&[data-size=\"lg\"] > [part=\"dialog\"]": {
+      "width": "min(90vw, 44rem)"
+    },
+    "& [part=\"header\"]": {
+      "padding": "var(--jx-space-5) var(--jx-space-5) 0"
+    },
+    "& [part=\"header\"]:empty": {
+      "display": "none"
+    },
+    "& [part=\"headline\"]": {
+      "margin": "0",
+      "fontSize": "var(--jx-text-lg)",
+      "lineHeight": "var(--jx-leading-lg)",
+      "fontWeight": "600"
+    },
+    "& [part=\"body\"]": {
+      "padding": "var(--jx-space-4) var(--jx-space-5)"
+    },
+    "& [part=\"footer\"]": {
+      "display": "flex",
+      "justifyContent": "flex-end",
+      "alignItems": "center",
+      "gap": "var(--jx-space-2)",
+      "padding": "0 var(--jx-space-5) var(--jx-space-5)"
+    },
+    "& [part=\"secondary\"]": {
+      "marginRight": "auto"
+    },
+    "& [part=\"secondary-slot\"], & [part=\"cancel-slot\"], & [part=\"confirm-slot\"]": {
+      "display": "contents"
+    }
+  },
+  "children": [
+    {
+      "tagName": "dialog",
+      "attributes": {
+        "part": "dialog",
+        "closedby": "${state.closedby}",
+        "aria-label": "${state.headline || null}"
+      },
+      "ontoggle": {
+        "$ref": "#/state/onToggle"
+      },
+      "oncancel": {
+        "$ref": "#/state/onNativeCancel"
+      },
+      "onclose": {
+        "$ref": "#/state/onNativeClose"
+      },
+      "children": [
+        {
+          "tagName": "header",
+          "attributes": {
+            "part": "header"
+          },
+          "$switch": {
+            "$ref": "#/state/hasHeadline"
+          },
+          "cases": {
+            "true": {
+              "tagName": "h2",
+              "attributes": {
+                "part": "headline"
+              },
+              "textContent": "${state.headline}"
+            }
+          }
+        },
+        {
+          "tagName": "div",
+          "attributes": {
+            "part": "body"
+          },
+          "children": [
+            {
+              "tagName": "slot"
+            }
+          ]
+        },
+        {
+          "tagName": "footer",
+          "attributes": {
+            "part": "footer"
+          },
+          "children": [
+            {
+              "tagName": "div",
+              "attributes": {
+                "role": "none",
+                "part": "secondary-slot"
+              },
+              "$switch": {
+                "$ref": "#/state/hasSecondary"
+              },
+              "cases": {
+                "true": {
+                  "tagName": "jx-button",
+                  "$props": {
+                    "quiet": true
+                  },
+                  "attributes": {
+                    "part": "secondary"
+                  },
+                  "onclick": {
+                    "$ref": "#/state/onSecondary"
+                  },
+                  "children": [
+                    {
+                      "tagName": "span",
+                      "textContent": "${state.secondaryLabel}",
+                      "attributes": {
+                        "part": "secondary-label"
+                      }
+                    }
+                  ]
+                }
+              }
+            },
+            {
+              "tagName": "div",
+              "attributes": {
+                "role": "none",
+                "part": "cancel-slot"
+              },
+              "$switch": {
+                "$ref": "#/state/hasCancel"
+              },
+              "cases": {
+                "true": {
+                  "tagName": "jx-button",
+                  "attributes": {
+                    "part": "cancel",
+                    "autofocus": "${state.destructive ? '' : null}"
+                  },
+                  "onclick": {
+                    "$ref": "#/state/onCancelClick"
+                  },
+                  "children": [
+                    {
+                      "tagName": "span",
+                      "textContent": "${state.cancelLabel}",
+                      "attributes": {
+                        "part": "cancel-label"
+                      }
+                    }
+                  ]
+                }
+              }
+            },
+            {
+              "tagName": "div",
+              "attributes": {
+                "role": "none",
+                "part": "confirm-slot"
+              },
+              "$switch": {
+                "$ref": "#/state/hasConfirm"
+              },
+              "cases": {
+                "true": {
+                  "tagName": "jx-button",
+                  "$props": {
+                    "variant": {
+                      "$ref": "#/state/confirmVariant"
+                    }
+                  },
+                  "attributes": {
+                    "part": "confirm",
+                    "autofocus": "${state.destructive ? null : ''}"
+                  },
+                  "onclick": {
+                    "$ref": "#/state/onConfirm"
+                  },
+                  "children": [
+                    {
+                      "tagName": "span",
+                      "textContent": "${state.confirmLabel}",
+                      "attributes": {
+                        "part": "confirm-label"
+                      }
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "attributes": {
+            "part": "overlay-slot"
+          }
+        }
+      ]
+    }
+  ]
+}

package/components/jx-divider.json

@@ -0,0 +1,52 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "JxDivider",
+  "tagName": "jx-divider",
+  "observedAttributes": ["orientation"],
+  "state": {
+    "orientation": {
+      "type": "string",
+      "default": "horizontal",
+      "attribute": "orientation",
+      "description": "horizontal or vertical."
+    }
+  },
+  "attributes": {
+    "orientation": "${state.orientation}"
+  },
+  "style": {
+    "display": "block",
+    "&[hidden]": {
+      "display": "none"
+    },
+    "flex": "none",
+    "margin": "var(--jx-space-1) 0",
+    "& > [part=\"rule\"]": {
+      "margin": "0",
+      "border": "0",
+      "borderTop": "1px solid var(--jx-border)"
+    },
+    "&[orientation=\"vertical\"]": {
+      "display": "flex",
+      "alignSelf": "stretch",
+      "margin": "0 var(--jx-space-1)"
+    },
+    "&[orientation=\"vertical\"][hidden]": {
+      "display": "none"
+    },
+    "&[orientation=\"vertical\"] > [part=\"rule\"]": {
+      "borderTop": "0",
+      "borderLeft": "1px solid var(--jx-border)"
+    }
+  },
+  "children": [
+    {
+      "tagName": "hr",
+      "attributes": {
+        "part": "rule",
+        "role": "separator",
+        "aria-orientation": "${state.orientation}"
+      }
+    }
+  ]
+}

package/components/jx-dot.json

@@ -0,0 +1,38 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "JxDot",
+  "tagName": "jx-dot",
+  "observedAttributes": ["tone"],
+  "state": {
+    "tone": {
+      "type": "string",
+      "default": "",
+      "attribute": "tone",
+      "description": "danger, success or warning. Anything else, the empty default included, is the neutral disc."
+    }
+  },
+  "attributes": {
+    "tone": "${state.tone || null}"
+  },
+  "style": {
+    "display": "inline-block",
+    "&[hidden]": {
+      "display": "none"
+    },
+    "flex": "none",
+    "width": "6px",
+    "height": "6px",
+    "borderRadius": "50%",
+    "background": "var(--jx-fg-muted)",
+    "&[tone=\"danger\"]": {
+      "background": "var(--jx-danger)"
+    },
+    "&[tone=\"success\"]": {
+      "background": "var(--jx-success)"
+    },
+    "&[tone=\"warning\"]": {
+      "background": "var(--jx-warning)"
+    }
+  },
+  "children": []
+}

package/components/jx-field.json

@@ -0,0 +1,162 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "JxField",
+  "tagName": "jx-field",
+  "observedAttributes": ["label", "description", "required", "invalid", "warning", "span"],
+  "state": {
+    "label": {
+      "type": "string",
+      "default": "",
+      "attribute": "label",
+      "description": "The visible label in the left column. It is drawn into the element's own label node, and that node's id is what names the slotted control — so the text is the accessible name without the consumer writing an id anywhere."
+    },
+    "description": {
+      "type": "string",
+      "default": "",
+      "attribute": "description",
+      "description": "A sentence under the row explaining the control. It is the FALLBACK of the help slot, so slotting richer help replaces it rather than stacking with it, and an empty description leaves the help line with nothing in it — which is exactly what [part=\"help\"]:empty keys on to take the line out of flow. The control is pointed at the sentence only when the line HAS something in it at mount — an empty one would be a reference to an empty paragraph, which the four classes never wrote. A sentence that starts empty and fills later should therefore be SLOTTED into help, whose presence the row can see, rather than passed here."
+    },
+    "required": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "required",
+      "description": "Draws the required mark after the label. The mark is DRAWN, in content with an empty alt string, never appended to the label text: the label is the control's accessible name, and an asterisk inside that name is read out as a word. Marking the row does not make the control required — say so on the control as well, which is the element that validates."
+    },
+    "invalid": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "invalid",
+      "description": "The row's value is refused: the label and the help sentence both draw in the danger colour. This is the whole of the old .jx-help-text--error class, folded in as a state of the row rather than a second class on the sentence. It says nothing to assistive technology — aria-invalid belongs on the control that holds the value."
+    },
+    "warning": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "warning",
+      "description": "The row's value is accepted but worth a second look: the label draws in the warning colour. The help sentence is left alone, because a warning is a shade on the name rather than a correction of the sentence under it."
+    },
+    "span": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "span",
+      "description": "Collapses the row to ONE column: the label sits above the control and reads from the left. It is the shape a long label, a wide control or a checkbox list needs, and it is a property of the row rather than of anything in it."
+    },
+    "uid": {
+      "type": "string",
+      "default": "",
+      "description": "This row's own id stem, minted on mount. The label node and the help sentence take their ids from it, and the slotted control is handed those ids as its labelledby and describedby props."
+    },
+    "onMount": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/textfield.ts",
+      "$export": "nameFieldControl",
+      "description": "Mints the row's id stem and names the slotted control with it. A document cannot do either: the closed operator set has no counter, and no body can write a property on an element other than the one whose handler is running. It runs once, over what is slotted then: a control APPENDED to the row afterwards lands outside the control part, unplaced and unnamed. Keep the control in the document and switch its state rather than adding it later."
+    }
+  },
+  "attributes": {
+    "data-span": "${state.span ? '' : null}",
+    "data-required": "${state.required ? '' : null}",
+    "data-invalid": "${state.invalid ? '' : null}",
+    "data-warning": "${state.warning ? '' : null}"
+  },
+  "style": {
+    "display": "grid",
+    "gridTemplateColumns": "var(--jx-field-label-w) minmax(0, 1fr)",
+    "columnGap": "var(--jx-space-3)",
+    "rowGap": "var(--jx-space-1)",
+    "alignItems": "center",
+    "padding": "var(--jx-space-1) 0",
+    "minWidth": "0",
+    "&[hidden]": {
+      "display": "none"
+    },
+    "&[data-span]": {
+      "gridTemplateColumns": "minmax(0, 1fr)"
+    },
+    "& > [part=\"label\"]": {
+      "display": "block",
+      "width": "var(--jx-field-label-w)",
+      "minWidth": "0",
+      "textAlign": "right",
+      "color": "var(--jx-fg-dim)",
+      "fontFamily": "var(--jx-font-sans)",
+      "fontSize": "var(--jx-text-md)",
+      "lineHeight": "var(--jx-leading-md)",
+      "overflow": "hidden",
+      "textOverflow": "ellipsis",
+      "whiteSpace": "nowrap"
+    },
+    "&[data-span] > [part=\"label\"]": {
+      "width": "auto",
+      "textAlign": "left"
+    },
+    "&[data-invalid] > [part=\"label\"]": {
+      "color": "var(--jx-danger)"
+    },
+    "&[data-warning] > [part=\"label\"]": {
+      "color": "var(--jx-warning)"
+    },
+    "&[data-required] > [part=\"label\"]": {
+      "::after": {
+        "content": "\"*\" / \"\"",
+        "color": "var(--jx-danger)",
+        "marginInlineStart": "var(--jx-space-1)"
+      }
+    },
+    "& > [part=\"control\"]": {
+      "display": "contents"
+    },
+    "& > [part=\"help\"]": {
+      "gridColumn": "1 / -1",
+      "margin": "0",
+      "minWidth": "0",
+      "color": "var(--jx-fg-dim)",
+      "fontFamily": "var(--jx-font-sans)",
+      "fontSize": "var(--jx-text-sm)",
+      "lineHeight": "var(--jx-leading-sm)"
+    },
+    "& > [part=\"help\"]:empty": {
+      "display": "none"
+    },
+    "&[data-invalid] > [part=\"help\"]": {
+      "color": "var(--jx-danger)"
+    }
+  },
+  "children": [
+    {
+      "tagName": "label",
+      "attributes": {
+        "part": "label",
+        "id": "${state.uid ? state.uid + '-label' : null}"
+      },
+      "textContent": "${state.label}"
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "part": "control",
+        "role": "none"
+      },
+      "children": [
+        {
+          "tagName": "slot"
+        }
+      ]
+    },
+    {
+      "tagName": "p",
+      "attributes": {
+        "part": "help",
+        "id": "${state.uid ? state.uid + '-help' : null}"
+      },
+      "children": [
+        {
+          "tagName": "slot",
+          "attributes": {
+            "name": "help"
+          },
+          "children": ["${state.description}"]
+        }
+      ]
+    }
+  ]
+}

package/components/jx-kbd.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "JxKbd",
+  "tagName": "jx-kbd",
+  "style": {
+    "display": "inline-block",
+    "&[hidden]": {
+      "display": "none"
+    },
+    "padding": "0 var(--jx-space-2)",
+    "border": "1px solid var(--jx-border)",
+    "borderRadius": "var(--jx-radius-xs)",
+    "background": "var(--jx-bg-panel)",
+    "color": "var(--jx-fg-dim)",
+    "fontFamily": "var(--jx-font-mono)",
+    "fontSize": "var(--jx-text-xs)",
+    "lineHeight": "var(--jx-leading-sm)"
+  },
+  "children": [
+    {
+      "tagName": "slot"
+    }
+  ]
+}