semmet-angular 0.42.0 → 0.44.0

package/src/disclosure/schema.json

@@ -9,21 +9,36 @@
     "name": {
       "type": "string",
       "description": "The name for the new component. Used to derive the class name, selector, and file names.",
-      "$default": { "$source": "argv", "index": 0 },
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
       "x-prompt": "What name would you like to use for the disclosure component?"
     },
+    "e2e": {
+      "type": "boolean",
+      "default": false,
+      "description": "Generate a Playwright e2e spec for this component. Requires Playwright to be installed/configured in the consuming app."
+    },
     "path": {
       "type": "string",
       "format": "path",
-      "$default": { "$source": "workingDirectory" },
+      "$default": {
+        "$source": "workingDirectory"
+      },
       "description": "The path where the component files should be created, relative to the workspace root. Defaults to the project's source root.",
       "visible": false
     },
     "project": {
       "type": "string",
       "description": "The name of the project to add the component to.",
-      "$default": { "$source": "projectName" }
+      "$default": {
+        "$source": "projectName"
+      }
     }
   },
-  "required": ["name", "project"]
+  "required": [
+    "name",
+    "project"
+  ]
 }

package/src/e2e/index.d.ts

@@ -0,0 +1,2 @@
+import { Rule } from '@angular-devkit/schematics';
+export declare function e2e(): Rule;

package/src/e2e/index.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.e2e = e2e;
+const schematics_1 = require("@angular-devkit/schematics");
+const tasks_1 = require("@angular-devkit/schematics/tasks");
+const PLAYWRIGHT_VERSION = '^1.61.1';
+const TYPES_NODE_VERSION = '^20.11.0';
+function e2e() {
+    return (0, schematics_1.chain)([addPlaywrightDependency, addPackageScripts, extendVerificationScript, addPlaywrightConfig, installPackages]);
+}
+function addPlaywrightDependency(tree) {
+    const packageJson = readJson(tree, '/package.json');
+    const devDependencies = packageJson.devDependencies ?? {};
+    packageJson.devDependencies = {
+        ...devDependencies,
+        '@playwright/test': devDependencies['@playwright/test'] ?? PLAYWRIGHT_VERSION,
+        '@types/node': devDependencies['@types/node'] ?? TYPES_NODE_VERSION,
+    };
+    writeJson(tree, '/package.json', packageJson);
+}
+function addPackageScripts(tree) {
+    const packageJson = readJson(tree, '/package.json');
+    const scripts = packageJson.scripts ?? {};
+    packageJson.scripts = {
+        ...scripts,
+        e2e: scripts.e2e ?? 'playwright test',
+        'e2e:ui': scripts['e2e:ui'] ?? 'playwright test --ui',
+        'e2e:report': scripts['e2e:report'] ?? 'playwright show-report',
+    };
+    writeJson(tree, '/package.json', packageJson);
+}
+/** Folds `npm run e2e` into a `verify` script that `ng add` may have already created without it. */
+function extendVerificationScript(tree) {
+    const packageJson = readJson(tree, '/package.json');
+    const scripts = packageJson.scripts ?? {};
+    if (!scripts.verify || scripts.verify.includes('npm run e2e')) {
+        return;
+    }
+    packageJson.scripts = {
+        ...scripts,
+        verify: `${scripts.verify} && npm run e2e`,
+    };
+    writeJson(tree, '/package.json', packageJson);
+}
+function addPlaywrightConfig(tree) {
+    if (tree.exists('/playwright.config.ts')) {
+        return;
+    }
+    tree.create('/playwright.config.ts', `/// <reference types="node" />
+
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './src',
+  testMatch: '**/*.e2e-spec.ts',
+  fullyParallel: true,
+  forbidOnly: !!process.env['CI'],
+  retries: process.env['CI'] ? 2 : 0,
+  workers: process.env['CI'] ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:4200',
+    trace: 'on-first-retry',
+  },
+  webServer: {
+    command: 'npm run start',
+    url: 'http://localhost:4200',
+    reuseExistingServer: !process.env['CI'],
+    timeout: 120 * 1000,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+});
+`);
+}
+function installPackages(_tree, context) {
+    context.addTask(new tasks_1.NodePackageInstallTask());
+}
+function readJson(tree, path) {
+    const content = tree.readText(path);
+    return JSON.parse(content);
+}
+function writeJson(tree, path, value) {
+    tree.overwrite(path, `${JSON.stringify(value, null, 2)}\n`);
+}
+//# sourceMappingURL=index.js.map

