Add button group docs

package.json

@@ -12,19 +12,19 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/starlight": "^0.31.1",
-    "@expressive-code/plugin-line-numbers": "^0.40.1",
-    "@vscode-elements/elements": "^1.15.0",
-    "@vscode-elements/webview-playground": "^1.6.0",
-    "astro": "^5.2.5",
-    "marked": "^15.0.6",
-    "sharp": "^0.33.5",
-    "starlight-image-zoom": "^0.10.1",
-    "typescript": "^5.7.3"
+    "@astrojs/starlight": "^0.34.3",
+    "@expressive-code/plugin-line-numbers": "^0.41.2",
+    "@vscode-elements/elements": "^1.16.0",
+    "@vscode-elements/webview-playground": "^1.7.0",
+    "astro": "^5.7.13",
+    "marked": "^15.0.11",
+    "sharp": "^0.34.1",
+    "starlight-image-zoom": "^0.12.0",
+    "typescript": "^5.8.3"
   },
   "devDependencies": {
     "custom-elements-manifest": "^2.1.0",
-    "nodemon": "^3.1.9",
+    "nodemon": "^3.1.10",
     "ts-node": "^10.9.2"
   }
 }

src/components/examples/button-group/DropdownMenuExample.astro

@@ -0,0 +1,59 @@
+<div class="button-with-menu">
+  <vscode-button-group>
+    <vscode-button>Send</vscode-button>
+    <vscode-button
+      icon="chevron-down"
+      title="More actions..."
+      id="toggle-menu-button"></vscode-button>
+  </vscode-button-group>
+  <vscode-context-menu id="dropdown-menu" class="dropdown-menu"
+  ></vscode-context-menu>
+</div>
+
+<style>
+  .button-with-menu {
+    display: inline-block;
+    position: relative;
+  }
+
+  .dropdown-menu {
+    left: 100%;
+    margin-left: -26px;
+    position: absolute;
+    width: auto;
+    z-index: 10;
+  }
+</style>
+
+<script>
+  import type {
+    VscodeButton,
+    VscodeContextMenu,
+  } from "@vscode-elements/elements";
+
+  const menu = document.querySelector<VscodeContextMenu>("#dropdown-menu")!;
+  const button = document.querySelector<VscodeButton>("#toggle-menu-button")!;
+
+  menu.data = [
+    {
+      label: "Schedule for later",
+      value: "schedule",
+    },
+    {
+      label: "Delete",
+      value: "delete",
+    },
+    {
+      label: "Save draft",
+      value: "save",
+    },
+  ];
+
+  button.addEventListener("click", () => {
+    menu.show = !menu.show;
+  });
+
+  menu.addEventListener("vsc-select", (event) => {
+    console.log(event);
+  });
+</script>

src/components/examples/button-group/GroupExample.astro

@@ -0,0 +1,101 @@
+<div class="wysiwyg-toolbar">
+  <vscode-button-group>
+    <vscode-button secondary title="Align left" icon-only
+      ><svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M1 3.5C1 3.22386 1.22386 3 1.5 3H10.5C10.7761 3 11 3.22386 11 3.5C11 3.77614 10.7761 4 10.5 4H1.5C1.22386 4 1 3.77614 1 3.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H14.5C14.7761 7 15 7.22386 15 7.5C15 7.77614 14.7761 8 14.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H6.5C6.77614 11 7 11.2239 7 11.5C7 11.7761 6.77614 12 6.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"
+          fill="#212121"></path></svg
+      ></vscode-button
+    >
+    <vscode-button secondary title="Align center" icon-only
+      ><svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M3 3.5C3 3.22386 3.22386 3 3.5 3H12.5C12.7761 3 13 3.22386 13 3.5C13 3.77614 12.7761 4 12.5 4H3.5C3.22386 4 3 3.77614 3 3.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H14.5C14.7761 7 15 7.22386 15 7.5C15 7.77614 14.7761 8 14.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM5 11.5C5 11.2239 5.22386 11 5.5 11H10.5C10.7761 11 11 11.2239 11 11.5C11 11.7761 10.7761 12 10.5 12H5.5C5.22386 12 5 11.7761 5 11.5Z"
+          fill="#212121"></path></svg
+      ></vscode-button
+    >
+    <vscode-button secondary title="Align right" icon-only
+      ><svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M5 3.5C5 3.22386 5.22386 3 5.5 3H14.5C14.7761 3 15 3.22386 15 3.5C15 3.77614 14.7761 4 14.5 4H5.5C5.22386 4 5 3.77614 5 3.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H14.5C14.7761 7 15 7.22386 15 7.5C15 7.77614 14.7761 8 14.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM9 11.5C9 11.2239 9.22386 11 9.5 11H14.5C14.7761 11 15 11.2239 15 11.5C15 11.7761 14.7761 12 14.5 12H9.5C9.22386 12 9 11.7761 9 11.5Z"
+          fill="#212121"></path></svg
+      ></vscode-button
+    >
+    <vscode-button secondary title="Justified" icon-only
+      ><svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        fill="none"
+      >
+        <path
+          fill="#212121"
+          d="M1 3.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Zm0 4a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Zm0 4a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Z"
+        ></path>
+      </svg>
+    </vscode-button>
+  </vscode-button-group>
+  <vscode-button-group>
+    <vscode-button secondary icon-only title="Bold"
+      ><span class="icon-letter b">B</span></vscode-button
+    >
+    <vscode-button secondary icon-only title="Italic"
+      ><span class="icon-letter i">I</span></vscode-button
+    >
+    <vscode-button secondary icon-only title="Underline"
+      ><span class="icon-letter u">U</span></vscode-button
+    >
+  </vscode-button-group>
+</div>
+
+<style>
+  .wysiwyg-toolbar {
+    display: flex;
+    gap: 6px;
+  }
+
+  .wysiwyg-toolbar path {
+    fill: currentColor;
+  }
+
+  .icon-letter {
+    flex: 1;
+    font-family: sans-serif;
+    font-size: 15px;
+    height: 16px;
+    line-height: 15px;
+    vertical-align: middle;
+    text-align: center;
+    width: 16px;
+  }
+
+  .icon-letter.b {
+    font-weight: bold;
+  }
+
+  .icon-letter.i {
+    font-style: italic;
+  }
+
+  .icon-letter.u {
+    text-decoration: underline;
+  }
+</style>

src/components/examples/button-group/Imports.astro

@@ -0,0 +1,8 @@
+<script>
+  import "@vscode-elements/elements/dist/vscode-button/index.js";
+  import "@vscode-elements/elements/dist/vscode-button-group/index.js";
+  import "@vscode-elements/elements/dist/vscode-context-menu/index.js";
+  import "@vscode-elements/elements/dist/vscode-context-menu-item/index.js";
+</script>
+
+<link rel="stylesheet" href="/codicon.css" id="vscode-codicon-stylesheet" />

src/components/examples/button/CustomIcon.astro

@@ -0,0 +1,8 @@
+<vscode-button icon-only secondary
+  ><img
+    src="/icons/html.svg"
+    width="16"
+    height="16"
+    alt="HTML 5 icon"
+  /></vscode-button
+>