semmet-angular 0.42.0 → 0.43.0

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

@@ -1,56 +1,22 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-surface: #ffffff;
-  --semmet-color-outline: #d4d4d8;
-  --semmet-color-on-surface: #18181b;
-  --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;
 }
 
 span {
   display: block;
-  margin-bottom: var(--semmet-space-2xs);
-  font-weight: 500;
-  color: var(--semmet-color-on-surface);
 }
 
 ul {
   margin: 0;
-  padding: var(--semmet-space-2xs);
+  padding: 0;
   list-style: none;
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-sm);
-  background: var(--semmet-color-surface);
-  max-width: 16rem;
 }
 
 ul:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
-  outline-offset: 1px;
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
 }
 
 [role='option'] {
-  min-height: var(--semmet-target-md);
-  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
-  border-radius: 6px;
-  color: var(--semmet-color-on-surface);
   cursor: pointer;
-  transition: background-color var(--semmet-motion);
-}
-
-[role='option'][aria-selected='true'] {
-  background: color-mix(in srgb, var(--semmet-color-primary) 12%, transparent);
-  color: var(--semmet-color-primary);
-  font-weight: 500;
-}
-
-[role='option']:hover {
-  background: color-mix(in srgb, var(--semmet-color-on-surface) 6%, transparent);
 }

package/src/listbox/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="Choose an option" />
 -->
-<span [id]="instanceId + '-label'">Choose an option</span>
+<span [id]="instanceId + '-label'">{{ label() }}</span>
 <ul
   role="listbox"
   [attr.aria-labelledby]="instanceId + '-label'"

package/src/listbox/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) %>Option {
   id: number;
@@ -22,6 +22,8 @@ export class <%= classify(name) %> {
 
   protected readonly activeIndex = signal(0);
 
+  readonly label = input('Choose an option');
+
   protected readonly activeDescendantId = computed(
     () => `${this.instanceId}-option-${this.options[this.activeIndex()].id}`
   );

package/src/listbox/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 listbox 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/menu-button/files/__name@dasherize__/__name@dasherize__.css.template

@@ -1,46 +1,17 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --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-3xs: 4px;
-  --semmet-space-2xs: 8px;
-  --semmet-space-xs: 16px;
-  --semmet-target-md: 40px;
-  --semmet-elevation-3: 0 8px 24px rgba(20, 24, 23, 0.18), 0 2px 8px rgba(20, 24, 23, 0.1);
-  --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
-
   position: relative;
   display: inline-block;
-  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
-  font-size: 0.9375rem;
 }
 
 button {
   display: flex;
   align-items: center;
-  gap: var(--semmet-space-2xs);
-  min-height: var(--semmet-target-md);
   font: inherit;
-  font-weight: 500;
-  color: var(--semmet-color-on-surface);
-  background: var(--semmet-color-surface);
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-sm);
-  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
   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: 2px solid currentColor;
   outline-offset: 2px;
 }
 
