@smwb/ui-solid 0.13.0 → 1.0.0

package/dist/components/navigation/tabs/tab/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sources":["../../../../../src/components/navigation/tabs/tab/tab.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../../base/ripple\";\nimport { useTabsContext } from \"../tabsContext\";\nimport { mergeRefs, type Ref } from \"../../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../../primitives/callHandler\";\n\nexport interface TabProps extends JSX.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  label?: JSX.Element;\n  isActive?: boolean;\n  contentRef?: Ref<HTMLSpanElement>;\n  icon?: JSX.Element;\n  stacked?: boolean;\n  tag?: string;\n  /** With `tag=\"a\"`: where the link goes, so the tab stays a real link. */\n  href?: string;\n  disabled?: boolean;\n  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\nexport function Tab(props: ParentProps<TabProps>): JSX.Element {\n  const ctx = useTabsContext();\n  const [root, setRoot] = createSignal<HTMLButtonElement | HTMLAnchorElement>();\n  // The tab's position in the tab list: it follows the tab when tabs around it\n  // are added, removed or reordered.\n  const index = ctx ? ctx.registerTab(root) : () => -1;\n  const merged = mergeProps({ isActive: false, stacked: false }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"label\",\n    \"isActive\",\n    \"contentRef\",\n    \"icon\",\n    \"stacked\",\n    \"tag\",\n    \"disabled\",\n    \"onClick\",\n    \"ref\",\n    // The tab sets this on its root too; its own handler calls the caller's first.\n    \"onPointerDown\",\n  ]);\n\n  // Read the icon and the label once: markup passed as a prop is created anew on\n  // every read, and during hydration the copy made for the <Show> test has no\n  // server DOM node to adopt (\"Unable to find DOM nodes for hydration key\").\n  const icon = children(() => local.icon);\n  const label = children(() => local.label);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const active = (): boolean => (ctx ? ctx.value() === index() : local.isActive);\n\n  const onClick: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, MouseEvent> = (event) => {\n    // Inside Tabs too the caller's onClick runs first, then the tab list picks the tab.\n    callHandler(local.onClick, event);\n    ctx?.onChange(event, index());\n  };\n\n  const onPointerDown: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, PointerEvent> = (event) => {\n    callHandler(local.onPointerDown, event);\n    rippleActions?.onRipple(event);\n  };\n\n  const tag = (): string => local.tag ?? \"button\";\n\n  return (\n    <Dynamic\n      component={tag()}\n      {...rest}\n      ref={mergeRefs(local.ref, setRoot)}\n      class={cn(\"smwb-tab\", local.class, {\n        \"smwb-tab--active\": active(),\n        \"smwb-tab--stacked\": local.stacked,\n        \"smwb-tab--disabled\": local.disabled,\n      })}\n      onClick={onClick}\n      onPointerDown={onPointerDown}\n      // The role, the selection and the roving tabindex belong to the tab list:\n      // they win over the caller's. A tab that is not disabled keeps the\n      // caller's aria-disabled.\n      role=\"tab\"\n      aria-selected={active()}\n      aria-disabled={local.disabled || undefined}\n      tabindex={active() ? 0 : -1}\n      disabled={tag() === \"button\" ? local.disabled : undefined}\n    >\n      <span class=\"smwb-tab__content\" ref={mergeRefs(local.contentRef)}>\n        <Show when={icon()}>\n          <span class=\"smwb-tab__icon\">{icon()}</span>\n        </Show>\n        <Show when={label()}>\n          <span class=\"smwb-tab__text-label\">{label()}</span>\n        </Show>\n      </span>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} classes={{ child: \"tab__ripple-child\" }} />\n    </Dynamic>\n  );\n}\n\nexport default Tab;\n"],"names":["Tab","props","ctx","useTabsContext","root","setRoot","createSignal","index","registerTab","merged","mergeProps","isActive","stacked","local","rest","splitProps","icon","children","label","rippleActions","active","value","onClick","event","callHandler","onChange","onPointerDown","onRipple","tag","_$createComponent","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","class","disabled","role","undefined","tabindex","_$memo","_el$","_tmpl$3","_ref$2","contentRef","_$use","_$insert","Show","when","_el$2","_tmpl$","_el$3","_tmpl$2","Ripple","actionRef","actions","classes","child"],"mappings":";;;;;;;;;;AAuBO,SAASA,EAAIC,GAA2C;AAC7D,QAAMC,IAAMC,EAAAA,GACN,CAACC,GAAMC,CAAO,IAAIC,EAAAA,GAGlBC,IAAQL,IAAMA,EAAIM,YAAYJ,CAAI,IAAI,MAAM,IAC5CK,IAASC,EAAW;AAAA,IAAEC,UAAU;AAAA,IAAOC,SAAS;AAAA,EAAA,GAASX,CAAK,GAC9D,CAACY,GAAOC,CAAI,IAAIC,EAAWN,GAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,EAAA,CACD,GAKKO,IAAOC,EAAS,MAAMJ,EAAMG,IAAI,GAChCE,IAAQD,EAAS,MAAMJ,EAAMK,KAAK;AAExC,MAAIC;AAEJ,QAAMC,IAASA,MAAgBlB,IAAMA,EAAImB,YAAYd,EAAAA,IAAUM,EAAMF,UAE/DW,IAAgFC,CAAAA,MAAU;AAE9FC,IAAAA,EAAYX,EAAMS,SAASC,CAAK,GAChCrB,GAAKuB,SAASF,GAAOhB,GAAO;AAAA,EAC9B,GAEMmB,IAAwFH,CAAAA,MAAU;AACtGC,IAAAA,EAAYX,EAAMa,eAAeH,CAAK,GACtCJ,GAAeQ,SAASJ,CAAK;AAAA,EAC/B,GAEMK,IAAMA,MAAcf,EAAMe,OAAO;AAEvC,SAAAC,EACGC,GAAOC,EAAA;AAAA,IAAA,IACNC,YAAS;AAAA,aAAEJ,EAAAA;AAAAA,IAAK;AAAA,EAAA,GACZd,GAAI;AAAA,IAAAmB,IAAAC,GAAA;AAAA,UAAAC,IACHC,EAAUvB,EAAMoB,KAAK5B,CAAO;AAAC,aAAA8B,KAAA,cAAAA,EAAAD,CAAA;AAAA,IAAA;AAAA,IAAA,IAAA,QAAA;AAAA,aAC3BG,EAAG,YAAYxB,EAAMyB,OAAO;AAAA,QACjC,oBAAoBlB,EAAAA;AAAAA,QACpB,qBAAqBP,EAAMD;AAAAA,QAC3B,sBAAsBC,EAAM0B;AAAAA,MAAAA,CAC7B;AAAA,IAAC;AAAA,IACFjB,SAAAA;AAAAA,IACAI,eAAAA;AAAAA,IAIAc,MAAI;AAAA,IAAA,IAAA,kBAAA;AAAA,aACWpB,EAAAA;AAAAA,IAAQ;AAAA,IAAA,IAAA,kBAAA;AAAA,aACRP,EAAM0B,YAAYE;AAAAA,IAAS;AAAA,IAAA,IAC1CC,WAAQ;AAAA,aAAEtB,EAAAA,IAAW,IAAI;AAAA,IAAE;AAAA,IAAA,IAC3BmB,WAAQ;AAAA,aAAEI,EAAA,MAAAf,EAAAA,MAAU,QAAQ,MAAGf,EAAM0B,WAAWE;AAAAA,IAAS;AAAA,IAAA,IAAAxB,WAAA;AAAA,aAAA,EAAA,MAAA;AAAA,YAAA2B,IAAAC,EAAAA,GAAAC,IAEpBV,EAAUvB,EAAMkC,UAAU;AAAC,sBAAAD,KAAA,cAAAE,EAAAF,GAAAF,CAAA,GAAAK,EAAAL,GAAAf,EAC7DqB,GAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEnC,EAAAA;AAAAA,UAAM;AAAA,UAAA,IAAAC,WAAA;AAAA,gBAAAmC,IAAAC,EAAAA;AAAAJ,mBAAAA,EAAAG,GACcpC,CAAI,GAAAoC;AAAAA,UAAA;AAAA,QAAA,CAAA,GAAA,IAAA,GAAAH,EAAAL,GAAAf,EAEnCqB,GAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEjC,EAAAA;AAAAA,UAAO;AAAA,UAAA,IAAAD,WAAA;AAAA,gBAAAqC,IAAAC,EAAAA;AAAAN,mBAAAA,EAAAK,GACmBpC,CAAK,GAAAoC;AAAAA,UAAA;AAAA,QAAA,CAAA,GAAA,IAAA,GAAAV;AAAAA,MAAA,GAAA,GAAAf,EAG5C2B,GAAM;AAAA,QAACC,WAAYC,OAAavC,IAAgBuC;AAAAA,QAAUC,SAAS;AAAA,UAAEC,OAAO;AAAA,QAAA;AAAA,MAAoB,CAAC,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA,CAAA;AAGxG;"}
+{"version":3,"file":"tab.js","sources":["../../../../../src/components/navigation/tabs/tab/tab.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../../base/ripple\";\nimport { Icon } from \"../../../base/icon\";\nimport { useTabsContext, type TabCloseReason } from \"../tabsContext\";\nimport { mergeRefs, type Ref } from \"../../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../../primitives/callHandler\";\n\nexport type { TabCloseReason };\n\n/** What a function given as `actions` receives. */\nexport interface TabActionsApi {\n  /**\n   * Ask for the tab to close, as its close button does: `onClose` is called with this event and the\n   * reason \"actions\", and `Tabs` moves focus on to the neighbour once the tab goes, even though focus\n   * is in a menu drawn outside the row. Call it from the item that closes the tab (\"Terminate\"), with\n   * that item's event. It works on a tab that is not `closable`.\n   */\n  close: (event: Event) => void;\n}\n\n// `onClose` is the close button's, not the element's `close` event handler.\nexport interface TabProps extends Omit<JSX.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>, \"onClose\"> {\n  label?: JSX.Element;\n  isActive?: boolean;\n  /**\n   * Whether the tab is the one in the page's Tab order (`tabindex` 0, the others -1). `Tabs` sets\n   * it: the focused tab while focus is in the row, the selected one otherwise. On its own a tab\n   * is the stop while `isActive`.\n   */\n  tabStop?: boolean;\n  contentRef?: Ref<HTMLSpanElement>;\n  /**\n   * A decorative status marker drawn left of the label (a running/done/failed icon). Its\n   * wrapper renders `aria-hidden=\"true\"`, so the tab's accessible name stays the label\n   * alone: the icon is not announced on top of it. To have the status read out, put it\n   * in the `label` itself.\n   */\n  icon?: JSX.Element;\n  stacked?: boolean;\n  /** The element to render. A tab with an `href` is an `a` unless you say otherwise. */\n  tag?: string;\n  /**\n   * Navigation mode: where the tab goes. The tab is then a real link (`<a href role=\"tab\">`, with\n   * no `target`: a tab never opens another window), so it opens in place and middle click, copy\n   * link 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`.\n   * The one exception is a middle press on a `closable` tab: it closes the tab instead, as in an\n   * editor, and its default is prevented so nothing opens.\n   */\n  href?: string;\n  disabled?: boolean;\n  /**\n   * 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\n   * middle click on the tab closes it as well (`reason` \"middleClick\"): the browser's own\n   * middle-click action (autoscroll, opening a link tab in a new window) is suppressed, and the\n   * click never selects. The tab does not close itself: `onClose` asks for it and the owner\n   * removes the `Tab`. The button is a sibling of the tab, not inside its `role=\"tab\"`, so the\n   * tab's accessible name is its label alone.\n   * It is out of the Tab order (`tabindex` -1), so the row keeps one tab stop, and a press on it takes\n   * no focus and never selects the tab. When the tab that has focus closes, `Tabs` moves focus to the\n   * tab that takes its place (the previous one if it was last), skipping disabled tabs. A disabled tab\n   * has a disabled button.\n   *\n   * The button stays in the accessibility tree, named by `closeLabel`: it is how a screen reader user\n   * who cannot press Delete, as on a touch screen, closes the tab. It sits in the tab list beside its\n   * tab, 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   *\n   * To 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\n   * recreates the tab and drops its focus.\n   */\n  closable?: boolean;\n  /**\n   * 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\n   * prevented), the middle press on the tab (`reason` \"middleClick\", its default is prevented too),\n   * or the event passed to `close` by the tab's `actions` (`reason` \"actions\"). The owner removes\n   * the `Tab`.\n   */\n  onClose?: (event: Event, reason: TabCloseReason) => void;\n  /** Accessible label of the close button. English by default; set it to localise, or to name the tab (\"Close Terminal 1\"). */\n  closeLabel?: string;\n  /**\n   * Content after the tab, before the close button: a trigger with a `Menu` (\"Rename\", \"Terminate\"),\n   * or any control. Give a function to get `{ close }` (see `TabActionsApi`); it is called once.\n   * Like the close button the content is a sibling of the tab, so it is not part of the tab's name;\n   * the tab's own `ref`, `class` and handlers stay on the `role=\"tab\"` element. It stays in the\n   * accessibility tree as written, inside the tab list (see `closable`).\n   *\n   * The row has one tab stop, so give the trigger `tabindex={-1}`. Shift+F10 or the Menu key on the\n   * focused tab, which the tab lists in `aria-keyshortcuts`, focuses the first control in `actions`\n   * and clicks it, unless that control says `aria-expanded=\"true\"` (it is already open). If the\n   * control names its popup in `aria-controls`, the first enabled `menuitem` in that element then\n   * takes focus, as the WAI-ARIA menu button pattern asks: ArrowDown moves on, Enter chooses, and\n   * Escape hands focus back to the trigger. Without `aria-controls` focus stays on the trigger.\n   *\n   * The row clips what overflows it: draw the menu in a `Portal`, anchored to the trigger and with\n   * the `id` the trigger names. A choice that removes the tab (\"Terminate\") should call `close` with\n   * its event, so that `onClose` removes the tab and `Tabs` moves focus on to the neighbour; a tab\n   * removed some other way leaves focus on the page.\n   */\n  actions?: JSX.Element | ((api: TabActionsApi) => JSX.Element);\n  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\n/** A click that asks the browser for something else than \"go here\": a new tab, a new window, a download. */\nconst isModifiedClick = (event: MouseEvent): boolean =>\n  event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey;\n\nconst hasModifier = (event: KeyboardEvent): boolean => event.ctrlKey || event.metaKey || event.altKey || event.shiftKey;\n\n/** What the Menu key and Shift+F10 stand for: the actions' trigger. */\nconst ACTIONS_TRIGGER = 'button:not(:disabled), a[href], [role=\"button\"]:not([aria-disabled=\"true\"]), [tabindex]';\n\n/** The item of an opened menu that takes focus first. */\nconst FIRST_MENU_ITEM = '[role^=\"menuitem\"]:not([aria-disabled=\"true\"])';\n\n/** Focus the first item of the popup `trigger` names in `aria-controls`, if it is there. */\nconst focusPopupOf = (trigger: HTMLElement): void => {\n  for (const id of trigger.getAttribute(\"aria-controls\")?.split(/\\s+/) ?? []) {\n    const item = id ? trigger.ownerDocument.getElementById(id)?.querySelector<HTMLElement>(FIRST_MENU_ITEM) : null;\n    if (item) {\n      // The menu may not be placed yet: a scroll to it would jump to the corner it starts in.\n      item.focus({ preventScroll: true });\n      return;\n    }\n  }\n};\n\nexport function Tab(props: ParentProps<TabProps>): JSX.Element {\n  const ctx = useTabsContext();\n  const [root, setRoot] = createSignal<HTMLButtonElement | HTMLAnchorElement>();\n  const merged = mergeProps({ isActive: false, stacked: false, closeLabel: \"Close tab\" }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"label\",\n    \"isActive\",\n    \"contentRef\",\n    \"icon\",\n    \"stacked\",\n    \"tag\",\n    \"href\",\n    \"tabStop\",\n    \"disabled\",\n    // `Tabs` owns this: it is the item that drags, not the tab. The caller's value\n    // is dropped, as in the React `Tab`.\n    \"draggable\",\n    \"closable\",\n    \"onClose\",\n    \"closeLabel\",\n    \"actions\",\n    \"id\",\n    \"aria-controls\",\n    // A tab opens in place: a caller's target is dropped, not passed on.\n    \"target\" as keyof TabProps,\n    \"onClick\",\n    \"onKeyDown\",\n    \"ref\",\n    // The tab sets this on its root too; its own handler calls the caller's first.\n    \"onPointerDown\",\n    \"onMouseDown\",\n  ]);\n\n  // The tab's position in the tab list: it follows the tab when tabs around it\n  // are added, removed or reordered.\n  const index = ctx\n    ? ctx.registerTab(root, {\n        id: () => local.id,\n        disabled: () =>\n          Boolean(local.disabled) || props[\"aria-disabled\"] === true || props[\"aria-disabled\"] === \"true\",\n        closable: () => Boolean(local.closable),\n        requestClose: (event) => close(event, \"key\"),\n      })\n    : () => -1;\n\n  // Read the icon and the label once: markup passed as a prop is created anew on\n  // every read, and during hydration the copy made for the <Show> test has no\n  // server DOM node to adopt (\"Unable to find DOM nodes for hydration key\").\n  const icon = children(() => local.icon);\n  const label = children(() => local.label);\n  // The actions are drawn whenever they are given, so reading them here, once, is safe. A function\n  // is the tab's to call, with its api: `children` would call it with nothing.\n  const actionsApi: TabActionsApi = { close: (event) => close(event, \"actions\") };\n  const actions = children(() => {\n    const given = local.actions;\n    return typeof given === \"function\" ? (given as (api: TabActionsApi) => JSX.Element)(actionsApi) : given;\n  });\n  const hasActions = (): boolean => actions.toArray().length > 0;\n\n  let rippleActions: RippleActionsRef | undefined;\n  let actionsEl: HTMLSpanElement | undefined;\n\n  const active = (): boolean => (ctx ? ctx.value() === index() : local.isActive);\n\n  const tag = (): string => local.tag ?? (local.href !== undefined ? \"a\" : \"button\");\n  // Anything but a button is not disabled by the attribute: its clicks are swallowed here.\n  const inert = (): boolean => Boolean(local.disabled) && tag() !== \"button\";\n\n  const onClick: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, MouseEvent> = (event) => {\n    if (inert()) {\n      event.preventDefault();\n      return;\n    }\n    // Inside Tabs too the caller's onClick runs first, then the tab list picks the tab.\n    callHandler(local.onClick, event);\n    // A link tab opens elsewhere on a modified click: the browser's, not a selection here.\n    if (local.href !== undefined && isModifiedClick(event)) return;\n    ctx?.onChange(event, index());\n  };\n\n  const close = (event: Event, reason: TabCloseReason): void => {\n    // The row notes which tab is closing before the owner removes it.\n    ctx?.closing(index(), reason);\n    local.onClose?.(event, reason);\n  };\n\n  // A button clicks on Enter and Space by itself, a link on Enter only: Space does it here.\n  const onKeyDown: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, KeyboardEvent> = (event) => {\n    callHandler(local.onKeyDown, event);\n    if (local.disabled || event.defaultPrevented || event.target !== event.currentTarget) return;\n    if (tag() !== \"button\" && event.key === \" \") {\n      event.preventDefault();\n      event.currentTarget.click();\n    } else if (local.closable && (event.key === \"Delete\" || event.key === \"Backspace\") && !hasModifier(event)) {\n      event.preventDefault();\n      close(event, \"key\");\n    } else if (hasActions() && (event.key === \"ContextMenu\" || (event.key === \"F10\" && event.shiftKey))) {\n      // The Menu key, or Shift+F10: the keyboard's right click. The trigger takes focus first, so\n      // the menu it opens hands focus back to it on Escape.\n      const trigger = actionsEl?.querySelector<HTMLElement>(ACTIONS_TRIGGER);\n      if (trigger) {\n        event.preventDefault();\n        trigger.focus();\n        // The keys mean \"open\": a menu that already is open is not toggled shut.\n        if (trigger.getAttribute(\"aria-expanded\") !== \"true\") {\n          trigger.click();\n        }\n        focusPopupOf(trigger);\n      }\n    }\n  };\n\n  const onPointerDown: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, PointerEvent> = (event) => {\n    callHandler(local.onPointerDown, event);\n    rippleActions?.onRipple(event);\n  };\n\n  // Middle click on a closable tab closes it, IDE-style: the browser's own middle-click\n  // action (autoscroll, opening a link tab in a new window) is suppressed and the tab is\n  // never selected. A middle click on a tab that is not closable is the browser's, untouched.\n  const onMouseDown: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, MouseEvent> = (event) => {\n    callHandler(local.onMouseDown, event);\n    if (event.button === 1 && local.closable && !local.disabled) {\n      event.preventDefault();\n      close(event, \"middleClick\");\n    }\n  };\n\n  // Inside Tabs the row decides, whatever the caller passed.\n  const tabStop = (): boolean => (ctx ? ctx.tabStop(index()) : (local.tabStop ?? active()));\n\n  // What the tab answers to, for assistive technology; the caller's own list is kept.\n  // The chords are best-effort: browsers reserve Mod+W and Mod+Shift+[/] in a page of\n  // their own tabs, and they bite only in an embedded webview.\n  const keyshortcuts = (): string | undefined =>\n    [\n      props[\"aria-keyshortcuts\"],\n      !local.disabled && local.closable ? \"Delete Backspace\" : undefined,\n      !local.disabled && hasActions() ? \"Shift+F10 ContextMenu\" : undefined,\n      !local.disabled && local.closable ? \"Meta+W Control+W\" : undefined,\n      !local.disabled ? \"Meta+Shift+[ Control+Shift+[ Meta+Shift+] Control+Shift+]\" : undefined,\n    ]\n      .filter(Boolean)\n      .join(\" \") || undefined;\n\n  // A tab given neither `closable` nor `actions` is the bare element, as it always was.\n  const wrapped = (): boolean => local.closable !== undefined || actions() !== undefined;\n\n  // Only a reorderable row makes its items draggable, and a disabled tab never — the same\n  // contract as the registration's `disabled`. Rendered on the item (the wrapper, or the\n  // bare tab when there is none), so `draggable` is in the server markup, as in React.\n  const draggable = (): boolean | undefined =>\n    ctx?.reorderable() && !local.disabled && props[\"aria-disabled\"] !== true && props[\"aria-disabled\"] !== \"true\"\n      ? true\n      : undefined;\n\n  const renderTab = (): JSX.Element => (\n    <Dynamic\n      component={tag()}\n      {...rest}\n      ref={mergeRefs(local.ref, setRoot)}\n      class={cn(\"smwb-tab\", local.class, {\n        \"smwb-tab--active\": active(),\n        \"smwb-tab--stacked\": local.stacked,\n        \"smwb-tab--disabled\": local.disabled,\n      })}\n      id={local.id ?? ctx?.tabId(index())}\n      aria-controls={local[\"aria-controls\"] ?? (ctx?.hasPanels() ? ctx.panelId(index()) : undefined)}\n      // A disabled link has no href, so it is no link to follow or to focus.\n      href={inert() ? undefined : local.href}\n      draggable={wrapped() ? undefined : draggable()}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      onPointerDown={onPointerDown}\n      onMouseDown={onMouseDown}\n      // The role, the selection and the roving tabindex belong to the tab list:\n      // they win over the caller's. A tab that is not disabled keeps the\n      // caller's aria-disabled.\n      role=\"tab\"\n      aria-selected={active()}\n      aria-disabled={local.disabled || undefined}\n      aria-keyshortcuts={keyshortcuts()}\n      tabindex={tabStop() ? 0 : -1}\n      disabled={tag() === \"button\" ? local.disabled : undefined}\n    >\n      <span class=\"smwb-tab__content\" ref={mergeRefs(local.contentRef)}>\n        <Show when={icon()}>\n          <span class=\"smwb-tab__icon\" aria-hidden=\"true\">\n            {icon()}\n          </span>\n        </Show>\n        <Show when={label()}>\n          <span class=\"smwb-tab__text-label\">{label()}</span>\n        </Show>\n      </span>\n      <Ripple actionRef={(api) => (rippleActions = api)} classes={{ child: \"tab__ripple-child\" }} />\n    </Dynamic>\n  );\n\n  return (\n    <Show when={wrapped()} fallback={renderTab()}>\n      <div\n        class={cn(\"smwb-tab-item\", {\n          \"smwb-tab-item--active\": active(),\n          \"smwb-tab-item--disabled\": local.disabled,\n        })}\n        draggable={draggable()}\n      >\n        {renderTab()}\n        <Show when={hasActions()}>\n          <span class=\"smwb-tab__actions\" ref={actionsEl}>\n            {actions()}\n          </span>\n        </Show>\n        <Show when={local.closable}>\n          <button\n            type=\"button\"\n            class=\"smwb-tab__close\"\n            // Out of the Tab order, so the row keeps its one tab stop; Delete on the tab closes it.\n            tabindex={-1}\n            aria-label={local.closeLabel}\n            disabled={Boolean(local.disabled)}\n            // A press does not take focus from where it is: from the tab being closed, or the page.\n            onMouseDown={(event) => event.preventDefault()}\n            onClick={(event) => close(event, \"button\")}\n          >\n            <Icon name=\"close\" size={16} />\n          </button>\n        </Show>\n      </div>\n    </Show>\n  );\n}\n\nexport default Tab;\n"],"names":["isModifiedClick","event","button","ctrlKey","metaKey","shiftKey","altKey","hasModifier","ACTIONS_TRIGGER","FIRST_MENU_ITEM","focusPopupOf","trigger","id","getAttribute","split","item","ownerDocument","getElementById","querySelector","focus","preventScroll","Tab","props","ctx","useTabsContext","root","setRoot","createSignal","merged","mergeProps","isActive","stacked","closeLabel","local","rest","splitProps","index","registerTab","disabled","Boolean","closable","requestClose","close","icon","children","label","actionsApi","actions","given","hasActions","toArray","length","rippleActions","actionsEl","active","value","tag","href","undefined","inert","onClick","preventDefault","callHandler","onChange","reason","closing","onClose","onKeyDown","defaultPrevented","target","currentTarget","key","click","onPointerDown","onRipple","onMouseDown","tabStop","keyshortcuts","filter","join","wrapped","draggable","reorderable","renderTab","_$createComponent","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","class","tabId","hasPanels","panelId","_$memo","role","tabindex","_el$","_tmpl$3","_ref$2","contentRef","_$use","_$insert","Show","when","_el$2","_tmpl$","_el$3","_tmpl$2","Ripple","actionRef","api","classes","child","fallback","_el$4","_tmpl$6","_el$5","_tmpl$4","_ref$3","_el$6","_tmpl$5","$$click","$$mousedown","Icon","name","size","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","_v$3","_v$4","_$className","_$delegateEvents"],"mappings":"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"}