package/src/e2e/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;AAMA,kBAEC;AARD,2DAAiF;AACjF,4DAA0E;AAE1E,MAAM,kBAAkB,GAAG,SAAS,CAAC;AACrC,MAAM,kBAAkB,GAAG,UAAU,CAAC;AAEtC,SAAgB,GAAG;IACjB,OAAO,IAAA,kBAAK,EAAC,CAAC,uBAAuB,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,eAAe,CAAC,CAAC,CAAC;AAC7H,CAAC;AAED,SAAS,uBAAuB,CAAC,IAAU;IACzC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;IACpD,MAAM,eAAe,GAAG,WAAW,CAAC,eAAe,IAAI,EAAE,CAAC;IAE1D,WAAW,CAAC,eAAe,GAAG;QAC5B,GAAG,eAAe;QAClB,kBAAkB,EAAE,eAAe,CAAC,kBAAkB,CAAC,IAAI,kBAAkB;QAC7E,aAAa,EAAE,eAAe,CAAC,aAAa,CAAC,IAAI,kBAAkB;KACpE,CAAC;IAEF,SAAS,CAAC,IAAI,EAAE,eAAe,EAAE,WAAW,CAAC,CAAC;AAChD,CAAC;AAED,SAAS,iBAAiB,CAAC,IAAU;IACnC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;IACpD,MAAM,OAAO,GAAG,WAAW,CAAC,OAAO,IAAI,EAAE,CAAC;IAE1C,WAAW,CAAC,OAAO,GAAG;QACpB,GAAG,OAAO;QACV,GAAG,EAAE,OAAO,CAAC,GAAG,IAAI,iBAAiB;QACrC,QAAQ,EAAE,OAAO,CAAC,QAAQ,CAAC,IAAI,sBAAsB;QACrD,YAAY,EAAE,OAAO,CAAC,YAAY,CAAC,IAAI,wBAAwB;KAChE,CAAC;IAEF,SAAS,CAAC,IAAI,EAAE,eAAe,EAAE,WAAW,CAAC,CAAC;AAChD,CAAC;AAED,oGAAoG;AACpG,SAAS,wBAAwB,CAAC,IAAU;IAC1C,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;IACpD,MAAM,OAAO,GAAG,WAAW,CAAC,OAAO,IAAI,EAAE,CAAC;IAE1C,IAAI,CAAC,OAAO,CAAC,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;QAC9D,OAAO;IACT,CAAC;IAED,WAAW,CAAC,OAAO,GAAG;QACpB,GAAG,OAAO;QACV,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,iBAAiB;KAC3C,CAAC;IAEF,SAAS,CAAC,IAAI,EAAE,eAAe,EAAE,WAAW,CAAC,CAAC;AAChD,CAAC;AAED,SAAS,mBAAmB,CAAC,IAAU;IACrC,IAAI,IAAI,CAAC,MAAM,CAAC,uBAAuB,CAAC,EAAE,CAAC;QACzC,OAAO;IACT,CAAC;IAED,IAAI,CAAC,MAAM,CACT,uBAAuB,EACvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BH,CACE,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CAAC,KAAW,EAAE,OAAyB;IAC7D,OAAO,CAAC,OAAO,CAAC,IAAI,8BAAsB,EAAE,CAAC,CAAC;AAChD,CAAC;AAED,SAAS,QAAQ,CAAC,IAAU,EAAE,IAAY;IACxC,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IACpC,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAwB,CAAC;AACpD,CAAC;AAED,SAAS,SAAS,CAAC,IAAU,EAAE,IAAY,EAAE,KAA0B;IACrE,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;AAC9D,CAAC"}

