Codex/fix small textfield height

.github/workflows/release.yml

@@ -1,144 +1,98 @@
 name: Release
 
+# `npm run release` creates and pushes a tag after updating the version and
+# CHANGELOG. Start this workflow manually and enter that tag to publish it.
 on:
   workflow_dispatch:
     inputs:
-      releaseType:
-        description: 'Release Type'
+      version_tag:
+        description: 'Existing release tag to publish, for example v2.6.0'
         required: true
-        type: choice
-        default: 'patch'
-        options:
-          - patch
-          - minor
-          - major
-      releaseChannel:
-        description: 'Release Channel'
-        required: true
-        type: choice
-        default: next
-        options:
-          - stable
-          - next
-          - nextmajor
+        type: string
 
 permissions:
-  id-token: write
   contents: write
+  id-token: write
 
 jobs:
   release:
     runs-on: ubuntu-latest
+    env:
+      VERSION_TAG: ${{ inputs.version_tag }}
     steps:
-      - name: Input parameters
-        run: echo "${{ toJSON(github.event.inputs) }}"
+      - name: Validate release tag
+        shell: bash
+        run: |
+          if [[ ! "$VERSION_TAG" =~ ^v(0|[1-9][0-9]*)\.(0|[1-9][0-9]*)\.(0|[1-9][0-9]*)(-[0-9A-Za-z.-]+)?(\+[0-9A-Za-z.-]+)?$ ]]; then
+            echo "Invalid version tag: $VERSION_TAG" >&2
+            echo "Expected a tag such as v2.6.0 or v2.6.0-beta.1" >&2
+            exit 1
+          fi
 
-      - name: Clone Repository
+      - name: Checkout repository
         uses: actions/checkout@v7
         with:
+          ref: refs/tags/${{ inputs.version_tag }}
           fetch-depth: 0
 
-      - name: Setup Git
-        run: |
-          git config --global user.name "github-actions"
-          git config --global user.email "szoftverhiba+github-actions@gmail.com"
-
-      - name: Get Current Version Number
-        run: |
-          CURRENT_VERSION=$(npm pkg get version | cut -d'"' -f 2)
-          echo "CURRENT_VERSION=$CURRENT_VERSION" >> $GITHUB_ENV
-          echo $CURRENT_VERSION
-
-      - name: Setup Node version
+      - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          scope: '@vscode-elements'
           node-version: 24
           registry-url: 'https://registry.npmjs.org'
