@rcarls/rc-toolbar 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,70 @@
 # @rcarls/rc-toolbar
 
+## 0.7.0
+
+### Minor Changes
+
+- 11680b6: Expose and navigate the orientation a widget actually renders in. An
+  `orientation` attribute names a layout: `horizontal` runs along the inline
+  axis and `vertical` along the block axis, so both turn over in vertical
+  writing modes, the way a native `<input type="range">` does. Toolbar,
+  menubar, and adaptive menu now report the rendered orientation as
+  `aria-orientation`, and their arrow keys follow it, so a horizontal toolbar
+  in vertical text navigates with ArrowDown.
+
+  `keyNavigation` treats an explicit `navigationAxis` and role defaults as
+  layout orientations and converts them the same way; an explicit
+  `aria-orientation` attribute is still used as is. Add `renderedOrientation`
+  and a `FlowController` that keeps a host's writing mode and direction current
+  for rendering.
+
+  `rc-toolbar` now reflects `orientation` to its host attribute, and its
+  vertical layout is keyed off that attribute rather than `aria-orientation`.
+
+### Patch Changes
+
+- 5c006de: Ship component CSS minified. Package builds now run the CSS in Lit `css` styles
+  and light-DOM structural styles through Lightning CSS, removing comments and
+  whitespace while keeping source maps that resolve to each template. Rendered
+  styles are unchanged.
+
+  `@rcarls/rc-common` adds `cssText`, an identity tag that marks a plain CSS
+  string for minification. `rc-chip`, `rc-disclosure`, and `rc-accordion` now
+  depend on `@rcarls/rc-common` for it.
+
+- Updated dependencies [e3dfa59]
+- Updated dependencies [50d5610]
+- Updated dependencies [9ee769c]
+- Updated dependencies [1179f24]
+- Updated dependencies [595fe37]
+- Updated dependencies [38cd00c]
+- Updated dependencies [5c006de]
+- Updated dependencies [a6553ff]
+- Updated dependencies [2205478]
+- Updated dependencies [4341311]
+- Updated dependencies [899bb5e]
+- Updated dependencies [25fcfe0]
+- Updated dependencies [51f6403]
+- Updated dependencies [9caca6b]
+- Updated dependencies [b764a3c]
+- Updated dependencies [54d9ead]
+- Updated dependencies [b9175e9]
+- Updated dependencies [c8b762b]
+- Updated dependencies [55e1e7f]
+- Updated dependencies [f1ca82d]
+- Updated dependencies [b87f27b]
+- Updated dependencies [32ebead]
+- Updated dependencies [bfefedd]
+- Updated dependencies [c130173]
+- Updated dependencies [11680b6]
+- Updated dependencies [223d36c]
+- Updated dependencies [7b91a44]
+- Updated dependencies [aa04ead]
+- Updated dependencies [ac65b5b]
+- Updated dependencies [afcfef8]
+- Updated dependencies [11ef1ad]
+  - @rcarls/rc-common@0.7.0
+
 ## 0.6.0
 
 ### Patch Changes

package/dist/custom-elements.json

@@ -110,8 +110,17 @@
                 "text": "'horizontal' | 'vertical'"
               },
               "default": "'horizontal'",
