@rcarls/rc-toolbar 0.2.0 → 0.3.0

package/README.md

@@ -1,6 +1,8 @@
 # `@rcarls/rc-toolbar`
 
-A WAI-ARIA compliant toolbar component implementing the [Toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/). Manages roving tabindex across slotted controls so the toolbar acts as a single tab stop with arrow-key internal navigation. Built with [Lit 3](https://lit.dev).
+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).
 
 ---
 
@@ -52,28 +54,30 @@ Vertical orientation:
 ### 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. |
 
 ### 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 |
+| `--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. |
 
 ### Events
@@ -107,7 +111,7 @@ previousItem: HTMLElement | undefined
 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) |
@@ -121,7 +125,7 @@ The toolbar is a single tab stop. Arrow keys navigate within it.
 ## ARIA
 
 | Attribute | Where | Value |
-|---|---|---|
+| --- | --- | --- |
 | `role="toolbar"` | Root `div` | — |
 | `aria-orientation` | Root `div` | `"horizontal"` or `"vertical"` |
 | `aria-label` | Root `div` | Value of `label` property |

package/dist/custom-elements.json

@@ -46,7 +46,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A toolbar component, as defined in WAI-ARIA",
+          "description": "Toolbar that groups consumer-supplied controls into one tab stop with arrow-key\nnavigation, following the WAI-ARIA Toolbar pattern.",
           "name": "RCToolbar",
           "cssProperties": [
             {
@@ -68,6 +68,11 @@
               "description": "Toolbar container border radius",
               "name": "--rc-toolbar-radius",
               "default": "var(--rc-control-radius)"
+            },
+            {
+              "description": "Toolbar container border radius when orientation is vertical; falls back to `--rc-toolbar-radius`",
+              "name": "--rc-toolbar-vertical-radius",
+              "default": "var(--rc-toolbar-radius)"
             }
           ],
           "cssParts": [

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

@@ -1,7 +1,7 @@
-import { css as u, LitElement as h, html as b } from "lit";
+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 } from "@rcarls/rc-common";
-const v = u`
+import { RovingTabIndexMixin as m, isFocusable as l, keyNavigation as p, keyInteraction as v } from "@rcarls/rc-common";
+const g = u`
   :host {
     display: inline-block;
   }
@@ -19,6 +19,7 @@ const v = u`
 
     &[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) doens't work across slot boundary */
@@ -32,12 +33,12 @@ const v = u`
     display: contents;
   }
 `;
-var g = Object.defineProperty, s = (a, t, e, _) => {
-  for (var i = void 0, o = a.length - 1, c; o >= 0; o--)
-    (c = a[o]) && (i = c(t, e, i) || i);
-  return i && g(t, e, i), i;
+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;
 };
