semmet-angular 0.42.0 → 0.43.0

package/src/select/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 select 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/skeleton/files/__name@dasherize__/__name@dasherize__.css.template

@@ -1,12 +1,4 @@
 :host {
-  --semmet-color-surface: #ffffff;
-  --semmet-color-outline: #d4d4d8;
-  --semmet-color-skeleton: #e4e4e7;
-  --semmet-color-skeleton-highlight: #f4f4f5;
-  --semmet-radius-sm: 8px;
-  --semmet-radius-md: 12px;
-  --semmet-space-2xs: 8px;
-
   display: block;
   width: 100%;
 }
@@ -17,8 +9,7 @@
   display: block;
   overflow: hidden;
   box-sizing: border-box;
-  background: var(--semmet-color-skeleton);
-  border-radius: var(--semmet-radius-sm);
+  background: currentColor;
 }
 
 .semmet-skeleton {
@@ -34,19 +25,15 @@
 
 .semmet-skeleton--card {
   min-height: 16rem;
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-md);
 }
 
 .semmet-skeleton--media {
   height: 12.5rem;
-  border-radius: var(--semmet-radius-md);
 }
 
 .semmet-skeleton-text {
   display: grid;
   width: 100%;
-  gap: var(--semmet-space-2xs);
 }
 
 .semmet-skeleton__line {
@@ -60,12 +47,7 @@
   position: absolute;
   inset: 0;
   transform: translateX(-100%);
-  background: linear-gradient(
-    90deg,
-    transparent,
-    var(--semmet-color-skeleton-highlight),
-    transparent
-  );
+  background: linear-gradient(90deg, transparent, Canvas, transparent);
   animation: semmet-skeleton-shimmer 1.35s ease-in-out infinite;
 }
 
@@ -75,15 +57,6 @@
   }
 }
 
