@rcarls/rc-toolbar 0.1.0

package/README.md

@@ -0,0 +1,135 @@
+# `@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).
+
+---
+
+## Installation
+
+```bash
+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
+```
+
+---
+
+## 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.
+
+```html
+<rc-toolbar label="Formatting">
+  <button onclick="bold()">Bold</button>
+  <button onclick="italic()">Italic</button>
+  <button onclick="underline()">Underline</button>
+  <hr aria-hidden="true" />
+  <button onclick="alignLeft()">Align left</button>
+  <button onclick="alignCenter()">Align center</button>
+  <button onclick="alignRight()">Align right</button>
+</rc-toolbar>
+```
+
+Vertical orientation:
+
+```html
+<rc-toolbar orientation="vertical" label="Actions">
+  <button>Cut</button>
+  <button>Copy</button>
+  <button>Paste</button>
+</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. |
+
+### 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 |
+
+### CSS parts
+
+| 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
+
+`rc-toolbar` dispatches no custom events. Listen for standard events (`click`, `change`, etc.) on slotted children.
+
+### Public methods
+
+```ts
+focusItem(item?: HTMLElement | null): void
+  // Focus a specific toolbar item programmatically.
+
+focusItemAt(index: number): void
+  // Focus the item at zero-based index.
+```
+
+### Read-only getters
+
+```ts
+items: HTMLElement[]           // All currently navigable (focusable) slotted items
+firstItem: HTMLElement | undefined
+lastItem: HTMLElement | undefined
+nextItem: HTMLElement | undefined    // Relative to the currently focused item
+previousItem: HTMLElement | undefined
+```
+
+---
+
+## Keyboard behaviour
+
+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) |
+
+---
+
+## 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 |
+
+---
+
+## Browser support
+
+All modern browsers. Requires Web Components support (Chrome 67+, Firefox 63+, Safari 12.1+).

package/dist/custom-elements.json

@@ -0,0 +1,240 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/define.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "rc-toolbar",
+          "declaration": {
+            "name": "RCToolbar",
+            "module": "/src/index.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/index.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/rc-toolbar"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/rc-toolbar.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A toolbar component, as defined in WAI-ARIA",
+          "name": "RCToolbar",
+          "cssProperties": [
+            {
+              "description": "Gap between toolbar items",
+              "name": "--rc-toolbar-gap-inline",
+              "default": "0.25em"
+            },
+            {
+              "description": "Horizontal padding on the toolbar container",
+              "name": "--rc-toolbar-padding-inline",
+              "default": "calc(var(--rc-control-padding-inline) / 2)"
+            },
+            {
+              "description": "Vertical padding on the toolbar container",
+              "name": "--rc-toolbar-padding-block",
+              "default": "calc(var(--rc-control-padding-block) / 2)"
+            },
+            {
+              "description": "Toolbar container border radius",
+              "name": "--rc-toolbar-radius",
+              "default": "var(--rc-control-radius)"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The toolbar container element",
+              "name": "root"
+            }
+          ],
+          "slots": [
+            {
+              "description": "any number of child elements to display in the toolbar. Only focusable elements are navigable.",
+              "name": "Takes"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Toolbar'",
+              "description": "Accessible label for this toolbar. Default label is 'Toolbar'.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "'horizontal' | 'vertical'"
+              },
+              "default": "'horizontal'",
+              "description": "Toolbar orientation, for keyboard navigation.",
+              "attribute": "orientation"
+            },
+            {
+              "kind": "field",
+              "name": "_$root",
+              "type": {
+                "text": "HTMLDivElement"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "_disabledObserver",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new MutationObserver(() => this._syncTabStop())"
+            },
+            {
+              "kind": "method",
+              "name": "_syncTabStop",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_initItems",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "_onNavigate",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "action",
+                  "type": {
+                    "text": "KeyboardNavigationAction"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_collectItems",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "Element[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "slot",
+                  "type": {
+                    "text": "HTMLSlotElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_isToolbarItem",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "el",
+                  "type": {
+                    "text": "Element"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Toolbar'",
+              "description": "Accessible label for this toolbar. Default label is 'Toolbar'.",
+              "fieldName": "label"
+            },
+            {
+              "name": "orientation",
+              "type": {
+                "text": "'horizontal' | 'vertical'"
+              },
+              "default": "'horizontal'",
+              "description": "Toolbar orientation, for keyboard navigation.",
+              "fieldName": "orientation"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "RovingTabIndexMixin",
+              "package": "@rcarls/rc-common"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "rc-toolbar",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RCToolbar",
+          "declaration": {
+            "name": "RCToolbar",
+            "module": "src/rc-toolbar.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "RCToolbar",
+            "module": "src/rc-toolbar.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/demo.css

@@ -0,0 +1,85 @@
+*, *::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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,119 @@
+import { css as u, LitElement as h, html as b } 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`
+  :host {
+    display: inline-block;
+  }
+
+  #root {
+    display: flex;
+    flex-direction: row;
+    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;
+    }
+
+    /* because :has(:focus-visible) doens'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 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;
+};
+const n = class n extends m(h) {
+  constructor() {
+    super(...arguments), this.label = "Toolbar", this.orientation = "horizontal", this._disabledObserver = new MutationObserver(() => this._syncTabStop());
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._disabledObserver.observe(this, { attributeFilter: ["disabled"], subtree: !0 });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._disabledObserver.disconnect();
+  }
+  _syncTabStop() {
+    !this._lastFocused || l(this._lastFocused) || (this._lastFocused = void 0, this._initItems());
+  }
+  _initItems() {
+    super._initItems();
+    const t = this._lastFocused ?? this.firstItem;
+    queueMicrotask(() => {
+      this.matches(":focus-within") && this.focusItem(t);
+    });
+  }
+  _onNavigate(t) {
+    switch (t) {
+      case "next":
+        this.focusItem(this.nextItem);
+        break;
+      case "prev":
+        this.focusItem(this.previousItem);
+        break;
+      case "start":
+        this.focusItem(this.firstItem);
+        break;
+      case "end":
+        this.focusItem(this.lastItem);
+        break;
+    }
+  }
+  _collectItems(t) {
+    return t.assignedElements().filter((e) => this._isToolbarItem(e));
+  }
+  _isToolbarItem(t) {
+    if (t instanceof HTMLButtonElement || t instanceof HTMLInputElement || t instanceof HTMLSelectElement || t instanceof HTMLTextAreaElement)
+      return !0;
+    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);
+  }
+  render() {
+    return b`
+      <div
+        id="root"
+        part="root"
+        ${p(this._onNavigate)}
+        data-interaction-mode="keyboard"
+        role="toolbar"
+        aria-orientation=${this.orientation}
+        aria-label=${this.label}
+      >
+        <div id="slot-wrap" @focusin=${this._handleItemFocus}>
+          <slot id="items" @slotchange=${this._onSlotChange}></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+n.styles = [v];
+let r = n;
+s([
+  d({ type: String })
+], r.prototype, "label");
+s([
+  d({ type: String })
+], r.prototype, "orientation");
+s([
+  f("#root", !0)
+], r.prototype, "_$root");
+export {
+  r as R
+};
+//# sourceMappingURL=rc-toolbar-D7nv57AW.js.map

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

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

package/dist/rc-toolbar-define.js

@@ -0,0 +1,6 @@
+import { R as o } from "./rc-toolbar-D7nv57AW.js";
+customElements.get("rc-toolbar") || customElements.define("rc-toolbar", o);
+export {
+  o as RCToolbar
+};
+//# sourceMappingURL=rc-toolbar-define.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rc-toolbar-define.js","sources":["../src/define.ts"],"sourcesContent":["import { RCToolbar } from './index.js';\n\ncustomElements.get('rc-toolbar') || customElements.define('rc-toolbar', RCToolbar);\n\nexport * from './index.js';\n"],"names":["RCToolbar"],"mappings":";AAEA,eAAe,IAAI,YAAY,KAAK,eAAe,OAAO,cAAcA,CAAS;"}

package/dist/rc-toolbar.js

@@ -0,0 +1,5 @@
+import { R as a } from "./rc-toolbar-D7nv57AW.js";
+export {
+  a as RCToolbar
+};
+//# sourceMappingURL=rc-toolbar.js.map

package/dist/rc-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-toolbar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -0,0 +1 @@
+export * from './index.js';

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

@@ -0,0 +1 @@
+export * from './rc-toolbar';

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

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+import { KeyboardNavigationAction } from '@rcarls/rc-common';
+declare global {
+    interface HTMLElementTagNameMap {
+        'rc-toolbar': RCToolbar;
+    }
+}
+declare const RCToolbar_base: typeof LitElement & (new (...args: any[]) => import('@rcarls/rc-common').RovingTabIndexMixinBase);
+/**
+ * A toolbar component, as defined in WAI-ARIA
+ *
+ * @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
+ * @csspart root - The toolbar container element
+ */
+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. */
+    orientation: 'horizontal' | 'vertical';
+    protected _$root: HTMLDivElement;
+    private readonly _disabledObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _syncTabStop;
+    protected _initItems(): void;
+    protected _onNavigate(action: KeyboardNavigationAction): void;
+    protected _collectItems(slot: HTMLSlotElement): Element[];
+    private _isToolbarItem;
+    protected render(): import('lit').TemplateResult<1>;
+}
+export default RCToolbar;

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

@@ -0,0 +1,2 @@
+export declare const toolbarStyles: import('lit').CSSResult;
+export default toolbarStyles;

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@rcarls/rc-toolbar",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.1.0",
+  "description": "Headless WAI-ARIA toolbar web component built with Lit",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
+    "directory": "packages/rc-toolbar"
+  },
+  "homepage": "https://github.com/richardcarls/rc-webcomponents#readme",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/rc-toolbar.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/packages/rc-toolbar/src/index.d.ts",
+        "default": "./dist/rc-toolbar.js"
+      }
+    },
+    "./define": {
+      "import": {
+        "types": "./dist/types/packages/rc-toolbar/src/define.d.ts",
+        "default": "./dist/rc-toolbar-define.js"
+      }
+    }
+  },
+  "types": "./dist/types/packages/rc-toolbar/src/index.d.ts",
+  "sideEffects": [
+    "./dist/rc-toolbar-define.js"
+  ],
+  "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"
+  },
+  "dependencies": {
+    "@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",
+    "rollup": "^4.60.2",
+    "typescript": "~5.9.3",
+    "vite": "^7.1.7",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.6",
+    "vitest-browser-lit": "^1.0.1"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  }
+}