@meddleware/token-deployer-ui 0.0.8 → 0.0.9

package/.github/workflows/node-ci.yml

@@ -27,6 +27,15 @@ jobs:
       - name: Type-check
         run: npm run type-check
 
+      - name: Lint CSS (stylelint)
+        run: npm run lint:css --if-present
+
+      - name: Lint JS (eslint + vuejs-a11y)
+        run: npm run lint:js --if-present
+
+      - name: Lint HTML (html-validate)
+        run: npm run lint:html --if-present
+
       - name: Unit tests
         run: npm test
 

package/.github/workflows/npm-publish.yml

@@ -62,8 +62,22 @@ jobs:
             exit 0
           fi
           VERSION=$(node -p "require('./package.json').version")
-          if npm view "@meddleware/token-deployer-ui@${VERSION}" version >/dev/null 2>&1; then
+          NAME=$(node -p "require('./package.json').name")
+          ENC=$(printf '%s' "$NAME" | sed 's#/#%2f#')
+          # Check the registry directly — `npm view` can transiently miss a freshly
+          # first-published version and then attempt a re-publish. A 200 means it's live.
+          if [ "$(curl -s -o /dev/null -w '%{http_code}' "https://registry.npmjs.org/${ENC}/${VERSION}")" = "200" ]; then
             echo "::notice::v${VERSION} already published to npmjs — skipping."
           else
-            npm publish
+            # Publish, but treat a "version already exists" error as success so a
+            # manually-published version (or a registry race) leaves the job green.
+            set +e; OUT=$(npm publish 2>&1); RC=$?; set -e
+            printf '%s\n' "$OUT"
+            if [ "$RC" -ne 0 ]; then
+              if printf '%s' "$OUT" | grep -qiE 'cannot publish over|previously published|EPUBLISHCONFLICT'; then
+                echo "::notice::v${VERSION} already published — treating as success."
+              else
+                exit "$RC"
+              fi
+            fi
           fi

package/.htmlvalidate.mjs

@@ -0,0 +1,30 @@
+// html-validate over the Vue SFC templates (via html-validate-vue): checks element nesting and
+// content models (e.g. no <p> inside <ul>, no button inside a label) on top of the eslint a11y gate.
+export default {
+  plugins: ['html-validate-vue'],
+  extends: ['html-validate:recommended', 'html-validate-vue:recommended'],
+  elements: [
+    'html5',
+    // @meddleware/ui components that render a single native element, described to the validator so
+    // content models / form rules see through them (keys are lowercased tag names).
+    {
+      uibutton: { inherit: 'button' },
+      uitoolbarbutton: { inherit: 'button' },
+      uiselect: { inherit: 'select' },
+      uinotice: { inherit: 'p' },
+    },
+  ],
+  transform: {
+    '^.*\\.vue$': 'html-validate-vue',
+  },
+  rules: {
+    // Vue components are written in PascalCase (<UiStatusDot>, <KeepAlive>).
+    'element-case': ['error', { style: ['lowercase', 'pascalcase'] }],
+    'element-name': ['error', { pattern: '^(?:[a-z][a-z0-9\\-._]*-[a-z0-9\\-._]*|[A-Z][A-Za-z0-9]*)$' }],
+    // role="list" on styled lists is a deliberate Safari/VoiceOver workaround: WebKit drops list
+    // semantics when list-style is removed, so the explicit role must stay (matches the eslint
+    // vuejs-accessibility/no-redundant-roles override).
+    'no-redundant-role': 'off',
+    'prefer-native-element': ['error', { exclude: ['list'] }],
+  },
+}

package/CLAUDE.md

@@ -49,7 +49,7 @@ wallet-adapter `buildExecutor`.
 - **Orchestration** — [src/lib/deploy.ts](src/lib/deploy.ts) sequences patch →
   publish → wait → (finalize) via an injectable `Executor` (so it is unit-testable;
   the real one is built from the wallet in
-  [src/composables/useWallet.ts](src/composables/useWallet.ts)).
+  [src/lib/deployExecutor.ts](src/lib/deployExecutor.ts)).
 - **Package generation** — [src/lib/generatePackage.ts](src/lib/generatePackage.ts)
   substitutes the same inputs into the canonical template text
   ([src/template-src/files.json](src/template-src/files.json)) and zips it.