-              "description": "Toolbar orientation, for keyboard navigation.",
-              "attribute": "orientation"
+              "description": "Toolbar layout along the inline (`horizontal`) or block (`vertical`) axis.",
+              "attribute": "orientation",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "_flow",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new FlowController(this)",
+              "description": "Keeps the exposed aria-orientation on the orientation actually rendered."
             },
             {
               "kind": "field",
@@ -204,7 +213,7 @@
               "fieldName": "label"
             },
             {
-              "description": "Toolbar orientation, for keyboard navigation.",
+              "description": "Toolbar layout along the inline (`horizontal`) or block (`vertical`) axis.",
               "name": "orientation",
               "type": {
                 "text": "'horizontal' | 'vertical'"

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

@@ -1,56 +1,15 @@
-import { css as b, LitElement as h, html as f } from "lit";
+import { css as h, LitElement as b, 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;
-  }
-
-  #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)
-    );
-    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);
-    line-height: var(--rc-line-height, normal);
-
-    &[aria-orientation='vertical'] {
-      flex-direction: column;
-      border-radius: var(
-        --rc-toolbar-vertical-radius,
-        var(--rc-toolbar-radius, var(--rc-control-radius, 0))
-      );
-    }
-
-    /* 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);
-    }
-  }
-
-  #slot-wrap {
-    display: contents;
-  }
-`;
-var y = Object.defineProperty, a = (c, t, e, o) => {
+import { RovingTabIndexMixin as m, FlowController as v, isFocusable as d, keyNavigation as g, keyInteraction as _, renderedOrientation as y } from "@rcarls/rc-common";
+const I = h`:host{display:inline-block}#root{flex-direction:row;flex-wrap:var(--rc-toolbar-flex-wrap,nowrap);gap:var(--rc-toolbar-gap-inline,var(--rc-control-gap,.25em));padding-inline:var(--rc-toolbar-padding-inline,calc(var(--rc-control-padding-inline,.5em) / 2));padding-block:var(--rc-toolbar-padding-block,calc(var(--rc-control-padding-block,.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);line-height:var(--rc-line-height,normal);display:flex;:host([orientation=vertical]) &{border-radius:var(--rc-toolbar-vertical-radius,var(--rc-toolbar-radius,var(--rc-control-radius,0)));flex-direction:column}&[data-interaction-mode=keyboard]:focus-within{outline:var(--rc-focus-ring,auto);outline-offset:var(--rc-focus-ring-offset,0)}}#slot-wrap{display:contents}`;
+var k = 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;
+  return r && k(t, e, r), r;
 };
-const n = class n extends m(h) {
+const n = class n extends m(b) {
   constructor() {
-    super(...arguments), this.label = "Toolbar", this.orientation = "horizontal", this._disabledObserver = new MutationObserver(() => this._syncTabStop());
+    super(...arguments), this.label = "Toolbar", this.orientation = "horizontal", this._flow = new v(this), this._disabledObserver = new MutationObserver(() => this._syncTabStop());
   }
   connectedCallback() {
     super.connectedCallback(), this._disabledObserver.observe(this, { attributeFilter: ["disabled"], subtree: !0 });
@@ -106,10 +65,10 @@ const n = class n extends m(h) {
       <div
         id="root"
         part="root"
-        ${v(this._onNavigate)}
-        ${g()}
+        ${g(this._onNavigate)}
+        ${_()}
         role="toolbar"
-        aria-orientation=${this.orientation}
+        aria-orientation=${y(this.orientation, this._flow.flow)}
         aria-label=${this.label}
       >
         <div id="slot-wrap" @focusin=${this._handleItemFocus}>
@@ -119,13 +78,13 @@ const n = class n extends m(h) {
     `;
   }
 };
-n.styles = [_];
+n.styles = [I];
 let i = n;
 a([
   u({ type: String })
 ], i.prototype, "label");
 a([
-  u({ type: String })
+  u({ type: String, reflect: !0 })
 ], i.prototype, "orientation");
 a([
   p("#root", !0)
@@ -133,4 +92,4 @@ a([
 export {
   i as R
 };
-//# sourceMappingURL=rc-toolbar-Bzh9yptT.js.map
+//# sourceMappingURL=rc-toolbar-CIRFuRyL.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rc-toolbar-CIRFuRyL.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    /*\n     * Layout keys off the author's orientation, not aria-orientation: the\n     * exposed value reports the rendered orientation, which turns over in\n     * vertical writing modes while the layout axis does not.\n     */\n    :host([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  FlowController,\n  isFocusable,\n  keyInteraction,\n  keyNavigation,\n  type KeyboardNavigationAction,\n  renderedOrientation,\n  RovingTabIndexMixin,\n} from '@rcarls/rc-common';\n\nimport toolbarStyles from './rc-toolbar.styles.js';\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 layout: `horizontal` lays items along the inline axis,\n *   `vertical` along the block axis. Both turn over in vertical writing modes, and\n *   `aria-orientation` and the arrow keys follow the orientation actually rendered.\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 layout along the inline (`horizontal`) or block (`vertical`) axis. */\n  @property({ type: String, reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** Keeps the exposed aria-orientation on the orientation actually rendered. */\n  protected readonly _flow = new FlowController(this);\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=${renderedOrientation(this.orientation, this._flow.flow)}\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","FlowController","isFocusable","$target","action","$slot","$element","$button","$el","role","html","keyNavigation","keyInteraction","renderedOrientation","RCToolbar","__decorateClass","property","query"],"mappings":";;;AAEO,MAAMA,IAAgBC;;;;;;ACyCtB,MAAMC,IAAN,MAAMA,UAAkBC,EAAoBC,CAAU,EAAE;AAAA,EAAxD,cAAA;AAAA,UAAA,GAAA,SAAA,GAKL,KAAA,QAAQ,WAIR,KAAA,cAAyC,cAGzC,KAAmB,QAAQ,IAAIC,EAAe,IAAI,GAKlD,KAAmB,oBAAoB,IAAI,iBAAiB,MAAM,KAAK,cAAc;AAAA,EAAA;AAAA,EAE5E,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,EAEU,eAAqB;AAC7B,IAAI,CAAC,KAAK,gBAAgBC,EAAY,KAAK,YAAY,MAIvD,KAAK,eAAe,QACpB,KAAK,WAAA;AAAA,EACP;AAAA,EAEmB,aAAa;AAG9B,UAAM,WAAA;AAMN,UAAMC,IAAU,KAAK,gBAAgB,KAAK;AAE1C,mBAAe,MAAM;AACnB,MAAI,KAAK,QAAQ,eAAe,KAC9B,KAAK,UAAUA,CAAO;AAAA,IAE1B,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,GAAmC;AAClE,WAAOA,EAAM,iBAAA,EAAmB,QAAQ,CAACC,MAAa;AACpD,UAAIA,EAAS,QAAQ,oBAAoB,GAAG;AAC1C,cAAMC,IAAUD,EAAS,cAAc,iBAAiB;AAExD,eAAOC,IAAU,CAACA,CAAO,IAAI,CAAA;AAAA,MAC/B;AAEA,aAAO,KAAK,eAAeD,CAAQ,IAAI,CAACA,CAAQ,IAAI,CAAA;AAAA,IACtD,CAAC;AAAA,EACH;AAAA,EAEU,eAAeE,GAAuB;AAC9C,QACEA,aAAe,qBACfA,aAAe,oBACfA,aAAe,qBACfA,aAAe;AAEf,aAAO;AAGT,QAAIA,aAAe,qBAAqBA,aAAe;AACrD,aAAOA,EAAI,aAAa,MAAM;AAGhC,UAAMC,IAAOD,EAAI,aAAa,MAAM;AAEpC,WACEC,MAAS,YACTA,MAAS,cACTA,MAAS,UACTA,MAAS,cACTA,MAAS,WACTA,MAAS,YACTA,MAAS,gBACTA,MAAS,YACTA,MAAS,YAEF,KAGFP,EAAYM,CAAG;AAAA,EACxB;AAAA,EAEU,SAAS;AACjB,WAAOE;AAAA;AAAA;AAAA;AAAA,UAIDC,EAAc,KAAK,WAAW,CAAC;AAAA,UAC/BC,GAAgB;AAAA;AAAA,2BAECC,EAAoB,KAAK,aAAa,KAAK,MAAM,IAAI,CAAC;AAAA,qBAC5D,KAAK,KAAK;AAAA;AAAA,uCAEQ,KAAK,gBAAgB;AAAA,yCACnB,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA,EAIzD;AACF;AAtIEf,EAAO,SAAS,CAACF,CAAa;AADzB,IAAMkB,IAANhB;AAKLiB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAJfF,EAKX,WAAA,OAAA;AAIAC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAR9BF,EASX,WAAA,aAAA;AAMUC,EAAA;AAAA,EADTE,EAAM,SAAS,EAAI;AAAA,GAdTH,EAeD,WAAA,QAAA;"}

package/dist/rc-toolbar-define.js

@@ -1,4 +1,4 @@
-import { R as o } from "./rc-toolbar-Bzh9yptT.js";
+import { R as o } from "./rc-toolbar-CIRFuRyL.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-Bzh9yptT.js";
+import { R as a } from "./rc-toolbar-CIRFuRyL.js";
 export {
   a as RCToolbar
 };

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

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { KeyboardNavigationAction } from '@rcarls/rc-common';
+import { FlowController, KeyboardNavigationAction } from '@rcarls/rc-common';
 declare global {
     interface HTMLElementTagNameMap {
         'rc-toolbar': RCToolbar;
@@ -17,7 +17,9 @@ declare const RCToolbar_base: typeof LitElement & (new (...args: any[]) => impor
  *   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.
+ * @attr orientation - Toolbar layout: `horizontal` lays items along the inline axis,
+ *   `vertical` along the block axis. Both turn over in vertical writing modes, and
+ *   `aria-orientation` and the arrow keys follow the orientation actually rendered.
  * @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
@@ -30,8 +32,10 @@ export declare class RCToolbar extends RCToolbar_base {
     static styles: import('lit').CSSResult[];
     /** Accessible label for this toolbar. Default label is 'Toolbar'. */
     label: string;
-    /** Toolbar orientation, for keyboard navigation. */
+    /** Toolbar layout along the inline (`horizontal`) or block (`vertical`) axis. */
     orientation: 'horizontal' | 'vertical';
+    /** Keeps the exposed aria-orientation on the orientation actually rendered. */
+    protected readonly _flow: FlowController;
     protected _$root: HTMLDivElement;
     protected readonly _disabledObserver: MutationObserver;
     connectedCallback(): void;
@@ -41,6 +45,6 @@ export declare class RCToolbar extends RCToolbar_base {
     protected _onNavigate(action: KeyboardNavigationAction): void;
     protected _collectItems($slot: HTMLSlotElement): Element[];
     protected _isToolbarItem($el: Element): boolean;
-    protected render(): import('lit').TemplateResult<1>;
+    protected render(): import('lit-html').TemplateResult<1>;
 }
 export default RCToolbar;

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Toolbar that groups consumer-supplied controls into one tab stop with arrow-key navigation.",
   "repository": {
     "type": "git",
@@ -45,7 +45,7 @@
     "test:browser:firefox": "vitest --run --project=firefox"
   },
   "dependencies": {
-    "@rcarls/rc-common": "0.6.0"
+    "@rcarls/rc-common": "0.7.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.11.0",

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

@@ -1 +0,0 @@
-{"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.js';\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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"}