@rcarls/rc-toolbar 0.3.1 → 0.4.0

package/README.md

@@ -1,6 +1,8 @@
 # `@rcarls/rc-toolbar`
 
-Toolbar that groups consumer-supplied controls into one tab stop with arrow-key navigation, following the [WAI-ARIA Toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/).
+Toolbar that groups consumer-supplied controls into one tab stop with arrow-key
+navigation, following the
+[WAI-ARIA Toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/).
 
 Docs: [https://richardcarls.github.io/rc-webcomponents/components/rc-toolbar](https://richardcarls.github.io/rc-webcomponents/components/rc-toolbar).
 
@@ -15,15 +17,17 @@ npm install @rcarls/rc-toolbar
 ## Import
 
 ```js
-import '@rcarls/rc-toolbar';                        // side-effect: registers <rc-toolbar>
-import { RCToolbar } from '@rcarls/rc-toolbar';     // named class export
+import '@rcarls/rc-toolbar'; // side-effect: registers <rc-toolbar>
+import { RCToolbar } from '@rcarls/rc-toolbar'; // named class export
 ```
 
 ---
 
 ## Basic usage
 
-Place buttons, toggles, selects, or any focusable controls as direct children. Non-focusable elements (separators, labels) are rendered but skipped during keyboard navigation.
+Place buttons, toggles, selects, or any focusable controls as direct children.
+Non-focusable elements (separators, labels) are rendered but skipped during
+keyboard navigation.
 
 ```html
 <rc-toolbar label="Formatting">
@@ -47,42 +51,55 @@ Vertical orientation:
 </rc-toolbar>
 ```
 
+Directly slotted `rc-button` and `rc-chip` elements participate through their
+native child buttons:
+
+```html
+<rc-toolbar label="Filters">
+  <rc-button><button type="button">All</button></rc-button>
+  <rc-chip variant="filter"><button type="button">Quick</button></rc-chip>
+  <rc-chip variant="filter"><button type="button">Vegetarian</button></rc-chip>
+</rc-toolbar>
+```
+
 ---
 
 ## API
 
 ### Properties / attributes
 
-| Property | Attribute | Type | Default | Description |
-| --- | --- | --- | --- | --- |
-| `label` | `label` | `string` | `'Toolbar'` | `aria-label` for the toolbar. Required — no visible label is rendered by the component. |
-| `orientation` | `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout direction and keyboard navigation axis. |
+| Property      | Attribute     | Type                         | Default        | Description                                                                            |
+| ------------- | ------------- | ---------------------------- | -------------- | -------------------------------------------------------------------------------------- |
+| `label`       | `label`       | `string`                     | `'Toolbar'`    | `aria-label` for the toolbar. Required; no visible label is rendered by the component. |
+| `orientation` | `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout direction and keyboard navigation axis.                                         |
 
 ### CSS custom properties
 
-| Property | Default | Description |
-| --- | --- | --- |
-| `--rc-toolbar-gap-inline` | `0.25em` | Gap between toolbar items |
-| `--rc-toolbar-padding-inline` | `0.25em` | Horizontal padding on the toolbar container |
-| `--rc-toolbar-padding-block` | `0.125em` | Vertical padding on the toolbar container |
-| `--rc-toolbar-radius` | `var(--rc-control-radius)` | Toolbar container border radius |
+| Property                       | Default                    | Description                                     |
+| ------------------------------ | -------------------------- | ----------------------------------------------- |
+| `--rc-toolbar-gap-inline`      | `0.25em`                   | Gap between toolbar items                       |
+| `--rc-toolbar-padding-inline`  | `0.25em`                   | Horizontal padding on the toolbar container     |
+| `--rc-toolbar-padding-block`   | `0.125em`                  | Vertical padding on the toolbar container       |
+| `--rc-toolbar-flex-wrap`       | `nowrap`                   | Whether toolbar items wrap onto multiple lines  |
+| `--rc-toolbar-radius`          | `var(--rc-control-radius)` | Toolbar container border radius                 |
 | `--rc-toolbar-vertical-radius` | `var(--rc-toolbar-radius)` | Border radius override for vertical orientation |
 
 ### CSS parts
 
-| Part | Element | Description |
-| --- | --- | --- |
+| Part   | Element               | Description                   |
+| ------ | --------------------- | ----------------------------- |
 | `root` | `div[role="toolbar"]` | The toolbar container element |
 
 ### Slots
 
-| Slot | Description |
-| --- | --- |
-| *(default)* | Toolbar controls. Focusable elements (`<button>`, `<input>`, `<select>`, `<a href>`, elements with `tabindex`) participate in roving-tabindex navigation. All others are rendered but skipped. |
+| Slot        | Description                                                                                                                                                                                                                                                       |
+| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| _(default)_ | Toolbar controls. Focusable elements (`<button>`, `<input>`, `<select>`, `<a href>`, elements with `tabindex`) and native buttons inside direct `rc-button` or `rc-chip` wrappers participate in roving-tabindex navigation. All others are rendered but skipped. |
 
 ### Events
 
-`rc-toolbar` dispatches no custom events. Listen for standard events (`click`, `change`, etc.) on slotted children.
+`rc-toolbar` dispatches no custom events. Listen for standard events (`click`,
+`change`, etc.) on slotted children.
 
 ### Public methods
 
@@ -106,31 +123,31 @@ previousItem: HTMLElement | undefined
 
 ---
 
-## Keyboard behaviour
+## Keyboard behavior
 
 The toolbar is a single tab stop. Arrow keys navigate within it.
 
-| Key | Orientation | Action |
-| --- | --- | --- |
-| `ArrowRight` | Horizontal | Focus next item (wraps) |
-| `ArrowLeft` | Horizontal | Focus previous item (wraps) |
-| `ArrowDown` | Vertical | Focus next item (wraps) |
-| `ArrowUp` | Vertical | Focus previous item (wraps) |
-| `Home` | Both | Focus first item |
-| `End` | Both | Focus last item |
-| `Tab` | Both | Leave toolbar (standard tab order) |
+| Key          | Orientation | Action                             |
+| ------------ | ----------- | ---------------------------------- |
+| `ArrowRight` | Horizontal  | Focus next item (wraps)            |
+| `ArrowLeft`  | Horizontal  | Focus previous item (wraps)        |
+| `ArrowDown`  | Vertical    | Focus next item (wraps)            |
+| `ArrowUp`    | Vertical    | Focus previous item (wraps)        |
+| `Home`       | Both        | Focus first item                   |
+| `End`        | Both        | Focus last item                    |
+| `Tab`        | Both        | Leave toolbar (standard tab order) |
 
 ---
 
 ## ARIA
 
-| Attribute | Where | Value |
-| --- | --- | --- |
-| `role="toolbar"` | Root `div` | — |
-| `aria-orientation` | Root `div` | `"horizontal"` or `"vertical"` |
-| `aria-label` | Root `div` | Value of `label` property |
-| `tabindex="0"` | Active item | One item tabbable at a time (roving tabindex) |
-| `tabindex="-1"` | All other items | Removed from tab order |
+| Attribute          | Where           | Value                                         |
+| ------------------ | --------------- | --------------------------------------------- |
+| `role="toolbar"`   | Root `div`      | Toolbar role                                  |
+| `aria-orientation` | Root `div`      | `"horizontal"` or `"vertical"`                |
+| `aria-label`       | Root `div`      | Value of `label` property                     |
+| `tabindex="0"`     | Active item     | One item tabbable at a time (roving tabindex) |
+| `tabindex="-1"`    | All other items | Removed from tab order                        |
 
 ---
 

package/dist/custom-elements.json

@@ -64,6 +64,11 @@
               "name": "--rc-toolbar-padding-block",
               "default": "calc(var(--rc-control-padding-block) / 2)"
             },