package/src/e2e/index.ts

@@ -0,0 +1,106 @@
+import { Rule, SchematicContext, Tree, chain } from '@angular-devkit/schematics';
+import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
+
+const PLAYWRIGHT_VERSION = '^1.61.1';
+const TYPES_NODE_VERSION = '^20.11.0';
+
+export function e2e(): Rule {
+  return chain([addPlaywrightDependency, addPackageScripts, extendVerificationScript, addPlaywrightConfig, installPackages]);
+}
+
+function addPlaywrightDependency(tree: Tree): void {
+  const packageJson = readJson(tree, '/package.json');
+  const devDependencies = packageJson.devDependencies ?? {};
+
+  packageJson.devDependencies = {
+    ...devDependencies,
+    '@playwright/test': devDependencies['@playwright/test'] ?? PLAYWRIGHT_VERSION,
+    '@types/node': devDependencies['@types/node'] ?? TYPES_NODE_VERSION,
+  };
+
+  writeJson(tree, '/package.json', packageJson);
+}
+
+function addPackageScripts(tree: Tree): void {
+  const packageJson = readJson(tree, '/package.json');
+  const scripts = packageJson.scripts ?? {};
+
+  packageJson.scripts = {
+    ...scripts,
+    e2e: scripts.e2e ?? 'playwright test',
+    'e2e:ui': scripts['e2e:ui'] ?? 'playwright test --ui',
+    'e2e:report': scripts['e2e:report'] ?? 'playwright show-report',
+  };
+
+  writeJson(tree, '/package.json', packageJson);
+}
+
+/** Folds `npm run e2e` into a `verify` script that `ng add` may have already created without it. */
+function extendVerificationScript(tree: Tree): void {
+  const packageJson = readJson(tree, '/package.json');
+  const scripts = packageJson.scripts ?? {};
+
+  if (!scripts.verify || scripts.verify.includes('npm run e2e')) {
+    return;
+  }
+
+  packageJson.scripts = {
+    ...scripts,
+    verify: `${scripts.verify} && npm run e2e`,
+  };
+
+  writeJson(tree, '/package.json', packageJson);
+}
+
+function addPlaywrightConfig(tree: Tree): void {
+  if (tree.exists('/playwright.config.ts')) {
+    return;
+  }
+
+  tree.create(
+    '/playwright.config.ts',
+    `/// <reference types="node" />
+
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './src',
+  testMatch: '**/*.e2e-spec.ts',
+  fullyParallel: true,
+  forbidOnly: !!process.env['CI'],
+  retries: process.env['CI'] ? 2 : 0,
+  workers: process.env['CI'] ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:4200',
+    trace: 'on-first-retry',
+  },
+  webServer: {
+    command: 'npm run start',
+    url: 'http://localhost:4200',
+    reuseExistingServer: !process.env['CI'],
+    timeout: 120 * 1000,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+});
+`
+  );
+}
+
+function installPackages(_tree: Tree, context: SchematicContext): void {
+  context.addTask(new NodePackageInstallTask());
+}
+
+function readJson(tree: Tree, path: string): Record<string, any> {
+  const content = tree.readText(path);
+  return JSON.parse(content) as Record<string, any>;
+}
+
+function writeJson(tree: Tree, path: string, value: Record<string, any>): void {
+  tree.overwrite(path, `${JSON.stringify(value, null, 2)}\n`);
+}

package/src/e2e/schema.d.ts

@@ -0,0 +1,2 @@
+export interface Schema {
+}

package/src/e2e/schema.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=schema.js.map

package/src/e2e/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["schema.ts"],"names":[],"mappings":""}

package/src/e2e/schema.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularE2e",
+  "title": "Semmet Angular E2E Options Schema",
+  "type": "object",
+  "description": "Configures Playwright e2e support for an Angular workspace.",
+  "additionalProperties": false,
+  "properties": {}
+}

package/src/e2e/schema.ts

