@smwb/ui-mcp-solid 0.13.0 → 1.0.0

package/component-meta/navigation/tabs/tab/tab.json

@@ -6,7 +6,7 @@
     "rendering": "universal"
   },
   "extends": [
-    "JSX.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>"
+    "Omit<JSX.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>, \"onClose\">"
   ],
   "inheritedAttributes": "Also accepts standard HTML attributes for the underlying element (see extends clause in TypeScript).",
   "styles": {
@@ -18,10 +18,11 @@
       "@smwb/ui-styles/less/components/tabs/tab/tab.entry.less"
     ],
     "dependencies": [
+      "@smwb/ui-styles/less/components/icon/icon.entry.less",
       "@smwb/ui-styles/less/components/ripple/ripple.entry.less",
       "@smwb/ui-styles/less/components/tabs/tabs.entry.less"
     ],
-    "importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/tabs/tab/tab.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/ripple/ripple.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/tabs/tabs.entry.less\";"
+    "importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/tabs/tab/tab.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/icon/icon.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/ripple/ripple.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/tabs/tabs.entry.less\";"
   },
   "props": {
     "label": {
@@ -34,6 +35,11 @@
       "required": false,
       "description": "Is Active. Optional. Type: boolean."
     },
+    "tabStop": {
+      "type": "boolean",
+      "required": false,
+      "description": "Whether the tab is the one in the page's Tab order (`tabindex` 0, the others -1). `Tabs` sets\nit: the focused tab while focus is in the row, the selected one otherwise. On its own a tab\nis the stop while `isActive`."
+    },
     "contentRef": {
       "type": "Ref<HTMLSpanElement>",
       "required": false,
@@ -42,7 +48,7 @@
     "icon": {
       "type": "JSX.Element",
       "required": false,
-      "description": "Icon node or image source."
+      "description": "A decorative status marker drawn left of the label (a running/done/failed icon). Its\nwrapper renders `aria-hidden=\"true\"`, so the tab's accessible name stays the label\nalone: the icon is not announced on top of it. To have the status read out, put it\nin the `label` itself."
     },
     "stacked": {
       "type": "boolean",
@@ -52,18 +58,38 @@
     "tag": {
       "type": "string",
       "required": false,
-      "description": "Tag. Optional. Type: string."
+      "description": "The element to render. A tab with an `href` is an `a` unless you say otherwise."
     },
     "href": {
       "type": "string",
       "required": false,
-      "description": "With `tag=\"a\"`: where the link goes, so the tab stays a real link."
+      "description": "Navigation mode: where the tab goes. The tab is then a real link (`<a href role=\"tab\">`, with\nno `target`: a tab never opens another window), so it opens in place and middle click, copy\nlink and the like work. A router takes over the plain click in `onClick` with\n`event.preventDefault()`; `Tabs` still calls `onChange` for it. A modified or non-primary click\n(Ctrl, Meta, Shift or Alt held, or a button other than the main one) is the browser's, as\n\"open in a new tab\": the router must let it through, and `Tabs` does not call `onChange`.\nThe one exception is a middle press on a `closable` tab: it closes the tab instead, as in an\neditor, and its default is prevented so nothing opens."
     },
     "disabled": {
       "type": "boolean",
       "required": false,
       "description": "Whether the control is disabled and non-interactive."
     },
+    "closable": {
+      "type": "boolean",
+      "required": false,
+      "description": "Draw a close button after the tab, and let Delete or Backspace on the focused tab close it too\n(Backspace because a Mac has no Delete key); the tab lists them in `aria-keyshortcuts`. A\nmiddle click on the tab closes it as well (`reason` \"middleClick\"): the browser's own\nmiddle-click action (autoscroll, opening a link tab in a new window) is suppressed, and the\nclick never selects. The tab does not close itself: `onClose` asks for it and the owner\nremoves the `Tab`. The button is a sibling of the tab, not inside its `role=\"tab\"`, so the\ntab's accessible name is its label alone.\nIt is out of the Tab order (`tabindex` -1), so the row keeps one tab stop, and a press on it takes\nno focus and never selects the tab. When the tab that has focus closes, `Tabs` moves focus to the\ntab that takes its place (the previous one if it was last), skipping disabled tabs. A disabled tab\nhas a disabled button.\n\nThe button stays in the accessibility tree, named by `closeLabel`: it is how a screen reader user\nwho cannot press Delete, as on a touch screen, closes the tab. It sits in the tab list beside its\ntab, though, and ARIA 1.2 lets a `tablist` own only `tab`s: a linter that applies that strictly\n(axe `aria-required-children`) can flag the button, and whatever `actions` holds.\n\nTo switch it off on a tab, pass `false` rather than leaving it out: a tab given `closable` or\n`actions` is wrapped in an item with them, a tab given neither is not, and moving between the two\nrecreates the tab and drops its focus."
+    },
+    "onClose": {
+      "type": "(event: Event, reason: TabCloseReason) => void",
+      "required": false,
+      "description": "Asks for the tab to close, and receives what asked for it: the close button's click (`reason`\n\"button\"), the key press of Delete or Backspace on the tab (`reason` \"key\", its default is\nprevented), the middle press on the tab (`reason` \"middleClick\", its default is prevented too),\nor the event passed to `close` by the tab's `actions` (`reason` \"actions\"). The owner removes\nthe `Tab`."
+    },
+    "closeLabel": {
+      "type": "string",
+      "required": false,
+      "description": "Accessible label of the close button. English by default; set it to localise, or to name the tab (\"Close Terminal 1\")."
+    },
+    "actions": {
+      "type": "JSX.Element | ((api: TabActionsApi) => JSX.Element)",
+      "required": false,
+      "description": "Content after the tab, before the close button: a trigger with a `Menu` (\"Rename\", \"Terminate\"),\nor any control. Give a function to get `{ close }` (see `TabActionsApi`); it is called once.\nLike the close button the content is a sibling of the tab, so it is not part of the tab's name;\nthe tab's own `ref`, `class` and handlers stay on the `role=\"tab\"` element. It stays in the\naccessibility tree as written, inside the tab list (see `closable`).\n\nThe row has one tab stop, so give the trigger `tabindex={-1}`. Shift+F10 or the Menu key on the\nfocused tab, which the tab lists in `aria-keyshortcuts`, focuses the first control in `actions`\nand clicks it, unless that control says `aria-expanded=\"true\"` (it is already open). If the\ncontrol names its popup in `aria-controls`, the first enabled `menuitem` in that element then\ntakes focus, as the WAI-ARIA menu button pattern asks: ArrowDown moves on, Enter chooses, and\nEscape hands focus back to the trigger. Without `aria-controls` focus stays on the trigger.\n\nThe row clips what overflows it: draw the menu in a `Portal`, anchored to the trigger and with\nthe `id` the trigger names. A choice that removes the tab (\"Terminate\") should call `close` with\nits event, so that `onClose` removes the tab and `Tabs` moves focus on to the neighbour; a tab\nremoved some other way leaves focus on the page."
+    },
     "ref": {
       "type": "Ref<HTMLButtonElement | HTMLAnchorElement>",
       "required": false,

package/component-meta/navigation/tabs/tabPanel/tabPanel.json

@@ -0,0 +1,42 @@
+{
+  "name": "TabPanel",
+  "description": "Content panel of one tab, linked to it by aria-labelledby; shown while the tab is selected. Goes in the panels of Tabs.",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal"
+  },
+  "extends": [
+    "JSX.HTMLAttributes<HTMLDivElement>"
+  ],
+  "inheritedAttributes": "Also accepts standard HTML attributes for the underlying element (see extends clause in TypeScript).",
+  "styles": {
+    "base": [
+      "@smwb/ui-styles/less/foundation.less",
+      "@smwb/ui-styles/less/theme.less"
+    ],
+    "entries": [
+      "@smwb/ui-styles/less/components/tabs/tabPanel/tabPanel.entry.less"
+    ],
+    "dependencies": [
+      "@smwb/ui-styles/less/components/tabs/tabs.entry.less"
+    ],
+    "importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/tabs/tabPanel/tabPanel.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/tabs/tabs.entry.less\";"
+  },
+  "props": {
+    "index": {
+      "type": "number",
+      "required": true,
+      "description": "The tab this panel belongs to: its index, counted as for the `value` of `Tabs`. The panel\nshows while that tab is selected and is hidden otherwise."
+    },
+    "class": {
+      "type": "string",
+      "required": false,
+      "description": "Extra class on the panel."
+    },
+    "children": {
+      "type": "JSX.Element",
+      "required": false,
+      "description": "The panel's content. It stays in the document while the panel is hidden."
+    }
+  }
+}

package/component-meta/navigation/tabs/tabs.json

@@ -1,6 +1,6 @@
 {
   "name": "Tabs",
-  "description": "Tab list container controlling associated panels.",
+  "description": "Tab list with arrow-key navigation (manual activation), optional TabPanels, link tabs for route navigation, drag-to-reorder, an overflow menu of the clipped tabs, and close/switch keyboard chords.",
   "ssr": {
     "safe": true,
     "rendering": "universal"
@@ -15,10 +15,12 @@
     ],
     "dependencies": [
       "@smwb/ui-styles/less/components/icon/icon.entry.less",
+      "@smwb/ui-styles/less/components/kbd/kbd.entry.less",
+      "@smwb/ui-styles/less/components/menu/menu.entry.less",
       "@smwb/ui-styles/less/components/ripple/ripple.entry.less",
       "@smwb/ui-styles/less/components/tabs/tab/tab.entry.less"
     ],
-    "importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/tabs/tabs.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/icon/icon.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/ripple/ripple.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/tabs/tab/tab.entry.less\";"
+    "importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/tabs/tabs.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/icon/icon.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/kbd/kbd.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/menu/menu.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/ripple/ripple.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/tabs/tab/tab.entry.less\";"
   },
   "props": {
     "value": {
@@ -29,7 +31,22 @@
     "onChange": {
       "type": "(event: MouseEvent & { currentTarget: HTMLElement; target: Element }, index: number) => void",
       "required": true,
-      "description": "Called with the index of the clicked tab, counted as for `value`."
+      "description": "Called with the index of the clicked tab, counted as for `value`. A tab chosen from the keyboard\n(Enter or Space on the focused tab) calls it with that click too. A modified or non-primary\nclick (Ctrl, Meta, Shift or Alt held, or a button other than the main one) on a link tab\n(`Tab` with `href`) is the browser's, as \"open in a new tab\": it does not call `onChange`."
+    },
+    "orientation": {
+      "type": "\"horizontal\" | \"vertical\"",
+      "required": false,
+      "description": "Which way the tabs run. It sets `aria-orientation` on the tab list and picks the arrow keys that\nmove between tabs: Left and Right when horizontal, Up and Down when vertical. The styles draw\na horizontal row; a vertical list is yours to lay out."
+    },
+    "panels": {
+      "type": "JSX.Element",
+      "required": false,
+      "description": "The content of the tabs: `TabPanel`s, rendered after the tab row. With them each tab gets\n`aria-controls` its panel and each panel `aria-labelledby` its tab. Without them the tabs link\nto nothing, as before. Give a panel to every tab: a tab whose panel is left out still names it.\nA `TabPanel` placed anywhere else is not linked to the tabs and is always shown."
+    },
+    "id": {
+      "type": "string",
+      "required": false,
+      "description": "Base of the ids that link tabs and panels: tab `n` is `{id}-tab-{n}`, its panel `{id}-panel-{n}`.\nIt is also the id of the root element. A generated one by default."
     },
     "indicatorContent": {
       "type": "boolean",
@@ -44,7 +61,22 @@
     "scrollButtons": {
       "type": "boolean",
       "required": false,
-      "description": "With `scrollable`: buttons at both ends that scroll the row while it overflows."
+      "description": "With `scrollable`: buttons at both ends that scroll the row while it overflows. They are for\nthe pointer and stay out of the Tab order: the arrow keys reach every tab and scroll it into\nview."
+    },
+    "onReorder": {
+      "type": "(from: number, to: number) => void",
+      "required": false,
+      "description": "Present ⇒ the row is reorderable by dragging a tab onto another (pointer-only; there is no\nkeyboard reorder). `Tabs` does not move the tabs itself: it reports the drag with\n`onReorder(from, to)` — indexes counted as for `value` — and the owner reorders its state.\nThe tabs keep their focus through a reorder; when the moved tab is the selected one,\n`onChange` reports its new index too, so a controlled owner keeps it selected. That `onChange`\ncarries the drop's own event standing in for the click's: the index argument is authoritative —\n`currentTarget` is the scroll area the drop delegates to, not the tab."
+    },
+    "overflowMenu": {
+      "type": "boolean",
+      "required": false,
+      "description": "With `scrollable`: when the row overflows, a trigger button is rendered beside the scroller\n(in the scroll buttons' spot) that opens a menu of the tabs the viewport clips — any clipped\npart beyond a 1px tolerance counts. Each entry shows the tab's icon and label, the selected one is marked\n`aria-current=\"true\"`, and choosing one calls `onChange` for it and scrolls it into view.\nThe trigger appears only after the browser has measured an overflow, so the server markup\nshows none."
+    },
+    "overflowMenuAriaLabel": {
+      "type": "string",
+      "required": false,
+      "description": "Accessible label of the overflow-menu trigger. English by default; set it to localise."
     },
     "dense": {
       "type": "boolean",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smwb/ui-mcp-solid",
-  "version": "0.13.0",
+  "version": "1.0.0",
   "description": "Model Context Protocol server exposing the @smwb/ui-solid (SolidJS) component catalog and customization guide.",
   "license": "MIT",
   "type": "module",
@@ -28,8 +28,8 @@
     "zod": "^4.4.3"
   },
   "devDependencies": {
-    "@smwb/ui-solid": "^0.13.0",
-    "@smwb/ui-styles": "^1.6.0",
+    "@smwb/ui-solid": "^1.0.0",
+    "@smwb/ui-styles": "^2.0.0",
     "glob": "^13.0.6",
     "typescript": "^6.0.3",
     "vitest": "^2.1.9"