-const n = class n extends m(h) {
+const a = class a extends m(b) {
   constructor() {
     super(...arguments), this.label = "Toolbar", this.orientation = "horizontal", this._disabledObserver = new MutationObserver(() => this._syncTabStop());
   }
@@ -85,12 +86,12 @@ const n = class n extends m(h) {
     return e === "button" || e === "checkbox" || e === "link" || e === "menuitem" || e === "radio" || e === "slider" || e === "spinbutton" || e === "switch" || e === "textbox" ? !0 : l(t);
   }
   render() {
-    return b`
+    return h`
       <div
         id="root"
         part="root"
         ${p(this._onNavigate)}
-        data-interaction-mode="keyboard"
+        ${v()}
         role="toolbar"
         aria-orientation=${this.orientation}
         aria-label=${this.label}
@@ -102,18 +103,18 @@ const n = class n extends m(h) {
     `;
   }
 };
-n.styles = [v];
-let r = n;
+a.styles = [g];
+let i = a;
 s([
   d({ type: String })
-], r.prototype, "label");
+], i.prototype, "label");
 s([
   d({ type: String })
-], r.prototype, "orientation");
+], i.prototype, "orientation");
 s([
   f("#root", !0)
-], r.prototype, "_$root");
+], i.prototype, "_$root");
 export {
-  r as R
+  i as R
 };
-//# sourceMappingURL=rc-toolbar-D7nv57AW.js.map
+//# sourceMappingURL=rc-toolbar-BPcEdxN8.js.map

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

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

package/dist/rc-toolbar-define.js

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

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

@@ -7,14 +7,18 @@ declare global {
 }
 declare const RCToolbar_base: typeof LitElement & (new (...args: any[]) => import('@rcarls/rc-common').RovingTabIndexMixinBase);
 /**
- * A toolbar component, as defined in WAI-ARIA
+ * Toolbar that groups consumer-supplied controls into one tab stop with arrow-key
+ * navigation, following the WAI-ARIA Toolbar pattern.
+ *
+ * @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}
  *
- * @see https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/
  * @slot Takes any number of child elements to display in the toolbar. Only focusable elements are navigable.
  * @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-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
  */
 export declare class RCToolbar extends RCToolbar_base {

package/package.json

@@ -3,14 +3,14 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.0",
-  "description": "Headless WAI-ARIA toolbar web component built with Lit",
+  "version": "0.3.0",
+  "description": "Toolbar that groups consumer-supplied controls into one tab stop with arrow-key navigation.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
     "directory": "packages/rc-toolbar"
   },
-  "homepage": "https://github.com/richardcarls/rc-webcomponents#readme",
+  "homepage": "https://richardcarls.github.io/rc-webcomponents/components/rc-toolbar",
   "license": "MIT",
   "type": "module",
   "files": [
@@ -37,21 +37,18 @@
   ],
   "customElements": "dist/custom-elements.json",
   "scripts": {
-    "dev": "vite",
     "build": "tsc && vite build && cem analyze",
     "cem:analyze": "cem analyze",
     "preview": "vite preview",
-    "test:browser": "vitest",
-    "test:browser:chrome": "vitest --project=chromium",
-    "test:browser:firefox": "vitest --project=firefox",
-    "yalc:publish": "yalc publish --push"
+    "test:browser": "vitest --run",
+    "test:browser:chrome": "vitest --run --project=chromium",
+    "test:browser:firefox": "vitest --run --project=firefox"
   },
   "dependencies": {
-    "@rcarls/rc-common": "workspace:^"
+    "@rcarls/rc-common": "workspace:*"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.11.0",
-    "@guanghechen/rollup-plugin-copy": "^6.0.9",
     "@vitest/browser-playwright": "4.1.5",
     "lit": "^3.0.0",
     "playwright": "^1.56.0",

package/dist/demo.css

@@ -1,85 +0,0 @@
-*, *::before, *::after {
-  box-sizing: border-box;
-}
-
-:root {
-  color-scheme: light dark;
-  --rc-accent: Highlight; /* Chrome doesn't support AccentColor on the open web */
-}
-
-@supports (color: AccentColor) {
-  :root {
-    --rc-accent: AccentColor;
-  }
-}
-
-[data-theme="light"] { color-scheme: light; }
-[data-theme="dark"]  { color-scheme: dark;  }
-
-[data-theme="solarized-light"] {
-  color-scheme: light;
-  --rc-surface: #fdf6e3;
-  --rc-text:    #657b83;
-  --rc-border:  1px solid #93a1a1;
-  --rc-shadow:  0 2px 8px rgba(0, 0, 0, .12);
-}
-
-[data-theme="solarized-dark"] {
-  color-scheme: dark;
-  --rc-surface: #002b36;
-  --rc-text:    #839496;
-  --rc-border:  1px solid #586e75;
-  --rc-shadow:  0 2px 8px rgba(0, 0, 0, .3);
-}
-
-body {
-  font-family: system-ui, sans-serif;
-  margin: 0;
-}
-
-.demo-page {
-  max-width: 60rem;
-  margin: 0 auto;
-  padding: 2rem 1.5rem;
-}
-
-.demo-controls {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: 2rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid ButtonBorder;
-}
-
-.demo-controls .demo-title {
-  flex: 1;
-}
-
-.demo-controls h1 {
-  margin: 0 0 0.15rem;
-  font-size: 1.5rem;
-}
-
-.demo-controls a {
-  font-size: 0.8rem;
-}
-
-.demo-section {
-  margin-bottom: 2rem;
-}
-
-.demo-section h2 {
-  margin: 0 0 0.5rem;
-}
-
-.theme-picker {
-  padding: 0.35em 0.75em;
-  font-family: inherit;
-  font-size: 0.8rem;
-  cursor: pointer;
-  border: 1px solid ButtonBorder;
-  border-radius: 4px;
-  background: Canvas;
-  color: CanvasText;
-}

package/dist/demo.js

@@ -1,40 +0,0 @@
-const THEMES = ['', 'light', 'dark', 'solarized-light', 'solarized-dark'];
-const LABELS = ['Auto', 'Light', 'Dark', 'Solarized ☀', 'Solarized ☾'];
-
-const stored = localStorage.getItem('rc-demo-theme') ?? '';
-applyTheme(stored);
-
-function applyTheme(theme) {
-  if (theme) {
-    document.documentElement.dataset.theme = theme;
-  } else {
-    delete document.documentElement.dataset.theme;
-  }
-}
-
-function currentIndex() {
-  const current = document.documentElement.dataset.theme ?? '';
-  const idx = THEMES.indexOf(current);
-  return idx === -1 ? 0 : idx;
-}
-
-function updateButtons() {
-  const label = LABELS[currentIndex()];
-  document.querySelectorAll('.theme-picker').forEach((btn) => {
-    btn.textContent = label;
-  });
-}
-
-window.cycleTheme = function () {
-  const next = THEMES[(currentIndex() + 1) % THEMES.length];
-  applyTheme(next);
-  localStorage.setItem('rc-demo-theme', next);
-  updateButtons();
-};
-
-document.addEventListener('DOMContentLoaded', () => {
-  updateButtons();
-  document.querySelectorAll('.theme-picker').forEach((btn) => {
-    btn.addEventListener('click', window.cycleTheme);
-  });
-});

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

@@ -1 +0,0 @@
-{"version":3,"file":"rc-toolbar-D7nv57AW.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    }\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  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 * A toolbar component, as defined in WAI-ARIA\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/\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 * @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        data-interaction-mode=\"keyboard\"\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","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;;;;;;AC2BtB,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;AAAA;AAAA,2BAGd,KAAK,WAAW;AAAA,qBACtB,KAAK,KAAK;AAAA;AAAA,uCAEQ,KAAK,gBAAgB;AAAA,yCACnB,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA,EAIzD;AACF;AApHEV,EAAO,SAAS,CAACF,CAAa;AADzB,IAAMa,IAANX;AAKLY,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;"}