+            {
+              "description": "Whether toolbar items wrap onto multiple lines",
+              "name": "--rc-toolbar-flex-wrap",
+              "default": "nowrap"
+            },
             {
               "description": "Toolbar container border radius",
               "name": "--rc-toolbar-radius",
@@ -83,7 +88,7 @@
           ],
           "slots": [
             {
-              "description": "any number of child elements to display in the toolbar. Only focusable elements are navigable.",
+              "description": "any number of child controls, `rc-button`, or `rc-chip` elements to display in the toolbar. Direct native controls and the native buttons inside supported wrappers are navigable.",
               "name": "Takes"
             }
           ],
@@ -119,14 +124,14 @@
             {
               "kind": "field",
               "name": "_disabledObserver",
-              "privacy": "private",
+              "privacy": "protected",
               "readonly": true,
               "default": "new MutationObserver(() => this._syncTabStop())"
             },
             {
               "kind": "method",
               "name": "_syncTabStop",
-              "privacy": "private",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "void"
@@ -162,7 +167,7 @@
               },
               "parameters": [
                 {
-                  "name": "slot",
+                  "name": "$slot",
                   "type": {
                     "text": "HTMLSlotElement"
                   }
@@ -172,7 +177,7 @@
             {
               "kind": "method",
               "name": "_isToolbarItem",
-              "privacy": "private",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "boolean"
@@ -180,7 +185,7 @@
               },
               "parameters": [
                 {
-                  "name": "el",
+                  "name": "$el",
                   "type": {
                     "text": "Element"
                   }
@@ -190,21 +195,21 @@
           ],
           "attributes": [
             {
+              "description": "Accessible label for this toolbar. Default label is 'Toolbar'.",
               "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "'Toolbar'",
-              "description": "Accessible label for this toolbar. Default label is 'Toolbar'.",
               "fieldName": "label"
             },
             {
+              "description": "Toolbar orientation, for keyboard navigation.",
               "name": "orientation",
               "type": {
                 "text": "'horizontal' | 'vertical'"
               },
               "default": "'horizontal'",
-              "description": "Toolbar orientation, for keyboard navigation.",
               "fieldName": "orientation"
             }
           ],

package/dist/{rc-toolbar-BPcEdxN8.js → rc-toolbar-Bzh9yptT.js}

@@ -1,7 +1,7 @@
-import { css as u, LitElement as b, html as h } from "lit";
-import { property as d, query as f } from "lit/decorators.js";
-import { RovingTabIndexMixin as m, isFocusable as l, keyNavigation as p, keyInteraction as v } from "@rcarls/rc-common";
-const g = u`
+import { css as b, LitElement as h, html as f } from "lit";
+import { property as u, query as p } from "lit/decorators.js";
+import { RovingTabIndexMixin as m, isFocusable as d, keyNavigation as v, keyInteraction as g } from "@rcarls/rc-common";
+const _ = b`
   :host {
     display: inline-block;
   }
@@ -9,9 +9,16 @@ const g = u`
   #root {
     display: flex;
     flex-direction: row;
+    flex-wrap: var(--rc-toolbar-flex-wrap, nowrap);
     gap: var(--rc-toolbar-gap-inline, var(--rc-control-gap, 0.25em));
-    padding-inline: var(--rc-toolbar-padding-inline, calc(var(--rc-control-padding-inline, 0.5em) / 2));
-    padding-block: var(--rc-toolbar-padding-block, calc(var(--rc-control-padding-block, 0.25em) / 2));
+    padding-inline: var(
+      --rc-toolbar-padding-inline,
+      calc(var(--rc-control-padding-inline, 0.5em) / 2)
+    );
+    padding-block: var(
+      --rc-toolbar-padding-block,
+      calc(var(--rc-control-padding-block, 0.25em) / 2)
+    );
     border-radius: var(--rc-toolbar-radius, var(--rc-control-radius, 0));
     font-family: var(--rc-font-family, inherit);
     font-size: var(--rc-font-size, inherit);
@@ -19,10 +26,13 @@ const g = u`
 
     &[aria-orientation='vertical'] {
       flex-direction: column;
-      border-radius: var(--rc-toolbar-vertical-radius, var(--rc-toolbar-radius, var(--rc-control-radius, 0)));
+      border-radius: var(
+        --rc-toolbar-vertical-radius,
+        var(--rc-toolbar-radius, var(--rc-control-radius, 0))
+      );
     }
 
-    /* because :has(:focus-visible) doens't work across slot boundary */
+    /* because :has(:focus-visible) doesn't work across slot boundary */
     &[data-interaction-mode='keyboard']:focus-within {
       outline: var(--rc-focus-ring, auto);
       outline-offset: var(--rc-focus-ring-offset, 0);
@@ -33,12 +43,12 @@ const g = u`
     display: contents;
   }
 `;
-var _ = Object.defineProperty, s = (n, t, e, y) => {
-  for (var r = void 0, o = n.length - 1, c; o >= 0; o--)
-    (c = n[o]) && (r = c(t, e, r) || r);
-  return r && _(t, e, r), r;
+var y = Object.defineProperty, a = (c, t, e, o) => {
+  for (var r = void 0, s = c.length - 1, l; s >= 0; s--)
+    (l = c[s]) && (r = l(t, e, r) || r);
+  return r && y(t, e, r), r;
 };
-const a = class a extends m(b) {
+const n = class n extends m(h) {
   constructor() {
     super(...arguments), this.label = "Toolbar", this.orientation = "horizontal", this._disabledObserver = new MutationObserver(() => this._syncTabStop());
   }
@@ -49,7 +59,7 @@ const a = class a extends m(b) {
     super.disconnectedCallback(), this._disabledObserver.disconnect();
   }
   _syncTabStop() {
-    !this._lastFocused || l(this._lastFocused) || (this._lastFocused = void 0, this._initItems());
+    !this._lastFocused || d(this._lastFocused) || (this._lastFocused = void 0, this._initItems());
   }
   _initItems() {
     super._initItems();
@@ -75,7 +85,13 @@ const a = class a extends m(b) {
     }
   }
   _collectItems(t) {
-    return t.assignedElements().filter((e) => this._isToolbarItem(e));
+    return t.assignedElements().flatMap((e) => {
+      if (e.matches("rc-button, rc-chip")) {
+        const o = e.querySelector(":scope > button");
+        return o ? [o] : [];
+      }
+      return this._isToolbarItem(e) ? [e] : [];
+    });
   }
   _isToolbarItem(t) {
     if (t instanceof HTMLButtonElement || t instanceof HTMLInputElement || t instanceof HTMLSelectElement || t instanceof HTMLTextAreaElement)
@@ -83,15 +99,15 @@ const a = class a extends m(b) {
     if (t instanceof HTMLAnchorElement || t instanceof HTMLAreaElement)
       return t.hasAttribute("href");
     const e = t.getAttribute("role");
-    return e === "button" || e === "checkbox" || e === "link" || e === "menuitem" || e === "radio" || e === "slider" || e === "spinbutton" || e === "switch" || e === "textbox" ? !0 : l(t);
+    return e === "button" || e === "checkbox" || e === "link" || e === "menuitem" || e === "radio" || e === "slider" || e === "spinbutton" || e === "switch" || e === "textbox" ? !0 : d(t);
   }
   render() {
-    return h`
+    return f`
       <div
         id="root"
         part="root"
-        ${p(this._onNavigate)}
-        ${v()}
+        ${v(this._onNavigate)}
+        ${g()}
         role="toolbar"
         aria-orientation=${this.orientation}
         aria-label=${this.label}
@@ -103,18 +119,18 @@ const a = class a extends m(b) {
     `;
   }
 };
-a.styles = [g];
-let i = a;
-s([
-  d({ type: String })
+n.styles = [_];
+let i = n;
+a([
+  u({ type: String })
 ], i.prototype, "label");
-s([
-  d({ type: String })
+a([
+  u({ type: String })
 ], i.prototype, "orientation");
-s([
-  f("#root", !0)
+a([
+  p("#root", !0)
 ], i.prototype, "_$root");
 export {
   i as R
 };
-//# sourceMappingURL=rc-toolbar-BPcEdxN8.js.map
+//# sourceMappingURL=rc-toolbar-Bzh9yptT.js.map

package/dist/rc-toolbar-Bzh9yptT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-toolbar-Bzh9yptT.js","sources":["../src/rc-toolbar.styles.ts","../src/rc-toolbar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const toolbarStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  #root {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: var(--rc-toolbar-flex-wrap, nowrap);\n    gap: var(--rc-toolbar-gap-inline, var(--rc-control-gap, 0.25em));\n    padding-inline: var(\n      --rc-toolbar-padding-inline,\n      calc(var(--rc-control-padding-inline, 0.5em) / 2)\n    );\n    padding-block: var(\n      --rc-toolbar-padding-block,\n      calc(var(--rc-control-padding-block, 0.25em) / 2)\n    );\n    border-radius: var(--rc-toolbar-radius, var(--rc-control-radius, 0));\n    font-family: var(--rc-font-family, inherit);\n    font-size: var(--rc-font-size, inherit);\n    line-height: var(--rc-line-height, normal);\n\n    &[aria-orientation='vertical'] {\n      flex-direction: column;\n      border-radius: var(\n        --rc-toolbar-vertical-radius,\n        var(--rc-toolbar-radius, var(--rc-control-radius, 0))\n      );\n    }\n\n    /* because :has(:focus-visible) doesn't work across slot boundary */\n    &[data-interaction-mode='keyboard']:focus-within {\n      outline: var(--rc-focus-ring, auto);\n      outline-offset: var(--rc-focus-ring-offset, 0);\n    }\n  }\n\n  #slot-wrap {\n    display: contents;\n  }\n`;\n\nexport default toolbarStyles;\n","import { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport {\n  isFocusable,\n  keyInteraction,\n  keyNavigation,\n  type KeyboardNavigationAction,\n  RovingTabIndexMixin,\n} from '@rcarls/rc-common';\n\nimport toolbarStyles from './rc-toolbar.styles';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-toolbar': RCToolbar;\n  }\n}\n\n/**\n * Toolbar that groups consumer-supplied controls into one tab stop with arrow-key\n * navigation, following the WAI-ARIA Toolbar pattern.\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-toolbar rc-toolbar docs}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/ WAI-ARIA Toolbar pattern}\n *\n * @slot Takes any number of child controls, `rc-button`, or `rc-chip` elements\n *   to display in the toolbar. Direct native controls and the native buttons\n *   inside supported wrappers are navigable.\n * @attr label - Accessible label for this toolbar. Default label is 'Toolbar'.\n * @attr orientation - Toolbar orientation, for keyboard navigation.\n * @cssprop [--rc-toolbar-gap-inline=0.25em] - Gap between toolbar items\n * @cssprop [--rc-toolbar-padding-inline=calc(var(--rc-control-padding-inline) / 2)] - Horizontal padding on the toolbar container\n * @cssprop [--rc-toolbar-padding-block=calc(var(--rc-control-padding-block) / 2)] - Vertical padding on the toolbar container\n * @cssprop [--rc-toolbar-flex-wrap=nowrap] - Whether toolbar items wrap onto multiple lines\n * @cssprop [--rc-toolbar-radius=var(--rc-control-radius)] - Toolbar container border radius\n * @cssprop [--rc-toolbar-vertical-radius=var(--rc-toolbar-radius)] - Toolbar container border radius when orientation is vertical; falls back to `--rc-toolbar-radius`\n * @csspart root - The toolbar container element\n */\nexport class RCToolbar extends RovingTabIndexMixin(LitElement) {\n  static styles = [toolbarStyles];\n\n  /** Accessible label for this toolbar. Default label is 'Toolbar'. */\n  @property({ type: String })\n  label = 'Toolbar';\n\n  /** Toolbar orientation, for keyboard navigation. */\n  @property({ type: String })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  @query('#root', true)\n  protected _$root!: HTMLDivElement;\n\n  protected readonly _disabledObserver = new MutationObserver(() => this._syncTabStop());\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._disabledObserver.observe(this, { attributeFilter: ['disabled'], subtree: true });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._disabledObserver.disconnect();\n  }\n\n  protected _syncTabStop(): void {\n    if (!this._lastFocused || isFocusable(this._lastFocused)) {\n      return;\n    }\n\n    this._lastFocused = undefined;\n    this._initItems();\n  }\n\n  protected override _initItems() {\n    // Set tabindex synchronously so items are in the tab order immediately,\n    // even if the document has no focus yet (focus() would be a no-op).\n    super._initItems();\n\n    // Defer focus to avoid firing focusin/focusout inside a SolidJS reactive\n    // update cycle, which can cause the update to hang.\n    // Guard: only restore focus when the toolbar already contains it — prevents\n    // focus-stealing when a toolbar mounts inside a larger component (e.g. rc-transfer-list).\n    const $target = this._lastFocused ?? this.firstItem;\n\n    queueMicrotask(() => {\n      if (this.matches(':focus-within')) {\n        this.focusItem($target);\n      }\n    });\n  }\n\n  protected _onNavigate(action: KeyboardNavigationAction) {\n    switch (action) {\n      case 'next':\n        this.focusItem(this.nextItem);\n        break;\n      case 'prev':\n        this.focusItem(this.previousItem);\n        break;\n      case 'start':\n        this.focusItem(this.firstItem);\n        break;\n      case 'end':\n        this.focusItem(this.lastItem);\n        break;\n    }\n  }\n\n  protected override _collectItems($slot: HTMLSlotElement): Element[] {\n    return $slot.assignedElements().flatMap(($element) => {\n      if ($element.matches('rc-button, rc-chip')) {\n        const $button = $element.querySelector(':scope > button');\n\n        return $button ? [$button] : [];\n      }\n\n      return this._isToolbarItem($element) ? [$element] : [];\n    });\n  }\n\n  protected _isToolbarItem($el: Element): boolean {\n    if (\n      $el instanceof HTMLButtonElement ||\n      $el instanceof HTMLInputElement ||\n      $el instanceof HTMLSelectElement ||\n      $el instanceof HTMLTextAreaElement\n    ) {\n      return true;\n    }\n\n    if ($el instanceof HTMLAnchorElement || $el instanceof HTMLAreaElement) {\n      return $el.hasAttribute('href');\n    }\n\n    const role = $el.getAttribute('role');\n\n    if (\n      role === 'button' ||\n      role === 'checkbox' ||\n      role === 'link' ||\n      role === 'menuitem' ||\n      role === 'radio' ||\n      role === 'slider' ||\n      role === 'spinbutton' ||\n      role === 'switch' ||\n      role === 'textbox'\n    ) {\n      return true;\n    }\n\n    return isFocusable($el);\n  }\n\n  protected render() {\n    return html`\n      <div\n        id=\"root\"\n        part=\"root\"\n        ${keyNavigation(this._onNavigate)}\n        ${keyInteraction()}\n        role=\"toolbar\"\n        aria-orientation=${this.orientation}\n        aria-label=${this.label}\n      >\n        <div id=\"slot-wrap\" @focusin=${this._handleItemFocus}>\n          <slot id=\"items\" @slotchange=${this._onSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default RCToolbar;\n"],"names":["toolbarStyles","css","_RCToolbar","RovingTabIndexMixin","LitElement","isFocusable","$target","action","$slot","$element","$button","$el","role","html","keyNavigation","keyInteraction","RCToolbar","__decorateClass","property","query"],"mappings":"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"}

package/dist/rc-toolbar-define.js

@@ -1,4 +1,4 @@
-import { R as o } from "./rc-toolbar-BPcEdxN8.js";
+import { R as o } from "./rc-toolbar-Bzh9yptT.js";
 customElements.get("rc-toolbar") || customElements.define("rc-toolbar", o);
 export {
   o as RCToolbar

package/dist/rc-toolbar.js

@@ -1,4 +1,4 @@
-import { R as a } from "./rc-toolbar-BPcEdxN8.js";
+import { R as a } from "./rc-toolbar-Bzh9yptT.js";
 export {
   a as RCToolbar
 };

package/dist/types/packages/rc-toolbar/src/rc-toolbar.d.ts

@@ -13,10 +13,15 @@ declare const RCToolbar_base: typeof LitElement & (new (...args: any[]) => impor
  * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-toolbar rc-toolbar docs}
  * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/ WAI-ARIA Toolbar pattern}
  *
- * @slot Takes any number of child elements to display in the toolbar. Only focusable elements are navigable.
+ * @slot Takes any number of child controls, `rc-button`, or `rc-chip` elements
+ *   to display in the toolbar. Direct native controls and the native buttons
+ *   inside supported wrappers are navigable.
+ * @attr label - Accessible label for this toolbar. Default label is 'Toolbar'.
+ * @attr orientation - Toolbar orientation, for keyboard navigation.
  * @cssprop [--rc-toolbar-gap-inline=0.25em] - Gap between toolbar items
  * @cssprop [--rc-toolbar-padding-inline=calc(var(--rc-control-padding-inline) / 2)] - Horizontal padding on the toolbar container
  * @cssprop [--rc-toolbar-padding-block=calc(var(--rc-control-padding-block) / 2)] - Vertical padding on the toolbar container
+ * @cssprop [--rc-toolbar-flex-wrap=nowrap] - Whether toolbar items wrap onto multiple lines
  * @cssprop [--rc-toolbar-radius=var(--rc-control-radius)] - Toolbar container border radius
  * @cssprop [--rc-toolbar-vertical-radius=var(--rc-toolbar-radius)] - Toolbar container border radius when orientation is vertical; falls back to `--rc-toolbar-radius`
  * @csspart root - The toolbar container element
@@ -28,14 +33,14 @@ export declare class RCToolbar extends RCToolbar_base {
     /** Toolbar orientation, for keyboard navigation. */
     orientation: 'horizontal' | 'vertical';
     protected _$root: HTMLDivElement;
-    private readonly _disabledObserver;
+    protected readonly _disabledObserver: MutationObserver;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    private _syncTabStop;
+    protected _syncTabStop(): void;
     protected _initItems(): void;
     protected _onNavigate(action: KeyboardNavigationAction): void;
-    protected _collectItems(slot: HTMLSlotElement): Element[];
-    private _isToolbarItem;
+    protected _collectItems($slot: HTMLSlotElement): Element[];
+    protected _isToolbarItem($el: Element): boolean;
     protected render(): import('lit').TemplateResult<1>;
 }
 export default RCToolbar;

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Toolbar that groups consumer-supplied controls into one tab stop with arrow-key navigation.",
   "repository": {
     "type": "git",

package/dist/rc-toolbar-BPcEdxN8.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"rc-toolbar-BPcEdxN8.js","sources":["../src/rc-toolbar.styles.ts","../src/rc-toolbar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const toolbarStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  #root {\n    display: flex;\n    flex-direction: row;\n    gap: var(--rc-toolbar-gap-inline, var(--rc-control-gap, 0.25em));\n    padding-inline: var(--rc-toolbar-padding-inline, calc(var(--rc-control-padding-inline, 0.5em) / 2));\n    padding-block: var(--rc-toolbar-padding-block, calc(var(--rc-control-padding-block, 0.25em) / 2));\n    border-radius: var(--rc-toolbar-radius, var(--rc-control-radius, 0));\n    font-family: var(--rc-font-family, inherit);\n    font-size: var(--rc-font-size, inherit);\n    line-height: var(--rc-line-height, normal);\n\n    &[aria-orientation='vertical'] {\n      flex-direction: column;\n      border-radius: var(--rc-toolbar-vertical-radius, var(--rc-toolbar-radius, var(--rc-control-radius, 0)));\n    }\n\n    /* because :has(:focus-visible) doens't work across slot boundary */\n    &[data-interaction-mode='keyboard']:focus-within {\n      outline: var(--rc-focus-ring, auto);\n      outline-offset: var(--rc-focus-ring-offset, 0);\n    }\n  }\n\n  #slot-wrap {\n    display: contents;\n  }\n`;\n\nexport default toolbarStyles;\n","import { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport {\n  isFocusable,\n  keyInteraction,\n  keyNavigation,\n  type KeyboardNavigationAction,\n  RovingTabIndexMixin,\n} from '@rcarls/rc-common';\n\nimport toolbarStyles from './rc-toolbar.styles';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-toolbar': RCToolbar;\n  }\n}\n\n/**\n * Toolbar that groups consumer-supplied controls into one tab stop with arrow-key\n * navigation, following the WAI-ARIA Toolbar pattern.\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-toolbar rc-toolbar docs}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/ WAI-ARIA Toolbar pattern}\n *\n * @slot Takes any number of child elements to display in the toolbar. Only focusable elements are navigable.\n * @cssprop [--rc-toolbar-gap-inline=0.25em] - Gap between toolbar items\n * @cssprop [--rc-toolbar-padding-inline=calc(var(--rc-control-padding-inline) / 2)] - Horizontal padding on the toolbar container\n * @cssprop [--rc-toolbar-padding-block=calc(var(--rc-control-padding-block) / 2)] - Vertical padding on the toolbar container\n * @cssprop [--rc-toolbar-radius=var(--rc-control-radius)] - Toolbar container border radius\n * @cssprop [--rc-toolbar-vertical-radius=var(--rc-toolbar-radius)] - Toolbar container border radius when orientation is vertical; falls back to `--rc-toolbar-radius`\n * @csspart root - The toolbar container element\n */\nexport class RCToolbar extends RovingTabIndexMixin(LitElement) {\n  static styles = [toolbarStyles];\n\n  /** Accessible label for this toolbar. Default label is 'Toolbar'. */\n  @property({ type: String })\n  label = 'Toolbar';\n\n  /** Toolbar orientation, for keyboard navigation. */\n  @property({ type: String })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  @query('#root', true)\n  protected _$root!: HTMLDivElement;\n\n  private readonly _disabledObserver = new MutationObserver(() => this._syncTabStop());\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._disabledObserver.observe(this, { attributeFilter: ['disabled'], subtree: true });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._disabledObserver.disconnect();\n  }\n\n  private _syncTabStop(): void {\n    if (!this._lastFocused || isFocusable(this._lastFocused)) return;\n    this._lastFocused = undefined;\n    this._initItems();\n  }\n\n  protected override _initItems() {\n    // Set tabindex synchronously so items are in the tab order immediately,\n    // even if the document has no focus yet (focus() would be a no-op).\n    super._initItems();\n\n    // Defer focus to avoid firing focusin/focusout inside a SolidJS reactive\n    // update cycle, which can cause the update to hang.\n    // Guard: only restore focus when the toolbar already contains it — prevents\n    // focus-stealing when a toolbar mounts inside a larger component (e.g. rc-transfer-list).\n    const target = this._lastFocused ?? this.firstItem;\n    queueMicrotask(() => {\n      if (this.matches(':focus-within')) this.focusItem(target);\n    });\n  }\n\n  protected _onNavigate(action: KeyboardNavigationAction) {\n    switch (action) {\n      case 'next':\n        this.focusItem(this.nextItem);\n        break;\n      case 'prev':\n        this.focusItem(this.previousItem);\n        break;\n      case 'start':\n        this.focusItem(this.firstItem);\n        break;\n      case 'end':\n        this.focusItem(this.lastItem);\n        break;\n    }\n  }\n\n  protected override _collectItems(slot: HTMLSlotElement): Element[] {\n    return slot.assignedElements().filter((el) => this._isToolbarItem(el));\n  }\n\n  private _isToolbarItem(el: Element): boolean {\n    if (\n      el instanceof HTMLButtonElement ||\n      el instanceof HTMLInputElement ||\n      el instanceof HTMLSelectElement ||\n      el instanceof HTMLTextAreaElement\n    ) {\n      return true;\n    }\n\n    if (el instanceof HTMLAnchorElement || el instanceof HTMLAreaElement) {\n      return el.hasAttribute('href');\n    }\n\n    const role = el.getAttribute('role');\n    if (\n      role === 'button' ||\n      role === 'checkbox' ||\n      role === 'link' ||\n      role === 'menuitem' ||\n      role === 'radio' ||\n      role === 'slider' ||\n      role === 'spinbutton' ||\n      role === 'switch' ||\n      role === 'textbox'\n    ) {\n      return true;\n    }\n\n    return isFocusable(el);\n  }\n\n  protected render() {\n    return html`\n      <div\n        id=\"root\"\n        part=\"root\"\n        ${keyNavigation(this._onNavigate)}\n        ${keyInteraction()}\n        role=\"toolbar\"\n        aria-orientation=${this.orientation}\n        aria-label=${this.label}\n      >\n        <div id=\"slot-wrap\" @focusin=${this._handleItemFocus}>\n          <slot id=\"items\" @slotchange=${this._onSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default RCToolbar;\n"],"names":["toolbarStyles","css","_RCToolbar","RovingTabIndexMixin","LitElement","isFocusable","target","action","slot","el","role","html","keyNavigation","keyInteraction","RCToolbar","__decorateClass","property","query"],"mappings":";;;AAEO,MAAMA,IAAgBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACgCtB,MAAMC,IAAN,MAAMA,UAAkBC,EAAoBC,CAAU,EAAE;AAAA,EAAxD,cAAA;AAAA,UAAA,GAAA,SAAA,GAKL,KAAA,QAAQ,WAIR,KAAA,cAAyC,cAKzC,KAAiB,oBAAoB,IAAI,iBAAiB,MAAM,KAAK,cAAc;AAAA,EAAA;AAAA,EAE1E,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,kBAAkB,QAAQ,MAAM,EAAE,iBAAiB,CAAC,UAAU,GAAG,SAAS,IAAM;AAAA,EACvF;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,kBAAkB,WAAA;AAAA,EACzB;AAAA,EAEQ,eAAqB;AAC3B,IAAI,CAAC,KAAK,gBAAgBC,EAAY,KAAK,YAAY,MACvD,KAAK,eAAe,QACpB,KAAK,WAAA;AAAA,EACP;AAAA,EAEmB,aAAa;AAG9B,UAAM,WAAA;AAMN,UAAMC,IAAS,KAAK,gBAAgB,KAAK;AACzC,mBAAe,MAAM;AACnB,MAAI,KAAK,QAAQ,eAAe,KAAG,KAAK,UAAUA,CAAM;AAAA,IAC1D,CAAC;AAAA,EACH;AAAA,EAEU,YAAYC,GAAkC;AACtD,YAAQA,GAAA;AAAA,MACN,KAAK;AACH,aAAK,UAAU,KAAK,QAAQ;AAC5B;AAAA,MACF,KAAK;AACH,aAAK,UAAU,KAAK,YAAY;AAChC;AAAA,MACF,KAAK;AACH,aAAK,UAAU,KAAK,SAAS;AAC7B;AAAA,MACF,KAAK;AACH,aAAK,UAAU,KAAK,QAAQ;AAC5B;AAAA,IAAA;AAAA,EAEN;AAAA,EAEmB,cAAcC,GAAkC;AACjE,WAAOA,EAAK,mBAAmB,OAAO,CAACC,MAAO,KAAK,eAAeA,CAAE,CAAC;AAAA,EACvE;AAAA,EAEQ,eAAeA,GAAsB;AAC3C,QACEA,aAAc,qBACdA,aAAc,oBACdA,aAAc,qBACdA,aAAc;AAEd,aAAO;AAGT,QAAIA,aAAc,qBAAqBA,aAAc;AACnD,aAAOA,EAAG,aAAa,MAAM;AAG/B,UAAMC,IAAOD,EAAG,aAAa,MAAM;AACnC,WACEC,MAAS,YACTA,MAAS,cACTA,MAAS,UACTA,MAAS,cACTA,MAAS,WACTA,MAAS,YACTA,MAAS,gBACTA,MAAS,YACTA,MAAS,YAEF,KAGFL,EAAYI,CAAE;AAAA,EACvB;AAAA,EAEU,SAAS;AACjB,WAAOE;AAAA;AAAA;AAAA;AAAA,UAIDC,EAAc,KAAK,WAAW,CAAC;AAAA,UAC/BC,GAAgB;AAAA;AAAA,2BAEC,KAAK,WAAW;AAAA,qBACtB,KAAK,KAAK;AAAA;AAAA,uCAEQ,KAAK,gBAAgB;AAAA,yCACnB,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA,EAIzD;AACF;AApHEX,EAAO,SAAS,CAACF,CAAa;AADzB,IAAMc,IAANZ;AAKLa,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAJfF,EAKX,WAAA,OAAA;AAIAC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GARfF,EASX,WAAA,aAAA;AAGUC,EAAA;AAAA,EADTE,EAAM,SAAS,EAAI;AAAA,GAXTH,EAYD,WAAA,QAAA;"}