Add ToolbarButton examples

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = crlf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false

astro.config.mjs

@@ -107,6 +107,8 @@ export default defineConfig({
             { label: "Tabs", link: "components/tabs" },
             { label: "Textarea", link: "components/textarea" },
             { label: "Textfield", link: "components/textfield" },
+            { label: "ToolbarButton", link: "components/toolbar-button" },
+            { label: "ToolbarContainer", link: "components/toolbar-container" },
             { label: "Tree", link: "components/tree" },
           ],
           collapsed: true,
@@ -152,6 +154,8 @@ export default defineConfig({
             { label: "Tabs", link: "components/tabs/api" },
             { label: "Textarea", link: "components/textarea/api" },
             { label: "Textfield", link: "components/textfield/api" },
+            { label: "ToolbarButton", link: "components/toolbar-button/api" },
+            { label: "ToolbarContainer", link: "components/toolbar-container/api" },
             { label: "Tree", link: "components/tree/api" },
           ],
           collapsed: true,

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

@@ -0,0 +1,5 @@
+<link rel="stylesheet" href="/codicon.css" id="vscode-codicon-stylesheet" />
+
+<script>
+  import "@vscode-elements/elements/dist/vscode-toolbar-button/vscode-toolbar-button.js";
+</script>

src/components/examples/toolbar-button/ToggleableExample.astro

@@ -0,0 +1,15 @@
+<vscode-toolbar-button
+  icon="account"
+  label="Account"
+  toggleable
+  id="toggle-example"></vscode-toolbar-button>
+
+<script>
+  import type { VscodeToolbarButton } from "@vscode-elements/elements";
+
+  const el = document.querySelector<VscodeToolbarButton>("#toggle-example");
+
+  el?.addEventListener("change", () => {
+    console.log("Checked:", el.checked);
+  });
+</script>

src/components/examples/toolbar-container/Imports.astro

@@ -0,0 +1,6 @@
+<link rel="stylesheet" href="/codicon.css" id="vscode-codicon-stylesheet" />
+
+<script>
+  import "@vscode-elements/elements/dist/vscode-toolbar-button/vscode-toolbar-button.js";
+  import "@vscode-elements/elements/dist/vscode-toolbar-container/vscode-toolbar-container.js";
+</script>

src/components/experimental-component.md

@@ -0,0 +1,4 @@
+:::caution
+This component is in the experimental phase, and its API is subject to change at any time. 
+Any changes will be announced in the [changelog](https://github.com/vscode-elements/elements/blob/main/CHANGELOG.md). Please review it carefully with each library upgrade.
+:::

src/content/docs/components/toolbar-button.mdx

@@ -0,0 +1,79 @@
+---
+title: Toolbar Button
+---
+
+import Demo from "@components/Demo.astro";
+import PageSwitcher from "@components/PageSwitcher.astro";
+import ExperimentalComponent from "@components/experimental-component.md";
+import IconsInfo from "@components/icons-info.md";
+
+import Imports from "@components/examples/toolbar-button/Imports.astro";
+import ToggleableExample from "@components/examples/toolbar-button/ToggleableExample.astro";
+
+<Imports />
+<PageSwitcher />
+<ExperimentalComponent />
+<IconsInfo />
+
+## Basic example
+
+In icon-only mode, a label for screen readers can be defined using the `label` attribute.
+
+<Demo>
+  <vscode-toolbar-button icon="account" label="Account"></vscode-toolbar-button>
+  <Fragment slot="html">
+    ```html 'label="Account"'
+    <vscode-toolbar-button
+      icon="account"
+      label="Account"
+    ></vscode-toolbar-button>
+    ```
+  </Fragment>
+</Demo>
+
+## With caption
+
+<Demo>
+  <vscode-toolbar-button icon="account">Account</vscode-toolbar-button>
+  <Fragment slot="html">
+    ```html
+    <vscode-toolbar-button icon="account">Account</vscode-toolbar-button>
+    ```
+  </Fragment>
+</Demo>
+
+## Text-only
+
+<Demo>
+  <vscode-toolbar-button>Account</vscode-toolbar-button>
+  <Fragment slot="html">
+    ```html
+    <vscode-toolbar-button>Account</vscode-toolbar-button>
+    ```
+  </Fragment>
+</Demo>
+
+## Toggleable
+
+<Demo>
+  <ToggleableExample />
+  <Fragment slot="html">
+    ```html
+    <vscode-toolbar-button
+      icon="account"
+      label="Account"
+      toggleable
+      id="toggle-example"
+    ></vscode-toolbar-button>
+    ```
+  </Fragment>
+  <Fragment slot="js">
+    ```javascript
+      const el = document.querySelector("#toggle-example");
+
+      el.addEventListener("change", () => {
+        console.log("Checked:", el.checked);
+      });
+    ```
+  </Fragment>
+</Demo>

src/content/docs/components/toolbar-container.mdx

@@ -0,0 +1,40 @@
+---
+title: Toolbar Button
+---
+
+import Demo from "@components/Demo.astro";
+import PageSwitcher from "@components/PageSwitcher.astro";
+import ExperimentalComponent from "@components/experimental-component.md";
+import IconsInfo from "@components/icons-info.md";
+
+import Imports from "@components/examples/toolbar-container/Imports.astro";
+
+<Imports />
+<PageSwitcher />
+<ExperimentalComponent />
+<IconsInfo />
+
+## Basic example
+
+Toolbar Container is a simple container to arrange the toolar buttons.
+
+<Demo>
+  <vscode-toolbar-container>
+    <vscode-toolbar-button icon="files" label="Files"></vscode-toolbar-button>
+    <vscode-toolbar-button icon="search" label="Search"></vscode-toolbar-button>
+    <vscode-toolbar-button icon="source-control" label="Source Control"></vscode-toolbar-button>
+    <vscode-toolbar-button icon="debug-alt" label="Debug"></vscode-toolbar-button>
+    <vscode-toolbar-button icon="extensions" label="Extensions"></vscode-toolbar-button>
+  </vscode-toolbar-container>
+  <Fragment slot="html">
+    ```html
+    <vscode-toolbar-container>
+      <vscode-toolbar-button icon="files" label="Files"></vscode-toolbar-button>
+      <vscode-toolbar-button icon="search" label="Search"></vscode-toolbar-button>
+      <vscode-toolbar-button icon="source-control" label="Source Control"></vscode-toolbar-button>
+      <vscode-toolbar-button icon="debug-alt" label="Debug"></vscode-toolbar-button>
+      <vscode-toolbar-button icon="extensions" label="Extensions"></vscode-toolbar-button>
+    </vscode-toolbar-container>
+    ```
+  </Fragment>
+</Demo>

src/pages/components/[component]/api.astro

@@ -35,6 +35,7 @@ export function getStaticPaths() {
     { params: { component: "tabs" } },
     { params: { component: "textarea" } },
     { params: { component: "textfield" } },
+    { params: { component: "toolbar-button" } },
     { params: { component: "tree" } },
   ];
 }