@jxsuite/ui 0.0.0 → 0.2.0

package/stylebook/jx-tab-panel.json

@@ -0,0 +1,147 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "StylebookTabPanel",
+  "tagName": "main",
+  "$elements": [
+    {
+      "$ref": "../components/jx-icon.json"
+    },
+    {
+      "$ref": "../components/jx-tab.json"
+    },
+    {
+      "$ref": "../components/jx-tab-panel.json"
+    },
+    {
+      "$ref": "../components/jx-tabs.json"
+    }
+  ],
+  "state": {
+    "current": "design",
+    "onChange": {
+      "$prototype": "Function",
+      "body": [
+        {
+          "operator": "=",
+          "target": {
+            "$ref": "#/state/current"
+          },
+          "value": {
+            "$ref": "event#/detail"
+          }
+        }
+      ]
+    }
+  },
+  "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)",
+      "maxWidth": "60ch"
+    },
+    "& jx-tab-panel": {
+      "border": "1px solid var(--jx-border)",
+      "borderRadius": "var(--jx-radius-sm)"
+    }
+  },
+  "children": [
+    {
+      "tagName": "h1",
+      "textContent": "jx-tab-panel"
+    },
+    {
+      "tagName": "p",
+      "textContent": "A panel is hidden rather than removed, so the ids its tab names stay resolvable and a find-in-page never lands in a panel nobody can see. It takes one tab stop when it is showing, which is the price of a panel whose whole content may be static text."
+    },
+    {
+      "tagName": "h2",
+      "textContent": "Paired with its tab"
+    },
+    {
+      "tagName": "p",
+      "textContent": "Each panel's aria-labelledby names the tab that controls it, and that tab's aria-controls names the panel's id. Nothing in the kit or the lints checks that pairing, so both ids are minted here from one key, the section's own, which is the only thing that keeps them true. Showing: ${state.current}"
+    },
+    {
+      "tagName": "jx-tabs",
+      "attributes": {
+        "label": "Panel demonstration",
+        "selected": "${state.current}"
+      },
+      "onchange": {
+        "$ref": "#/state/onChange"
+      },
+      "children": [
+        {
+          "tagName": "jx-tab",
+          "attributes": {
+            "id": "stylebook-tab-design",
+            "value": "design",
+            "label": "Design",
+            "panel": "stylebook-panel-design"
+          }
+        },
+        {
+          "tagName": "jx-tab",
+          "attributes": {
+            "id": "stylebook-tab-content",
+            "value": "content",
+            "label": "Content",
+            "panel": "stylebook-panel-content"
+          }
+        }
+      ]
+    },
+    {
+      "tagName": "jx-tab-panel",
+      "attributes": {
+        "id": "stylebook-panel-design",
+        "labelledby": "stylebook-tab-design",
+        "active": "${state.current === 'design'}"
+      },
+      "children": [
+        {
+          "tagName": "p",
+          "textContent": "Size, spacing and colour for the selected node."
+        }
+      ]
+    },
+    {
+      "tagName": "jx-tab-panel",
+      "attributes": {
+        "id": "stylebook-panel-content",
+        "labelledby": "stylebook-tab-content",
+        "active": "${state.current === 'content'}"
+      },
+      "children": [
+        {
+          "tagName": "p",
+          "textContent": "The text and media this node renders."
+        }
+      ]
+    },
+    {
+      "tagName": "h2",
+      "textContent": "Hidden, not gone"
+    },
+    {
+      "tagName": "p",
+      "textContent": "Whichever panel above is not showing is still in the document, carrying hidden. That is what keeps the tab pointing at it honest, and it is why the panel declares what hidden means to it: an element that sets its own display must also unset it."
+    }
+  ]
+}

package/stylebook/jx-tab.json

