@jxsuite/ui 0.0.0 → 0.2.0

package/stylebook/jx-swatch-group.json

@@ -0,0 +1,175 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "StylebookSwatchGroup",
+  "tagName": "main",
+  "$elements": [
+    {
+      "$ref": "../components/jx-swatch.json"
+    },
+    {
+      "$ref": "../components/jx-swatch-group.json"
+    }
+  ],
+  "state": {
+    "chosen": "#3b82f6",
+    "palette": [
+      { "value": "#ef4444", "label": "Red" },
+      { "value": "#f97316", "label": "Orange" },
+      { "value": "#f5d90a", "label": "Lemon" },
+      { "value": "#22c55e", "label": "Green" },
+      { "value": "#3b82f6", "label": "Blue" },
+      { "value": "#8b5cf6", "label": "Violet" },
+      { "value": "#8b8b8b", "label": "Slate" },
+      { "value": "#000000", "label": "Black" }
+    ]
+  },
+  "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=\"readout\"]": {
+      "display": "block",
+      "margin": "var(--jx-space-3) 0 var(--jx-space-5)",
+      "color": "var(--jx-fg-muted)",
+      "fontFamily": "var(--jx-font-mono)",
+      "fontSize": "var(--jx-text-sm)"
+    },
+    "& jx-swatch-group": {
+      "maxWidth": "320px"
+    }
+  },
+  "children": [
+    {
+      "tagName": "h1",
+      "textContent": "jx-swatch-group"
+    },
+    {
+      "tagName": "p",
+      "textContent": "A radio group of swatches. The group is the one writer of each swatch's chosen state and of the roving caret, so a host owns the group's value and nothing else. Either arrow pair moves between swatches with wrap, Home and End go to the ends, and the swatch the caret lands on is chosen, which is what a radio group does."
+    },
+    {
+      "tagName": "h2",
+      "textContent": "A palette, bound both ways"
+    },
+    {
+      "tagName": "jx-swatch-group",
+      "$props": {
+        "label": "Brand palette",
+        "value": {
+          "$ref": "#/state/chosen"
+        }
+      },
+      "onchange": {
+        "$prototype": "Function",
+        "body": [
+          {
+            "operator": "=",
+            "target": {
+              "$ref": "#/state/chosen"
+            },
+            "value": {
+              "$ref": "event#/target/value"
+            }
+          }
+        ]
+      },
+      "children": [
+        {
+          "$prototype": "Array",
+          "items": {
+            "$ref": "#/state/palette"
+          },
+          "key": {
+            "$ref": "$map/item/value"
+          },
+          "map": {
+            "tagName": "jx-swatch",
+            "$props": {
+              "color": "${$map.item.value}",
+              "value": "${$map.item.value}",
+              "label": "${$map.item.label}"
+            }
+          }
+        }
+      ]
+    },
+    {
+      "tagName": "span",
+      "attributes": {
+        "part": "readout"
+      },
+      "textContent": "${state.chosen}"
+    },
+    {
+      "tagName": "h2",
+      "textContent": "A fixed grid, and a member that cannot be chosen"
+    },
+    {
+      "tagName": "jx-swatch-group",
+      "$props": {
+        "label": "Theme colours",
+        "columns": 4,
+        "value": "#22c55e"
+      },
+      "children": [
+        {
+          "tagName": "jx-swatch",
+          "$props": { "color": "#ef4444", "label": "Red" }
+        },
+        {
+          "tagName": "jx-swatch",
+          "$props": { "color": "#22c55e", "label": "Green" }
+        },
+        {
+          "tagName": "jx-swatch",
+          "$props": { "color": "#3b82f6", "label": "Blue", "disabled": true }
+        },
+        {
+          "tagName": "jx-swatch",
+          "$props": { "label": "No colour", "value": "none" }
+        }
+      ]
+    },
+    {
+      "tagName": "h2",
+      "textContent": "Captioned, in one column"
+    },
+    {
+      "tagName": "jx-swatch-group",
+      "$props": {
+        "label": "Named tokens",
+        "columns": 1,
+        "value": "brand.cool"
+      },
+      "children": [
+        {
+          "tagName": "jx-swatch",
+          "$props": { "color": "#f97316", "value": "brand.warm", "label": "Warm" },
+          "children": [{ "tagName": "span", "textContent": "Warm" }]
+        },
+        {
+          "tagName": "jx-swatch",
+          "$props": { "color": "#0ea5e9", "value": "brand.cool", "label": "Cool" },
+          "children": [{ "tagName": "span", "textContent": "Cool" }]
+        }
+      ]
+    }
+  ]
+}