package/dist/components/navigation/tabs/tabPanel/tabPanel.d.ts

@@ -0,0 +1,20 @@
+import { type JSX, type ParentProps } from "solid-js";
+export interface TabPanelProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The tab this panel belongs to: its index, counted as for the `value` of `Tabs`. The panel
+     * shows while that tab is selected and is hidden otherwise.
+     */
+    index: number;
+    /** Extra class on the panel. */
+    class?: string;
+    /** The panel's content. It stays in the document while the panel is hidden. */
+    children?: JSX.Element;
+}
+/**
+ * The content of one tab. Give it to the `panels` of `Tabs`, which links it to its tab: the panel
+ * is `aria-labelledby` the tab and the tab `aria-controls` the panel. A panel is `role="tabpanel"`
+ * and a tab stop of its own (`tabindex="0"`), so Tab moves from the tab list to the panel. A panel
+ * placed anywhere else is not linked to any tabs and is always shown (its `hidden` is yours).
+ */
+export declare function TabPanel(props: ParentProps<TabPanelProps>): JSX.Element;
+export default TabPanel;

package/dist/components/navigation/tabs/tabPanel/tabPanel.js

@@ -0,0 +1,34 @@
+import { spread as l, mergeProps as o, insert as s, template as d } from "solid-js/web";
+import '../../../../assets/styles/less/components/tabs/tabPanel/tabPanel.entry.css';import '../../../../assets/styles/less/tokens.entry.css';/* empty css                                        */
+/* empty css                                                                   */
+import { splitProps as p, mergeProps as m } from "solid-js";
+import c from "clsx";
+import { useTabsContext as u } from "../tabsContext.js";
+var b = /* @__PURE__ */ d("<div>");
+function $(a) {
+  const r = u(), [e, i] = p(a, ["index", "class", "children"]), n = m({
+    get id() {
+      return r?.panelId(e.index);
+    },
+    get "aria-labelledby"() {
+      return r?.tabId(e.index);
+    },
+    tabindex: 0
+  }, i);
+  return (() => {
+    var t = b();
+    return l(t, o(n, {
+      get class() {
+        return c("smwb-tab-panel", e.class);
+      },
+      role: "tabpanel",
+      get hidden() {
+        return r ? r.value() !== e.index : n.hidden;
+      }
+    }), !1, !0), s(t, () => e.children), t;
+  })();
+}
+export {
+  $ as TabPanel
+};
+//# sourceMappingURL=tabPanel.js.map