@@ -0,0 +1,201 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "StylebookTab",
+  "tagName": "main",
+  "$elements": [
+    { "$ref": "../components/jx-action-button.json" },
+    { "$ref": "../components/jx-icon.json" },
+    { "$ref": "../components/jx-tab.json" },
+    { "$ref": "../components/jx-tabs.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)",
+      "maxWidth": "60ch"
+    },
+    "& [slot=\"status\"]": {
+      "borderRadius": "999px",
+      "padding": "0 var(--jx-space-2)",
+      "border": "1px solid var(--jx-border)",
+      "fontSize": "var(--jx-text-xs)",
+      "lineHeight": "var(--jx-leading-xs)",
+      "color": "var(--jx-fg-dim)"
+    },
+    "& [slot=\"icon\"]": {
+      "color": "var(--jx-fg-muted)",
+      "lineHeight": "1"
+    }
+  },
+  "children": [
+    { "tagName": "h1", "textContent": "jx-tab" },
+    {
+      "tagName": "p",
+      "textContent": "A tab is a string with a role, and three places a consumer may decorate it. Write label as an ATTRIBUTE — a property write does not reflect, and selectors read the attribute — and write it whenever anything is slotted: the label is the tab's accessible name, so slotted content never joins it, and a tab with no label falls back to naming itself from whatever was put inside."
+    },
+    { "tagName": "h2", "textContent": "States" },
+    {
+      "tagName": "p",
+      "textContent": "Selected, plain, dirty, closable, and a label longer than the tab is wide."
+    },
+    {
+      "tagName": "jx-tabs",
+      "attributes": { "label": "Tab states", "selected": "one" },
+      "children": [
+        { "tagName": "jx-tab", "attributes": { "value": "one", "label": "Selected" } },
+        { "tagName": "jx-tab", "attributes": { "value": "two", "label": "Plain" } },
+        {
+          "tagName": "jx-tab",
+          "attributes": { "value": "three", "label": "Unsaved", "dirty": "" }
+        },
+        {
+          "tagName": "jx-tab",
+          "attributes": { "value": "four", "label": "Closable", "closable": "" }
+        },
+        {
+          "tagName": "jx-tab",
+          "attributes": {
+            "value": "five",
+            "label": "A label far longer than the tab it sits in",
+            "closable": "",
+            "dirty": ""
+          }
+        }
+      ]
+    },
+    { "tagName": "h2", "textContent": "The three slots" },
+    {
+      "tagName": "p",
+      "textContent": "icon draws before the label, status and actions after it, and both land before the tab's own dirty dot and close button — so a consumer decorates a tab without re-implementing the tablist. There is deliberately no default slot: the tab's words are the label attribute, and unnamed content has nowhere to go."
+    },
+    {
+      "tagName": "p",
+      "textContent": "status is for a mark ABOUT the document (a draft pill, a count, a sync state) and actions is for a control (a pin, a lock). The difference is the click: a click on a mark is a click on the tab and selects it, and a click inside actions stops there, exactly as the close button's does."
+    },
+    {
+      "tagName": "jx-tabs",
+      "attributes": { "label": "Slots", "selected": "post" },
+      "children": [
+        {
+          "tagName": "jx-tab",
+          "attributes": { "value": "post", "label": "hello.md", "closable": "", "dirty": "" },
+          "children": [
+            {
+              "tagName": "span",
+              "attributes": { "slot": "icon", "aria-hidden": "true" },
+              "textContent": "↳"
+            },
+            { "tagName": "span", "attributes": { "slot": "status" }, "textContent": "Draft" },
+            {
+              "tagName": "jx-action-button",
+              "attributes": { "slot": "actions" },
+              "$props": {
+                "icon": "eye",
+                "size": "sm",
+                "label": "Preview hello.md",
+                "hint": "Preview",
+                "tabindex": "0"
+              }
+            }
+          ]
+        },
+        {
+          "tagName": "jx-tab",
+          "attributes": { "value": "about", "label": "about.md", "closable": "" },
+          "children": [
+            {
+              "tagName": "jx-icon",
+              "attributes": { "slot": "icon", "aria-hidden": "true" },
+              "$props": { "name": "file-text" }
+            },
+            { "tagName": "span", "attributes": { "slot": "status" }, "textContent": "Published" }
+          ]
+        },
+        {
+          "tagName": "jx-tab",
+          "attributes": { "value": "styles", "label": "main.css", "closable": "" }
+        }
+      ]
+    },
+    { "tagName": "h2", "textContent": "A control inside a tab" },
+    {
+      "tagName": "p",
+      "textContent": "A control in actions is in the tab order only while its tab is the current one — bind its tabindex the way the close button's is bound, or a strip of ten tabs becomes ten stops. jx-action-button takes tabindex as a property for exactly this. Enter and Space on it belong to the control; the arrows still move the strip's caret from wherever focus is."
+    },
+    {
+      "tagName": "jx-tabs",
+      "attributes": { "label": "Roving caret", "selected": "current" },
+      "children": [
+        {
+          "tagName": "jx-tab",
+          "attributes": { "value": "current", "label": "Current", "closable": "" },
+          "children": [
+            {
+              "tagName": "jx-action-button",
+              "attributes": { "slot": "actions" },
+              "$props": {
+                "icon": "eye",
+                "size": "sm",
+                "label": "Preview Current",
+                "hint": "Preview",
+                "tabindex": "0"
+              }
+            }
+          ]
+        },
+        {
+          "tagName": "jx-tab",
+          "attributes": { "value": "other", "label": "Other", "closable": "" },
+          "children": [
+            {
+              "tagName": "jx-action-button",
+              "attributes": { "slot": "actions" },
+              "$props": {
+                "icon": "eye",
+                "size": "sm",
+                "label": "Preview Other",
+                "hint": "Preview",
+                "tabindex": "-1"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    { "tagName": "h2", "textContent": "The close affordance" },
+    {
+      "tagName": "p",
+      "textContent": "It is a plain button with a jx-icon inside, never a nested kit button: a defined element that ships its own default slot would capture the host's slot distribution. The click stops at the button, so closing never also selects."
+    },
+    {
+      "tagName": "jx-tabs",
+      "attributes": { "label": "Open documents", "selected": "index" },
+      "children": [
+        {
+          "tagName": "jx-tab",
+          "attributes": { "value": "index", "label": "index.page.json", "closable": "" }
+        },
+        {
+          "tagName": "jx-tab",
+          "attributes": { "value": "about", "label": "about.page.json", "closable": "" }
+        }
+      ]
+    }
+  ]
+}

package/stylebook/jx-tabs.json

@@ -0,0 +1,278 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "StylebookTabs",
+  "tagName": "main",
+  "$elements": [
+    {
+      "$ref": "../components/jx-icon.json"
+    },
+    {
+      "$ref": "../components/jx-tab.json"
+    },
+    {
+      "$ref": "../components/jx-tab-panel.json"
+    },
+    {
+      "$ref": "../components/jx-tabs.json"
+    }
+  ],
+  "state": {
+    "sections": [
+      {
+        "id": "design",
+        "title": "Design",
+        "body": "Size, spacing and colour for the selected node."
+      },
+      {
+        "id": "content",
+        "title": "Content",
+        "body": "The text and media this node renders."
+      },
+      {
+        "id": "logic",
+        "title": "Logic",
+        "body": "Bindings, conditions and the handlers they run."
+      }
+    ],
+    "current": "design",
+    "manual": "content",
+    "onChange": {
+      "$prototype": "Function",
+      "body": [
+        {
+          "operator": "=",
+          "target": {
+            "$ref": "#/state/current"
+          },
+          "value": {
+            "$ref": "event#/detail"
+          }
+        }
+      ]
+    },
+    "onManual": {
+      "$prototype": "Function",
+      "body": [
+        {
+          "operator": "=",
+          "target": {
+            "$ref": "#/state/manual"
+          },
+          "value": {
+            "$ref": "event#/detail"
+          }
+        }
+      ]
+    }
+  },
+  "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)",
+      "maxWidth": "60ch"
+    }
+  },
+  "children": [
+    {
+      "tagName": "h1",
+      "textContent": "jx-tabs"
+    },
+    {
+      "tagName": "p",
+      "textContent": "The strip IS the tablist: the host carries role=\"tablist\" and its tabs are its own children, with nothing generic between them. A tab and the panel it controls are paired by two ids the consumer mints from one key, which is what this page does."
+    },
+    {
+      "tagName": "h2",
+      "textContent": "Automatic activation"
+    },
+    {
+      "tagName": "p",
+      "textContent": "Arrow keys move the caret and select as they land. Selected: ${state.current}"
+    },
+    {
+      "tagName": "jx-tabs",
+      "attributes": {
+        "label": "Inspector sections",
+        "activation": "auto",
+        "selected": "${state.current}"
+      },
+      "onchange": {
+        "$ref": "#/state/onChange"
+      },
+      "children": [
+        {
+          "$prototype": "Array",
+          "items": {
+            "$ref": "#/state/sections"
+          },
+          "key": {
+            "$ref": "$map/item/id"
+          },
+          "map": {
+            "tagName": "jx-tab",
+            "attributes": {
+              "id": "tab-${$map.item.id}",
+              "value": "${$map.item.id}",
+              "label": "${$map.item.title}",
+              "panel": "panel-${$map.item.id}"
+            }
+          }
+        }
+      ]
+    },
+    {
+      "$prototype": "Array",
+      "items": {
+        "$ref": "#/state/sections"
+      },
+      "key": {
+        "$ref": "$map/item/id"
+      },
+      "map": {
+        "tagName": "jx-tab-panel",
+        "attributes": {
+          "id": "panel-${$map.item.id}",
+          "labelledby": "tab-${$map.item.id}",
+          "active": "${$map.item.id === state.current}"
+        },
+        "children": [
+          {
+            "tagName": "p",
+            "textContent": "${$map.item.body}"
+          }
+        ]
+      }
+    },
+    {
+      "tagName": "h2",
+      "textContent": "Manual activation"
+    },
+    {
+      "tagName": "p",
+      "textContent": "The caret moves alone; Enter or Space commits. Selected: ${state.manual}"
+    },
+    {
+      "tagName": "jx-tabs",
+      "attributes": {
+        "label": "Dock panes",
+        "activation": "manual",
+        "selected": "${state.manual}"
+      },
+      "onchange": {
+        "$ref": "#/state/onManual"
+      },
+      "children": [
+        {
+          "$prototype": "Array",
+          "items": {
+            "$ref": "#/state/sections"
+          },
+          "key": {
+            "$ref": "$map/item/id"
+          },
+          "map": {
+            "tagName": "jx-tab",
+            "attributes": {
+              "value": "${$map.item.id}",
+              "label": "${$map.item.title}"
+            }
+          }
+        }
+      ]
+    },
+    {
+      "tagName": "h2",
+      "textContent": "Vertical"
+    },
+    {
+      "tagName": "p",
+      "textContent": "Up and Down move the caret, and the rule moves to the inline edge."
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "display": "flex",
+        "alignItems": "flex-start",
+        "gap": "var(--jx-space-5)"
+      },
+      "children": [
+        {
+          "tagName": "jx-tabs",
+          "attributes": {
+            "label": "Settings groups",
+            "orientation": "vertical",
+            "selected": "design"
+          },
+          "children": [
+            {
+              "$prototype": "Array",
+              "items": {
+                "$ref": "#/state/sections"
+              },
+              "key": {
+                "$ref": "$map/item/id"
+              },
+              "map": {
+                "tagName": "jx-tab",
+                "attributes": {
+                  "value": "${$map.item.id}",
+                  "label": "${$map.item.title}"
+                }
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "tagName": "h2",
+      "textContent": "Closable and dirty"
+    },
+    {
+      "tagName": "p",
+      "textContent": "A closable tab draws a close button that dispatches close with the tab's value; Delete on the focused tab is the same path. The dot marks unsaved work and is hidden from assistive technology."
+    },
+    {
+      "tagName": "jx-tabs",
+      "attributes": {
+        "label": "Open documents",
+        "selected": "index"
+      },
+      "children": [
+        {
+          "tagName": "jx-tab",
+          "attributes": {
+            "value": "index",
+            "label": "index.page.json",
+            "closable": "",
+            "dirty": ""
+          }
+        },
+        {
+          "tagName": "jx-tab",
+          "attributes": {
+            "value": "about",
+            "label": "about.page.json",
+            "closable": ""
+          }
+        }
+      ]
+    }
+  ]
+}