package/eslint.config.ts

@@ -0,0 +1,63 @@
+import { globalIgnores } from 'eslint/config'
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
+import pluginVue from 'eslint-plugin-vue'
+import pluginA11y from 'eslint-plugin-vuejs-accessibility'
+
+// Flat ESLint config: layers vue-a11y (WAI-ARIA linting for templates) on top of
+// the standard Vue + TypeScript recommended rules, so accessibility regressions
+// are caught in CI.
+export default defineConfigWithVueTs(
+  {
+    name: 'token-deployer-ui/files-to-lint',
+    files: ['**/*.{vue,ts,mts,tsx}'],
+  },
+
+  globalIgnores(['**/dist/**', '**/coverage/**', '**/*.d.ts', 'docs/api/**']),
+
+  ...pluginVue.configs['flat/essential'],
+  ...pluginA11y.configs['flat/recommended'],
+  vueTsConfigs.recommended,
+
+  {
+    name: 'token-deployer-ui/overrides',
+    rules: {
+      // Accept both valid label-association patterns: a label wrapping its
+      // control (nesting) or a label[for] pointing at a control[id]. UiSelect renders a native
+      // <select>, so a label nesting it is labelling a control.
+      'vuejs-accessibility/label-has-for': [
+        'error',
+        { required: { some: ['nesting', 'id'] }, controlComponents: ['UiSelect'] },
+      ],
+      // UiFormField renders the <label for> for the control in its default slot.
+      'vuejs-accessibility/form-control-has-label': ['error', { labelComponents: ['UiFormField'] }],
+      // role="list" on styled lists is a deliberate Safari/VoiceOver workaround: WebKit drops
+      // list semantics when list-style is removed, so the explicit role stays.
+      'vuejs-accessibility/no-redundant-roles': 'off',
+      // Underscore-prefixed args/vars are an intentional "unused" marker.
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
+      ],
+    },
+  },
+
+  {
+    // Tests use deliberately loose typing for mocks/stubs.
+    name: 'token-deployer-ui/test-overrides',
+    files: ['**/*.{test,spec}.{ts,tsx}', 'tests/**', 'e2e/**'],
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
+  },
+
+  {
+    // ConfigForm intentionally edits a parent-owned reactive FormModel in place
+    // (the parent passes `:form` and reads the same object back). Converting to
+    // defineModel is deferred; the in-place mutation is the current contract.
+    name: 'token-deployer-ui/config-form',
+    files: ['src/components/ConfigForm.vue'],
+    rules: {
+      'vue/no-mutating-props': 'off',
+    },
+  },
+)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/token-deployer-ui",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "type": "module",
   "exports": {
     ".": {
@@ -25,22 +25,25 @@
     "e2e:localnet": "VITE_RPC_TESTNET=${VITE_RPC_TESTNET:-http://127.0.0.1:9000} VITE_FEE_TREASURY_TESTNET=${VITE_FEE_TREASURY_TESTNET:-0xfee0000000000000000000000000000000000000000000000000000000000000} vite build && start-server-and-test preview http://localhost:4173 'E2E_NETWORK=localnet node scripts/e2e-deploy.mjs'",
     "e2e:testnet": "vite build && start-server-and-test preview http://localhost:4173 'E2E_NETWORK=testnet node scripts/e2e-deploy.mjs'",
     "e2e:mainnet": "vite build && start-server-and-test preview http://localhost:4173 'E2E_NETWORK=mainnet node scripts/e2e-deploy.mjs'",
-    "lint": "oxlint . --fix",
+    "lint": "npm run lint:css && npm run lint:js && npm run lint:html",
     "format": "oxfmt src/",
     "docs": "typedoc",
     "regen:template": "bash scripts/regen-template.sh",
     "sync:template": "bash scripts/sync-template-src.sh",
     "gen:og-image": "node scripts/gen-og-image.mjs",
-    "verify:template": "node scripts/verify-bytecode.mjs && vitest run tests/templateArtifact.test.ts tests/templateParity.test.ts"
+    "verify:template": "node scripts/verify-bytecode.mjs && vitest run tests/templateArtifact.test.ts tests/templateParity.test.ts",
+    "lint:css": "stylelint \"src/**/*.{css,vue}\"",
+    "lint:js": "eslint .",
+    "lint:html": "html-validate \"src/**/*.vue\""
   },
   "dependencies": {
-    "@meddleware/design-tokens": "^0.1.6",
-    "@meddleware/ui": "^0.1.27",
-    "@meddleware/wallet-adapter": "^0.0.8",
-    "@meddleware/walrus-relay": "^0.1.17",
+    "@meddleware/design-tokens": "^0.1.7",
+    "@meddleware/ui": "^0.1.28",
+    "@meddleware/wallet-adapter": "^0.0.9",
+    "@meddleware/walrus-relay": "^0.1.18",
     "@mysten/bcs": "~2.1.0",
     "@mysten/move-bytecode-template": "~0.4.0",
-    "@mysten/sui": "^2.31.0",
+    "@mysten/sui": "^2.33.0",
     "@mysten/walrus": "~1.2.0",
     "fflate": "^0.8.3",
     "vue": "^3.5.0"
@@ -51,23 +54,41 @@
     "@vitejs/plugin-vue": "^6.0.8",
     "@vitejs/plugin-vue-jsx": "^5.1.6",
     "@vitest/eslint-plugin": "^1.6.23",
+    "@vue/eslint-config-typescript": "^14.9.0",
     "@vue/test-utils": "^2.4.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^10.11.0",
+    "eslint-plugin-vue": "^10.11.1",
+    "eslint-plugin-vuejs-accessibility": "^2.6.0",
+    "html-validate": "^11.16.1",
+    "html-validate-vue": "^9.3.1",
+    "jiti": "^2.7.0",
     "jsdom": "^29.1.1",
     "oxfmt": "^0.59.0",
     "oxlint": "~1.76.0",
     "playwright": "^1.62.0",
+    "postcss": "^8.4.49",
+    "postcss-html": "^2.0.0",
     "start-server-and-test": "^3.0.11",
+    "stylelint": "^17.15.0",
+    "stylelint-config-standard": "^40.0.0",
     "typedoc": "^0.28.20",
     "typescript": "~6.0.0",
     "vite": "^8.1.5",
     "vite-plugin-vue-devtools": "^8.1.5",
     "vitest": "^4.1.10",
+    "vue-eslint-parser": "^10.4.1",
     "vue-tsc": "~3.3.0"
   },
   "optionalDependencies": {
-    "@meddleware/sui-token-template": "^1.0.1"
+    "@meddleware/sui-token-template": "^1.0.4"
   },
   "engines": {
     "node": "^22.18.0 || >=24.12.0"
-  }
+  },
+  "browserslist": [
+    "> 0.5%",
+    "last 2 versions",
+    "not dead"
+  ]
 }