@@ -0,0 +1 @@
+export interface Schema {}

package/src/form/files/__name@dasherize__/__name@dasherize__.css.template

@@ -1,122 +1,46 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-on-primary: #ffffff;
-  --semmet-color-danger: #b42318;
-  --semmet-color-surface: #ffffff;
-  --semmet-color-outline: #d4d4d8;
-  --semmet-color-on-surface: #18181b;
-  --semmet-color-on-surface-variant: #52525b;
-  --semmet-radius-sm: 8px;
-  --semmet-radius-md: 12px;
-  --semmet-space-2xs: 8px;
-  --semmet-space-xs: 16px;
-  --semmet-space-sm: 24px;
-  --semmet-target-md: 40px;
-  --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
-
   display: block;
-  max-width: 34rem;
-  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
-  font-size: 0.9375rem;
 }
 
 form {
   display: grid;
-  gap: var(--semmet-space-xs);
-  padding: var(--semmet-space-sm);
-  color: var(--semmet-color-on-surface);
-  background: var(--semmet-color-surface);
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-md);
 }
 
 h2 {
   margin: 0;
-  font-size: 1.125rem;
-  font-weight: 600;
 }
 
 .semmet-field {
   display: grid;
-  gap: var(--semmet-space-2xs);
-}
-
-label {
-  font-weight: 500;
-}
-
-label span {
-  color: var(--semmet-color-danger);
 }
 
 input,
 textarea {
   width: 100%;
   box-sizing: border-box;
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-sm);
-  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
   font: inherit;
-  color: var(--semmet-color-on-surface);
-  background: var(--semmet-color-surface);
-  transition: border-color var(--semmet-motion);
-}
-
-input {
-  min-height: var(--semmet-target-md);
 }
 
 textarea {
   min-height: 7rem;
   resize: vertical;
-  line-height: 1.5;
-}
-
-input[aria-invalid='true'],
-textarea[aria-invalid='true'] {
-  border-color: var(--semmet-color-danger);
 }
 
 input:focus-visible,
 textarea:focus-visible,
 button:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
+  outline: 2px solid currentColor;
   outline-offset: 2px;
 }
 
 button {
   justify-self: start;
-  min-height: var(--semmet-target-md);
-  border: 0;
-  border-radius: var(--semmet-radius-sm);
-  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
   font: inherit;
-  font-weight: 600;
-  color: var(--semmet-color-on-primary);
-  background: var(--semmet-color-primary);
   cursor: pointer;
-  transition:
-    background-color var(--semmet-motion),
-    transform var(--semmet-motion);
-}
-
-button:hover {
-  transform: translateY(-1px);
 }
 
 .semmet-hint,
 .semmet-error,
 .semmet-status {
   margin: 0;
-  font-size: 0.8125rem;
-  line-height: 1.4;
-}
-
-.semmet-hint,
-.semmet-status {
-  color: var(--semmet-color-on-surface-variant);
-}
-
-.semmet-error {
-  color: var(--semmet-color-danger);
 }

package/src/form/files/__name@dasherize__/__name@dasherize__.html.template

@@ -3,14 +3,14 @@
 Usage from a parent component template:
 Import <%= classify(name) %> in that parent component.
 
-<<%= selector %> />
+<<%= selector %> title="Contact form" submitLabel="Submit" />
 -->
 <form [attr.aria-labelledby]="instanceId + '-title'" (submit)="submit($event)" novalidate>
-  <h2 [id]="instanceId + '-title'">Contact form</h2>
+  <h2 [id]="instanceId + '-title'">{{ title() }}</h2>
 
   <div class="semmet-field">
     <label [for]="instanceId + '-name'">
-      Name
+      {{ nameLabel() }}
       <span aria-hidden="true">*</span>
     </label>
     <input
@@ -30,7 +30,7 @@ Import <%= classify(name) %> in that parent component.
 
   <div class="semmet-field">
     <label [for]="instanceId + '-email'">
-      Email
+      {{ emailLabel() }}
       <span aria-hidden="true">*</span>
     </label>
     <input