package/dist/components/navigation/tabs/tabPanel/tabPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabPanel.js","sources":["../../../../../src/components/navigation/tabs/tabPanel/tabPanel.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { useTabsContext } from \"../tabsContext\";\n\nexport interface TabPanelProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /**\n   * The tab this panel belongs to: its index, counted as for the `value` of `Tabs`. The panel\n   * shows while that tab is selected and is hidden otherwise.\n   */\n  index: number;\n  /** Extra class on the panel. */\n  class?: string;\n  /** The panel's content. It stays in the document while the panel is hidden. */\n  children?: JSX.Element;\n}\n\n/**\n * The content of one tab. Give it to the `panels` of `Tabs`, which links it to its tab: the panel\n * is `aria-labelledby` the tab and the tab `aria-controls` the panel. A panel is `role=\"tabpanel\"`\n * and a tab stop of its own (`tabindex=\"0\"`), so Tab moves from the tab list to the panel. A panel\n * placed anywhere else is not linked to any tabs and is always shown (its `hidden` is yours).\n */\nexport function TabPanel(props: ParentProps<TabPanelProps>): JSX.Element {\n  const ctx = useTabsContext();\n  const [local, rest] = splitProps(props, [\"index\", \"class\", \"children\"]);\n  // Yours win: a TabPanel outside Tabs `panels` has no ids to give, and a caller's\n  // `id`, `aria-labelledby` or `tabindex` replaces the linked ones.\n  const linked = mergeProps(\n    {\n      get id() {\n        return ctx?.panelId(local.index);\n      },\n      get \"aria-labelledby\"() {\n        return ctx?.tabId(local.index);\n      },\n      tabindex: 0,\n    },\n    rest\n  );\n\n  return (\n    <div {...linked} class={cn(\"smwb-tab-panel\", local.class)} role=\"tabpanel\" hidden={ctx ? ctx.value() !== local.index : linked.hidden}>\n      {local.children}\n    </div>\n  );\n}\n\nexport default TabPanel;\n"],"names":["TabPanel","props","ctx","useTabsContext","local","rest","splitProps","linked","mergeProps","id","panelId","index","tabId","tabindex","_el$","_tmpl$","_$spread","_$mergeProps","cn","class","hidden","value","_$insert","children"],"mappings":";;;;;;;AAwBO,SAASA,EAASC,GAAgD;AACvE,QAAMC,IAAMC,EAAAA,GACN,CAACC,GAAOC,CAAI,IAAIC,EAAWL,GAAO,CAAC,SAAS,SAAS,UAAU,CAAC,GAGhEM,IAASC,EACb;AAAA,IACE,IAAIC,KAAK;AACP,aAAOP,GAAKQ,QAAQN,EAAMO,KAAK;AAAA,IACjC;AAAA,IACA,IAAI,oBAAoB;AACtB,aAAOT,GAAKU,MAAMR,EAAMO,KAAK;AAAA,IAC/B;AAAA,IACAE,UAAU;AAAA,EAAA,GAEZR,CACF;AAEA,UAAA,MAAA;AAAA,QAAAS,IAAAC,EAAAA;AAAAC,WAAAA,EAAAF,GAAAG,EACWV,GAAM;AAAA,MAAA,IAAA,QAAA;AAAA,eAASW,EAAG,kBAAkBd,EAAMe,KAAK;AAAA,MAAC;AAAA,MAAA,MAAO;AAAA,MAAU,IAACC,SAAM;AAAA,eAAElB,IAAMA,EAAImB,MAAAA,MAAYjB,EAAMO,QAAQJ,EAAOa;AAAAA,MAAM;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAE,EAAAR,GAAA,MACjIV,EAAMmB,QAAQ,GAAAT;AAAAA,EAAA,GAAA;AAGrB;"}

