@jxsuite/ui 0.0.0 → 0.2.0

package/components/jx-tab.json

@@ -0,0 +1,296 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "JxTab",
+  "tagName": "jx-tab",
+  "observedAttributes": ["value", "label", "selected", "panel", "closable", "dirty"],
+  "$elements": [
+    {
+      "$ref": "./jx-icon.json"
+    }
+  ],
+  "state": {
+    "value": {
+      "type": "string",
+      "default": "",
+      "attribute": "value",
+      "description": "What the tab stands for: the detail of the events it dispatches, and what the strip's selected is compared against."
+    },
+    "label": {
+      "type": "string",
+      "default": "",
+      "attribute": "label",
+      "description": "The words on the tab, and its accessible name — written to aria-label as well as drawn, because a tab naming itself from its content would swallow the close button's own name and announce the label twice. That is also what makes the slots safe: aria-label wins over name-from-content, so nothing a consumer slots in — a marker, a pill, a pin — ever joins the tab's name, and each slotted control keeps announcing its own. The corollary is that label is REQUIRED once anything is slotted: with none there is no aria-label, name-from-content comes back, and a tab whose only content is a pin button is announced \"Pin\". Write it as an ATTRIBUTE: the runtime does not reflect a property write back to an attribute, so a host that sets el.label breaks every getAttribute(\"label\") selector aimed at the strip while looking correct. A count belongs in this string, not in a badge of its own."
+    },
+    "selected": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "selected",
+      "description": "Whether this is the current tab. The strip writes it — jx-tabs is the single writer of every child's selected — so a host moves the selection by writing the strip's selected, never a tab's."
+    },
+    "panel": {
+      "type": "string",
+      "default": "",
+      "attribute": "panel",
+      "description": "The id of the jx-tab-panel this tab controls, announced as aria-controls. Nothing checks the pairing: both ids live in the consumer's document, so mint the tab's id and this one from one key."
+    },
+    "closable": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "closable",
+      "description": "Draws a close button on the tab, which dispatches close with this tab's value. It is a real button: Enter and Space on it close, Delete on the focused tab is the same path, and its target is 24px square though it draws 16. It carries its own name, and the tab carries its own, so neither is heard twice."
+    },
+    "dirty": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "dirty",
+      "description": "Marks the tab as holding unsaved work. Purely visual, and hidden from assistive technology: a reader is told about unsaved work by the page, not by a dot."
+    },
+    "onClick": {
+      "$prototype": "Function",
+      "body": [
+        {
+          "dispatchEvent": "select",
+          "detail": {
+            "$ref": "#/state/value"
+          },
+          "bubbles": true
+        }
+      ],
+      "emits": [
+        {
+          "name": "select",
+          "description": "The tab was activated; detail is its value. The strip listens for it and answers with change."
+        }
+      ],
+      "description": "Activation dispatches select, which the tablist turns into its own selection and one change. A click that started on the close button never reaches here."
+    },
+    "onClose": {
+      "$prototype": "Function",
+      "body": [
+        {
+          "stopPropagation": true
+        },
+        {
+          "dispatchEvent": "close",
+          "detail": {
+            "$ref": "#/state/value"
+          },
+          "bubbles": true
+        }
+      ],
+      "emits": [
+        {
+          "name": "close",
+          "description": "The tab was asked to close; detail is its value. Closing is the host's to do."
+        }
+      ],
+      "description": "The click stops at the close button, so closing a tab does not also select it."
+    },
+    "onActions": {
+      "$prototype": "Function",
+      "body": [
+        {
+          "stopPropagation": true
+        }
+      ],
+      "description": "A click inside the actions slot stops there, so activating a control a consumer put on the tab never ALSO selects the tab — the same judgement onClose makes for the close button, which is the one such control the element ships itself. It stops at the CONTAINER rather than at the host: stopPropagation halts an event at the node it is called on and every node after it, never the other listeners on that node or the ones already run below it, so the slotted control's own handler has fired (it is the target) and only the tab's onclick is cut off. Nothing is stopped for icon or status: those hold marks rather than controls, and a click on a mark is a click on the tab."
+    }
+  },
+  "attributes": {
+    "role": "tab",
+    "tabindex": "-1",
+    "aria-label": "${state.label || null}",
+    "aria-selected": "${state.selected ? 'true' : 'false'}",
+    "aria-controls": "${state.panel || null}"
+  },
+  "onclick": {
+    "$ref": "#/state/onClick"
+  },
+  "style": {
+    "display": "inline-flex",
+    "&[hidden]": {
+      "display": "none"
+    },
+    "alignItems": "center",
+    "gap": "var(--jx-space-2)",
+    "boxSizing": "border-box",
+    "minHeight": "var(--jx-control-h)",
+    "maxWidth": "220px",
+    "padding": "var(--jx-space-1) var(--jx-space-3)",
+    "marginBlockEnd": "-1px",
+    "borderBlockEnd": "2px solid transparent",
+    "color": "inherit",
+    "cursor": "default",
+    "userSelect": "none",
+    "whiteSpace": "nowrap",
+    "outline": "none",
+    ":hover": {
+      "background": "var(--jx-hover-bg)",
+      "color": "var(--jx-fg)"
+    },
+    ":focus-visible": {
+      "outline": "var(--jx-focus-ring)",
+      "outlineOffset": "-2px"
+    },
+    "&[aria-selected=\"true\"]": {
+      "color": "var(--jx-fg)",
+      "borderBlockEndColor": "var(--jx-accent-solid)"
+    },
+    "& > [part=\"label\"]": {
+      "overflow": "hidden",
+      "textOverflow": "ellipsis",
+      "whiteSpace": "nowrap"
+    },
+    "& [part=\"icon\"], & [part=\"status\"], & [part=\"actions\"]": {
+      "$description": "The three consumer zones, and they generate no box of their own. display: contents is what makes an EMPTY one cost nothing: as ordinary flex items three unused containers would each take the tab's gap, which is dead space on every tab that slotted nothing — the same measurement (8px of trailing gap, the label visibly off-centre) that gave [part=\"dirty-slot\"] its own contents. It is also what puts slotted content in the TAB's flex row rather than one box deeper, so a marker, a pill and a pin line up with the label, the dot and the close button on one gap rather than on two.",
+      "display": "contents"
+    },
+    "& [part=\"dirty-slot\"], & [part=\"close-slot\"]": {
+      "display": "contents"
+    },
+    "& [part=\"dirty\"]": {
+      "display": "inline-block",
+      "width": "6px",
+      "height": "6px",
+      "borderRadius": "50%",
+      "background": "var(--jx-accent-solid)"
+    },
+    "& [part=\"close\"]": {
+      "appearance": "none",
+      "font": "inherit",
+      "display": "inline-flex",
+      "alignItems": "center",
+      "justifyContent": "center",
+      "position": "relative",
+      "width": "16px",
+      "height": "16px",
+      "padding": "0",
+      "border": "0",
+      "borderRadius": "var(--jx-radius-xs)",
+      "background": "transparent",
+      "color": "var(--jx-fg-muted)",
+      "cursor": "pointer",
+      "::before": {
+        "content": "\"\"",
+        "position": "absolute",
+        "insetBlock": "-4px",
+        "insetInline": "-4px"
+      },
+      ":hover": {
+        "background": "var(--jx-hover-bg)",
+        "color": "var(--jx-fg)"
+      },
+      ":focus-visible": {
+        "outline": "var(--jx-focus-ring)",
+        "outlineOffset": "1px"
+      }
+    }
+  },
+  "children": [
+    {
+      "tagName": "span",
+      "attributes": {
+        "part": "icon"
+      },
+      "children": [
+        {
+          "tagName": "slot",
+          "attributes": {
+            "name": "icon"
+          }
+        }
+      ]
+    },
+    {
+      "tagName": "span",
+      "attributes": {
+        "part": "label"
+      },
+      "textContent": "${state.label}"
+    },
+    {
+      "tagName": "span",
+      "attributes": {
+        "part": "status"
+      },
+      "children": [
+        {
+          "tagName": "slot",
+          "attributes": {
+            "name": "status"
+          }
+        }
+      ]
+    },
+    {
+      "tagName": "span",
+      "attributes": {
+        "part": "actions"
+      },
+      "onclick": {
+        "$ref": "#/state/onActions"
+      },
+      "children": [
+        {
+          "tagName": "slot",
+          "attributes": {
+            "name": "actions"
+          }
+        }
+      ]
+    },
+    {
+      "tagName": "span",
+      "attributes": {
+        "part": "dirty-slot"
+      },
+      "$switch": {
+        "$ref": "#/state/dirty"
+      },
+      "cases": {
+        "true": {
+          "tagName": "span",
+          "attributes": {
+            "part": "dirty",
+            "aria-hidden": "true"
+          }
+        }
+      }
+    },
+    {
+      "tagName": "span",
+      "attributes": {
+        "part": "close-slot"
+      },
+      "$switch": {
+        "$ref": "#/state/closable"
+      },
+      "cases": {
+        "true": {
+          "tagName": "button",
+          "attributes": {
+            "part": "close",
+            "type": "button",
+            "aria-label": "Close ${state.label}",
+            "tabindex": "${state.selected ? '0' : '-1'}"
+          },
+          "onclick": {
+            "$ref": "#/state/onClose"
+          },
+          "children": [
+            {
+              "tagName": "jx-icon",
+              "$props": {
+                "name": "x",
+                "weight": "bold"
+              },
+              "attributes": {
+                "part": "close-icon"
+              }
+            }
+          ]
+        }
+      }
+    }
+  ]
+}