@@ -50,7 +50,7 @@ Import <%= classify(name) %> in that parent component.
 
   <div class="semmet-field">
     <label [for]="instanceId + '-message'">
-      Message
+      {{ messageLabel() }}
       <span aria-hidden="true">*</span>
     </label>
     <textarea
@@ -62,13 +62,13 @@ Import <%= classify(name) %> in that parent component.
       [attr.aria-describedby]="messageError() ? instanceId + '-message-error' : instanceId + '-message-hint'"
       (input)="updateField('message', $event)"
     ></textarea>
-    <p class="semmet-hint" [id]="instanceId + '-message-hint'">Minimum 10 characters.</p>
+    <p class="semmet-hint" [id]="instanceId + '-message-hint'">{{ messageHint() }}</p>
     @if (messageError()) {
       <p class="semmet-error" [id]="instanceId + '-message-error'" role="alert">{{ messageError() }}</p>
     }
   </div>
 
-  <button type="submit">Submit</button>
+  <button type="submit">{{ submitLabel() }}</button>
 
   @if (statusMessage()) {
     <p class="semmet-status" role="status">{{ statusMessage() }}</p>

package/src/form/files/__name@dasherize__/__name@dasherize__.ts.template

@@ -1,4 +1,4 @@
-import { Component, computed, signal } from '@angular/core';
+import { Component, computed, input, signal } from '@angular/core';
 
 interface <%= classify(name) %>State {
   name: string;
@@ -26,12 +26,25 @@ export class <%= classify(name) %> {
     message: '',
   });
 
+  readonly title = input('Contact form');
+  readonly nameLabel = input('Name');
+  readonly emailLabel = input('Email');
+  readonly messageLabel = input('Message');
+  readonly messageHint = input('Minimum 10 characters.');
+  readonly submitLabel = input('Submit');
+  readonly nameRequiredMessage = input('Enter your name.');
+  readonly emailRequiredMessage = input('Enter your email address.');
+  readonly emailInvalidMessage = input('Enter a valid email address.');
+  readonly messageRequiredMessage = input('Enter a message with at least 10 characters.');
+  readonly invalidStatusMessage = input('Check the highlighted fields and try again.');
+  readonly validStatusMessage = input('Form is valid and ready to submit.');
+
   protected readonly nameError = computed(() => {
     if (!this.submitted() || this.form().name.trim()) {
       return '';
     }
 
-    return 'Enter your name.';
+    return this.nameRequiredMessage();
   });
 
   protected readonly emailError = computed(() => {
@@ -41,10 +54,10 @@ export class <%= classify(name) %> {
 
     const email = this.form().email.trim();
     if (!email) {
-      return 'Enter your email address.';
+      return this.emailRequiredMessage();
     }
 
-    return this.emailPattern.test(email) ? '' : 'Enter a valid email address.';
+    return this.emailPattern.test(email) ? '' : this.emailInvalidMessage();
   });
 
   protected readonly messageError = computed(() => {
@@ -52,7 +65,7 @@ export class <%= classify(name) %> {
       return '';
     }
 
-    return 'Enter a message with at least 10 characters.';
+    return this.messageRequiredMessage();
   });
 
   protected readonly isInvalid = computed(() => Boolean(this.nameError() || this.emailError() || this.messageError()));
@@ -67,10 +80,10 @@ export class <%= classify(name) %> {
     this.submitted.set(true);
 
     if (this.isInvalid()) {
-      this.statusMessage.set('Check the highlighted fields and try again.');
+      this.statusMessage.set(this.invalidStatusMessage());
       return;
     }
 
-    this.statusMessage.set('Form is valid and ready to submit.');
+    this.statusMessage.set(this.validStatusMessage());
   }
 }

package/src/form/schema.json

@@ -9,21 +9,36 @@
     "name": {
       "type": "string",
       "description": "The name for the new component. Used to derive the class name, selector, and file names.",
-      "$default": { "$source": "argv", "index": 0 },
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
       "x-prompt": "What name would you like to use for the form component?"
     },
+    "e2e": {
+      "type": "boolean",
+      "default": false,
+      "description": "Generate a Playwright e2e spec for this component. Requires Playwright to be installed/configured in the consuming app."
+    },
     "path": {
       "type": "string",
       "format": "path",
-      "$default": { "$source": "workingDirectory" },
+      "$default": {
+        "$source": "workingDirectory"
+      },
       "description": "The path where the component files should be created, relative to the workspace root. Defaults to the project's source root.",
       "visible": false
     },
     "project": {
       "type": "string",
       "description": "The name of the project to add the component to.",
-      "$default": { "$source": "projectName" }
+      "$default": {
+        "$source": "projectName"
+      }
     }
   },