@@ -48,10 +19,9 @@ button::after {
   content: '';
   width: 0.4rem;
   height: 0.4rem;
-  border-right: 2px solid var(--semmet-color-on-surface-variant);
-  border-bottom: 2px solid var(--semmet-color-on-surface-variant);
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
   transform: rotate(45deg);
-  transition: transform var(--semmet-motion);
 }
 
 button[aria-expanded='true']::after {
@@ -61,28 +31,18 @@ button[aria-expanded='true']::after {
 ul {
   position: absolute;
   z-index: 1;
-  top: calc(100% + var(--semmet-space-3xs));
+  top: 100%;
   left: 0;
-  min-width: 10rem;
   margin: 0;
-  padding: var(--semmet-space-2xs);
+  padding: 0;
   list-style: none;
-  background: var(--semmet-color-surface);
-  border-radius: var(--semmet-radius-md);
-  box-shadow: var(--semmet-elevation-3);
 }
 
 [role='menuitem'] {
-  min-height: var(--semmet-target-md);
-  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
-  border-radius: 6px;
-  color: var(--semmet-color-on-surface);
   cursor: pointer;
-  transition: background-color var(--semmet-motion);
 }
 
-[role='menuitem']:hover,
 [role='menuitem']:focus-visible {
-  background: color-mix(in srgb, var(--semmet-color-on-surface) 6%, transparent);
-  outline: none;
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
 }

package/src/menu-button/files/__name@dasherize__/__name@dasherize__.html.template

@@ -3,7 +3,7 @@
 Usage from a parent component template:
 Import <%= classify(name) %> in that parent component.
 
-<<%= selector %> />
+<<%= selector %> label="Options" [items]="menuItems" />
 -->
 <button
   #menuButton
@@ -15,7 +15,7 @@ Import <%= classify(name) %> in that parent component.
   (click)="toggle()"
   (keydown)="handleButtonKeydown($event)"
 >
-  Options
+  {{ label() }}
 </button>
 <ul
   #menu
@@ -24,7 +24,7 @@ Import <%= classify(name) %> in that parent component.
   [attr.aria-labelledby]="instanceId + '-button'"
   [hidden]="!isOpen()"
 >
-  @for (item of items; track item.id; let i = $index) {
+  @for (item of items(); track item.id; let i = $index) {
     <li role="none">
       <div
         #menuItem

package/src/menu-button/files/__name@dasherize__/__name@dasherize__.ts.template

@@ -1,10 +1,16 @@
-import { Component, ElementRef, Injector, afterNextRender, inject, signal, viewChild, viewChildren } from '@angular/core';
+import { Component, ElementRef, Injector, afterNextRender, inject, input, signal, viewChild, viewChildren } from '@angular/core';
 
 interface <%= classify(name) %>Item {
   id: number;
   label: string;
 }
 
+const DEFAULT_ITEMS: readonly <%= classify(name) %>Item[] = [
+  { id: 1, label: 'First option' },
+  { id: 2, label: 'Second option' },
+  { id: 3, label: 'Third option' },
+];
+
 let nextId = 0;
 
 @Component({
@@ -23,14 +29,11 @@ export class <%= classify(name) %> {
   private readonly menuItems = viewChildren<ElementRef<HTMLElement>>('menuItem');
 
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
-  protected readonly items: <%= classify(name) %>Item[] = [
-    { id: 1, label: 'First option' },
-    { id: 2, label: 'Second option' },
-    { id: 3, label: 'Third option' },
-  ];
-
   protected readonly isOpen = signal(false);
 
+  readonly label = input('Options');
+  readonly items = input<readonly <%= classify(name) %>Item[]>(DEFAULT_ITEMS);
+
   protected toggle(): void {
     this.isOpen.set(true);
     this.focusFirstItem();

package/src/menu-button/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 menu button 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/meter/files/__name@dasherize__/__name@dasherize__.css.template

@@ -1,23 +1,11 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-on-surface: #18181b;
-  --semmet-space-2xs: 8px;
-
   display: 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);
 }
 
 meter {
   width: 100%;
-  max-width: 20rem;
-  height: 0.75rem;
-  accent-color: var(--semmet-color-primary);
 }

package/src/meter/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="Disk usage" />
 -->
-<label [for]="instanceId">Disk usage</label>
+<label [for]="instanceId">{{ label() }}</label>
 <meter [id]="instanceId" min="0" max="100" [value]="value()" low="50" high="90" optimum="0">
   {{ value() }}%
 </meter>

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

@@ -1,4 +1,4 @@
-import { Component, signal } from '@angular/core';
+import { Component, input, signal } from '@angular/core';
 
 let nextId = 0;
 
@@ -11,4 +11,6 @@ let nextId = 0;
 export class <%= classify(name) %> {
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
   protected readonly value = signal(70);
+
+  readonly label = input('Disk usage');
 }

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

@@ -1,40 +1,17 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-surface: #ffffff;
-  --semmet-color-surface-muted: #f4f4f5;
-  --semmet-color-outline: #d4d4d8;
-  --semmet-color-on-surface: #27272a;
-  --semmet-color-on-surface-variant: #71717a;
-  --semmet-radius-md: 10px;
-  --semmet-space-3xs: 4px;
-  --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;
 }
 
 .semmet-navbar {
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
-  gap: var(--semmet-space-xs);
-  padding: var(--semmet-space-2xs);
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-md);
-  color: var(--semmet-color-on-surface);
-  background: var(--semmet-color-surface);
 }
 
 .semmet-navbar__brand {
   display: inline-flex;
   align-items: center;
-  min-height: var(--semmet-target-md);
   color: inherit;
-  font-size: 1.0625rem;
-  font-weight: 800;
   text-decoration: none;
 }
 
@@ -43,13 +20,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--semmet-target-md);
-  height: var(--semmet-target-md);
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-md);
   color: inherit;
-  background: var(--semmet-color-surface);
+  background: none;
+  border: 0;
   cursor: pointer;
+  font: inherit;
 }
 
 .semmet-navbar__toggle span,
@@ -58,7 +33,6 @@
   display: block;
   width: 1.125rem;
   height: 0.125rem;
-  border-radius: 999px;
   background: currentColor;
 }
 
@@ -92,42 +66,21 @@
 
 .semmet-navbar__list {
   display: grid;
-  gap: var(--semmet-space-3xs);
   margin: 0;
-  padding: var(--semmet-space-2xs) 0 0;
+  padding: 0;
   list-style: none;
 }
 
 .semmet-navbar__actions {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--semmet-space-2xs);
-  padding-top: var(--semmet-space-xs);
 }
 
 .semmet-navbar__link {
   display: flex;
   align-items: center;
-  min-height: var(--semmet-target-md);
-  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
-  border-radius: var(--semmet-radius-md);
-  color: var(--semmet-color-on-surface-variant);
-  font-weight: 650;
+  color: inherit;
   text-decoration: none;
-  transition:
-    background-color var(--semmet-motion),
-    color var(--semmet-motion),
-    opacity var(--semmet-motion);
-}
-
-.semmet-navbar__link:hover:not(.semmet-navbar__link--disabled) {
-  color: var(--semmet-color-on-surface);
-  background: var(--semmet-color-surface-muted);
-}
-
-.semmet-navbar__link--current {
-  color: var(--semmet-color-on-surface);
-  background: var(--semmet-color-surface-muted);
 }
 
 .semmet-navbar__link--disabled {
@@ -139,14 +92,13 @@
 .semmet-navbar__toggle:focus-visible,
 .semmet-navbar__link:focus-visible,
 .semmet-navbar__actions :is(a, button):focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
+  outline: 2px solid currentColor;
   outline-offset: 2px;
 }
 
 @media (min-width: 48rem) {
   .semmet-navbar {
     grid-template-columns: auto 1fr;
-    padding-inline: var(--semmet-space-2xs);
   }
 
   .semmet-navbar__toggle {
@@ -156,20 +108,12 @@
   .semmet-navbar__menu {
     display: flex;
     align-items: center;
-    justify-content: flex-end;
-    gap: var(--semmet-space-xs);
     grid-column: auto;
   }
 
   .semmet-navbar__list {
     display: flex;
     align-items: center;
-    justify-content: flex-end;
-    gap: var(--semmet-space-3xs);
     padding: 0;
   }
-
-  .semmet-navbar__actions {
-    padding-top: 0;
-  }
 }

package/src/navbar/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 navbar 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"
+  ]
 }