package/components/jx-tabs.json

@@ -0,0 +1,124 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "JxTabs",
+  "tagName": "jx-tabs",
+  "observedAttributes": ["selected", "label", "activation", "orientation"],
+  "state": {
+    "selected": {
+      "type": "string",
+      "default": "",
+      "attribute": "selected",
+      "description": "The value of the tab whose panel is showing. The strip is the one writer of its children's selected state, so a host owns this and nothing else."
+    },
+    "label": {
+      "type": "string",
+      "default": "Tabs",
+      "attribute": "label",
+      "description": "The accessible name of the strip. A tablist is named by nothing else — it takes no name from its tabs — and no lint can say so, because a bound role switches the naming rules off. Name every strip."
+    },
+    "activation": {
+      "type": "string",
+      "default": "auto",
+      "attribute": "activation",
+      "description": "auto selects a tab as the caret lands on it; manual moves the caret alone and waits for Enter or Space. auto is right for a strip whose panels are already built, manual for one whose panels cost something to show."
+    },
+    "orientation": {
+      "type": "string",
+      "default": "horizontal",
+      "attribute": "orientation",
+      "description": "horizontal or vertical. It chooses which arrow keys move the caret, and which edge carries both the strip's rule and the selected tab's mark on it — a tab cannot see the strip's orientation from its own sheet, so the strip draws that mark."
+    },
+    "applySelection": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/tabs.ts",
+      "$export": "applySelection",
+      "parameters": ["scope"],
+      "description": "Writes the selection onto the tabs and returns it. Idempotent: it runs inside a render effect."
+    },
+    "sync": "${state.applySelection(state)}",
+    "onKeydown": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/tabs.ts",
+      "$export": "onTabsKeydown",
+      "description": "The tab keyboard contract: the arrows of the strip's orientation move the caret with wrap, Home and End go to the ends, Enter and Space activate under manual activation, and Delete closes a closable tab."
+    },
+    "onSelect": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/tabs.ts",
+      "$export": "onTabsSelect",
+      "description": "A tab was activated: selected is written first, then change is dispatched, so a listener reading e.target.selected sees the new value.",
+      "emits": [
+        {
+          "name": "change",
+          "description": "The selection moved; detail is the newly selected tab's value."
+        }
+      ]
+    },
+    "onReady": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/tabs.ts",
+      "$export": "onTabsMount",
+      "description": "Gives the strip its first sight of itself and syncs the tabs. Not optional: applyAttributes runs before distributeSlots, so no tab exists when the root's bindings first evaluate."
+    },
+    "onMount": {
+      "$prototype": "Function",
+      "body": [
+        {
+          "dispatchEvent": "jx-ready",
+          "bubbles": true
+        }
+      ],
+      "description": "Announces that the strip has rendered and taken its slotted tabs, which is how onReady reaches the element itself."
+    }
+  },
+  "attributes": {
+    "role": "tablist",
+    "aria-label": "${state.label}",
+    "aria-orientation": "${state.orientation}",
+    "tabindex": "-1",
+    "data-selection": "${state.sync}"
+  },
+  "onkeydown": {
+    "$ref": "#/state/onKeydown"
+  },
+  "onselect": {
+    "$ref": "#/state/onSelect"
+  },
+  "onjx-ready": {
+    "$ref": "#/state/onReady"
+  },
+  "style": {
+    "display": "flex",
+    "&[hidden]": {
+      "display": "none"
+    },
+    "boxSizing": "border-box",
+    "alignItems": "stretch",
+    "gap": "var(--jx-space-1)",
+    "fontFamily": "var(--jx-font-sans)",
+    "fontSize": "var(--jx-text-md)",
+    "lineHeight": "var(--jx-leading-md)",
+    "color": "var(--jx-fg-dim)",
+    "borderBlockEnd": "1px solid var(--jx-border)",
+    "outline": "none",
+    "&[aria-orientation=\"vertical\"]": {
+      "flexDirection": "column",
+      "borderBlockEnd": "0",
+      "borderInlineEnd": "1px solid var(--jx-border)",
+      "& > jx-tab": {
+        "marginBlockEnd": "0",
+        "marginInlineEnd": "-1px",
+        "borderBlockEnd": "0",
+        "borderInlineEnd": "2px solid transparent"
+      },
+      "& > jx-tab[aria-selected=\"true\"]": {
+        "borderInlineEndColor": "var(--jx-accent-solid)"
+      }
+    }
+  },
+  "children": [
+    {
+      "tagName": "slot"
+    }
+  ]
+}