@jxsuite/ui 0.0.0

package/components/jx-button.json

@@ -0,0 +1,310 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "JxButton",
+  "tagName": "jx-button",
+  "observedAttributes": [
+    "variant",
+    "size",
+    "quiet",
+    "disabled",
+    "loading",
+    "type",
+    "label",
+    "labelledby",
+    "describedby",
+    "popovertarget",
+    "popovertargetaction",
+    "command",
+    "commandfor"
+  ],
+  "$elements": [
+    {
+      "$ref": "./jx-icon.json"
+    }
+  ],
+  "state": {
+    "variant": {
+      "type": "string",
+      "default": "secondary",
+      "attribute": "variant",
+      "description": "How much the button asks for: accent (the one primary action on a surface), primary (a solid neutral), secondary (the default outline) or negative (a destructive action)."
+    },
+    "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."
+    },
+    "quiet": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "quiet",
+      "description": "No fill and no border until hovered: a button that sits in a toolbar or beside text."
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "disabled",
+      "description": "Cannot act. Disabled, never absent; a reason belongs in the surrounding text."
+    },
+    "loading": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "loading",
+      "description": "Working on the last activation: blocks another one, keeps its width, and says so through aria-busy."
+    },
+    "type": {
+      "type": "string",
+      "default": "button",
+      "attribute": "type",
+      "description": "The native button type: button, submit or reset."
+    },
+    "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."
+    },
+    "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."
+    },
+    "popovertarget": {
+      "type": "string",
+      "default": "",
+      "attribute": "popovertarget",
+      "description": "The popover this button invokes; forwarded to the inner control, which is the element the platform reads it from."
+    },
+    "popovertargetaction": {
+      "type": "string",
+      "default": "",
+      "attribute": "popovertargetaction",
+      "description": "toggle, show or hide; forwarded with popovertarget."
+    },
+    "command": {
+      "type": "string",
+      "default": "",
+      "attribute": "command",
+      "description": "The invoker command this button sends; forwarded to the inner control."
+    },
+    "commandfor": {
+      "type": "string",
+      "default": "",
+      "attribute": "commandfor",
+      "description": "The element the command is sent to; forwarded to the inner control."
+    },
+    "notLoading": {
+      "$expression": {
+        "operator": "!",
+        "target": {
+          "$ref": "#/state/loading"
+        }
+      }
+    },
+    "onClick": {
+      "$prototype": "Function",
+      "body": [
+        {
+          "if": {
+            "$ref": "#/state/loading"
+          },
+          "then": [
+            {
+              "stopPropagation": true
+            },
+            {
+              "preventDefault": true
+            }
+          ]
+        }
+      ],
+      "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."
+    }
+  },
+  "onclick": {
+    "$ref": "#/state/onClick"
+  },
+  "attributes": {
+    "data-variant": "${state.variant}",
+    "data-size": "${state.size}",
+    "data-quiet": "${state.quiet ? '' : null}",
+    "data-loading": "${state.loading ? '' : null}"
+  },
+  "style": {
+    "display": "inline-flex",
+    "verticalAlign": "middle",
+    "&[hidden]": {
+      "display": "none"
+    },
+    "& > [part=\"control\"]": {
+      "appearance": "none",
+      "font": "inherit",
+      "fontFamily": "var(--jx-font-sans)",
+      "fontSize": "var(--jx-text-md)",
+      "lineHeight": "var(--jx-leading-md)",
+      "display": "inline-flex",
+      "alignItems": "center",
+      "justifyContent": "center",
+      "gap": "var(--jx-space-2)",
+      "minHeight": "var(--jx-control-h)",
+      "margin": "0",
+      "padding": "0 var(--jx-space-4)",
+      "border": "1px solid var(--jx-border-strong)",
+      "borderRadius": "var(--jx-radius-sm)",
+      "background": "var(--jx-bg-input)",
+      "color": "var(--jx-fg)",
+      "cursor": "pointer",
+      "whiteSpace": "nowrap",
+      "outline": "none",
+      "transition": "background var(--jx-dur-1) var(--jx-ease-out), border-color var(--jx-dur-1) var(--jx-ease-out)",
+      ":hover": {
+        "background": "var(--jx-hover-bg)"
+      },
+      ":focus-visible": {
+        "outline": "var(--jx-focus-ring)",
+        "outlineOffset": "2px"
+      },
+      ":disabled": {
+        "opacity": "0.5",
+        "cursor": "default"
+      },
+      "&[aria-busy=\"true\"]": {
+        "cursor": "progress"
+      }
+    },
+    "&[data-variant=\"accent\"] > [part=\"control\"]": {
+      "background": "var(--jx-accent-solid)",
+      "borderColor": "transparent",
+      "color": "var(--jx-accent-fg)",
+      ":hover": {
+        "background": "var(--jx-accent-hover)"
+      }
+    },
+    "&[data-variant=\"primary\"] > [part=\"control\"]": {
+      "background": "var(--jx-fg)",
+      "borderColor": "transparent",
+      "color": "var(--jx-bg)",
+      ":hover": {
+        "background": "var(--jx-fg-dim)"
+      }
+    },
+    "&[data-variant=\"negative\"] > [part=\"control\"]": {
+      "background": "var(--jx-danger)",
+      "borderColor": "transparent",
+      "color": "var(--jx-accent-fg)",
+      ":hover": {
+        "filter": "brightness(1.1)"
+      }
+    },
+    "&[data-quiet] > [part=\"control\"]": {
+      "background": "transparent",
+      "borderColor": "transparent",
+      ":hover": {
+        "background": "var(--jx-hover-bg)"
+      }
+    },
+    "&[data-size=\"sm\"] > [part=\"control\"]": {
+      "minHeight": "calc(var(--jx-control-h) - 4px)",
+      "padding": "0 var(--jx-space-3)",
+      "fontSize": "var(--jx-text-sm)"
+    },
+    "&[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=\"spinner\"]": {
+      "display": "inline-flex",
+      "color": "inherit"
+    },
+    "& [part=\"spinner\"][hidden]": {
+      "display": "none"
+    }
+  },
+  "children": [
+    {
+      "tagName": "button",
+      "attributes": {
+        "part": "control",
+        "type": "${state.type}",
+        "disabled": {
+          "$ref": "#/state/disabled"
+        },
+        "aria-disabled": "${state.loading ? 'true' : null}",
+        "aria-busy": "${state.loading ? 'true' : null}",
+        "aria-label": "${state.label || null}",
+        "aria-labelledby": "${state.labelledby || null}",
+        "aria-describedby": "${state.describedby || null}",
+        "popovertarget": "${state.popovertarget || null}",
+        "popovertargetaction": "${state.popovertargetaction || null}",
+        "command": "${state.command || null}",
+        "commandfor": "${state.commandfor || null}"
+      },
+      "children": [
+        {
+          "tagName": "span",
+          "attributes": {
+            "part": "icon"
+          },
+          "children": [
+            {
+              "tagName": "slot",
+              "attributes": {
+                "name": "icon",
+                "part": "icon-slot"
+              }
+            }
+          ]
+        },
+        {
+          "tagName": "span",
+          "attributes": {
+            "part": "label"
+          },
+          "children": [
+            {
+              "tagName": "slot",
+              "attributes": {
+                "part": "label-slot"
+              }
+            }
+          ]
+        },
+        {
+          "tagName": "span",
+          "attributes": {
+            "part": "spinner",
+            "aria-hidden": "true"
+          },
+          "hidden": {
+            "$ref": "#/state/notLoading"
+          },
+          "children": [
+            {
+              "tagName": "jx-icon",
+              "$props": {
+                "name": "spinner",
+                "weight": "bold"
+              },
+              "attributes": {
+                "part": "spinner-icon"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/components/jx-icon.json

@@ -0,0 +1,81 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "JxIcon",
+  "tagName": "jx-icon",
+  "observedAttributes": ["name", "weight", "label", "mirror"],
+  "state": {
+    "name": {
+      "type": "string",
+      "default": "",
+      "attribute": "name",
+      "description": "The glyph to draw, by its Phosphor name. Every name the kit ships is in icons/list.json."
+    },
+    "weight": {
+      "type": "string",
+      "default": "regular",
+      "attribute": "weight",
+      "description": "regular, bold, or fill. fill is the active drawing of the same glyph; a weight the manifest lacks falls back to regular."
+    },
+    "label": {
+      "type": "string",
+      "default": "",
+      "attribute": "label",
+      "description": "The accessible name. Empty hides the icon from assistive technology, which is right whenever visible text already names the control."
+    },
+    "mirror": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "mirror",
+      "description": "Flip horizontally: a directional glyph in a right-to-left layout, or its opposite."
+    },
+    "lookup": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/icons.ts",
+      "$export": "iconPath",
+      "parameters": ["name", "weight"],
+      "description": "Path data for a name and weight, from the committed manifest."
+    },
+    "path": "${state.lookup(state.name, state.weight)}"
+  },
+  "style": {
+    "display": "inline-flex",
+    "&[hidden]": {
+      "display": "none"
+    },
+    "flex": "none",
+    "width": "var(--jx-icon-size, 16px)",
+    "height": "var(--jx-icon-size, 16px)",
+    "verticalAlign": "middle",
+    "& > svg": {
+      "display": "block",
+      "width": "100%",
+      "height": "100%"
+    }
+  },
+  "children": [
+    {
+      "tagName": "svg",
+      "attributes": {
+        "part": "svg",
+        "viewBox": "0 0 256 256",
+        "fill": "currentColor",
+        "focusable": "false",
+        "role": "img",
+        "aria-label": "${state.label}",
+        "aria-hidden": "${state.label ? 'false' : 'true'}"
+      },
+      "style": {
+        "transform": "${state.mirror ? 'scale(-1, 1)' : 'none'}"
+      },
+      "children": [
+        {
+          "tagName": "path",
+          "attributes": {
+            "part": "path",
+            "d": "${state.path}"
+          }
+        }
+      ]
+    }
+  ]
+}

package/components/jx-menu-item.json

@@ -0,0 +1,265 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "JxMenuItem",
+  "tagName": "jx-menu-item",
+  "observedAttributes": ["value", "disabled", "destructive", "requires", "checked", "haspopup"],
+  "$elements": [
+    {
+      "$ref": "./jx-icon.json"
+    }
+  ],
+  "state": {
+    "value": {
+      "type": "string",
+      "default": "",
+      "attribute": "value",
+      "description": "What the row stands for; the detail of the select event it dispatches."
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "disabled",
+      "description": "A row that cannot act is disabled, never absent; it stays reachable and explains itself through requires."
+    },
+    "destructive": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "destructive",
+      "description": "Draws the row in the danger colour. Derived from the command record, never decided per menu."
+    },
+    "requires": {
+      "type": "string",
+      "default": "",
+      "attribute": "requires",
+      "description": "The one-sentence reason a disabled row cannot act, printed as its tooltip."
+    },
+    "checked": {
+      "type": "string",
+      "default": "",
+      "attribute": "checked",
+      "description": "Empty for a plain item; true or false for a checkbox item, which then carries aria-checked."
+    },
+    "haspopup": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "haspopup",
+      "description": "The row owns a submenu, slotted as submenu. It still runs its own command; the submenu opens on hover, ArrowRight or the chevron."
+    },
+    "expanded": {
+      "type": "boolean",
+      "default": false,
+      "description": "Whether the row's submenu is showing. Written by the menu behaviour."
+    },
+    "noPopup": {
+      "$expression": {
+        "operator": "!",
+        "target": {
+          "$ref": "#/state/haspopup"
+        }
+      }
+    },
+    "onClick": {
+      "$prototype": "Function",
+      "body": [
+        {
+          "stopPropagation": true
+        },
+        {
+          "if": {
+            "operator": "!",
+            "target": {
+              "$ref": "#/state/disabled"
+            }
+          },
+          "then": [
+            {
+              "dispatchEvent": "select",
+              "detail": {
+                "$ref": "#/state/value"
+              },
+              "bubbles": true
+            }
+          ]
+        }
+      ],
+      "emits": [
+        {
+          "name": "select",
+          "description": "The row was activated; detail is its value."
+        }
+      ],
+      "description": "Activation dispatches select unless the row is disabled. The click stops here: a row inside a submenu is a descendant of the row that owns it, and a click that kept bubbling would activate both."
+    }
+  },
+  "attributes": {
+    "role": "${state.checked ? 'menuitemcheckbox' : 'menuitem'}",
+    "tabindex": "-1",
+    "aria-disabled": "${state.disabled ? 'true' : 'false'}",
+    "aria-checked": "${state.checked || null}",
+    "aria-haspopup": "${state.haspopup ? 'menu' : null}",
+    "aria-expanded": "${state.haspopup ? (state.expanded ? 'true' : 'false') : null}",
+    "title": "${state.disabled && state.requires ? state.requires : null}"
+  },
+  "onclick": {
+    "$ref": "#/state/onClick"
+  },
+  "style": {
+    "display": "flex",
+    "&[hidden]": {
+      "display": "none"
+    },
+    "alignItems": "center",
+    "gap": "var(--jx-space-3)",
+    "minHeight": "var(--jx-control-h)",
+    "padding": "var(--jx-space-1) var(--jx-space-3)",
+    "borderRadius": "var(--jx-radius-sm)",
+    "cursor": "default",
+    "userSelect": "none",
+    "outline": "none",
+    "color": "${state.destructive && !state.disabled ? 'var(--jx-danger)' : 'inherit'}",
+    ":hover": {
+      "background": "var(--jx-hover-bg)"
+    },
+    ":focus-visible": {
+      "outline": "var(--jx-focus-ring)",
+      "outlineOffset": "-2px"
+    },
+    "&[aria-disabled=\"true\"]": {
+      "opacity": "0.5"
+    },
+    "& > [part=\"icon\"]": {
+      "display": "inline-flex",
+      "color": "var(--jx-fg-dim)"
+    },
+    "& > [part=\"text\"]": {
+      "display": "flex",
+      "flexDirection": "column",
+      "flex": "1",
+      "minWidth": "0"
+    },
+    "& > [part=\"text\"] > [part=\"label\"]": {
+      "whiteSpace": "nowrap",
+      "overflow": "hidden",
+      "textOverflow": "ellipsis"
+    },
+    "& > [part=\"text\"] > [part=\"description\"]": {
+      "fontSize": "var(--jx-text-xs)",
+      "lineHeight": "var(--jx-leading-xs)",
+      "color": "var(--jx-fg-muted)"
+    },
+    "& > [part=\"value\"]": {
+      "color": "var(--jx-fg-dim)",
+      "fontSize": "var(--jx-text-sm)",
+      "whiteSpace": "nowrap"
+    },
+    "& > [part=\"value\"] kbd": {
+      "fontFamily": "var(--jx-font-mono)",
+      "fontSize": "var(--jx-text-xs)",
+      "color": "var(--jx-fg-dim)"
+    },
+    "& > [part=\"chevron\"]": {
+      "display": "inline-flex",
+      "color": "var(--jx-fg-dim)"
+    },
+    "& > [part=\"chevron\"][hidden]": {
+      "display": "none"
+    }
+  },
+  "children": [
+    {
+      "tagName": "span",
+      "attributes": {
+        "part": "icon"
+      },
+      "children": [
+        {
+          "tagName": "slot",
+          "attributes": {
+            "name": "icon",
+            "part": "icon-slot"
+          }
+        }
+      ]
+    },
+    {
+      "tagName": "span",
+      "attributes": {
+        "part": "text"
+      },
+      "children": [
+        {
+          "tagName": "span",
+          "attributes": {
+            "part": "label"
+          },
+          "children": [
+            {
+              "tagName": "slot",
+              "attributes": {
+                "part": "label-slot"
+              }
+            }
+          ]
+        },
+        {
+          "tagName": "span",
+          "attributes": {
+            "part": "description"
+          },
+          "children": [
+            {
+              "tagName": "slot",
+              "attributes": {
+                "name": "description",
+                "part": "description-slot"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "tagName": "span",
+      "attributes": {
+        "part": "value"
+      },
+      "children": [
+        {
+          "tagName": "slot",
+          "attributes": {
+            "name": "value",
+            "part": "value-slot"
+          }
+        }
+      ]
+    },
+    {
+      "tagName": "span",
+      "attributes": {
+        "part": "chevron"
+      },
+      "hidden": {
+        "$ref": "#/state/noPopup"
+      },
+      "children": [
+        {
+          "tagName": "jx-icon",
+          "$props": {
+            "name": "caret-right",
+            "weight": "bold"
+          },
+          "attributes": {
+            "part": "chevron-icon"
+          }
+        }
+      ]
+    },
+    {
+      "tagName": "slot",
+      "attributes": {
+        "name": "submenu",
+        "part": "submenu-slot"
+      }
+    }
+  ]
+}