@mcp-b/web-components 0.2.0

package/dist/toolbar-CABq0ZL1.d.ts

@@ -0,0 +1,122 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/toolbar/toolbar.d.ts
+/**
+ * <sigvelo-toolbar>
+ *
+ * @summary Turns a collection of buttons and button groups into an accessible toolbar.
+ * @tag sigvelo-toolbar
+ * @documentation https://design-system.sigvelo.com/docs/components/toolbar
+ * @status stable
+ * @since 1.0
+ *
+ * @slot - A mixture of buttons and/or button groups.
+ *
+ * @example Default
+ * Toolbars follows the ARIA APG toolbar pattern for accessibility. A roving tab index is used, meaning users can tab into the control and use the arrow keys to navigate options. A subsequent tab will exit the toolbar.
+ *
+ * By grouping related buttons and button groups into toolbars, the number of tab stops in the keyboard interface is reduced, resulting in a more user-friendly experience.
+ *
+ * ```html
+ * <sigvelo-toolbar>
+ *   <sigvelo-button-group>
+ *     <sigvelo-button icon-label="Undo"><sigvelo-icon name="arrow-back-up"></sigvelo-icon></sigvelo-button>
+ *     <sigvelo-button icon-label="Redo"><sigvelo-icon name="arrow-forward-up"></sigvelo-icon></sigvelo-button>
+ *   </sigvelo-button-group>
+ *
+ *   <sigvelo-button-group>
+ *     <sigvelo-button icon-label="Bold"><sigvelo-icon name="bold"></sigvelo-icon></sigvelo-button>
+ *     <sigvelo-button icon-label="Italic"><sigvelo-icon name="italic"></sigvelo-icon></sigvelo-button>
+ *     <sigvelo-button icon-label="Underline"><sigvelo-icon name="underline"></sigvelo-icon></sigvelo-button>
+ *   </sigvelo-button-group>
+ *
+ *   <sigvelo-button-group>
+ *     <sigvelo-button icon-label="Align left"><sigvelo-icon name="align-left"></sigvelo-icon></sigvelo-button>
+ *     <sigvelo-button icon-label="Align center"><sigvelo-icon name="align-center"></sigvelo-icon></sigvelo-button>
+ *     <sigvelo-button icon-label="Align right"><sigvelo-icon name="align-right"></sigvelo-icon></sigvelo-button>
+ *     <sigvelo-button icon-label="Justify"><sigvelo-icon name="align-justified"></sigvelo-icon></sigvelo-button>
+ *   </sigvelo-button-group>
+ * </sigvelo-toolbar>
+ * ```
+ *
+ * @example Toolbars with various components
+ * Toolbars can be used with a mixture of buttons, button groups, and dropdowns that have a `<sigvelo-button>` trigger. Keyboard users will be able to cycle through all buttons with [[Left]] and [[Right]], as expected.
+ *
+ * ```html
+ * <sigvelo-toolbar>
+ *   <sigvelo-button color="primary">
+ *     <sigvelo-icon slot="start" name="plus"></sigvelo-icon>
+ *     New
+ *   </sigvelo-button>
+ *
+ *   <sigvelo-button-group>
+ *     <sigvelo-button icon-label="Bold"><sigvelo-icon name="bold"></sigvelo-icon></sigvelo-button>
+ *     <sigvelo-button icon-label="Italic"><sigvelo-icon name="italic"></sigvelo-icon></sigvelo-button>
+ *     <sigvelo-button icon-label="Underline"><sigvelo-icon name="underline"></sigvelo-icon></sigvelo-button>
+ *   </sigvelo-button-group>
+ *
+ *     <sigvelo-dropdown id="dropdown__checkboxes">
+ *       <sigvelo-button slot="trigger" with-caret>View</sigvelo-button>
+ *       <sigvelo-dropdown-item type="checkbox" value="canvas" checked>Show canvas</sigvelo-dropdown-item>
+ *       <sigvelo-dropdown-item type="checkbox" value="grid" checked>Show grid</sigvelo-dropdown-item>
+ *       <sigvelo-dropdown-item type="checkbox" value="source">Show source</sigvelo-dropdown-item>
+ *       <sigvelo-divider></sigvelo-divider>
+ *       <sigvelo-dropdown-item value="preferences">Preferences…</sigvelo-dropdown-item>
+ *     </sigvelo-dropdown>
+ *   </sigvelo-button-group>
+ *
+ *
+ *   <sigvelo-button icon-label="Print"><sigvelo-icon name="printer"></sigvelo-icon></sigvelo-button>
+ *   <sigvelo-button icon-label="Share"><sigvelo-icon name="share-2"></sigvelo-icon></sigvelo-button>
+ * </sigvelo-toolbar>
+ * ```
+ *
+ * @example Vertical toolbars
+ * To make a vertical toolbar, set the `orientation` attribute to `vertical`. Keyboard users will be able to use [[Up]] and [[Down]] instead of [[Left]] and [[Right]]. Button groups will automatically assume the correct orientation.
+ *
+ * ```html
+ * <sigvelo-toolbar orientation="vertical" style="max-width: 60px;">
+ *   <sigvelo-button-group>
+ *     <sigvelo-button>
+ *       <sigvelo-icon slot="start" name="plus"></sigvelo-icon>
+ *       New
+ *     </sigvelo-button>
+ *     <sigvelo-button>
+ *       <sigvelo-icon slot="start" name="folder-open"></sigvelo-icon>
+ *       Open
+ *     </sigvelo-button>
+ *     <sigvelo-button>
+ *       <sigvelo-icon slot="start" name="device-floppy"></sigvelo-icon>
+ *       Save
+ *     </sigvelo-button>
+ *     <sigvelo-button>
+ *       <sigvelo-icon slot="start" name="printer"></sigvelo-icon>
+ *       Print
+ *     </sigvelo-button>
+ *   </sigvelo-button-group>
+ * </sigvelo-toolbar>
+ * ```
+ */
+declare class SigveloToolbar extends SigveloElement {
+  static styles: CSSResultGroup;
+  /** The toolbar's orientation. This changes which arrow keys are used to select adjacent buttons. */
+  orientation: "horizontal" | "vertical";
+  firstUpdated(): void;
+  updated(changedProperties: PropertyValues<this>): void;
+  /** Gets an array of buttons slotted into the toolbar. Includes slotted buttons, such as dropdown triggers. */
+  private getButtons;
+  /** Gets an array of button groups slotted into the toolbar. */
+  private getButtonGroups;
+  private handleDefaultSlotChange;
+  private handleKeyDown;
+  private handlePointerDown;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-toolbar": SigveloToolbar;
+  }
+}
+//#endregion
+export { SigveloToolbar as t };