-          cache: 'npm'
-          cache-dependency-path: |
-            package-lock.json
+          cache: npm
+
+      - name: Verify release version
+        shell: bash
+        run: |
+          PACKAGE_VERSION=$(node -p "require('./package.json').version")
+          TAG_VERSION=${VERSION_TAG#v}
+          if [[ "$PACKAGE_VERSION" != "$TAG_VERSION" ]]; then
+            echo "Tag version $TAG_VERSION does not match package version $PACKAGE_VERSION" >&2
+            exit 1
+          fi
+          echo "PACKAGE_VERSION=$PACKAGE_VERSION" >> "$GITHUB_ENV"
 
       - name: Install dependencies
         run: npm ci
 
-      - name: Bump version (Next)
-        run: |
-          RELEASE_VERSION=$(npx semver -i prerelease --preid=pre $CURRENT_VERSION)
-          echo "RELEASE_VERSION=$RELEASE_VERSION" >> $GITHUB_ENV
-          npm version $RELEASE_VERSION --git-tag-version=false
-        if: ${{ github.event.inputs.releaseChannel == 'next' || github.event.inputs.releaseChannel == 'nextmajor' }}
+      - name: Build
+        run: npm run build
 
-      - name: Bump version (Stable)
-        run: |
-          RELEASE_VERSION=$(npx semver $CURRENT_VERSION -i ${{ github.event.inputs.releaseType }})
-          echo "RELEASE_VERSION=$RELEASE_VERSION" >> $GITHUB_ENV
-          npm version $RELEASE_VERSION --git-tag-version=false
-        if: ${{ github.event.inputs.releaseChannel == 'stable' }}
+      - name: Test
+        run: npm run test
 
-      - name: Update Changelog (Stable)
-        run: node scripts/update-changelog.mjs
-        if: ${{ github.event.inputs.releaseChannel == 'stable' }}
+      - name: Test release scripts
+        run: npm run test:release
 
-      - name: Update version number in the base class
-        run: node scripts/update-version-number.mjs
+      - name: Lint
+        run: npm run lint
 
-      - name: Build
-        run: |
-          npm run build
-          npm run test
-          npm run lint
-          npm pack
+      - name: Check formatting
+        run: npm run prettier
 
-      - name: Tagging
-        run: |
-          git add .
-          git commit -m "$RELEASE_VERSION"
-          git tag -a v$RELEASE_VERSION -m "$RELEASE_VERSION"
+      - name: Pack package
+        run: npm pack
 
-      - name: Push tag
+      - name: Publish to npmjs
+        shell: bash
         run: |
-          git push
-          git push origin --tags
-
-      - run: |
-          export GIT_TAG=$(git describe --tags --abbrev=0)
-          echo "GIT_TAG=$GIT_TAG" >> $GITHUB_ENV
-
-      - name: Publish to Npmjs.com (Next)
-        run: npm publish --access=public --tag=next vscode-elements-elements-${{ env.RELEASE_VERSION }}.tgz
+          if npm view "nusys-ui@${PACKAGE_VERSION}" version >/dev/null 2>&1; then
+            echo "nusys-ui@${PACKAGE_VERSION} is already published; skipping npm publish."
+          else
+            npm publish "nusys-ui-${PACKAGE_VERSION}.tgz" --access=public --provenance
+          fi
         env:
           NODE_AUTH_TOKEN: ${{ secrets.ORG_NPM_TOKEN }}
-        if: ${{ github.event.inputs.releaseChannel == 'next' }}
 
-      - name: Publish to Npmjs.com (Next Major)
-        run: npm publish --access=public --tag=nextmajor vscode-elements-elements-${{ env.RELEASE_VERSION }}.tgz
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.ORG_NPM_TOKEN }}
-        if: ${{ github.event.inputs.releaseChannel == 'nextmajor' }}
+      - name: Extract release notes
+        run: node scripts/extract-release-notes.mjs "$PACKAGE_VERSION"
 
-      - name: Publish to Npmjs.com (Stable)
-        run: npm publish --access=public vscode-elements-elements-${{ env.RELEASE_VERSION }}.tgz
+      - name: Create GitHub release
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.ORG_NPM_TOKEN }}
-        if: ${{ github.event.inputs.releaseChannel == 'stable' }}
-
-      - name: Github Release (Next)
-        uses: ncipollo/release-action@v1
-        if: ${{ github.event.inputs.releaseChannel == 'next' || github.event.inputs.releaseChannel == 'nextmajor' }}
-        with:
-          artifacts: './vscode-elements-elements-*'
-          prerelease: true
-          draft: true
-          tag: ${{ env.GIT_TAG }}
-          generateReleaseNotes: true
-
-      - name: Github Release (Stable)
-        uses: ncipollo/release-action@v1
-        if: ${{ github.event.inputs.releaseChannel == 'stable' }}
-        with:
-          artifacts: './vscode-elements-elements-*'
-          prerelease: false
-          draft: true
-          tag: ${{ env.GIT_TAG }}
-          generateReleaseNotes: true
+          GH_TOKEN: ${{ github.token }}
+        run: >-
+          gh release create "$VERSION_TAG"
+          "nusys-ui-${PACKAGE_VERSION}.tgz"
+          --title "$VERSION_TAG"
+          --notes-file dist/release-notes.md

CONTRIBUTING.md