-  "required": ["name", "project"]
+  "required": [
+    "name",
+    "project"
+  ]
 }

package/src/input/files/__name@dasherize__/__name@dasherize__.css.template

@@ -1,83 +1,27 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-danger: #b42318;
-  --semmet-color-surface: #ffffff;
-  --semmet-color-outline: #d4d4d8;
-  --semmet-color-on-surface: #18181b;
-  --semmet-color-on-surface-variant: #52525b;
-  --semmet-color-disabled: #f4f4f5;
-  --semmet-radius-sm: 8px;
-  --semmet-space-2xs: 8px;
-  --semmet-space-xs: 16px;
-  --semmet-target-md: 40px;
-  --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
-
   display: block;
-  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
-  font-size: 0.9375rem;
 }
 
 .semmet-field {
   display: grid;
-  gap: var(--semmet-space-2xs);
-}
-
-label {
-  font-weight: 500;
-  color: var(--semmet-color-on-surface);
-}
-
-label span {
-  color: var(--semmet-color-danger);
 }
 
 input {
   width: 100%;
-  min-height: var(--semmet-target-md);
   box-sizing: border-box;
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-sm);
-  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
   font: inherit;
-  color: var(--semmet-color-on-surface);
-  background: var(--semmet-color-surface);
-  transition:
-    border-color var(--semmet-motion),
-    box-shadow var(--semmet-motion),
-    background-color var(--semmet-motion);
-}
-
-input::placeholder {
-  color: var(--semmet-color-on-surface-variant);
-}
-
-input[aria-invalid='true'] {
-  border-color: var(--semmet-color-danger);
 }
 
 input:disabled {
-  color: var(--semmet-color-on-surface-variant);
-  background: var(--semmet-color-disabled);
   cursor: not-allowed;
 }
 
 input:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
-  outline-offset: 1px;
-  border-color: var(--semmet-color-primary);
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
 }
 
 .semmet-field__hint,
 .semmet-field__error {
   margin: 0;
-  font-size: 0.8125rem;
-  line-height: 1.4;
-}
-
-.semmet-field__hint {
-  color: var(--semmet-color-on-surface-variant);
-}
-
-.semmet-field__error {
-  color: var(--semmet-color-danger);
 }

package/src/input/schema.json

@@ -9,21 +9,36 @@
     "name": {
       "type": "string",
       "description": "The name for the new component. Used to derive the class name, selector, and file names.",
-      "$default": { "$source": "argv", "index": 0 },
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
       "x-prompt": "What name would you like to use for the input component?"
     },
+    "e2e": {
+      "type": "boolean",
+      "default": false,
+      "description": "Generate a Playwright e2e spec for this component. Requires Playwright to be installed/configured in the consuming app."
+    },
     "path": {
       "type": "string",
       "format": "path",
-      "$default": { "$source": "workingDirectory" },
+      "$default": {
+        "$source": "workingDirectory"
+      },
       "description": "The path where the component files should be created, relative to the workspace root. Defaults to the project's source root.",
       "visible": false
     },
     "project": {
       "type": "string",
       "description": "The name of the project to add the component to.",
-      "$default": { "$source": "projectName" }
+      "$default": {
+        "$source": "projectName"
+      }
     }
   },
-  "required": ["name", "project"]
+  "required": [
+    "name",
+    "project"
+  ]
 }