package/dist/toolbar-CEZ0-F-X.js

@@ -0,0 +1,196 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+//#region src/components/toolbar/toolbar.styles.ts
+var toolbar_styles_default = css`
+  :host {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+`;
+//#endregion
+//#region src/components/toolbar/toolbar.ts
+/**
+* <sigvelo-toolbar>
+*
+* @summary Turns a collection of buttons and button groups into an accessible toolbar.
+* @tag sigvelo-toolbar
+* @documentation https://design-system.sigvelo.com/docs/components/toolbar
+* @status stable
+* @since 1.0
+*
+* @slot - A mixture of buttons and/or button groups.
+*
+* @example Default
+* Toolbars follows the ARIA APG toolbar pattern for accessibility. A roving tab index is used, meaning users can tab into the control and use the arrow keys to navigate options. A subsequent tab will exit the toolbar.
+*
+* By grouping related buttons and button groups into toolbars, the number of tab stops in the keyboard interface is reduced, resulting in a more user-friendly experience.
+*
+* ```html
+* <sigvelo-toolbar>
+*   <sigvelo-button-group>
+*     <sigvelo-button icon-label="Undo"><sigvelo-icon name="arrow-back-up"></sigvelo-icon></sigvelo-button>
+*     <sigvelo-button icon-label="Redo"><sigvelo-icon name="arrow-forward-up"></sigvelo-icon></sigvelo-button>
+*   </sigvelo-button-group>
+*
+*   <sigvelo-button-group>
+*     <sigvelo-button icon-label="Bold"><sigvelo-icon name="bold"></sigvelo-icon></sigvelo-button>
+*     <sigvelo-button icon-label="Italic"><sigvelo-icon name="italic"></sigvelo-icon></sigvelo-button>
+*     <sigvelo-button icon-label="Underline"><sigvelo-icon name="underline"></sigvelo-icon></sigvelo-button>
+*   </sigvelo-button-group>
+*
+*   <sigvelo-button-group>
+*     <sigvelo-button icon-label="Align left"><sigvelo-icon name="align-left"></sigvelo-icon></sigvelo-button>
+*     <sigvelo-button icon-label="Align center"><sigvelo-icon name="align-center"></sigvelo-icon></sigvelo-button>
+*     <sigvelo-button icon-label="Align right"><sigvelo-icon name="align-right"></sigvelo-icon></sigvelo-button>
+*     <sigvelo-button icon-label="Justify"><sigvelo-icon name="align-justified"></sigvelo-icon></sigvelo-button>
+*   </sigvelo-button-group>
+* </sigvelo-toolbar>
+* ```
+*
+* @example Toolbars with various components
+* Toolbars can be used with a mixture of buttons, button groups, and dropdowns that have a `<sigvelo-button>` trigger. Keyboard users will be able to cycle through all buttons with [[Left]] and [[Right]], as expected.
+*
+* ```html
+* <sigvelo-toolbar>
+*   <sigvelo-button color="primary">
+*     <sigvelo-icon slot="start" name="plus"></sigvelo-icon>
+*     New
+*   </sigvelo-button>
+*
+*   <sigvelo-button-group>
+*     <sigvelo-button icon-label="Bold"><sigvelo-icon name="bold"></sigvelo-icon></sigvelo-button>
+*     <sigvelo-button icon-label="Italic"><sigvelo-icon name="italic"></sigvelo-icon></sigvelo-button>
+*     <sigvelo-button icon-label="Underline"><sigvelo-icon name="underline"></sigvelo-icon></sigvelo-button>
+*   </sigvelo-button-group>
+*
+*     <sigvelo-dropdown id="dropdown__checkboxes">
+*       <sigvelo-button slot="trigger" with-caret>View</sigvelo-button>
+*       <sigvelo-dropdown-item type="checkbox" value="canvas" checked>Show canvas</sigvelo-dropdown-item>
+*       <sigvelo-dropdown-item type="checkbox" value="grid" checked>Show grid</sigvelo-dropdown-item>
+*       <sigvelo-dropdown-item type="checkbox" value="source">Show source</sigvelo-dropdown-item>
+*       <sigvelo-divider></sigvelo-divider>
+*       <sigvelo-dropdown-item value="preferences">Preferences…</sigvelo-dropdown-item>
+*     </sigvelo-dropdown>
+*   </sigvelo-button-group>
+*
+*
+*   <sigvelo-button icon-label="Print"><sigvelo-icon name="printer"></sigvelo-icon></sigvelo-button>
+*   <sigvelo-button icon-label="Share"><sigvelo-icon name="share-2"></sigvelo-icon></sigvelo-button>
+* </sigvelo-toolbar>
+* ```
+*
+* @example Vertical toolbars
+* To make a vertical toolbar, set the `orientation` attribute to `vertical`. Keyboard users will be able to use [[Up]] and [[Down]] instead of [[Left]] and [[Right]]. Button groups will automatically assume the correct orientation.
+*
+* ```html
+* <sigvelo-toolbar orientation="vertical" style="max-width: 60px;">
+*   <sigvelo-button-group>
+*     <sigvelo-button>
+*       <sigvelo-icon slot="start" name="plus"></sigvelo-icon>
+*       New
+*     </sigvelo-button>
+*     <sigvelo-button>
+*       <sigvelo-icon slot="start" name="folder-open"></sigvelo-icon>
+*       Open
+*     </sigvelo-button>
+*     <sigvelo-button>
+*       <sigvelo-icon slot="start" name="device-floppy"></sigvelo-icon>
+*       Save
+*     </sigvelo-button>
+*     <sigvelo-button>
+*       <sigvelo-icon slot="start" name="printer"></sigvelo-icon>
+*       Print
+*     </sigvelo-button>
+*   </sigvelo-button-group>
+* </sigvelo-toolbar>
+* ```
+*/
+var SigveloToolbar = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.orientation = "horizontal";
+	}
+	static {
+		this.styles = [hostStyles, toolbar_styles_default];
+	}
+	firstUpdated() {
+		this.setAttribute("role", "toolbar");
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("orientation")) this.setAttribute("aria-orientation", this.orientation);
+	}
+	/** Gets an array of buttons slotted into the toolbar. Includes slotted buttons, such as dropdown triggers. */
+	getButtons(options) {
+		if (options?.includeDisabled) return [...this.querySelectorAll("sigvelo-button")];
+		else return [...this.querySelectorAll("sigvelo-button:not(:state(disabled))")];
+	}
+	/** Gets an array of button groups slotted into the toolbar. */
+	getButtonGroups() {
+		return [...this.querySelectorAll("sigvelo-button-group")];
+	}
+	handleDefaultSlotChange() {
+		const buttonGroups = this.getButtonGroups();
+		const buttons = this.getButtons({ includeDisabled: true });
+		buttonGroups.forEach((buttonGroup) => {
+			buttonGroup.orientation = this.orientation;
+		});
+		buttons.filter((button) => !button.hasAttribute("disabled")).forEach((button, index) => {
+			button.tabIndex = index === 0 ? 0 : -1;
+		});
+	}
+	handleKeyDown(event) {
+		const buttons = this.getButtons();
+		const activeIndex = buttons.findIndex((button) => button.tabIndex === 0);
+		const isVertical = this.orientation === "vertical";
+		let nextIndex = -1;
+		if (event.composedPath().some((el) => el?.localName === "sigvelo-dropdown-item")) return;
+		if (isVertical && event.key === "ArrowUp" || !isVertical && event.key === "ArrowLeft") {
+			event.preventDefault();
+			nextIndex = activeIndex - 1;
+			if (nextIndex < 0) nextIndex = buttons.length - 1;
+		}
+		if (isVertical && event.key === "ArrowDown" || !isVertical && event.key === "ArrowRight") {
+			event.preventDefault();
+			nextIndex = activeIndex + 1;
+			if (nextIndex > buttons.length - 1) nextIndex = 0;
+		}
+		if (event.key === "Home" || event.key === "End") {
+			event.preventDefault();
+			nextIndex = event.key === "Home" ? 0 : buttons.length - 1;
+		}
+		if (nextIndex > -1) buttons.forEach((button, index) => {
+			if (button.disabled) return;
+			if (index === nextIndex) {
+				button.tabIndex = 0;
+				button.focus();
+			} else button.tabIndex = -1;
+		});
+	}
+	handlePointerDown(event) {
+		const buttons = this.getButtons({ includeDisabled: true });
+		const targetButton = event.target.closest("sigvelo-button");
+		if (!targetButton) return;
+		buttons.forEach((button) => {
+			if (button.disabled) return;
+			if (button === targetButton) button.tabIndex = 0;
+			else button.tabIndex = -1;
+		});
+	}
+	render() {
+		return html`
+      <slot
+        @keydown=${this.handleKeyDown}
+        @pointerdown=${this.handlePointerDown}
+        @slotchange=${this.handleDefaultSlotChange}
+      ></slot>
+    `;
+	}
+};
+__decorate([property({ reflect: true })], SigveloToolbar.prototype, "orientation", void 0);
+customElements.define("sigvelo-toolbar", SigveloToolbar);
+//#endregion
+export { SigveloToolbar as t };