package/stylebook/jx-swatch.json

@@ -0,0 +1,249 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "StylebookSwatch",
+  "tagName": "main",
+  "$elements": [
+    {
+      "$ref": "../components/jx-swatch.json"
+    }
+  ],
+  "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": "center",
+      "flexWrap": "wrap",
+      "gap": "var(--jx-space-3)",
+      "margin": "0 0 var(--jx-space-4)"
+    }
+  },
+  "children": [
+    {
+      "tagName": "h1",
+      "textContent": "jx-swatch"
+    },
+    {
+      "tagName": "p",
+      "textContent": "A colour chip that is a real button. Its name is the label rather than the colour, because a hex code read one character at a time is not a name. The chip's boundary and its tick are drawn in whichever of black or white can be seen on the colour, which the element works out from its own colour with no host involved."
+    },
+    {
+      "tagName": "h2",
+      "textContent": "Sizes"
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "role": "group",
+        "aria-label": "Sizes"
+      },
+      "children": [
+        {
+          "tagName": "jx-swatch",
+          "$props": {
+            "size": "sm",
+            "color": "#3b82f6",
+            "label": "Blue"
+          }
+        },
+        {
+          "tagName": "jx-swatch",
+          "$props": {
+            "color": "#3b82f6",
+            "label": "Blue"
+          }
+        },
+        {
+          "tagName": "jx-swatch",
+          "$props": {
+            "size": "lg",
+            "color": "#3b82f6",
+            "label": "Blue"
+          }
+        }
+      ]
+    },
+    {
+      "tagName": "h2",
+      "textContent": "Ink against the colour"
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "role": "group",
+        "aria-label": "Chosen swatches across the range"
+      },
+      "children": [
+        {
+          "tagName": "jx-swatch",
+          "$props": {
+            "color": "#ffffff",
+            "label": "Paper",
+            "selected": true
+          }
+        },
+        {
+          "tagName": "jx-swatch",
+          "$props": {
+            "color": "#f5d90a",
+            "label": "Lemon",
+            "selected": true
+          }
+        },
+        {
+          "tagName": "jx-swatch",
+          "$props": {
+            "color": "#8b8b8b",
+            "label": "Slate",
+            "selected": true
+          }
+        },
+        {
+          "tagName": "jx-swatch",
+          "$props": {
+            "color": "#1d4ed8",
+            "label": "Ink",
+            "selected": true
+          }
+        },
+        {
+          "tagName": "jx-swatch",
+          "$props": {
+            "color": "#000000",
+            "label": "Black",
+            "selected": true
+          }
+        }
+      ]
+    },
+    {
+      "tagName": "h2",
+      "textContent": "States"
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "role": "group",
+        "aria-label": "States"
+      },
+      "children": [
+        {
+          "tagName": "jx-swatch",
+          "$props": {
+            "color": "#22c55e",
+            "label": "Green"
+          }
+        },
+        {
+          "tagName": "jx-swatch",
+          "$props": {
+            "color": "#22c55e",
+            "label": "Green, chosen",
+            "checked": "true"
+          }
+        },
+        {
+          "tagName": "jx-swatch",
+          "$props": {
+            "color": "#22c55e",
+            "label": "Green, one of a set",
+            "checked": "false"
+          }
+        },
+        {
+          "tagName": "jx-swatch",
+          "$props": {
+            "color": "#22c55e",
+            "label": "Green, not yours to choose",
+            "disabled": true
+          }
+        },
+        {
+          "tagName": "jx-swatch",
+          "$props": {
+            "label": "No colour"
+          }
+        },
+        {
+          "tagName": "jx-swatch",
+          "$props": {
+            "color": "rgb(59 130 246 / 35%)",
+            "label": "Blue, a third opaque"
+          }
+        },
+        {
+          "tagName": "jx-swatch",
+          "$props": {
+            "color": "var(--jx-accent-solid)",
+            "value": "accent",
+            "label": "Accent token"
+          }
+        }
+      ]
+    },
+    {
+      "tagName": "h2",
+      "textContent": "With a caption"
+    },
+    {
+      "tagName": "p",
+      "textContent": "Slotted text sits beside the chip. The label still names the swatch, so the two must agree: aria-label wins over anything slotted, and a caption that said something else would be a name nobody can see."
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "role": "group",
+        "aria-label": "Captioned"
+      },
+      "children": [
+        {
+          "tagName": "jx-swatch",
+          "$props": {
+            "color": "#f97316",
+            "value": "brand.warm",
+            "label": "Warm"
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "textContent": "Warm"
+            }
+          ]
+        },
+        {
+          "tagName": "jx-swatch",
+          "$props": {
+            "color": "#0ea5e9",
+            "value": "brand.cool",
+            "label": "Cool",
+            "checked": "true"
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "textContent": "Cool"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/stylebook/jx-switch.json

@@ -0,0 +1,240 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "StylebookSwitch",
+  "tagName": "main",
+  "$elements": [
+    {
+      "$ref": "../components/jx-field.json"
+    },
+    {
+      "$ref": "../components/jx-switch.json"
+    }
+  ],
+  "state": {
+    "wrap": true
+  },
+  "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)"
+    },
+    "& > p": {
+      "color": "var(--jx-fg-dim)",
+      "margin": "0 0 var(--jx-space-5)"
+    },
+    "& [role=\"group\"]": {
+      "display": "flex",
+      "alignItems": "center",
+      "flexWrap": "wrap",
+      "gap": "var(--jx-space-4)",
+      "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-switch"
+    },
+    {
+      "tagName": "p",
+      "textContent": "A native checkbox with role=switch, drawn as a track and a thumb. The platform supplies the on/off state, Space, and the click target of the wrapping label; the element writes no aria-checked of its own. The first switch is bound to the page's state both ways."
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "role": "group",
+        "aria-label": "Bound state"
+      },
+      "children": [
+        {
+          "tagName": "jx-switch",
+          "$props": {
+            "checked": {
+              "$ref": "#/state/wrap"
+            },
+            "hint": "Long lines fold at the pane's edge."
+          },
+          "onchange": {
+            "$prototype": "Function",
+            "body": [
+              {
+                "operator": "=",
+                "target": {
+                  "$ref": "#/state/wrap"
+                },
+                "value": {
+                  "$ref": "event#/target/checked"
+                }
+              }
+            ]
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "textContent": "Wrap long lines"
+            }
+          ]
+        },
+        {
+          "tagName": "span",
+          "textContent": "${state.wrap ? 'on' : 'off'}"
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "role": "group",
+        "aria-label": "Sizes"
+      },
+      "children": [
+        {
+          "tagName": "jx-switch",
+          "$props": {
+            "size": "sm",
+            "checked": true
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "textContent": "Small"
+            }
+          ]
+        },
+        {
+          "tagName": "jx-switch",
+          "$props": {
+            "checked": true
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "textContent": "Medium"
+            }
+          ]
+        },
+        {
+          "tagName": "jx-switch",
+          "$props": {
+            "size": "lg",
+            "checked": true
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "textContent": "Large"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "dir": "rtl",
+        "role": "group",
+        "aria-label": "Right to left"
+      },
+      "children": [
+        {
+          "tagName": "jx-switch",
+          "$props": {
+            "checked": true
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "textContent": "On, in a right-to-left row"
+            }
+          ]
+        },
+        {
+          "tagName": "jx-switch",
+          "children": [
+            {
+              "tagName": "span",
+              "textContent": "Off, in a right-to-left row"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "role": "group",
+        "aria-label": "States"
+      },
+      "children": [
+        {
+          "tagName": "jx-switch",
+          "children": [
+            {
+              "tagName": "span",
+              "textContent": "Off"
+            }
+          ]
+        },
+        {
+          "tagName": "jx-switch",
+          "$props": {
+            "checked": true,
+            "disabled": true
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "textContent": "On, and not yours to change"
+            }
+          ]
+        },
+        {
+          "tagName": "jx-switch",
+          "$props": {
+            "disabled": true,
+            "hint": "Sign in to publish from here."
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "textContent": "Off, with a reason"
+            }
+          ]
+        },
+        {
+          "tagName": "jx-switch",
+          "$props": {
+            "label": "Unlabelled switch"
+          }
+        }
+      ]
+    },
+    {
+      "tagName": "jx-field",
+      "$props": {
+        "label": "Minify",
+        "description": "Strips whitespace from the built CSS and JavaScript."
+      },
+      "attributes": {
+        "data-prop": "minify"
+      },
+      "children": [
+        {
+          "tagName": "jx-switch"
+        }
+      ]
+    }
+  ]
+}