Add button to attach IK rig

studio-ui/src/lib/button.element.scss

@@ -31,6 +31,12 @@
 	color: #FFFF;
 }
 
+:host(.disabled),
+:host(.disabled:hover) {
+	background: #0003;
+	color: #FFF6;
+}
+
 .icon {
 	fill: currentColor;
 }

studio-ui/src/lib/button.element.ts

@@ -1,5 +1,5 @@
 import { on } from "@storyteller/framework";
-import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { LitElement, type PropertyValues, html, nothing, unsafeCSS } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import styles from "./button.element.scss?inline";
@@ -11,10 +11,21 @@ export class ButtonElement extends LitElement {
 	static override styles = unsafeCSS(styles);
 
 	@property() icon?: string;
+	@property({ type: Boolean }) disabled = false;
 
 	override role = "button";
 	override tabIndex = 0;
 
+	protected override willUpdate(changes: PropertyValues<this>): void {
+		if (changes.has("disabled")) {
+			this.ariaDisabled = this.disabled ? "true" : null;
+			this.tabIndex = this.disabled ? -1 : 0;
+			this.classList.toggle("disabled", this.disabled);
+		}
+
+		super.willUpdate(changes);
+	}
+
 	@on("keydown")
 	onKeyDown(event: KeyboardEvent) {
 		if (/^( |Enter)$/.test(event.key)) {

studio-ui/src/lib/icon.element.ts

@@ -28,6 +28,7 @@ import fasCheck from "@fortawesome/fontawesome-pro/svgs/solid/check.svg?raw";
 import fasXmark from "@fortawesome/fontawesome-pro/svgs/solid/xmark.svg?raw";
 import fasCircleCheck from "@fortawesome/fontawesome-pro/svgs/solid/circle-check.svg?raw";
 import fasCircleXmark from "@fortawesome/fontawesome-pro/svgs/solid/circle-xmark.svg?raw";
+import farShareNodes from "@fortawesome/fontawesome-pro/svgs/regular/share-nodes.svg?raw";
 
 import styles from "./icon.element.scss?inline";
 
@@ -74,6 +75,7 @@ function renderSvg(iconId: string) {
 		"question": () => fasQuestion,
 		"rotate": () => farRotate,
 		"scale": () => farScale,
+		"share-nodes": () => farShareNodes,
 		"skeleton": () => farSkeleton,
 		"up-down-left-right": () => farUpDownLeftRight,
 		"video": () => farVideo,