Add toolbar container

Author: bendera

astro.config.mjs

@@ -108,6 +108,7 @@ export default defineConfig({
             { 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,
@@ -154,6 +155,7 @@ export default defineConfig({
             { 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-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/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>