From 31176e3a59e48c35b7a01be638c11a721dfbadf9 Mon Sep 17 00:00:00 2001 From: bendera Date: Mon, 4 Aug 2025 00:03:05 +0200 Subject: [PATCH 01/25] Upgrade Elements --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4d01223..cae481c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "@astrojs/check": "^0.9.4", "@astrojs/starlight": "^0.34.3", "@expressive-code/plugin-line-numbers": "^0.41.2", - "@vscode-elements/elements": "^2.0.0-pre.3", + "@vscode-elements/elements": "^2.0.0", "@vscode-elements/webview-playground": "^1.7.0", "astro": "^5.7.13", "marked": "^15.0.11", @@ -2010,9 +2010,9 @@ } }, "node_modules/@vscode-elements/elements": { - "version": "2.0.0-pre.3", - "resolved": "https://registry.npmjs.org/@vscode-elements/elements/-/elements-2.0.0-pre.3.tgz", - "integrity": "sha512-G5ND9yVsKeMC4L58FBphbO3Puk9G+GtZlKdWyThCSxF230+F6iyX1AUvQYVILVIo8msk/9zBQTMyEOK2gzBDGg==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@vscode-elements/elements/-/elements-2.0.0.tgz", + "integrity": "sha512-enBBFWZjHFGUzpa6LD6nCjrXEDkCsGuoNDhRzA59Z1jRYMTKmOf6VI7BkWk8Y8Na7sYlq6UfK6vglzsbz+IoPg==", "license": "MIT", "dependencies": { "@lit/context": "^1.1.3", diff --git a/package.json b/package.json index f2b7ed8..e209d92 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "@astrojs/check": "^0.9.4", "@astrojs/starlight": "^0.34.3", "@expressive-code/plugin-line-numbers": "^0.41.2", - "@vscode-elements/elements": "^2.0.0-pre.3", + "@vscode-elements/elements": "^2.0.0", "@vscode-elements/webview-playground": "^1.7.0", "astro": "^5.7.13", "marked": "^15.0.11", From f95cb3ce80509720f41e2600cc82785076d0e14d Mon Sep 17 00:00:00 2001 From: bendera Date: Mon, 4 Aug 2025 00:21:16 +0200 Subject: [PATCH 02/25] Add version selector --- astro.config.mjs | 3 ++ src/components/SiteTitle.astro | 83 ++++++++++++++++++++++++++++++++ src/components/VersionInfo.astro | 22 ++++----- src/content/docs/index.mdx | 38 +++++++-------- 4 files changed, 114 insertions(+), 32 deletions(-) create mode 100644 src/components/SiteTitle.astro diff --git a/astro.config.mjs b/astro.config.mjs index 1d6b2c7..e87b0bd 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -21,6 +21,9 @@ export default defineConfig({ integrations: [ starlight({ title: "VSCode Elements", + components: { + SiteTitle: "./src/components/SiteTitle.astro", + }, social: [ { icon: "github", diff --git a/src/components/SiteTitle.astro b/src/components/SiteTitle.astro new file mode 100644 index 0000000..cf5677f --- /dev/null +++ b/src/components/SiteTitle.astro @@ -0,0 +1,83 @@ +--- +import { logos } from "virtual:starlight/user-images"; +import config from "virtual:starlight/user-config"; +import VersionInfo from "./VersionInfo.astro"; +const { siteTitle, siteTitleHref } = Astro.locals.starlightRoute; +--- + + + { + config.logo && logos.dark && ( + <> + {config.logo.alt} + {/* Show light alternate if a user configure both light and dark logos. */} + {!("src" in config.logo) && ( + {config.logo.alt} + )} + + ) + } + + {siteTitle} + + + + + + + diff --git a/src/components/VersionInfo.astro b/src/components/VersionInfo.astro index 06661c2..83ed5d2 100644 --- a/src/components/VersionInfo.astro +++ b/src/components/VersionInfo.astro @@ -1,11 +1,11 @@ ---- -import * as fs from "node:fs/promises"; - -const fc = await fs.readFile( - "node_modules/@vscode-elements/elements/package.json", - "utf-8" -); -const pkg = JSON.parse(fc); ---- - -

Current version: {pkg.version}

\ No newline at end of file +--- +import * as fs from "node:fs/promises"; + +const fc = await fs.readFile( + "node_modules/@vscode-elements/elements/package.json", + "utf-8" +); +const pkg = JSON.parse(fc); +--- + +{pkg.version} \ No newline at end of file diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx index d8c4c7d..7ad6bb4 100644 --- a/src/content/docs/index.mdx +++ b/src/content/docs/index.mdx @@ -1,21 +1,17 @@ ---- -title: VSCode Elements -description: Web component library for developing Visual Studio Code extensions -template: splash -hero: - tagline: Web component library for developing Visual Studio Code extensions - image: - file: ../../assets/logo.svg - actions: - - text: Getting started - link: /guides/getting-started/ - icon: right-arrow - - text: Source code - link: https://github.com/vscode-elements/elements - icon: external - variant: minimal ---- - -import VersionInfo from "@components/VersionInfo.astro"; - - +--- +title: VSCode Elements +description: Web component library for developing Visual Studio Code extensions +template: splash +hero: + tagline: Web component library for developing Visual Studio Code extensions + image: + file: ../../assets/logo.svg + actions: + - text: Getting started + link: /guides/getting-started/ + icon: right-arrow + - text: Source code + link: https://github.com/vscode-elements/elements + icon: external + variant: minimal +--- From cec4f285f2d55055c2d9f36d5142fe71d35fa7e9 Mon Sep 17 00:00:00 2001 From: bendera Date: Mon, 4 Aug 2025 00:40:56 +0200 Subject: [PATCH 03/25] Fix build errors --- src/components/Controls/BooleanField.astro | 115 +++++++++++---------- src/components/Controls/EnumField.astro | 1 + src/components/Controls/NumberField.astro | 1 + src/components/SiteTitle.astro | 34 ++---- 4 files changed, 68 insertions(+), 83 deletions(-) diff --git a/src/components/Controls/BooleanField.astro b/src/components/Controls/BooleanField.astro index 078552e..25e3907 100644 --- a/src/components/Controls/BooleanField.astro +++ b/src/components/Controls/BooleanField.astro @@ -1,57 +1,58 @@ ---- -import { uniqueId } from "./uniqueid"; -import Field from "./Field.astro"; - -export type Props = { - name: string; - defaultValue: boolean; -}; - -const cid = uniqueId("BooleanField-"); - -const { name = "", defaultValue = false } = Astro.props; ---- - - - - - - - - +--- +import { uniqueId } from "./uniqueid"; +import Field from "./Field.astro"; + +export type Props = { + name: string; + defaultValue: boolean; +}; + +const cid = uniqueId("BooleanField-"); + +const { name = "", defaultValue = false } = Astro.props; +--- + + + + + + + + diff --git a/src/components/Controls/EnumField.astro b/src/components/Controls/EnumField.astro index a320673..8930842 100644 --- a/src/components/Controls/EnumField.astro +++ b/src/components/Controls/EnumField.astro @@ -58,6 +58,7 @@ const { name = "", defaultValue = false, options = [] } = Astro.props; const targetEl = document.querySelector(target); if (targetEl) { + // @ts-ignore targetEl[select.name] = select.value; } } diff --git a/src/components/Controls/NumberField.astro b/src/components/Controls/NumberField.astro index c0b177c..7adf36f 100644 --- a/src/components/Controls/NumberField.astro +++ b/src/components/Controls/NumberField.astro @@ -49,6 +49,7 @@ const { name = "", defaultValue = 0 } = Astro.props; const targetEl = document.querySelector(target); if (targetEl) { + // @ts-ignore targetEl[input.name] = input.value; } } diff --git a/src/components/SiteTitle.astro b/src/components/SiteTitle.astro index cf5677f..dc8291e 100644 --- a/src/components/SiteTitle.astro +++ b/src/components/SiteTitle.astro @@ -6,31 +6,13 @@ const { siteTitle, siteTitleHref } = Astro.locals.starlightRoute; --- - { - config.logo && logos.dark && ( - <> - {config.logo.alt} - {/* Show light alternate if a user configure both light and dark logos. */} - {!("src" in config.logo) && ( - {config.logo.alt} - )} - - ) - } + + + {siteTitle} @@ -58,7 +40,7 @@ const { siteTitle, siteTitleHref } = Astro.locals.starlightRoute; span { overflow: hidden; } - img { + img, svg { height: calc(var(--sl-nav-height) - 2 * var(--sl-nav-pad-y)); width: auto; max-width: 100%; From 383c5b10149786d978f0d274a6c21724378b098e Mon Sep 17 00:00:00 2001 From: bendera Date: Mon, 4 Aug 2025 00:42:31 +0200 Subject: [PATCH 04/25] Fix build error --- src/components/SiteTitle.astro | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/SiteTitle.astro b/src/components/SiteTitle.astro index dc8291e..228170d 100644 --- a/src/components/SiteTitle.astro +++ b/src/components/SiteTitle.astro @@ -1,5 +1,4 @@ --- -import { logos } from "virtual:starlight/user-images"; import config from "virtual:starlight/user-config"; import VersionInfo from "./VersionInfo.astro"; const { siteTitle, siteTitleHref } = Astro.locals.starlightRoute; From 106613b173b5440e080cc0de5e905bbf2f013f79 Mon Sep 17 00:00:00 2001 From: bendera Date: Mon, 4 Aug 2025 00:43:18 +0200 Subject: [PATCH 05/25] Fix build error --- .../collapsible/ScrollableExample.astro | 126 +++++++++--------- 1 file changed, 63 insertions(+), 63 deletions(-) diff --git a/src/components/examples/collapsible/ScrollableExample.astro b/src/components/examples/collapsible/ScrollableExample.astro index 372263f..ba5910e 100644 --- a/src/components/examples/collapsible/ScrollableExample.astro +++ b/src/components/examples/collapsible/ScrollableExample.astro @@ -1,63 +1,63 @@ ---- - ---- - - - - - - - - - - - - - +--- + +--- + + + + + + + + + + + + + From eb093fc949554e00cb9b513e2af9ea5d8cc3e3d7 Mon Sep 17 00:00:00 2001 From: bendera Date: Wed, 6 Aug 2025 00:28:51 +0200 Subject: [PATCH 06/25] Upgrade Elements --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index cae481c..1b28aad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "@astrojs/check": "^0.9.4", "@astrojs/starlight": "^0.34.3", "@expressive-code/plugin-line-numbers": "^0.41.2", - "@vscode-elements/elements": "^2.0.0", + "@vscode-elements/elements": "^2.0.1", "@vscode-elements/webview-playground": "^1.7.0", "astro": "^5.7.13", "marked": "^15.0.11", @@ -2010,9 +2010,9 @@ } }, "node_modules/@vscode-elements/elements": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@vscode-elements/elements/-/elements-2.0.0.tgz", - "integrity": "sha512-enBBFWZjHFGUzpa6LD6nCjrXEDkCsGuoNDhRzA59Z1jRYMTKmOf6VI7BkWk8Y8Na7sYlq6UfK6vglzsbz+IoPg==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@vscode-elements/elements/-/elements-2.0.1.tgz", + "integrity": "sha512-4/xQY6VBri4dKpLTeQk97uXCpbY19767kZZ6Fs+nUCjOG+B5t+MDy6FKyfMOpXrBjOUApev9mu2tvShpo3TiHw==", "license": "MIT", "dependencies": { "@lit/context": "^1.1.3", diff --git a/package.json b/package.json index e209d92..c08838f 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "@astrojs/check": "^0.9.4", "@astrojs/starlight": "^0.34.3", "@expressive-code/plugin-line-numbers": "^0.41.2", - "@vscode-elements/elements": "^2.0.0", + "@vscode-elements/elements": "^2.0.1", "@vscode-elements/webview-playground": "^1.7.0", "astro": "^5.7.13", "marked": "^15.0.11", From 383b6591590d05f515d024eb6f6e463ae5954661 Mon Sep 17 00:00:00 2001 From: bendera Date: Sat, 9 Aug 2025 00:10:55 +0200 Subject: [PATCH 07/25] Update Collapsible docs --- .../examples/collapsible/ActionsExample.astro | 2 +- .../examples/collapsible/BasicExample.astro | 4 +- .../collapsible/CssBodyPartExample.astro | 23 ----- .../collapsible/DecorationsExample.astro | 2 +- .../examples/collapsible/Imports.astro | 1 + .../collapsible/ScrollableExample.astro | 98 +++++++++++++------ .../examples/collapsible/ToggleExample.astro | 2 +- src/content/docs/components/collapsible.mdx | 92 +++++------------ 8 files changed, 95 insertions(+), 129 deletions(-) delete mode 100644 src/components/examples/collapsible/CssBodyPartExample.astro diff --git a/src/components/examples/collapsible/ActionsExample.astro b/src/components/examples/collapsible/ActionsExample.astro index 339ca09..225b788 100644 --- a/src/components/examples/collapsible/ActionsExample.astro +++ b/src/components/examples/collapsible/ActionsExample.astro @@ -1,4 +1,4 @@ - + +

Open by default

 - +

Suspendisse potenti. Maecenas eu egestas metus. Nulla eget placerat mi, et efficitur augue.

 diff --git a/src/components/examples/collapsible/CssBodyPartExample.astro b/src/components/examples/collapsible/CssBodyPartExample.astro deleted file mode 100644 index f2e1d0d..0000000 --- a/src/components/examples/collapsible/CssBodyPartExample.astro +++ /dev/null @@ -1,23 +0,0 @@ - - - -

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- - Lorem - Ipsum - Dolor - Sit - Et - Amur - Sadispcing - -

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- diff --git a/src/components/examples/collapsible/DecorationsExample.astro b/src/components/examples/collapsible/DecorationsExample.astro index 56d1df6..58253ee 100644 --- a/src/components/examples/collapsible/DecorationsExample.astro +++ b/src/components/examples/collapsible/DecorationsExample.astro @@ -1,6 +1,6 @@ --- --- - + 99

Suspendisse potenti. Maecenas eu egestas metus. Nulla eget placerat mi, et diff --git a/src/components/examples/collapsible/Imports.astro b/src/components/examples/collapsible/Imports.astro index b2c83e0..16a1bb8 100644 --- a/src/components/examples/collapsible/Imports.astro +++ b/src/components/examples/collapsible/Imports.astro @@ -3,6 +3,7 @@ import "@vscode-elements/elements/dist/vscode-badge/index.js"; import "@vscode-elements/elements/dist/vscode-scrollable/index.js"; import "@vscode-elements/elements/dist/vscode-tree/index.js"; + import "@vscode-elements/elements/dist/vscode-tree-item/index.js"; import "@vscode-elements/elements/dist/vscode-single-select/index.js"; import "@vscode-elements/elements/dist/vscode-option/index.js"; import "@vscode-elements/elements/dist/vscode-collapsible/index.js"; diff --git a/src/components/examples/collapsible/ScrollableExample.astro b/src/components/examples/collapsible/ScrollableExample.astro index ba5910e..6dc4f80 100644 --- a/src/components/examples/collapsible/ScrollableExample.astro +++ b/src/components/examples/collapsible/ScrollableExample.astro @@ -1,9 +1,5 @@ ---- - ---- - - + + + + File saved + + + + File saved + + + + File saved + + + + File saved + + + + File saved + + + + File saved + + + + File saved + + + + File saved + + + + File saved + + + + File saved + + + + File saved + + + + File saved + + + + File saved + + + + File saved + + + + File saved + + + + File saved + + @@ -26,12 +87,6 @@ diff --git a/src/components/examples/collapsible/ToggleExample.astro b/src/components/examples/collapsible/ToggleExample.astro index 76d143f..55c4c7e 100644 --- a/src/components/examples/collapsible/ToggleExample.astro +++ b/src/components/examples/collapsible/ToggleExample.astro @@ -1,4 +1,4 @@ - +

Test content

 diff --git a/src/content/docs/components/collapsible.mdx b/src/content/docs/components/collapsible.mdx index 7bc76c1..5b1b5f4 100644 --- a/src/content/docs/components/collapsible.mdx +++ b/src/content/docs/components/collapsible.mdx @@ -11,7 +11,6 @@ import ActionsExample from "@components/examples/collapsible/ActionsExample.astr import DecorationsExample from "@components/examples/collapsible/DecorationsExample.astro"; import ScrollableExample from "@components/examples/collapsible/ScrollableExample.astro"; import ToggleExample from "@components/examples/collapsible/ToggleExample.astro"; -import CssBodyPartExample from "@components/examples/collapsible/CssBodyPartExample.astro"; @@ -22,10 +21,10 @@ import CssBodyPartExample from "@components/examples/collapsible/CssBodyPartExam ```html - +

Open by default

 - +

Suspendisse potenti. Maecenas eu egestas metus. Nulla eget placerat mi, et efficitur augue.

 ``` @@ -41,13 +40,13 @@ import CssBodyPartExample from "@components/examples/collapsible/CssBodyPartExam ## Toggle event -A custom event is dispatched when the visibility of content changes. +A custom event is dispatched when the visibility of content changes. Check the console log for the triggered events. ```html - +

Test content

 ``` @@ -60,6 +59,7 @@ A custom event is dispatched when the visibility of content changes. console.log(ev); }); ``` + @@ -72,7 +72,7 @@ visible exclusively when the component is in the opened state. ```html {2-15} - + ```html {2} - + 99

Suspendisse potenti. Maecenas eu egestas metus. Nulla eget placerat mi, et @@ -164,43 +164,6 @@ Elements in the `decorations` slot are always visible, in contrast to the `actio -## Overflown content - -The overflown content of the Collapsible component is hidden by default. Sometimes, this behavior -can be problematic. In such cases, it is useful that the Collapsible body is customizable. - - - - - ```html - -

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- - Lorem - Ipsum - Dolor - Sit - Et - Amur - Sadispcing - -

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- - ``` - - - ```css - .css-part-example::part(body) { - overflow: visible; - } - - .css-part-example p:last-child { - margin-bottom: 0; - } - ``` - - - ## Displaying large amounts of data Long content can be managed by the [Scrollable](/components/scrollable) component. @@ -210,7 +173,7 @@ Long content can be managed by the [Scrollable](/components/scrollable) componen ```html - + + + + File saved + + + + File saved + + ... + ``` @@ -236,39 +209,18 @@ Long content can be managed by the [Scrollable](/components/scrollable) componen ```javascript - const icons = { - leaf: "circle-outline", - }; - const tree = document.getElementById("tree-example"); document.getElementById("pin-icon").addEventListener("click", (ev) => { + // Prevent collapsing of the component: ev.stopPropagation(); }); document.getElementById("refresh-icon").addEventListener("click", (ev) => { + // Prevent collapsing of the component: ev.stopPropagation(); }); document.getElementById("filter-icon").addEventListener("click", (ev) => { + // Prevent collapsing of the component: ev.stopPropagation(); }); - - tree.data = [ - { icons, label: "File Saved" }, - { icons, label: "File Saved" }, - { icons, label: "File Saved" }, - { icons, label: "File Saved" }, - { icons, label: "File Saved" }, - { icons, label: "File Saved" }, - { icons, label: "File Saved" }, - { icons, label: "File Saved" }, - { icons, label: "File Saved" }, - { icons, label: "File Saved" }, - { icons, label: "File Saved" }, - { icons, label: "File Saved" }, - { icons, label: "File Saved" }, - { icons, label: "File Saved" }, - { icons, label: "File Saved" }, - { icons, label: "File Saved" }, - ]; ``` - From 727a05fd220deb7071b174fa7821f181d534cd86 Mon Sep 17 00:00:00 2001 From: bendera Date: Sat, 9 Aug 2025 00:18:23 +0200 Subject: [PATCH 08/25] Upgrade Elements --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1b28aad..e3f980c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "@astrojs/check": "^0.9.4", "@astrojs/starlight": "^0.34.3", "@expressive-code/plugin-line-numbers": "^0.41.2", - "@vscode-elements/elements": "^2.0.1", + "@vscode-elements/elements": "^2.1.0", "@vscode-elements/webview-playground": "^1.7.0", "astro": "^5.7.13", "marked": "^15.0.11", @@ -2010,9 +2010,9 @@ } }, "node_modules/@vscode-elements/elements": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@vscode-elements/elements/-/elements-2.0.1.tgz", - "integrity": "sha512-4/xQY6VBri4dKpLTeQk97uXCpbY19767kZZ6Fs+nUCjOG+B5t+MDy6FKyfMOpXrBjOUApev9mu2tvShpo3TiHw==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@vscode-elements/elements/-/elements-2.1.0.tgz", + "integrity": "sha512-1Y7I4kVDONZe+fEMDRLdysBtX1FYGMI52PwEiCVO70SHMN/bvNAcqHhjQqiZeJu3ElXTBsQUt5+VK8Fr1qxS5A==", "license": "MIT", "dependencies": { "@lit/context": "^1.1.3", diff --git a/package.json b/package.json index c08838f..268efae 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "@astrojs/check": "^0.9.4", "@astrojs/starlight": "^0.34.3", "@expressive-code/plugin-line-numbers": "^0.41.2", - "@vscode-elements/elements": "^2.0.1", + "@vscode-elements/elements": "^2.1.0", "@vscode-elements/webview-playground": "^1.7.0", "astro": "^5.7.13", "marked": "^15.0.11", From cc800c5833f7c6e4140cd480ad831aba2a7b7b39 Mon Sep 17 00:00:00 2001 From: bendera Date: Sun, 17 Aug 2025 22:09:59 +0200 Subject: [PATCH 09/25] Upgrade Astro --- package-lock.json | 97 +++++++++++++++++++++++++++++++++++------------ package.json | 4 +- 2 files changed, 75 insertions(+), 26 deletions(-) diff --git a/package-lock.json b/package-lock.json index e3f980c..d96f3f8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,11 +9,11 @@ "version": "0.0.1", "dependencies": { "@astrojs/check": "^0.9.4", - "@astrojs/starlight": "^0.34.3", + "@astrojs/starlight": "^0.35.2", "@expressive-code/plugin-line-numbers": "^0.41.2", "@vscode-elements/elements": "^2.1.0", "@vscode-elements/webview-playground": "^1.7.0", - "astro": "^5.7.13", + "astro": "^5.13.2", "marked": "^15.0.11", "sharp": "^0.34.1", "starlight-image-zoom": "^0.12.0", @@ -44,9 +44,9 @@ } }, "node_modules/@astrojs/compiler": { - "version": "2.12.0", - "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-2.12.0.tgz", - "integrity": "sha512-7bCjW6tVDpUurQLeKBUN9tZ5kSv5qYrGmcn0sG0IwacL7isR2ZbyyA3AdZ4uxsuUFOS2SlgReTH7wkxO6zpqWA==", + "version": "2.12.2", + "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-2.12.2.tgz", + "integrity": "sha512-w2zfvhjNCkNMmMMOn5b0J8+OmUaBL1o40ipMvqcG6NRpdC+lKxmTi48DT8Xw0SzJ3AfmeFLB45zXZXtmbsjcgw==", "license": "MIT" }, "node_modules/@astrojs/internal-helpers": { @@ -176,9 +176,9 @@ } }, "node_modules/@astrojs/starlight": { - "version": "0.34.3", - "resolved": "https://registry.npmjs.org/@astrojs/starlight/-/starlight-0.34.3.tgz", - "integrity": "sha512-MAuD3NF+E+QXJJuVKofoR6xcPTP4BJmYWeOBd03udVdubNGVnPnSWVZAi+ZtnTofES4+mJdp8BNGf+ubUxkiiA==", + "version": "0.35.2", + "resolved": "https://registry.npmjs.org/@astrojs/starlight/-/starlight-0.35.2.tgz", + "integrity": "sha512-curGghoW4s5pCbW2tINsJPoxEYPan87ptCOv7GZ+S24N3J6AyaOu/OsjZDEMaIpo3ZlObM5DQn+w7iXl3drDhQ==", "license": "MIT", "dependencies": { "@astrojs/markdown-remark": "^6.3.1", @@ -214,9 +214,9 @@ } }, "node_modules/@astrojs/telemetry": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/@astrojs/telemetry/-/telemetry-3.2.1.tgz", - "integrity": "sha512-SSVM820Jqc6wjsn7qYfV9qfeQvePtVc1nSofhyap7l0/iakUKywj3hfy3UJAOV4sGV4Q/u450RD4AaCaFvNPlg==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/@astrojs/telemetry/-/telemetry-3.3.0.tgz", + "integrity": "sha512-UFBgfeldP06qu6khs/yY+q1cDAaArM2/7AEIqQ9Cuvf7B1hNLq0xDrZkct+QoIGyjq56y8IaE2I3CTvG99mlhQ==", "license": "MIT", "dependencies": { "ci-info": "^4.2.0", @@ -228,7 +228,7 @@ "which-pm-runs": "^1.1.0" }, "engines": { - "node": "^18.17.1 || ^20.3.0 || >=22.0.0" + "node": "18.20.8 || ^20.3.0 || >=22.0.0" } }, "node_modules/@astrojs/yaml2ts": { @@ -2226,15 +2226,15 @@ } }, "node_modules/astro": { - "version": "5.7.13", - "resolved": "https://registry.npmjs.org/astro/-/astro-5.7.13.tgz", - "integrity": "sha512-cRGq2llKOhV3XMcYwQpfBIUcssN6HEK5CRbcMxAfd9OcFhvWE7KUy50zLioAZVVl3AqgUTJoNTlmZfD2eG0G1w==", + "version": "5.13.2", + "resolved": "https://registry.npmjs.org/astro/-/astro-5.13.2.tgz", + "integrity": "sha512-yjcXY0Ua3EwjpVd3GoUXa65HQ6qgmURBptA+M9GzE0oYvgfuyM7bIbH8IR/TWIbdefVUJR5b7nZ0oVnMytmyfQ==", "license": "MIT", "dependencies": { - "@astrojs/compiler": "^2.11.0", - "@astrojs/internal-helpers": "0.6.1", - "@astrojs/markdown-remark": "6.3.1", - "@astrojs/telemetry": "3.2.1", + "@astrojs/compiler": "^2.12.2", + "@astrojs/internal-helpers": "0.7.2", + "@astrojs/markdown-remark": "6.3.6", + "@astrojs/telemetry": "3.3.0", "@capsizecss/unpack": "^2.4.0", "@oslojs/encoding": "^1.1.0", "@rollup/pluginutils": "^5.1.4", @@ -2261,6 +2261,7 @@ "github-slugger": "^2.0.0", "html-escaper": "3.0.3", "http-cache-semantics": "^4.1.1", + "import-meta-resolve": "^4.1.0", "js-yaml": "^4.1.0", "kleur": "^4.1.5", "magic-string": "^0.30.17", @@ -2275,6 +2276,7 @@ "rehype": "^13.0.2", "semver": "^7.7.1", "shiki": "^3.2.1", + "smol-toml": "^1.3.4", "tinyexec": "^0.3.2", "tinyglobby": "^0.2.12", "tsconfck": "^3.1.5", @@ -2288,7 +2290,7 @@ "xxhash-wasm": "^1.1.0", "yargs-parser": "^21.1.1", "yocto-spinner": "^0.2.1", - "zod": "^3.24.2", + "zod": "^3.24.4", "zod-to-json-schema": "^3.24.5", "zod-to-ts": "^1.2.0" }, @@ -2296,7 +2298,7 @@ "astro": "astro.js" }, "engines": { - "node": "^18.17.1 || ^20.3.0 || >=22.0.0", + "node": "18.20.8 || ^20.3.0 || >=22.0.0", "npm": ">=9.6.5", "pnpm": ">=7.1.0" }, @@ -2320,6 +2322,53 @@ "astro": "^4.0.0-beta || ^5.0.0-beta || ^3.3.0" } }, + "node_modules/astro/node_modules/@astrojs/internal-helpers": { + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/@astrojs/internal-helpers/-/internal-helpers-0.7.2.tgz", + "integrity": "sha512-KCkCqR3Goym79soqEtbtLzJfqhTWMyVaizUi35FLzgGSzBotSw8DB1qwsu7U96ihOJgYhDk2nVPz+3LnXPeX6g==", + "license": "MIT" + }, + "node_modules/astro/node_modules/@astrojs/markdown-remark": { + "version": "6.3.6", + "resolved": "https://registry.npmjs.org/@astrojs/markdown-remark/-/markdown-remark-6.3.6.tgz", + "integrity": "sha512-bwylYktCTsLMVoCOEHbn2GSUA3c5KT/qilekBKA3CBng0bo1TYjNZPr761vxumRk9kJGqTOtU+fgCAp5Vwokug==", + "license": "MIT", + "dependencies": { + "@astrojs/internal-helpers": "0.7.2", + "@astrojs/prism": "3.3.0", + "github-slugger": "^2.0.0", + "hast-util-from-html": "^2.0.3", + "hast-util-to-text": "^4.0.2", + "import-meta-resolve": "^4.1.0", + "js-yaml": "^4.1.0", + "mdast-util-definitions": "^6.0.0", + "rehype-raw": "^7.0.0", + "rehype-stringify": "^10.0.1", + "remark-gfm": "^4.0.1", + "remark-parse": "^11.0.0", + "remark-rehype": "^11.1.2", + "remark-smartypants": "^3.0.2", + "shiki": "^3.2.1", + "smol-toml": "^1.3.4", + "unified": "^11.0.5", + "unist-util-remove-position": "^5.0.0", + "unist-util-visit": "^5.0.0", + "unist-util-visit-parents": "^6.0.1", + "vfile": "^6.0.3" + } + }, + "node_modules/astro/node_modules/@astrojs/prism": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/@astrojs/prism/-/prism-3.3.0.tgz", + "integrity": "sha512-q8VwfU/fDZNoDOf+r7jUnMC2//H2l0TuQ6FkGJL8vD8nw/q5KiL3DS1KKBI3QhI9UQhpJ5dc7AtqfbXWuOgLCQ==", + "license": "MIT", + "dependencies": { + "prismjs": "^1.30.0" + }, + "engines": { + "node": "18.20.8 || ^20.3.0 || >=22.0.0" + } + }, "node_modules/astro/node_modules/@img/sharp-darwin-arm64": { "version": "0.33.5", "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz", @@ -2990,9 +3039,9 @@ } }, "node_modules/ci-info": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.2.0.tgz", - "integrity": "sha512-cYY9mypksY8NRqgDB1XD1RiJL338v/551niynFTGkZOO2LHuB2OmOYxDIe/ttN9AHwrqdum1360G3ald0W9kCg==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.0.tgz", + "integrity": "sha512-l+2bNRMiQgcfILUi33labAZYIWlH1kWDp+ecNo5iisRKrbm0xcRyCww71/YU0Fkw0mAFpz9bJayXPjey6vkmaQ==", "funding": [ { "type": "github", diff --git a/package.json b/package.json index 268efae..d92c54e 100644 --- a/package.json +++ b/package.json @@ -12,11 +12,11 @@ }, "dependencies": { "@astrojs/check": "^0.9.4", - "@astrojs/starlight": "^0.34.3", + "@astrojs/starlight": "^0.35.2", "@expressive-code/plugin-line-numbers": "^0.41.2", "@vscode-elements/elements": "^2.1.0", "@vscode-elements/webview-playground": "^1.7.0", - "astro": "^5.7.13", + "astro": "^5.13.2", "marked": "^15.0.11", "sharp": "^0.34.1", "starlight-image-zoom": "^0.12.0", From a9a044fad893b25fc654a0252d7e5d4292155ace Mon Sep 17 00:00:00 2001 From: Adam Bender Date: Sun, 17 Aug 2025 22:19:38 +0200 Subject: [PATCH 10/25] Fix typo on Badge page --- src/content/docs/components/badge.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/components/badge.mdx b/src/content/docs/components/badge.mdx index 53cad91..26ca516 100644 --- a/src/content/docs/components/badge.mdx +++ b/src/content/docs/components/badge.mdx @@ -18,7 +18,7 @@ The following badge styles have been implemented based on the VSCode UI: 1. Default style 2. Activity bar counter 3. Counter -4. Tab bar counter +4. Tab header counter Date: Sun, 17 Aug 2025 22:34:00 +0200 Subject: [PATCH 11/25] Add TreeItem page --- astro.config.mjs | 2 ++ src/content/docs/components/tree-item.mdx | 9 +++++++++ src/pages/components/[component]/api.astro | 5 +++-- 3 files changed, 14 insertions(+), 2 deletions(-) create mode 100644 src/content/docs/components/tree-item.mdx diff --git a/astro.config.mjs b/astro.config.mjs index e87b0bd..f1a061d 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -117,6 +117,7 @@ export default defineConfig({ { label: "Textfield", link: "components/textfield" }, { label: "ToolbarButton", link: "components/toolbar-button" }, { label: "ToolbarContainer", link: "components/toolbar-container" }, + { label: "TreeItem", link: "components/tree-item" }, { label: "Tree", link: "components/tree" }, ], collapsed: true, @@ -168,6 +169,7 @@ export default defineConfig({ label: "ToolbarContainer", link: "components/toolbar-container/api", }, + { label: "TreeItem", link: "components/tree-item/api" }, { label: "Tree", link: "components/tree/api" }, ], collapsed: true, diff --git a/src/content/docs/components/tree-item.mdx b/src/content/docs/components/tree-item.mdx new file mode 100644 index 0000000..4ca4d07 --- /dev/null +++ b/src/content/docs/components/tree-item.mdx @@ -0,0 +1,9 @@ +--- +title: Tree Item +--- + +import PageSwitcher from "@components/PageSwitcher.astro"; + + + +Child component of [Tree](/components/tree) diff --git a/src/pages/components/[component]/api.astro b/src/pages/components/[component]/api.astro index aec5a04..2906159 100644 --- a/src/pages/components/[component]/api.astro +++ b/src/pages/components/[component]/api.astro @@ -37,6 +37,7 @@ export function getStaticPaths() { { params: { component: "textarea" } }, { params: { component: "textfield" } }, { params: { component: "toolbar-button" } }, + { params: { component: "tree-item" } }, { params: { component: "tree" } }, ]; } @@ -44,11 +45,11 @@ export function getStaticPaths() { const camelize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1); const kebabToPascal = (kebab: string) => { - const parts = kebab.split('-'); + const parts = kebab.split("-"); return parts.reduce( (prevVal, currentVal) => prevVal + camelize(currentVal), - '' + "" ); }; From 1fe5feb12d4bb3e133c56ff94d670a7361227c31 Mon Sep 17 00:00:00 2001 From: bendera Date: Mon, 18 Aug 2025 12:28:42 +0200 Subject: [PATCH 12/25] Better organized sidebar nav --- astro.config.mjs | 91 ++++++++++++++++++++++++++++++++----------- src/styles/custom.css | 16 ++++++++ 2 files changed, 84 insertions(+), 23 deletions(-) diff --git a/astro.config.mjs b/astro.config.mjs index f1a061d..0fa4be4 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -85,10 +85,15 @@ export default defineConfig({ { label: "Checkbox", link: "components/checkbox" }, { label: "CheckboxGroup", link: "components/checkbox-group" }, { label: "Collapsible", link: "components/collapsible" }, - { label: "ContextMenu", link: "components/context-menu" }, { - label: "ContextMenuItem", - link: "components/context-menu-item", + label: "ContextMenu", + items: [ + { label: "ContextMenu", link: "components/context-menu" }, + { + label: "ContextMenuItem", + link: "components/context-menu-item", + }, + ], }, { label: "Divider", link: "components/divider" }, { label: "FormContainer", link: "components/form-container" }, @@ -96,29 +101,52 @@ export default defineConfig({ { label: "FormHelper", link: "components/form-helper" }, { label: "Icon", link: "components/icon" }, { label: "Label", link: "components/label" }, - { label: "MultiSelect", link: "components/multi-select" }, { label: "Option", link: "components/option" }, { label: "ProgressRing", link: "components/progress-ring" }, { label: "Radio", link: "components/radio" }, { label: "RadioGroup", link: "components/radio-group" }, { label: "Scrollable", link: "components/scrollable" }, - { label: "SingleSelect", link: "components/single-select" }, + { + label: "Select", + items: [ + { label: "SingleSelect", link: "components/single-select" }, + { label: "MultiSelect", link: "components/multi-select" }, + ], + }, { label: "SplitLayout", link: "components/split-layout" }, - { label: "TabHeader", link: "components/tab-header" }, - { label: "TabPanel", link: "components/tab-panel" }, - { label: "Table", link: "components/table" }, - { label: "TableBody", link: "components/table-body" }, - { label: "TableCell", link: "components/table-cell" }, - { label: "TableHeader", link: "components/table-header" }, - { label: "TableHeaderCell", link: "components/table-header-cell" }, - { label: "TableRow", link: "components/table-row" }, - { label: "Tabs", link: "components/tabs" }, + { + label: "Table", + items: [ + { label: "Table", link: "components/table" }, + { label: "TableBody", link: "components/table-body" }, + { label: "TableCell", link: "components/table-cell" }, + { label: "TableHeader", link: "components/table-header" }, + { + label: "TableHeaderCell", + link: "components/table-header-cell", + }, + { label: "TableRow", link: "components/table-row" }, + ], + }, + { + label: "Tabs", + items: [ + { label: "Tabs", link: "components/tabs" }, + { label: "TabHeader", link: "components/tab-header" }, + { label: "TabPanel", link: "components/tab-panel" }, + ], + }, { label: "Textarea", link: "components/textarea" }, { label: "Textfield", link: "components/textfield" }, { label: "ToolbarButton", link: "components/toolbar-button" }, { label: "ToolbarContainer", link: "components/toolbar-container" }, - { label: "TreeItem", link: "components/tree-item" }, - { label: "Tree", link: "components/tree" }, + { + label: "Tree", + items: [ + { label: "Tree", link: "components/tree" }, + { label: "TreeItem", link: "components/tree-item" }, + ], + }, ], collapsed: true, }, @@ -131,10 +159,16 @@ export default defineConfig({ { label: "Checkbox", link: "components/checkbox/api" }, { label: "CheckboxGroup", link: "components/checkbox-group/api" }, { label: "Collapsible", link: "components/collapsible/api" }, - { label: "ContextMenu", link: "components/context-menu/api" }, { - label: "ContextMenuItem", - link: "components/context-menu-item/api", + label: "ContextMenu", + items: [ + { label: "ContextMenu", link: "components/context-menu/api" }, + { + label: "ContextMenuItem", + link: "components/context-menu-item/api", + }, + ], + collapsed: false, }, { label: "Divider", link: "components/divider/api" }, { label: "FormContainer", link: "components/form-container/api" }, @@ -142,13 +176,19 @@ export default defineConfig({ { label: "FormHelper", link: "components/form-helper/api" }, { label: "Icon", link: "components/icon/api" }, { label: "Label", link: "components/label/api" }, - { label: "MultiSelect", link: "components/multi-select/api" }, { label: "Option", link: "components/option/api" }, { label: "ProgressRing", link: "components/progress-ring/api" }, { label: "Radio", link: "components/radio/api" }, { label: "RadioGroup", link: "components/radio-group/api" }, { label: "Scrollable", link: "components/scrollable/api" }, - { label: "SingleSelect", link: "components/single-select/api" }, + { + label: "Select", + items: [ + { label: "SingleSelect", link: "components/single-select/api" }, + { label: "MultiSelect", link: "components/multi-select/api" }, + ], + collapsed: false, + }, { label: "SplitLayout", link: "components/split-layout/api" }, { label: "TabHeader", link: "components/tab-header/api" }, { label: "TabPanel", link: "components/tab-panel/api" }, @@ -169,8 +209,13 @@ export default defineConfig({ label: "ToolbarContainer", link: "components/toolbar-container/api", }, - { label: "TreeItem", link: "components/tree-item/api" }, - { label: "Tree", link: "components/tree/api" }, + { + label: "Tree", + items: [ + { label: "Tree", link: "components/tree/api" }, + { label: "TreeItem", link: "components/tree-item/api" }, + ], + }, ], collapsed: true, }, diff --git a/src/styles/custom.css b/src/styles/custom.css index db089ab..df294be 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -75,3 +75,19 @@ .api-details .na { opacity: 0.5; } + +.sidebar-pane li li .large { + /* font-size: var(--sl-text-sm); */ + /* font-weight: 400; */ +} + +.sidebar-pane li li .group-label .large { + font-size: var(--sl-text-l); + font-weight: 400; +} + +@media (min-width: 50rem) { + .sidebar-pane li li .group-label .large { + font-size: var(--sl-text-sm); + } +} From 6bbda04efe1bc0b2d0003c1a035b64706aa91d44 Mon Sep 17 00:00:00 2001 From: bendera Date: Mon, 18 Aug 2025 14:36:05 +0200 Subject: [PATCH 13/25] Add toggle switch example --- src/content/docs/components/checkbox.mdx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/content/docs/components/checkbox.mdx b/src/content/docs/components/checkbox.mdx index 53fc538..127b289 100644 --- a/src/content/docs/components/checkbox.mdx +++ b/src/content/docs/components/checkbox.mdx @@ -62,3 +62,17 @@ import Imports from "@components/examples/checkbox/Imports.astro"; ``` + +## Toggle switch + +Toggle switches are typically used to enable or disable functions with immediate effect, while +checkboxes often require a separate action (like a submit button) to apply changes. + + + Toggle switch + + ```html "toggle" + Toggle switch + ``` + + From f0e2f4684b0d946e2e8f25b3fdec6272799af771 Mon Sep 17 00:00:00 2001 From: bendera Date: Mon, 18 Aug 2025 15:18:20 +0200 Subject: [PATCH 14/25] Fix API section in sidebar nav --- astro.config.mjs | 30 ++++++++++++++++++++---------- 1 file changed, 20 insertions(+), 10 deletions(-) diff --git a/astro.config.mjs b/astro.config.mjs index 0fa4be4..891b084 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -190,18 +190,28 @@ export default defineConfig({ collapsed: false, }, { label: "SplitLayout", link: "components/split-layout/api" }, - { label: "TabHeader", link: "components/tab-header/api" }, - { label: "TabPanel", link: "components/tab-panel/api" }, - { label: "Table", link: "components/table/api" }, - { label: "TableBody", link: "components/table-body/api" }, - { label: "TableCell", link: "components/table-cell/api" }, - { label: "TableHeader", link: "components/table-header/api" }, { - label: "TableHeaderCell", - link: "components/table-header-cell/api", + label: "Table", + items: [ + { label: "Table", link: "components/table/api" }, + { label: "TableBody", link: "components/table-body/api" }, + { label: "TableCell", link: "components/table-cell/api" }, + { label: "TableHeader", link: "components/table-header/api" }, + { + label: "TableHeaderCell", + link: "components/table-header-cell/api", + }, + { label: "TableRow", link: "components/table-row/api" }, + ], + }, + { + label: "Tabs", + items: [ + { label: "Tabs", link: "components/tabs/api" }, + { label: "TabHeader", link: "components/tab-header/api" }, + { label: "TabPanel", link: "components/tab-panel/api" }, + ], }, - { label: "TableRow", link: "components/table-row/api" }, - { 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" }, From 55edec535a47f074722e8eb494d0da0b7d36032b Mon Sep 17 00:00:00 2001 From: bendera Date: Wed, 20 Aug 2025 01:35:34 +0200 Subject: [PATCH 15/25] Upgrade Elements --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index d96f3f8..53dc619 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "@astrojs/check": "^0.9.4", "@astrojs/starlight": "^0.35.2", "@expressive-code/plugin-line-numbers": "^0.41.2", - "@vscode-elements/elements": "^2.1.0", + "@vscode-elements/elements": "^2.2.0", "@vscode-elements/webview-playground": "^1.7.0", "astro": "^5.13.2", "marked": "^15.0.11", @@ -2010,9 +2010,9 @@ } }, "node_modules/@vscode-elements/elements": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@vscode-elements/elements/-/elements-2.1.0.tgz", - "integrity": "sha512-1Y7I4kVDONZe+fEMDRLdysBtX1FYGMI52PwEiCVO70SHMN/bvNAcqHhjQqiZeJu3ElXTBsQUt5+VK8Fr1qxS5A==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@vscode-elements/elements/-/elements-2.2.0.tgz", + "integrity": "sha512-Sd3DPIt628XEA+eSEUFXc3q60MNPRGV1zVEinbftsFNVkSL/vULvv6XsM36FTxkSvEnAu4wnQhOV4KIbEsiHOA==", "license": "MIT", "dependencies": { "@lit/context": "^1.1.3", diff --git a/package.json b/package.json index d92c54e..1ed1a6c 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "@astrojs/check": "^0.9.4", "@astrojs/starlight": "^0.35.2", "@expressive-code/plugin-line-numbers": "^0.41.2", - "@vscode-elements/elements": "^2.1.0", + "@vscode-elements/elements": "^2.2.0", "@vscode-elements/webview-playground": "^1.7.0", "astro": "^5.13.2", "marked": "^15.0.11", From 6782d0f8cb51eb2746e1c428506975b0cc60873b Mon Sep 17 00:00:00 2001 From: bendera Date: Tue, 26 Aug 2025 20:04:35 +0200 Subject: [PATCH 16/25] Add progress bar docs --- astro.config.mjs | 2 + .../examples/progress-bar/Imports.astro | 3 ++ src/content/docs/components/progress-bar.mdx | 47 +++++++++++++++++++ src/pages/components/[component]/api.astro | 1 + 4 files changed, 53 insertions(+) create mode 100644 src/components/examples/progress-bar/Imports.astro create mode 100644 src/content/docs/components/progress-bar.mdx diff --git a/astro.config.mjs b/astro.config.mjs index 891b084..6b0d59f 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -102,6 +102,7 @@ export default defineConfig({ { label: "Icon", link: "components/icon" }, { label: "Label", link: "components/label" }, { label: "Option", link: "components/option" }, + { label: "ProgressBar", link: "components/progress-bar" }, { label: "ProgressRing", link: "components/progress-ring" }, { label: "Radio", link: "components/radio" }, { label: "RadioGroup", link: "components/radio-group" }, @@ -177,6 +178,7 @@ export default defineConfig({ { label: "Icon", link: "components/icon/api" }, { label: "Label", link: "components/label/api" }, { label: "Option", link: "components/option/api" }, + { label: "ProgressBar", link: "components/progress-bar/api" }, { label: "ProgressRing", link: "components/progress-ring/api" }, { label: "Radio", link: "components/radio/api" }, { label: "RadioGroup", link: "components/radio-group/api" }, diff --git a/src/components/examples/progress-bar/Imports.astro b/src/components/examples/progress-bar/Imports.astro new file mode 100644 index 0000000..055d5fe --- /dev/null +++ b/src/components/examples/progress-bar/Imports.astro @@ -0,0 +1,3 @@ + diff --git a/src/content/docs/components/progress-bar.mdx b/src/content/docs/components/progress-bar.mdx new file mode 100644 index 0000000..c15690e --- /dev/null +++ b/src/content/docs/components/progress-bar.mdx @@ -0,0 +1,47 @@ +--- +title: Progress Bar +--- + +import Demo from "@components/Demo.astro"; +import PageSwitcher from "@components/PageSwitcher.astro"; +import Imports from "@components/examples/progress-bar/Imports.astro"; + + + + +## Basic example + + + + + ```html + + ``` + + + +## Long running threshold + +Switches to a gentler animation after a while in indeterminate mode, consuming fewer resources. + + + + + ```html 'long-running-threshold="1000"' + + ``` + + + +## Determinate mode + +Set a specific value. The `max` value is optional, its default value is 100. + + + + + ```html 'value="70"' + + ``` + + diff --git a/src/pages/components/[component]/api.astro b/src/pages/components/[component]/api.astro index 2906159..921c2bd 100644 --- a/src/pages/components/[component]/api.astro +++ b/src/pages/components/[component]/api.astro @@ -19,6 +19,7 @@ export function getStaticPaths() { { params: { component: "label" } }, { params: { component: "multi-select" } }, { params: { component: "option" } }, + { params: { component: "progress-bar" } }, { params: { component: "progress-ring" } }, { params: { component: "radio" } }, { params: { component: "radio-group" } }, From a83ebeb15bea3cba861c683d15703482ae339bad Mon Sep 17 00:00:00 2001 From: bendera Date: Tue, 26 Aug 2025 20:11:31 +0200 Subject: [PATCH 17/25] a11y fix --- src/components/SiteTitle.astro | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/SiteTitle.astro b/src/components/SiteTitle.astro index 228170d..b7afefe 100644 --- a/src/components/SiteTitle.astro +++ b/src/components/SiteTitle.astro @@ -16,7 +16,7 @@ const { siteTitle, siteTitleHref } = Astro.locals.starlightRoute; {siteTitle} -