-@media (prefers-color-scheme: dark) {
-  :host {
-    --semmet-color-surface: #18181b;
-    --semmet-color-outline: #3f3f46;
-    --semmet-color-skeleton: #27272a;
-    --semmet-color-skeleton-highlight: #3f3f46;
-  }
-}
-
 @media (prefers-reduced-motion: reduce) {
   .semmet-skeleton--animated::after,
   .semmet-skeleton-text--animated .semmet-skeleton__line::after {

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

@@ -1,7 +1,5 @@
 import { Component, booleanAttribute, computed, input, numberAttribute } from '@angular/core';
 
-type <%= classify(name) %>Variant = 'rect' | 'text' | 'circle' | 'card' | 'media';
-
 let nextId = 0;
 
 @Component({
@@ -13,7 +11,7 @@ let nextId = 0;
 export class <%= classify(name) %> {
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
 
-  readonly variant = input<<%= classify(name) %>Variant>('rect');
+  readonly variant = input<string>('rect');
   readonly width = input<string | null>(null);
   readonly height = input<string | null>(null);
   readonly size = input<string | null>(null);

package/src/skeleton/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 skeleton 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/skip-link/files/__name@dasherize__/__name@dasherize__.css.template

@@ -1,12 +1,5 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-on-primary: #ffffff;
-  --semmet-radius-sm: 8px;
-  --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;
 }
 
 .skip-link {
@@ -14,17 +7,12 @@
   top: -3rem;
   left: 0.5rem;
   z-index: 100;
-  padding: 0.5rem 1rem;
-  color: var(--semmet-color-on-primary);
-  background: var(--semmet-color-primary);
-  border-radius: var(--semmet-radius-sm);
+  color: inherit;
   text-decoration: none;
-  font-weight: 500;
-  transition: top var(--semmet-motion);
 }
 
 .skip-link:focus-visible {
   top: 0.5rem;
-  outline: 2px solid var(--semmet-color-on-primary);
+  outline: 2px solid currentColor;
   outline-offset: 2px;
 }

package/src/skip-link/files/__name@dasherize__/__name@dasherize__.html.template

@@ -3,8 +3,8 @@
 Usage from a parent component template:
 Import <%= classify(name) %> in that parent component.
 
-<<%= selector %> />
+<<%= selector %> targetId="main-content" label="Skip to main content" />
 <main id="main-content">Main content</main>
 -->
-<a class="skip-link" href="#main-content">Skip to main content</a>
+<a class="skip-link" [href]="'#' + targetId()">{{ label() }}</a>
 <!-- Add id="main-content" to your <main> element -->

package/src/skip-link/files/__name@dasherize__/__name@dasherize__.ts.template

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, input } from '@angular/core';
 
 @Component({
   selector: '<%= selector %>',
@@ -6,4 +6,7 @@ import { Component } from '@angular/core';
   templateUrl: './<%= dasherize(name) %>.html',
   styleUrl: './<%= dasherize(name) %>.css',
 })
-export class <%= classify(name) %> {}
+export class <%= classify(name) %> {
+  readonly targetId = input('main-content');
+  readonly label = input('Skip to main content');
+}

package/src/skip-link/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 skip link 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/slider/files/__name@dasherize__/__name@dasherize__.css.template

@@ -1,28 +1,15 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-outline: #d4d4d8;
-  --semmet-color-on-surface: #18181b;
-  --semmet-space-xs: 16px;
-  --semmet-motion: 120ms cubic-bezier(0.2, 0, 0, 1);
-
   display: block;
-  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
-  font-size: 0.9375rem;
-  max-width: 20rem;
 }
 
 label {
   display: block;
-  margin-bottom: var(--semmet-space-xs);
-  font-weight: 500;
-  color: var(--semmet-color-on-surface);
 }
 
 .track {
   position: relative;
   height: 0.25rem;
-  border-radius: 999px;
-  background: var(--semmet-color-outline);
+  background: currentColor;
   cursor: pointer;
   touch-action: none;
 }
@@ -32,8 +19,7 @@ label {
   top: 0;
   left: 0;
   height: 100%;
-  border-radius: 999px;
-  background: var(--semmet-color-primary);
+  background: currentColor;
 }
 
 .thumb {
@@ -43,13 +29,13 @@ label {
   height: 1.125rem;
   transform: translate(-50%, -50%);
   border-radius: 50%;
-  background: var(--semmet-color-primary);
-  box-shadow: 0 1px 3px rgba(20, 24, 23, 0.25);
+  background: Canvas;
+  border: 2px solid currentColor;
+  box-sizing: border-box;
   cursor: pointer;
-  transition: box-shadow var(--semmet-motion);
 }
 
 .thumb:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
+  outline: 2px solid currentColor;
   outline-offset: 2px;
 }

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

@@ -3,9 +3,9 @@
 Usage from a parent component template:
 Import <%= classify(name) %> in that parent component.
 
-<<%= selector %> />
+<<%= selector %> label="Volume" />
 -->
-<label [id]="instanceId + '-label'">Volume</label>
+<label [id]="instanceId + '-label'">{{ label() }}</label>
 <div #track class="track" (pointerdown)="handlePointerDown($event)" (pointermove)="handlePointerMove($event)">
   <div class="fill" [style.width.%]="value()"></div>
   <div

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

@@ -1,4 +1,4 @@
-import { Component, ElementRef, signal, viewChild } from '@angular/core';
+import { Component, ElementRef, input, signal, viewChild } from '@angular/core';
 
 const MIN = 0;
 const MAX = 100;
@@ -20,6 +20,8 @@ export class <%= classify(name) %> {
   protected readonly max = MAX;
   protected readonly value = signal(50);
 
+  readonly label = input('Volume');
+
   protected handleKeydown(event: KeyboardEvent): void {
     switch (event.key) {
       case 'ArrowRight':

package/src/slider/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 slider 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/spinbutton/files/__name@dasherize__/__name@dasherize__.css.template

@@ -1,66 +1,37 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-outline: #d4d4d8;
-  --semmet-color-on-surface: #18181b;
-  --semmet-radius-sm: 8px;
-  --semmet-space-2xs: 8px;
-  --semmet-target-md: 40px;
-  --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
-
   display: inline-block;
-  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
-  font-size: 0.9375rem;
 }
 
 label {
   display: block;
-  margin-bottom: var(--semmet-space-2xs);
-  font-weight: 500;
-  color: var(--semmet-color-on-surface);
 }
 
 .stepper {
   display: inline-flex;
   align-items: center;
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-sm);
-  overflow: hidden;
 }
 
 button {
   font: inherit;
-  font-size: 1.125rem;
-  color: var(--semmet-color-on-surface);
   background: none;
   border: none;
-  min-width: var(--semmet-target-md);
-  min-height: var(--semmet-target-md);
+  min-width: 2rem;
   cursor: pointer;
-  transition: background-color var(--semmet-motion);
-}
-
-button:hover {
-  background: color-mix(in srgb, var(--semmet-color-on-surface) 6%, transparent);
 }
 
 button:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
-  outline-offset: -2px;
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
 }
 
 input {
   width: 3rem;
-  min-height: var(--semmet-target-md);
-  border: none;
-  border-left: 1px solid var(--semmet-color-outline);
-  border-right: 1px solid var(--semmet-color-outline);
+  box-sizing: border-box;
   text-align: center;
   font: inherit;
-  color: var(--semmet-color-on-surface);
-  box-sizing: border-box;
 }
 
 input:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
-  outline-offset: -2px;
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
 }

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

@@ -3,11 +3,11 @@
 Usage from a parent component template:
 Import <%= classify(name) %> in that parent component.
 
-<<%= selector %> />
+<<%= selector %> label="Quantity" />
 -->
-<label [id]="instanceId + '-label'" [for]="instanceId + '-input'">Quantity</label>
+<label [id]="instanceId + '-label'" [for]="instanceId + '-input'">{{ label() }}</label>
 <div class="stepper">
-  <button type="button" (click)="decrement()" aria-label="Decrease quantity">−</button>
+  <button type="button" (click)="decrement()" [attr.aria-label]="decrementLabel()">−</button>
   <input
     type="text"
     inputmode="numeric"
@@ -21,5 +21,5 @@ Import <%= classify(name) %> in that parent component.
     (keydown)="handleKeydown($event)"
     (change)="handleInput($event)"
   />
-  <button type="button" (click)="increment()" aria-label="Increase quantity">+</button>
+  <button type="button" (click)="increment()" [attr.aria-label]="incrementLabel()">+</button>
 </div>

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

@@ -1,4 +1,4 @@
-import { Component, signal } from '@angular/core';
+import { Component, input, signal } from '@angular/core';
 
 const MIN = 0;
 const MAX = 99;
@@ -17,6 +17,10 @@ export class <%= classify(name) %> {
   protected readonly max = MAX;
   protected readonly value = signal(1);
 
+  readonly label = input('Quantity');
+  readonly decrementLabel = input('Decrease quantity');
+  readonly incrementLabel = input('Increase quantity');
+
   protected increment(): void {
     this.setValue(this.value() + 1);
   }

package/src/spinbutton/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 spinbutton 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/spinner/files/__name@dasherize__/__name@dasherize__.css.template

@@ -1,36 +1,13 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-neutral: #71717a;
-  --semmet-color-success: #067647;
-  --semmet-color-warning: #b54708;
-  --semmet-color-danger: #b42318;
-  --semmet-space-2xs: 8px;
-
   display: inline-block;
-  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
 }
 
 .semmet-spinner {
   display: inline-flex;
   align-items: center;
-  gap: var(--semmet-space-2xs);
-  color: var(--semmet-color-primary);
-  font-weight: 600;
   line-height: 1;
 }
 
-.semmet-spinner--sm {
-  font-size: 0.75rem;
-}
-
-.semmet-spinner--md {
-  font-size: 0.875rem;
-}
-
-.semmet-spinner--lg {
-  font-size: 1rem;
-}
-
 .semmet-spinner__visual {
   display: inline-block;
   width: 1.25em;
@@ -41,26 +18,6 @@
   animation: semmet-spinner-spin 700ms linear infinite;
 }
 
-.semmet-spinner--neutral {
-  color: var(--semmet-color-neutral);
-}
-
-.semmet-spinner--primary {
-  color: var(--semmet-color-primary);
-}
-
-.semmet-spinner--success {
-  color: var(--semmet-color-success);
-}
-
-.semmet-spinner--warning {
-  color: var(--semmet-color-warning);
-}
-
-.semmet-spinner--danger {
-  color: var(--semmet-color-danger);
-}
-
 .semmet-spinner__label--visually-hidden {
   position: absolute;
   width: 1px;

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

@@ -1,8 +1,5 @@
 import { Component, booleanAttribute, computed, input } from '@angular/core';
 
-type <%= classify(name) %>Variant = 'neutral' | 'primary' | 'success' | 'warning' | 'danger';
-type <%= classify(name) %>Size = 'sm' | 'md' | 'lg';
-
 let nextId = 0;
 
 @Component({
@@ -15,8 +12,8 @@ export class <%= classify(name) %> {
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
 
   readonly label = input('Loading');
-  readonly variant = input<<%= classify(name) %>Variant>('primary');
-  readonly size = input<<%= classify(name) %>Size>('md');
+  readonly variant = input<string>('primary');
+  readonly size = input<string>('md');
   readonly labelVisible = input(false, { transform: booleanAttribute });
   readonly decorative = input(false, { transform: booleanAttribute });