package/postcss.config.js

@@ -0,0 +1,8 @@
+// Autoprefixer runs over the library's shipped CSS (base.css) during `vite build`,
+// using the `browserslist` field in package.json as the target. Consumers therefore
+// receive vendor-prefixed component CSS without needing their own prefixing step.
+import autoprefixer from 'autoprefixer'
+
+export default {
+  plugins: [autoprefixer()],
+}

package/src/App.vue

@@ -9,12 +9,14 @@ const { mode: colorMode, set: setColorMode } = useColorMode('system')
 <template>
   <a class="skip-link" href="#main-content">Skip to main content</a>
   <main id="main-content">
-    <div class="theme-bar">
-      <ColorModeControl :model-value="colorMode" @update:model-value="setColorMode" />
-    </div>
-    <header v-once>
+    <header class="page-header">
+      <ColorModeControl
+        class="theme-toggle"
+        :model-value="colorMode"
+        @update:model-value="setColorMode"
+      />
       <h1>Create your own Sui coin</h1>
-      <p class="lede">
+      <p v-once class="lede">
         Deploy a coin on Sui directly from your browser. Your wallet signs and pays gas — nothing is
         compiled or signed on a server — and you keep the full, verifiable source package.
       </p>
@@ -24,7 +26,7 @@ const { mode: colorMode, set: setColorMode } = useColorMode('system')
 
     <TokenDeployerView />
 
-    <footer v-once style="margin-top: 3rem; color: var(--muted); font-size: 0.9rem">
+    <footer v-once class="page-footer">
       <p>
         Client-side token deployment. This tool never takes custody of your token or keys. Symbol,
         name, and decimals are permanent once published.