package/dist/components/navigation/tabs/tabs.d.ts

@@ -1,6 +1,28 @@
 import { type JSX, type ParentProps } from "solid-js";
 import { Tab } from "./tab/tab";
 import { type Ref } from "../../../primitives/mergeRefs";
+/**
+ * Tabs follow the WAI-ARIA tabs pattern with manual activation. The selected tab is the row's one
+ * tab stop (`tabindex` 0, the others -1). The arrow keys along the row's `orientation` move focus to
+ * the next or the previous tab (wrapping at the ends), Home and End to the first and the last one;
+ * disabled tabs are skipped. Enter or Space then selects the focused tab, as a click does:
+ * `onChange` is called for it, with the key's click. Moving focus changes nothing by itself, so a
+ * row of link tabs does not navigate as the arrows pass them. Tab leaves the row for what follows
+ * it, the selected `TabPanel` first when `panels` are given.
+ *
+ * A `Tab` can be `closable` and take `actions`; they sit beside the tab and out of the Tab order.
+ * Delete on the focused tab, its close button or its `actions` (through `close`) ask `onClose` to
+ * close it, and when it goes, focus moves to the tab that takes its place instead of falling to the
+ * page. A middle click on a closable tab closes it too.
+ *
+ * With `onReorder` the row's tabs drag onto one another to reorder: `onReorder(from, to)` reports
+ * the drop and the owner moves the tabs; dropping the selected tab reports its new index through
+ * `onChange` as well, so the selection follows the moved tab. With `overflowMenu` a scrollable
+ * row that overflows gains
+ * a trigger beside it listing the clipped tabs. The chords Mod+W (close the focused closable tab)
+ * and Mod+Shift+[ / Mod+Shift+] (switch to the previous / next tab) are handled on the row, as
+ * best-effort: a browser of its own tabs reserves them.
+ */
 export interface TabsProps {
     /**
      * Index of the selected tab: its position in the row. Tabs count in the order they
@@ -8,11 +30,34 @@ export interface TabsProps {
      * removed or reordered count by their new place.
      */
     value: number;
-    /** Called with the index of the clicked tab, counted as for `value`. */
+    /**
+     * Called with the index of the clicked tab, counted as for `value`. A tab chosen from the keyboard
+     * (Enter or Space on the focused tab) calls it with that click too. A modified or non-primary
+     * click (Ctrl, Meta, Shift or Alt held, or a button other than the main one) on a link tab
+     * (`Tab` with `href`) is the browser's, as "open in a new tab": it does not call `onChange`.
+     */
     onChange: (event: MouseEvent & {
         currentTarget: HTMLElement;
         target: Element;
     }, index: number) => void;
+    /**
+     * Which way the tabs run. It sets `aria-orientation` on the tab list and picks the arrow keys that
+     * move between tabs: Left and Right when horizontal, Up and Down when vertical. The styles draw
+     * a horizontal row; a vertical list is yours to lay out.
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * The content of the tabs: `TabPanel`s, rendered after the tab row. With them each tab gets
+     * `aria-controls` its panel and each panel `aria-labelledby` its tab. Without them the tabs link
+     * to nothing, as before. Give a panel to every tab: a tab whose panel is left out still names it.
+     * A `TabPanel` placed anywhere else is not linked to the tabs and is always shown.
+     */
+    panels?: JSX.Element;
+    /**
+     * Base of the ids that link tabs and panels: tab `n` is `{id}-tab-{n}`, its panel `{id}-panel-{n}`.
+     * It is also the id of the root element. A generated one by default.
+     */
+    id?: string;
     /** Draw the indicator as wide as the selected tab's label rather than the whole tab. */
     indicatorContent?: boolean;
     /**
@@ -20,8 +65,33 @@ export interface TabsProps {
      * more tabs are hidden fades out.
      */
     scrollable?: boolean;
-    /** With `scrollable`: buttons at both ends that scroll the row while it overflows. */
+    /**
+     * With `scrollable`: buttons at both ends that scroll the row while it overflows. They are for
+     * the pointer and stay out of the Tab order: the arrow keys reach every tab and scroll it into
+     * view.
+     */
     scrollButtons?: boolean;
+    /**
+     * Present ⇒ the row is reorderable by dragging a tab onto another (pointer-only; there is no
+     * keyboard reorder). `Tabs` does not move the tabs itself: it reports the drag with
+     * `onReorder(from, to)` — indexes counted as for `value` — and the owner reorders its state.
+     * The tabs keep their focus through a reorder; when the moved tab is the selected one,
+     * `onChange` reports its new index too, so a controlled owner keeps it selected. That `onChange`
+     * carries the drop's own event standing in for the click's: the index argument is authoritative —
+     * `currentTarget` is the scroll area the drop delegates to, not the tab.
+     */
+    onReorder?: (from: number, to: number) => void;
+    /**
+     * With `scrollable`: when the row overflows, a trigger button is rendered beside the scroller
+     * (in the scroll buttons' spot) that opens a menu of the tabs the viewport clips — any clipped
+     * part beyond a 1px tolerance counts. Each entry shows the tab's icon and label, the selected one is marked
+     * `aria-current="true"`, and choosing one calls `onChange` for it and scrolls it into view.
+     * The trigger appears only after the browser has measured an overflow, so the server markup
+     * shows none.
+     */
+    overflowMenu?: boolean;
+    /** Accessible label of the overflow-menu trigger. English by default; set it to localise. */
+    overflowMenuAriaLabel?: string;
     /** Compact tabs: labels as written (no capitals, no letter spacing) and less padding. */
     dense?: boolean;
     /** Accessible label of the button that scrolls back. */
@@ -35,5 +105,5 @@ export interface TabsProps {
 }
 export declare function Tabs(props: ParentProps<TabsProps>): JSX.Element;
 export { Tab };
-export type { TabProps } from "./tab/tab";
+export type { TabProps, TabActionsApi, TabCloseReason } from "./tab/tab";
 export default Tabs;