@@ -27,3 +27,16 @@ Writing tests is not required, but we appreciate it if you add tests for new cod
 affect the user-facing functionality, please update the changelog file.
 
 Commit messages aim to follow the [50/72 style](https://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html).
+
+## Publish a release
+
+Releases are created locally with `npm run release`. The command defaults to a patch release; pass
+`minor`, `major`, or an explicit version when needed, for example `npm run release -- minor`.
+
+The release assistant requires a clean Git working tree. It previews and updates `CHANGELOG.md` from
+commits since the latest release, synchronizes `package.json` and `package-lock.json`, and creates a
+release commit and annotated tag. After pushing that tag to `origin`, open the GitHub `Release`
+workflow, choose **Run workflow**, and enter the existing version tag (for example, `v2.6.0`). The
+workflow checks out that tag, runs all verification steps, and publishes the package to npmjs. npm
+publish credentials are only used by GitHub Actions; the local command never publishes a package
+directly.

README.md

@@ -4,6 +4,14 @@ For the end-user documentation, [click here](https://vscode-elements.github.io).
 
 This documentation is intended for developers who would like to contribute to or modify the code on their own.
 
+## Documentation
+
+Details of the changes made in this repository are documented in the [`docs`](docs/) directory. For all other documentation, visit [https://vscode-elements.github.io/](https://vscode-elements.github.io/).
+
+- [Form control sizes](docs/form-size.md) explains the shared `small`,
+  `medium`, and `large` sizes, supported components, runtime usage, form groups,
+  and icon sizing.
+
 VSCode Elements is based on the [Lit](https://lit.dev/) library. The local development environment requires `NodeJS 22` or newer. If you want to use a local copy of the library in your codebase, you can use the `npm link` command. First, navigate to the VSCode Elements directory and run:
 
 ```bash
@@ -13,15 +21,15 @@ npm link
 Then, go to the library where you want to use it and run:
 
 ```bash
-npm link @vscode-elements/elements
+npm link nusys-ui
 ```
 
 > [!WARNING]
 >
 > Multiple packages must be linked with a single command. For example:
 >
 > ```bash
-> npm link @vscode-elements/elements @vscode-elements/webview-playground
+> npm link nusys-ui @vscode-elements/webview-playground
 > ```
 
 Don't forget to run the build script before using the package.

dev/vscode-badge/basic-example.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>badge/basic-example</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"

dev/vscode-badge/fallback-styles.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>badge/fallback-styles</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"

dev/vscode-button-group/dropdown-menu.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>&lt;vscode-button-group&gt; Demo</title>
+    <title>button-group/dropdown-menu</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
@@ -34,7 +34,7 @@
     <main>
       <h2>Basic example</h2>
 
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <div class="dropdown-menu">
           <vscode-button-group>
             <vscode-button secondary id="button-1" icon="check"
@@ -91,7 +91,23 @@ <h2>Basic example</h2>
             menu.show = !menu.show;
           });
         </script>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-button')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>

dev/vscode-button-group/vscode-button-group.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>&lt;vscode-button-group&gt; Demo</title>
+    <title>button-group/vscode-button-group</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
@@ -53,7 +53,7 @@
     <main>
       <h2>Basic example</h2>
 
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <p>
           <vscode-button-group>
             <vscode-button secondary>Left</vscode-button>
@@ -144,7 +144,23 @@ <h2>Basic example</h2>
             >
           </vscode-button-group>
         </div>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-button')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>

dev/vscode-button/autofocus.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VSCode Elements</title>
+    <title>button/autofocus</title>
     <link
       rel="stylesheet"
       href="/node_modules/@vscode/codicons/dist/codicon.css"
@@ -26,9 +26,25 @@
   <body>
     <h1>Autofocus</h1>
     <main>
-      <vscode-demo>
+      <vscode-demo id="size-demo-target">
         <vscode-button autofocus>Focused</vscode-button>
+        <div class="size-buttons">
+          <button type="button" data-size="small">small</button>
+          <button type="button" data-size="medium">medium</button>
+          <button type="button" data-size="large">large</button>
+        </div>
       </vscode-demo>
     </main>
+    <script type="module">
+      document.querySelectorAll('.size-buttons button').forEach((button) => {
+        button.addEventListener('click', () => {
+          document
+            .querySelectorAll('#size-demo-target vscode-button')
+            .forEach((el) => {
+              el.setAttribute('size', button.dataset.size);
+            });
+        });
+      });
+    </script>
   </body>
 </html>