package/src/component-styles.css

@@ -77,12 +77,16 @@ button:disabled {
   flex-wrap: wrap;
   align-items: center;
 }
+/* A row of form/navigation actions below a block of content. */
+.actions {
+  margin-top: 1rem;
+}
 .grid2 {
   display: grid;
   grid-template-columns: 1fr;
   gap: 0 1rem;
 }
-@media (min-width: 520px) {
+@media (width >= 520px) {
   .grid2 {
     grid-template-columns: 1fr 1fr;
   }
@@ -144,18 +148,6 @@ details > fieldset {
   background: var(--border);
 }
 
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .skip-link {
   position: absolute;
   left: 0.5rem;
@@ -217,31 +209,6 @@ details > fieldset {
   }
 }
 
-dialog {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 1.5rem;
-  width: min(420px, 90vw);
-  max-height: 90vh;
-  overflow-y: auto;
-  color: var(--text);
-}
-dialog::backdrop {
-  background: rgba(0, 0, 0, 0.45);
-  -webkit-backdrop-filter: blur(2px);
-  backdrop-filter: blur(2px);
-}
-.dialog-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1.25rem;
-}
-.dialog-header h2 {
-  margin: 0;
-  font-size: 1.1rem;
-}
 .wallet-list {
   display: flex;
   flex-direction: column;

package/src/components/ConfigForm.vue

@@ -43,7 +43,6 @@ function onBlur(key: string): void {
 
 <template>
   <form novalidate @submit.prevent="emit('next')">
-
     <!-- Step 1: Identity -->
     <template v-if="formStep === 'identity'">
       <fieldset>
@@ -57,18 +56,32 @@ function onBlur(key: string): void {
               </UiFieldHint>
             </template>
             <template #default="{ attrs }">
-              <input v-bind="attrs" v-model="form.packageName" placeholder="my_token" autocomplete="off" @blur="onBlur('packageName')" />
+              <input
+                type="text"
+                v-bind="attrs"
+                v-model="form.packageName"
+                placeholder="my_token"
+                autocomplete="off"
+                @blur="onBlur('packageName')"
+              />
             </template>
           </UiFormField>
           <UiFormField id="module" label="Module name" :error="visibleError('moduleName')">
             <template #label-suffix>
               <UiFieldHint field-id="module-name">
-                The Move module inside the package (lowercase, e.g. <b>mytoken</b>). The coin type and
-                its one-time-witness struct are derived from this name, so it is permanent too.
+                The Move module inside the package (lowercase, e.g. <b>mytoken</b>). The coin type
+                and its one-time-witness struct are derived from this name, so it is permanent too.
               </UiFieldHint>
             </template>
             <template #default="{ attrs }">
-              <input v-bind="attrs" v-model="form.moduleName" placeholder="mytoken" autocomplete="off" @blur="onBlur('moduleName')" />
+              <input
+                type="text"
+                v-bind="attrs"
+                v-model="form.moduleName"
+                placeholder="mytoken"
+                autocomplete="off"
+                @blur="onBlur('moduleName')"
+              />
             </template>
           </UiFormField>
         </div>
@@ -78,8 +91,8 @@ function onBlur(key: string): void {
           </template>
           <template v-else>
             Coin type will be <span class="mono">{{ coinTypePreview }}</span
-            >. The witness struct <span class="mono">{{ structPreview }}</span> is derived from
-            the module name (a Sui requirement).
+            >. The witness struct <span class="mono">{{ structPreview }}</span> is derived from the
+            module name (a Sui requirement).
           </template>
         </p>
       </fieldset>
@@ -94,22 +107,35 @@ function onBlur(key: string): void {
           <UiFormField id="name" label="Token name" :error="visibleError('name')">
             <template #label-suffix>
               <UiFieldHint field-id="token-name">
-                The human-readable display name shown in wallets and explorers (e.g. <b>My Token</b>).
-                Editable later if you keep the Updatable metadata policy.
+                The human-readable display name shown in wallets and explorers (e.g.
+                <b>My Token</b>). Editable later if you keep the Updatable metadata policy.
               </UiFieldHint>
             </template>
             <template #default="{ attrs }">
-              <input v-bind="attrs" v-model="form.name" autocomplete="off" @blur="onBlur('name')" />
+              <input
+                type="text"
+                v-bind="attrs"
+                v-model="form.name"
+                autocomplete="off"
+                @blur="onBlur('name')"
+              />
             </template>
           </UiFormField>
           <UiFormField id="symbol" label="Symbol" :error="visibleError('symbol')">
             <template #label-suffix>
               <UiFieldHint field-id="token-symbol">
-                The short ticker shown in wallets (e.g. <b>MYT</b>), typically 3–5 uppercase letters.
+                The short ticker shown in wallets (e.g. <b>MYT</b>), typically 3–5 uppercase
+                letters.
               </UiFieldHint>
             </template>
             <template #default="{ attrs }">
-              <input v-bind="attrs" v-model="form.symbol" autocomplete="off" @blur="onBlur('symbol')" />
+              <input
+                type="text"
+                v-bind="attrs"
+                v-model="form.symbol"
+                autocomplete="off"
+                @blur="onBlur('symbol')"
+              />
             </template>
           </UiFormField>
         </div>
@@ -118,8 +144,8 @@ function onBlur(key: string): void {
           <template #label-suffix>
             &nbsp;<span class="hint">(optional)</span>
             <UiFieldHint field-id="token-description">
-              A short blurb stored in the coin metadata and shown in some wallets/explorers.
-              Leave blank if you don't need one.
+              A short blurb stored in the coin metadata and shown in some wallets/explorers. Leave
+              blank if you don't need one.
             </UiFieldHint>
           </template>
           <template #default="{ attrs }">
@@ -136,7 +162,13 @@ function onBlur(key: string): void {
             </UiFieldHint>
           </template>
           <template #default="{ attrs }">
-            <input v-bind="attrs" v-model="form.decimals" inputmode="numeric" @blur="onBlur('decimals')" />
+            <input
+              type="text"
+              v-bind="attrs"
+              v-model="form.decimals"
+              inputmode="numeric"
+              @blur="onBlur('decimals')"
+            />
           </template>
         </UiFormField>
 
@@ -158,14 +190,21 @@ function onBlur(key: string): void {
         <UiFormField id="supply" label="Initial supply" :error="visibleError('initialSupply')">
           <template #label-suffix>
             <UiFieldHint field-id="supply">
-              The number of whole tokens to mint and send to the recipient at deployment.
-              Uses your chosen decimal precision — with 9 decimals, 1 token = 1,000,000,000 base units on-chain.
-              Enter <b>0</b> or leave blank for no initial supply.
-              You can mint more later if you choose the Mintable supply policy.
+              The number of whole tokens to mint and send to the recipient at deployment. Uses your
+              chosen decimal precision — with 9 decimals, 1 token = 1,000,000,000 base units
+              on-chain. Enter <b>0</b> or leave blank for no initial supply. You can mint more later
+              if you choose the Mintable supply policy.
             </UiFieldHint>
           </template>
           <template #default="{ attrs }">
-            <input v-bind="attrs" v-model="form.initialSupply" inputmode="numeric" placeholder="0" @blur="onBlur('initialSupply')" />
+            <input
+              type="text"
+              v-bind="attrs"
+              v-model="form.initialSupply"
+              inputmode="numeric"
+              placeholder="0"
+              @blur="onBlur('initialSupply')"
+            />
           </template>
         </UiFormField>
 
@@ -204,8 +243,8 @@ function onBlur(key: string): void {
         <UiFormField id="package-policy" label="Package code">
           <template #label-suffix>
             <UiFieldHint field-id="package-policy">
-              <b>Immutable</b>: the UpgradeCap is burned — the on-chain code is sealed.
-              Recommended for trust and auditability.<br />
+              <b>Immutable</b>: the UpgradeCap is burned — the on-chain code is sealed. Recommended
+              for trust and auditability.<br />
               <b>Upgradeable</b>: you keep the UpgradeCap and can push code changes to the package
               after deployment.
             </UiFieldHint>
@@ -221,14 +260,21 @@ function onBlur(key: string): void {
         <UiFormField id="recipient" label="Recipient" :error="visibleError('recipient')">
           <template #label-suffix>
             <UiFieldHint field-id="recipient">
-              The Sui address that receives the TreasuryCap, MetadataCap, UpgradeCap (if kept),
-              and any initial supply minted at deployment.
-              Leave blank to send everything to the connected wallet.
-              Enter a different address to separate the deployer wallet from the custody wallet.
+              The Sui address that receives the TreasuryCap, MetadataCap, UpgradeCap (if kept), and
+              any initial supply minted at deployment. Leave blank to send everything to the
+              connected wallet. Enter a different address to separate the deployer wallet from the
+              custody wallet.
             </UiFieldHint>
           </template>
           <template #default="{ attrs }">
-            <input v-bind="attrs" v-model="form.recipient" placeholder="0x…" autocomplete="off" @blur="onBlur('recipient')" />
+            <input
+              type="text"
+              v-bind="attrs"
+              v-model="form.recipient"
+              placeholder="0x…"
+              autocomplete="off"
+              @blur="onBlur('recipient')"
+            />
           </template>
         </UiFormField>
 
@@ -236,7 +282,7 @@ function onBlur(key: string): void {
       </fieldset>
     </template>
 
-    <div class="row" style="margin-top: 1rem">
+    <div class="row actions">
       <button v-if="formStep !== 'identity'" type="button" @click="emit('back')">Back</button>
       <button type="submit" class="primary" :disabled="!canProceed">
         {{ formStep === 'settings' ? 'Review &amp; deploy' : 'Next' }}

package/src/components/DeployProgress.vue

@@ -25,9 +25,7 @@ function getState(i: number): 'done' | 'active' | 'todo' {
   return 'todo'
 }
 
-const steps = computed(() =>
-  ORDER.map((s, i) => ({ ...s, state: getState(i) }))
-)
+const steps = computed(() => ORDER.map((s, i) => ({ ...s, state: getState(i) })))
 </script>
 
 <template>
@@ -38,7 +36,7 @@ const steps = computed(() =>
         <span v-if="s.state === 'active'" class="spinner" aria-hidden="true"></span>
         <span v-else-if="s.state === 'done'" aria-hidden="true">✓ </span>
         {{ s.label }}
-        <span v-if="s.state === 'active'" class="visually-hidden">(in progress)</span>
+        <span v-if="s.state === 'active'" class="mw-visually-hidden">(in progress)</span>
       </li>
     </ol>
     <p class="hint">Keep this tab open and approve the wallet prompts.</p>

package/src/components/GithubPush.vue

@@ -56,7 +56,7 @@ async function push(): Promise<void> {
       {{ open ? '▾' : '▸' }} Create a GitHub repo (optional)
     </button>
 
-    <div v-if="open" class="card" style="margin-top: 0.5rem">
+    <div v-if="open" class="card github-push__form">
       <p v-once class="hint">
         Uses your <strong>own</strong> GitHub token — the repo is created in your account and this
         site's servers are never involved. The token is sent only to
@@ -67,24 +67,23 @@ async function push(): Promise<void> {
       </p>
 
       <label for="gh-repo">Repository name</label>
-      <input id="gh-repo" v-model="repoName" autocomplete="off" />
+      <input id="gh-repo" v-model="repoName" type="text" autocomplete="off" />
 
       <label for="gh-token">GitHub token</label>
       <input
         id="gh-token"
         v-model="token"
         type="password"
-        autocomplete="off"
+        autocomplete="new-password"
         spellcheck="false"
         placeholder="github_pat_… or ghp_…"
       />
 
-      <label style="font-weight: 400; margin-top: 0.75rem">
-        <input type="checkbox" v-model="isPrivate" style="width: auto" /> Make the repository
-        private
+      <label class="github-push__private">
+        <input v-model="isPrivate" type="checkbox" /> Make the repository private
       </label>
 
-      <div class="row" style="margin-top: 0.75rem">
+      <div class="row github-push__actions">
         <button type="button" class="primary" :disabled="busy || !token || !repoName" @click="push">
           <span v-if="busy" class="spinner" aria-hidden="true"></span> Create repo &amp; push
         </button>
@@ -98,3 +97,19 @@ async function push(): Promise<void> {
     </div>
   </div>
 </template>
+
+<style scoped>
+.github-push__form {
+  margin-top: 0.5rem;
+}
+.github-push__private {
+  margin-top: 0.75rem;
+  font-weight: 400;
+}
+.github-push__private input {
+  width: auto;
+}
+.github-push__actions {
+  margin-top: 0.75rem;
+}
+</style>