vscode-elements · bendera · Jun 21, 2025 · Apr 23, 2025 · Apr 23, 2025 · Apr 23, 2025
diff --git a/dev/vscode-multi-select/a11y-combobox.html b/dev/vscode-multi-select/a11y-combobox.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VSCode Elements</title>
+    <link
+      rel="stylesheet"
+      href="/node_modules/@vscode/codicons/dist/codicon.css"
+      id="vscode-codicon-stylesheet"
+    >
+    <script
+      type="module"
+      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
+    ></script>
+    <script type="module" src="/dist/main.js"></script>
+    <script>
+      const logEvents = (selector, eventType) => {
+        document.querySelector(selector).addEventListener(eventType, (ev) => {
+          console.log(ev);
+        });
+      };
+    </script>
+  </head>
+
+  <body>
+    <main>
+      <vscode-demo>
+        <vscode-multi-select name="fruit" id="select" label="Fruits" combobox>
+          <vscode-option value="banana">Banana</vscode-option>
+          <vscode-option value="cherry">Cherry</vscode-option>
+          <vscode-option value="apple">Apple</vscode-option>
+          <vscode-option value="strawberry">Strawberry</vscode-option>
+          <vscode-option value="lemon">Lemon</vscode-option>
+          <vscode-option value="orange">Orange</vscode-option>
+        </vscode-multi-select>
+      </vscode-demo>
+    </main>
+  </body>
+</html>
diff --git a/dev/vscode-multi-select/a11y-select.html b/dev/vscode-multi-select/a11y-select.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VSCode Elements</title>
+    <link
+      rel="stylesheet"
+      href="/node_modules/@vscode/codicons/dist/codicon.css"
+      id="vscode-codicon-stylesheet"
+    >
+    <script
+      type="module"
+      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
+    ></script>
+    <script type="module" src="/dist/main.js"></script>
+    <script>
+      const logEvents = (selector, eventType) => {
+        document.querySelector(selector).addEventListener(eventType, (ev) => {
+          console.log(ev);
+        });
+      };
+    </script>
+  </head>
+
+  <body>
+    <main>
+      <vscode-demo>
+        <vscode-multi-select name="fruit" id="select" label="Fruits">
+          <vscode-option value="banana">Banana</vscode-option>
+          <vscode-option value="cherry">Cherry</vscode-option>
+          <vscode-option value="apple">Apple</vscode-option>
+          <vscode-option value="strawberry">Strawberry</vscode-option>
+          <vscode-option value="lemon">Lemon</vscode-option>
+          <vscode-option value="orange">Orange</vscode-option>
+        </vscode-multi-select>
+      </vscode-demo>
+    </main>
+  </body>
+</html>
diff --git a/dev/vscode-multi-select/autofocus-combobox.html b/dev/vscode-multi-select/autofocus-combobox.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>multi combo</title>
+    <link
+      rel="stylesheet"
+      href="/node_modules/@vscode/codicons/dist/codicon.css"
+      id="vscode-codicon-stylesheet"
+    >
+    <script
+      type="module"
+      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
+    ></script>
+    <script type="module" src="/dist/main.js"></script>
+    <script>
+      const logEvents = (selector, eventType) => {
+        document.querySelector(selector).addEventListener(eventType, (ev) => {
+          console.log(ev);
+        });
+      };
+    </script>
+  </head>
+
+  <body>
+    <main>
+      <vscode-demo>
+        <vscode-multi-select label="Single Select example" autofocus combobox>
+          <vscode-option>Lorem</vscode-option>
+          <vscode-option>Ipsum</vscode-option>
+          <vscode-option>Dolor</vscode-option>
+        </vscode-multi-select>
+        <button type="button">focus</button>
+      </vscode-demo>
+      <script type="module">
+        const sl = document.querySelector('vscode-single-select');
+        const bt = document.querySelector('button');
+
+        bt.addEventListener('click', () => {
+          sl.focus();
+        });
+      </script>
+    </main>
+  </body>
+</html>
diff --git a/dev/vscode-multi-select/autofocus-select.html b/dev/vscode-multi-select/autofocus-select.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>multi select</title>
+    <link
+      rel="stylesheet"
+      href="/node_modules/@vscode/codicons/dist/codicon.css"
+      id="vscode-codicon-stylesheet"
+    >
+    <script
+      type="module"
+      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
+    ></script>
+    <script type="module" src="/dist/main.js"></script>
+    <script>
+      const logEvents = (selector, eventType) => {
+        document.querySelector(selector).addEventListener(eventType, (ev) => {
+          console.log(ev);
+        });
+      };
+    </script>
+    <style>
+      vscode-single-select:focus {
+        --vscode-settings-dropdownBackground: red;
+      }
+    </style>
+  </head>
+
+  <body>
+    <main>
+      <vscode-demo>
+        <vscode-multi-select label="Single Select example" autofocus>
+          <vscode-option>Lorem</vscode-option>
+          <vscode-option>Ipsum</vscode-option>
+          <vscode-option>Dolor</vscode-option>
+        </vscode-multi-select>
+        <button type="button">focus</button>
+      </vscode-demo>
+      <script type="module">
+        const sl = document.querySelector('vscode-multi-select');
+        const bt = document.querySelector('button');
+
+        bt.addEventListener('click', () => {
+          sl.focus();
+        });
+      </script>
+    </main>
+  </body>
+</html>
diff --git a/dev/vscode-multi-select/combobox-suggestion-mode.html b/dev/vscode-multi-select/combobox-suggestion-mode.html
@@ -224,14 +224,8 @@
           <vscode-option>Zimbabwe</vscode-option>
         </vscode-multi-select>
         <script type="module">
