@jxsuite/ui 0.0.0 → 0.2.0

package/components/jx-swatch.json

@@ -0,0 +1,262 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "JxSwatch",
+  "tagName": "jx-swatch",
+  "observedAttributes": ["color", "value", "label", "checked", "selected", "disabled", "size"],
+  "$elements": [
+    {
+      "$ref": "./jx-icon.json"
+    }
+  ],
+  "state": {
+    "color": {
+      "type": "string",
+      "default": "",
+      "attribute": "color",
+      "description": "The colour the chip draws, as any CSS colour the page can resolve. Empty is a legal value and is the NO COLOUR chip: it draws a slashed square rather than nothing, because a blank square in a palette reads as a white swatch and picking it would be picking white."
+    },
+    "value": {
+      "type": "string",
+      "default": "",
+      "attribute": "value",
+      "description": "What the swatch stands for: the detail of the select it dispatches, and what a swatch group compares its own value against. Empty falls back to color, so a palette of literal colours needs no second attribute; set it when the swatch stands for a TOKEN whose colour is only how it looks, which is the case a project's palette is made of."
+    },
+    "label": {
+      "type": "string",
+      "default": "",
+      "attribute": "label",
+      "description": "The swatch's name, and its accessible name: it is written to aria-label, so it wins over anything slotted beside the chip. A COLOUR IS NOT A NAME. Without this the element falls back to the value and then to the colour, which announces \"#3b82f6\" one character at a time — legible, technically a name, and useless. Give every swatch in a palette the word a reader would use for it."
+    },
+    "checked": {
+      "type": "string",
+      "default": "",
+      "attribute": "checked",
+      "description": "Empty for a plain button; true or false for one member of a swatch group, which then carries role=radio and aria-checked on its control and puts role=none on the HOST so the radio is the group's own child rather than a grandchild behind a generic. jx-swatch-group is the single writer of this on its children, exactly as jx-tabs is of a tab's selected, so a host moves the selection by writing the group's value."
+    },
+    "selected": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "selected",
+      "description": "Draws the chosen ring and the tick without announcing anything, for a swatch a host has chosen outside a radio group. It is the drawing alone: checked is what a reader is TOLD, and setting one never sets the other."
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "disabled",
+      "description": "Cannot be chosen or focused. Disabled, never absent."
+    },
+    "size": {
+      "type": "string",
+      "default": "md",
+      "attribute": "size",
+      "description": "sm, md or lg. The chip grows; the button's target does not shrink below the kit's control height, so a small swatch is still a target a finger can hit."
+    },
+    "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 button inside, not the host, so a group moving focus writes this rather than reaching into a child's internals. It is a PROPERTY ONLY 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 one control would become two tab stops."
+    },
+    "inkOf": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/color.ts",
+      "$export": "inkOn",
+      "parameters": ["color"],
+      "description": "Black or white, whichever can be seen on the swatch's own colour, or the empty string for a colour only the browser can resolve. Pure: it takes the colour and returns a word."
+    },
+    "ink": "${state.inkOf(state.color)}",
+    "token": "${state.value || state.color}",
+    "name": "${state.label || state.value || state.color || 'Colour'}",
+    "isChecked": {
+      "$expression": {
+        "operator": "===",
+        "target": {
+          "$ref": "#/state/checked"
+        },
+        "value": "true"
+      }
+    },
+    "chosen": {
+      "$expression": {
+        "operator": "||",
+        "target": {
+          "$ref": "#/state/isChecked"
+        },
+        "value": {
+          "$ref": "#/state/selected"
+        }
+      }
+    },
+    "onClick": {
+      "$prototype": "Function",
+      "body": [
+        {
+          "dispatchEvent": "select",
+          "detail": {
+            "$ref": "#/state/token"
+          },
+          "bubbles": true
+        }
+      ],
+      "emits": [
+        {
+          "name": "select",
+          "description": "The swatch was activated; detail is what it stands for. A swatch group listens for it and answers with its own change."
+        }
+      ],
+      "description": "Activation says what the swatch stands for and nothing else. It does not write its own checked: inside a group the group owns that, and outside one the host does, and an element that chose itself would disagree with both."
+    }
+  },
+  "onclick": {
+    "$ref": "#/state/onClick"
+  },
+  "attributes": {
+    "role": "${state.checked ? 'none' : null}",
+    "data-size": "${state.size}",
+    "data-chosen": "${state.chosen ? '' : null}",
+    "data-empty": "${state.color ? null : ''}",
+    "data-disabled": "${state.disabled ? '' : null}"
+  },
+  "style": {
+    "display": "inline-flex",
+    "&[hidden]": {
+      "display": "none"
+    },
+    "verticalAlign": "middle",
+    "--jx-swatch-size": "20px",
+    "--jx-swatch-color": "${state.color || 'transparent'}",
+    "--jx-swatch-ink": "${state.ink || 'var(--jx-border-strong)'}",
+    "--jx-color-checkerboard": "repeating-conic-gradient(var(--jx-gray-300) 0% 25%, var(--jx-bg-input) 0% 50%) 50% / 8px 8px",
+    "&[data-size=\"sm\"]": {
+      "--jx-swatch-size": "14px"
+    },
+    "&[data-size=\"lg\"]": {
+      "--jx-swatch-size": "28px"
+    },
+    "& > [part=\"control\"]": {
+      "appearance": "none",
+      "font": "inherit",
+      "fontFamily": "var(--jx-font-sans)",
+      "fontSize": "var(--jx-text-md)",
+      "display": "inline-flex",
+      "alignItems": "center",
+      "gap": "var(--jx-space-2)",
+      "minInlineSize": "var(--jx-control-h)",
+      "minBlockSize": "var(--jx-control-h)",
+      "margin": "0",
+      "padding": "var(--jx-space-1)",
+      "border": "0",
+      "borderRadius": "var(--jx-radius-sm)",
+      "background": "transparent",
+      "color": "var(--jx-fg)",
+      "cursor": "pointer",
+      "outline": "none",
+      ":hover": {
+        "background": "var(--jx-hover-bg)"
+      },
+      ":focus-visible": {
+        "outline": "var(--jx-focus-ring)",
+        "outlineOffset": "-2px"
+      },
+      ":disabled": {
+        "opacity": "0.5",
+        "cursor": "default"
+      }
+    },
+    "& [part=\"chip\"]": {
+      "$description": "The ring is drawn with the ink the element worked out from its own colour rather than with a neutral border token, because a mid-grey boundary disappears against a mid-grey swatch and a control whose edge cannot be seen is a WCAG 1.4.11 failure. The checkerboard behind it is what makes a translucent colour read as translucent instead of as a paler opaque one.",
+      "position": "relative",
+      "display": "inline-flex",
+      "alignItems": "center",
+      "justifyContent": "center",
+      "flex": "none",
+      "inlineSize": "var(--jx-swatch-size)",
+      "blockSize": "var(--jx-swatch-size)",
+      "borderRadius": "var(--jx-radius-xs)",
+      "background": "linear-gradient(var(--jx-swatch-color), var(--jx-swatch-color)), var(--jx-color-checkerboard)",
+      "boxShadow": "inset 0 0 0 1px var(--jx-swatch-ink)",
+      "color": "var(--jx-swatch-ink)"
+    },
+    "&[data-empty] [part=\"chip\"]": {
+      "background": "linear-gradient(to bottom right, transparent calc(50% - 1px), var(--jx-danger) calc(50% - 1px), var(--jx-danger) calc(50% + 1px), transparent calc(50% + 1px)), var(--jx-bg-input)"
+    },
+    "&[data-chosen] [part=\"chip\"]": {
+      "outline": "2px solid var(--jx-fg)",
+      "outlineOffset": "2px"
+    },
+    "& [part=\"mark\"]": {
+      "display": "inline-flex",
+      "color": "inherit"
+    },
+    "& [part=\"label\"]": {
+      "minInlineSize": "0",
+      "overflow": "hidden",
+      "textOverflow": "ellipsis",
+      "whiteSpace": "nowrap"
+    },
+    "& [part=\"label\"]:empty": {
+      "display": "none"
+    },
+    "& [part=\"mark-slot\"]": {
+      "display": "contents"
+    }
+  },
+  "children": [
+    {
+      "tagName": "button",
+      "attributes": {
+        "part": "control",
+        "type": "button",
+        "role": "${state.checked ? 'radio' : null}",
+        "aria-checked": "${state.checked || null}",
+        "aria-label": "${state.name}",
+        "tabindex": "${state.tabindex || null}",
+        "disabled": {
+          "$ref": "#/state/disabled"
+        }
+      },
+      "children": [
+        {
+          "tagName": "span",
+          "attributes": {
+            "part": "chip",
+            "aria-hidden": "true"
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "attributes": {
+                "part": "mark-slot"
+              },
+              "$switch": {
+                "$ref": "#/state/chosen"
+              },
+              "cases": {
+                "true": {
+                  "tagName": "jx-icon",
+                  "$props": {
+                    "name": "check",
+                    "weight": "bold"
+                  },
+                  "attributes": {
+                    "part": "mark"
+                  }
+                }
+              }
+            }
+          ]
+        },
+        {
+          "tagName": "span",
+          "attributes": {
+            "part": "label"
+          },
+          "children": [
+            {
+              "tagName": "slot"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/components/jx-switch.json

@@ -0,0 +1,331 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "JxSwitch",
+  "tagName": "jx-switch",
+  "observedAttributes": [
+    "checked",
+    "disabled",
+    "hint",
+    "label",
+    "labelledby",
+    "describedby",
+    "name",
+    "size"
+  ],
+  "$elements": [
+    {
+      "$ref": "./jx-tooltip.json"
+    }
+  ],
+  "state": {
+    "checked": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "checked",
+      "description": "Whether the setting is on. Bound to the control BOTH ways, and the two halves do different jobs. The PROPERTY is what keeps tracking: once the reader flips the box the checkedness dirty flag is set and the content attribute stops controlling the live state, so an attribute binding alone would look right until the first click and then silently stop. The ATTRIBUTE is written as well so the control's defaultChecked can never disagree with the element's state — the same shape jx-textfield ships for value. The cost is that defaultChecked is also the form-reset default, so until the element is form-associated (specs/ui.md §3.2) form.reset() moves this switch nowhere. That is the deliberate half of the trade: with no form association the element never hears the reset, so a working reset would move the CONTROL to the authored default and leave the element's checked state behind it, and a control that silently disagrees with its own element is worse than a reset that does nothing."
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "disabled",
+      "description": "Cannot be flipped or focused. Disabled, never absent, and the hint moves from the tip to the row's title while it is: a disabled control cannot open a tip, and why the setting cannot be changed is exactly what the reader hovers to find out."
+    },
+    "hint": {
+      "type": "string",
+      "default": "",
+      "attribute": "hint",
+      "description": "The tooltip on the row: what turning the setting on does, or why it cannot be changed. The same hybrid jx-button and jx-action-button ship. While the switch is ENABLED it is drawn as 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) — and the control names it in aria-describedby, so it is a description beside the name and never the name itself. While the switch is DISABLED it is the native title of the wrapping label instead, because a disabled control receives no focus and no pointer event and could never open a tip, while the platform still shows a title on hover. Never both at once; empty draws neither. ONE difference from the buttons, and it is the platform's rather than the kit's: the tip is wired by `for` alone and the row declares NO `interestfor`. Interest invokers are supported on `a`, `area` and `button` only — never on a label or an input — so the attribute here would show nothing on Chrome 152 while telling the tooltip sidecar the platform had the pair, which is the one combination that draws no tip on any engine. The sidecar binds the label on every engine instead, and that is what the switch pays for a tooltip: six listeners on the row and two on the tip, always, where a button pays them only where the platform lacks the attribute."
+    },
+    "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 wrapping label is then the name, and a second one would be read twice."
+    },
+    "labelledby": {
+      "type": "string",
+      "default": "",
+      "attribute": "labelledby",
+      "description": "Forwarded to the inner control as aria-labelledby, for a visible label the element does not own."
+    },
+    "describedby": {
+      "type": "string",
+      "default": "",
+      "attribute": "describedby",
+      "description": "Forwarded to the inner control as aria-describedby, for the help or error sentence on the row."
+    },
+    "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 track scales with it so a row 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."
+    },
+    "uid": {
+      "type": "string",
+      "default": "",
+      "description": "This row's own id stem, minted on mount by the tooltip sidecar. The label's id, the tip's id and the two attributes that wire one to the other are all built from it, so a consumer writes none of them and two hinted switches on one panel cannot collide. 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."
+    },
+    "onChange": {
+      "$prototype": "Function",
+      "body": [
+        {
+          "operator": "=",
+          "target": {
+            "$ref": "#/state/checked"
+          },
+          "value": {
+            "$ref": "event#/target/checked"
+          }
+        }
+      ],
+      "description": "Mirrors the reader's flip into checked. The native change and input events bubble from the control as they always do, so a host reads e.target.checked exactly as it would from a bare input."
+    }
+  },
+  "attributes": {
+    "data-size": "${state.size}",
+    "data-checked": "${state.checked ? '' : null}",
+    "data-disabled": "${state.disabled ? '' : null}"
+  },
+  "style": {
+    "display": "inline-flex",
+    "verticalAlign": "middle",
+    "&[hidden]": {
+      "display": "none"
+    },
+    "& > [part=\"control\"]": {
+      "display": "inline-flex",
+      "alignItems": "center",
+      "gap": "var(--jx-space-2)",
+      "minHeight": "var(--jx-control-h)",
+      "fontFamily": "var(--jx-font-sans)",
+      "fontSize": "var(--jx-text-md)",
+      "lineHeight": "var(--jx-leading-md)",
+      "color": "var(--jx-fg)",
+      "cursor": "pointer"
+    },
+    "&[data-disabled] > [part=\"control\"]": {
+      "cursor": "default",
+      "color": "var(--jx-fg-muted)"
+    },
+    "& [part=\"input\"]": {
+      "appearance": "none",
+      "boxSizing": "border-box",
+      "position": "relative",
+      "flex": "0 0 auto",
+      "width": "28px",
+      "height": "16px",
+      "margin": "0",
+      "padding": "0",
+      "border": "1px solid var(--jx-switch-track)",
+      "borderRadius": "999px",
+      "background": "var(--jx-switch-track)",
+      "cursor": "inherit",
+      "outline": "none",
+      "--jx-switch-travel": "12px",
+      "transition": "background var(--jx-dur-1) var(--jx-ease-out), border-color var(--jx-dur-1) var(--jx-ease-out)",
+      "::before": {
+        "content": "\"\"",
+        "position": "absolute",
+        "insetBlockStart": "1px",
+        "insetInlineStart": "1px",
+        "width": "12px",
+        "height": "12px",
+        "borderRadius": "50%",
+        "background": "var(--jx-switch-thumb)",
+        "transition": "translate var(--jx-dur-1) var(--jx-ease-out)"
+      },
+      ":checked": {
+        "background": "var(--jx-accent-solid)",
+        "borderColor": "var(--jx-accent-solid)",
+        "::before": {
+          "translate": "var(--jx-switch-travel) 0"
+        }
+      },
+      ":focus-visible": {
+        "outline": "var(--jx-focus-ring)",
+        "outlineOffset": "2px"
+      },
+      ":disabled": {
+        "opacity": "0.5",
+        "cursor": "default"
+      }
+    },
+    "&:dir(rtl) [part=\"input\"]:checked::before": {
+      "translate": "calc(-1 * var(--jx-switch-travel)) 0"
+    },
+    "&[data-size=\"sm\"] [part=\"input\"]": {
+      "width": "22px",
+      "height": "12px",
+      "--jx-switch-travel": "10px",
+      "::before": {
+        "width": "8px",
+        "height": "8px"
+      }
+    },
+    "&[data-size=\"lg\"] [part=\"input\"]": {
+      "width": "34px",
+      "height": "20px",
+      "--jx-switch-travel": "14px",
+      "::before": {
+        "width": "16px",
+        "height": "16px"
+      }
+    },
+    "& [part=\"label\"]": {
+      "minWidth": "0"
+    },
+    "& [part=\"label\"]:empty": {
+      "display": "none"
+    },
+    "& > [part=\"tooltip\"]": {
+      "display": "contents"
+    },
+    "@(forced-colors: active)": {
+      "& [part=\"input\"]": {
+        "forcedColorAdjust": "none",
+        "background": "ButtonFace",
+        "borderColor": "ButtonText",
+        "::before": {
+          "background": "ButtonText"
+        },
+        ":checked": {
+          "background": "Highlight",
+          "borderColor": "Highlight",
+          "::before": {
+            "background": "ButtonFace"
+          }
+        },
+        ":disabled": {
+          "borderColor": "GrayText",
+          "opacity": "1",
+          "::before": {
+            "background": "GrayText"
+          }
+        }
+      }
+    }
+  },
+  "children": [
+    {
+      "tagName": "label",
+      "attributes": {
+        "part": "control",
+        "id": "${state.uid || null}",
+        "title": "${state.disabled && state.hint ? state.hint : null}"
+      },
+      "children": [
+        {
+          "tagName": "input",
+          "attributes": {
+            "part": "input",
+            "type": "checkbox",
+            "role": "switch",
+            "aria-label": "${state.label || null}",
+            "aria-labelledby": "${state.labelledby || null}",
+            "aria-describedby": "${[state.hasTip ? state.uid + '-tip' : null, state.describedby || null].filter(Boolean).join(' ') || null}",
+            "tabindex": "${state.tabindex || null}",
+            "name": "${state.name || null}",
+            "disabled": {
+              "$ref": "#/state/disabled"
+            },
+            "checked": {
+              "$ref": "#/state/checked"
+            }
+          },
+          "checked": {
+            "$ref": "#/state/checked"
+          },
+          "onchange": {
+            "$ref": "#/state/onChange"
+          }
+        },
+        {
+          "tagName": "span",
+          "attributes": {
+            "part": "label"
+          },
+          "children": [
+            {
+              "tagName": "slot"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "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": "span",
+              "attributes": {
+                "part": "tip-text"
+              },
+              "textContent": "${state.hint}"
+            }
+          ]
+        }
+      }
+    }
+  ]
+}

package/components/jx-tab-panel.json

@@ -0,0 +1,58 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "JxTabPanel",
+  "tagName": "jx-tab-panel",
+  "observedAttributes": ["active", "labelledby"],
+  "state": {
+    "active": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "active",
+      "description": "Whether this panel is the showing one. Every other panel is hidden, not absent, so the ids its tab names stay resolvable."
+    },
+    "labelledby": {
+      "type": "string",
+      "default": "",
+      "attribute": "labelledby",
+      "description": "The id of the tab that controls this panel, announced as aria-labelledby. Nothing checks the pairing: mint this id and the tab's aria-controls from one key."
+    },
+    "notActive": {
+      "$expression": {
+        "operator": "!",
+        "target": {
+          "$ref": "#/state/active"
+        }
+      }
+    }
+  },
+  "attributes": {
+    "role": "tabpanel",
+    "tabindex": "0",
+    "aria-labelledby": "${state.labelledby || null}",
+    "hidden": {
+      "$ref": "#/state/notActive"
+    }
+  },
+  "style": {
+    "display": "block",
+    "&[hidden]": {
+      "display": "none"
+    },
+    "boxSizing": "border-box",
+    "padding": "var(--jx-space-3)",
+    "fontFamily": "var(--jx-font-sans)",
+    "fontSize": "var(--jx-text-md)",
+    "lineHeight": "var(--jx-leading-md)",
+    "color": "var(--jx-fg)",
+    "outline": "none",
+    ":focus-visible": {
+      "outline": "var(--jx-focus-ring)",
+      "outlineOffset": "-2px"
+    }
+  },
+  "children": [
+    {
+      "tagName": "slot"
+    }
+  ]
+}