-          const sl = document.querySelector('vscode-multi-select');
-          sl.addEventListener('change', () => {
-            console.log(sl.value);
-          });
-
-          sl.addEventListener('vsc-multi-select-create-option', (ev) => {
-            console.log(ev);
-          });
+          logEvents('vscode-multi-select', 'change');
+          logEvents('vscode-multi-select', 'vsc-multi-select-create-option');
         </script>
       </vscode-demo>
     </main>

diff --git a/dev/vscode-single-select/combobox-mode/a11y.html b/dev/vscode-single-select/combobox-mode/a11y.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VSCode Elements</title>
+    <link
+      rel="stylesheet"
+      href="/node_modules/@vscode/codicons/dist/codicon.css"
+      id="vscode-codicon-stylesheet"
+    >
+    <script
+      type="module"
+      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
+    ></script>
+    <script type="module" src="/dist/main.js"></script>
+    <script>
+      const logEvents = (selector, eventType) => {
+        document.querySelector(selector).addEventListener(eventType, (ev) => {
+          console.log(ev);
+        });
+      };
+    </script>
+  </head>
+
+  <body>
+    <main>
+      <vscode-demo>
+        <vscode-single-select name="fruit" id="select" label="Fruits" combobox>
+          <vscode-option value="banana">Banana</vscode-option>
+          <vscode-option value="cherry">Cherry</vscode-option>
+          <vscode-option value="apple">Apple</vscode-option>
+          <vscode-option value="strawberry">Strawberry</vscode-option>
+          <vscode-option value="lemon">Lemon</vscode-option>
+          <vscode-option value="orange">Orange</vscode-option>
+        </vscode-single-select>
+      </vscode-demo>
+    </main>
+  </body>
+</html>
diff --git a/dev/vscode-single-select/combobox-mode/autofocus-combobox.html b/dev/vscode-single-select/combobox-mode/autofocus-combobox.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>single combo</title>
+    <link
+      rel="stylesheet"
+      href="/node_modules/@vscode/codicons/dist/codicon.css"
+      id="vscode-codicon-stylesheet"
+    >
+    <script
+      type="module"
+      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
+    ></script>
+    <script type="module" src="/dist/main.js"></script>
+    <script>
+      const logEvents = (selector, eventType) => {
+        document.querySelector(selector).addEventListener(eventType, (ev) => {
+          console.log(ev);
+        });
+      };
+    </script>
+  </head>
+
+  <body>
+    <main>
+      <vscode-demo>
+        <vscode-single-select label="Single Select example" autofocus combobox>
+          <vscode-option>Lorem</vscode-option>
+          <vscode-option>Ipsum</vscode-option>
+          <vscode-option>Dolor</vscode-option>
+        </vscode-single-select>
+        <button type="button">focus</button>
+      </vscode-demo>
+      <script type="module">
+        const sl = document.querySelector('vscode-single-select');
+        const bt = document.querySelector('button');
+
+        bt.addEventListener('click', () => {
+          sl.focus();
+        });
+      </script>
+    </main>
+  </body>
+</html>
diff --git a/...ngle-select/combobox-suggestion-mode.html → ...mbobox-mode/combobox-suggestion-mode.html b/...ngle-select/combobox-suggestion-mode.html → ...mbobox-mode/combobox-suggestion-mode.html
diff --git a/dev/vscode-single-select/combobox.html → ...single-select/combobox-mode/combobox.html b/dev/vscode-single-select/combobox.html → ...single-select/combobox-mode/combobox.html
diff --git a/dev/vscode-single-select/deleting-value.html → ...-select/combobox-mode/deleting-value.html b/dev/vscode-single-select/deleting-value.html → ...-select/combobox-mode/deleting-value.html
diff --git a/dev/vscode-single-select/select-mode/a11y.html b/dev/vscode-single-select/select-mode/a11y.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VSCode Elements</title>
+    <link
+      rel="stylesheet"
+      href="/node_modules/@vscode/codicons/dist/codicon.css"
+      id="vscode-codicon-stylesheet"
+    >
+    <script
+      type="module"
+      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
+    ></script>
+    <script type="module" src="/dist/main.js"></script>
+    <script>
+      const logEvents = (selector, eventType) => {
+        document.querySelector(selector).addEventListener(eventType, (ev) => {
+          console.log(ev);
+        });
+      };
+    </script>
+  </head>
+
+  <body>
+    <main>
+      <vscode-demo>
+        <vscode-single-select name="fruit" id="select" label="Fruits">
+          <vscode-option value="banana">Banana</vscode-option>
+          <vscode-option value="cherry">Cherry</vscode-option>
+          <vscode-option value="apple">Apple</vscode-option>
+          <vscode-option value="strawberry">Strawberry</vscode-option>
+          <vscode-option value="lemon">Lemon</vscode-option>
+          <vscode-option value="orange">Orange</vscode-option>
+        </vscode-single-select>
+      </vscode-demo>
+    </main>
+  </body>
+</html>
diff --git a/dev/vscode-single-select/select-mode/autofocus-select.html b/dev/vscode-single-select/select-mode/autofocus-select.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>single select</title>
+    <link
+      rel="stylesheet"
+      href="/node_modules/@vscode/codicons/dist/codicon.css"
+      id="vscode-codicon-stylesheet"
+    >
+    <script
+      type="module"
+      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
+    ></script>
+    <script type="module" src="/dist/main.js"></script>
+    <script>
+      const logEvents = (selector, eventType) => {
+        document.querySelector(selector).addEventListener(eventType, (ev) => {
+          console.log(ev);
+        });
+      };
+    </script>
+    <style>
+      vscode-single-select:focus {
+        --vscode-settings-dropdownBackground: rgba(0, 255, 0, 0.1);
+      }
+    </style>
+  </head>
+
+  <body>
+    <main>
+      <vscode-demo>
+        <vscode-single-select label="Single Select example" autofocus>
+          <vscode-option>Lorem</vscode-option>
+          <vscode-option>Ipsum</vscode-option>
+          <vscode-option>Dolor</vscode-option>
+        </vscode-single-select>
+        <button type="button">focus</button>
+      </vscode-demo>
+      <script type="module">
+        const sl = document.querySelector('vscode-single-select');
+        const bt = document.querySelector('button');
+
+        bt.addEventListener('click', () => {
+          sl.focus();
+        });
+      </script>
+    </main>
+  </body>
+</html>