semmet-angular 0.42.0 → 0.43.0

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

@@ -41,6 +41,8 @@ export class <%= classify(name) %> {
 
   protected readonly items = contentChildren(<%= classify(name) %>Item);
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+
+  readonly label = input('Tabs');
   readonly preserveContent = input(true, { transform: booleanAttribute });
 
   private readonly renderedIds = signal<ReadonlySet<<%= classify(name) %>ItemId>>(new Set());

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

@@ -1,33 +1,9 @@
 :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-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);
 }
 
 textarea {
@@ -35,63 +11,30 @@ textarea {
   min-height: 7rem;
   box-sizing: border-box;
   resize: vertical;
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-sm);
-  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
   font: inherit;
-  line-height: 1.5;
-  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);
-}
-
-textarea::placeholder {
-  color: var(--semmet-color-on-surface-variant);
-}
-
-textarea[aria-invalid='true'] {
-  border-color: var(--semmet-color-danger);
 }
 
 textarea:disabled {
-  color: var(--semmet-color-on-surface-variant);
-  background: var(--semmet-color-disabled);
   cursor: not-allowed;
 }
 
 textarea: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__meta {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: var(--semmet-space-xs);
 }
 
 .semmet-field__hint,
 .semmet-field__counter,
 .semmet-field__error {
   margin: 0;
-  font-size: 0.8125rem;
-  line-height: 1.4;
-}
-
-.semmet-field__hint,
-.semmet-field__counter {
-  color: var(--semmet-color-on-surface-variant);
 }
 
 .semmet-field__counter {
   white-space: nowrap;
 }
-
-.semmet-field__error {
-  color: var(--semmet-color-danger);
-}

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

@@ -1,30 +1,10 @@
 :host {
-  --semmet-color-on-surface: #18181b;
-  --semmet-color-inverse-surface: #27272a;
-  --semmet-color-inverse-on-surface: #ffffff;
-  --semmet-radius-sm: 8px;
-  --semmet-space-3xs: 4px;
-  --semmet-space-2xs: 8px;
-  --semmet-space-xs: 16px;
-  --semmet-space-sm: 24px;
-  --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);
-
   display: block;
-  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
-  font-size: 0.9375rem;
 }
 
 button {
   font: inherit;
-  font-weight: 500;
-  color: var(--semmet-color-on-surface);
   background: none;
-  border: 1px solid currentColor;
-  border-radius: var(--semmet-radius-sm);
-  min-height: var(--semmet-target-md);
-  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
   cursor: pointer;
 }
 
@@ -36,27 +16,13 @@ button:focus-visible {
 [role='status'] {
   position: fixed;
   left: 50%;
-  bottom: var(--semmet-space-sm);
+  bottom: 0;
   transform: translateX(-50%);
   display: flex;
   align-items: center;
-  gap: var(--semmet-space-xs);
-  padding: var(--semmet-space-xs);
-  color: var(--semmet-color-inverse-on-surface);
-  background: var(--semmet-color-inverse-surface);
-  border-radius: var(--semmet-radius-sm);
-  box-shadow: var(--semmet-elevation-3);
 }
 
 [role='status'] button {
-  font-size: 1.125rem;
-  line-height: 1;
   color: inherit;
   border: none;
-  padding: var(--semmet-space-3xs) var(--semmet-space-2xs);
-  transition: background-color var(--semmet-motion);
-}
-
-[role='status'] button:hover {
-  background: color-mix(in srgb, var(--semmet-color-inverse-on-surface) 20%, transparent);
 }

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

@@ -3,13 +3,13 @@
 Usage from a parent component template:
 Import <%= classify(name) %> in that parent component.
 
-<<%= selector %> />
+<<%= selector %> triggerLabel="Save" message="Your changes have been saved." />
 -->
-<button type="button" (click)="show()">Save</button>
+<button type="button" (click)="show()">{{ triggerLabel() }}</button>
 
 @if (visible()) {
   <div role="status" [id]="instanceId">
-    <span>Your changes have been saved.</span>
-    <button type="button" (click)="dismiss()" aria-label="Dismiss">×</button>
+    <span>{{ message() }}</span>
+    <button type="button" (click)="dismiss()" [attr.aria-label]="dismissLabel()">×</button>
   </div>
 }

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

@@ -1,4 +1,4 @@
-import { Component, DestroyRef, inject, signal } from '@angular/core';
+import { Component, DestroyRef, inject, input, signal } from '@angular/core';
 
 const AUTO_DISMISS_MS = 5000;
 
@@ -16,6 +16,10 @@ export class <%= classify(name) %> {
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
   protected readonly visible = signal(false);
 
+  readonly triggerLabel = input('Save');
+  readonly message = input('Your changes have been saved.');
+  readonly dismissLabel = input('Dismiss');
+
   constructor() {
     inject(DestroyRef).onDestroy(() => clearTimeout(this.dismissTimeout));
   }

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

@@ -1,53 +1,19 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-on-primary: #ffffff;
-  --semmet-color-surface: #ffffff;
-  --semmet-color-outline: #d4d4d8;
-  --semmet-color-on-surface: #18181b;
-  --semmet-radius-sm: 8px;
-  --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: inline-block;
-  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
-  font-size: 0.9375rem;
 }
 
 [role='toolbar'] {
   display: inline-flex;
-  gap: var(--semmet-space-3xs);
-  padding: var(--semmet-space-3xs);
-  background: var(--semmet-color-surface);
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-sm);
 }
 
 button {
   font: inherit;
-  font-weight: 500;
-  color: var(--semmet-color-on-surface);
   background: none;
   border: none;
-  border-radius: 6px;
-  min-height: var(--semmet-target-md);
-  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
   cursor: pointer;
-  transition: background-color var(--semmet-motion), 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;
-}
-
-button[aria-pressed='true'] {
-  background: var(--semmet-color-primary);
-  color: var(--semmet-color-on-primary);
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
 }

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

@@ -3,10 +3,10 @@
 Usage from a parent component template:
 Import <%= classify(name) %> in that parent component.
 
-<<%= selector %> />
+<<%= selector %> label="Text formatting" [actions]="formattingActions" />
 -->
-<div role="toolbar" aria-label="Text formatting">
-  @for (action of actions; track action.id; let i = $index) {
+<div role="toolbar" [attr.aria-label]="label()">
+  @for (action of actions(); track action.id; let i = $index) {
     <button
       #toolbarButton
       type="button"

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

@@ -1,10 +1,16 @@
-import { Component, ElementRef, signal, viewChildren } from '@angular/core';
+import { Component, ElementRef, input, signal, viewChildren } from '@angular/core';
 
 interface <%= classify(name) %>Action {
   id: number;
   label: string;
 }
 
+const DEFAULT_ACTIONS: readonly <%= classify(name) %>Action[] = [
+  { id: 1, label: 'Bold' },
+  { id: 2, label: 'Italic' },
+  { id: 3, label: 'Underline' },
+];
+
 @Component({
   selector: '<%= selector %>',
   imports: [],
@@ -14,13 +20,10 @@ interface <%= classify(name) %>Action {
 export class <%= classify(name) %> {
   private readonly buttons = viewChildren<ElementRef<HTMLButtonElement>>('toolbarButton');
 
-  protected readonly actions: <%= classify(name) %>Action[] = [
-    { id: 1, label: 'Bold' },
-    { id: 2, label: 'Italic' },
-    { id: 3, label: 'Underline' },
-  ];
+  readonly label = input('Text formatting');
+  readonly actions = input<readonly <%= classify(name) %>Action[]>(DEFAULT_ACTIONS);
 
-  protected readonly activeId = signal(this.actions[0].id);
+  protected readonly activeId = signal(DEFAULT_ACTIONS[0].id);
 
   private readonly pressedIds = signal<ReadonlySet<number>>(new Set());
 
@@ -65,7 +68,7 @@ export class <%= classify(name) %> {
     }
 
     event.preventDefault();
-    this.activeId.set(this.actions[nextIndex].id);
+    this.activeId.set(this.actions()[nextIndex].id);
     items[nextIndex].nativeElement.focus();
   }
 }

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

@@ -1,39 +1,16 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-inverse-surface: #27272a;
-  --semmet-color-inverse-on-surface: #ffffff;
-  --semmet-radius-sm: 6px;
-  --semmet-space-2xs: 8px;
-  --semmet-space-xs: 16px;
-  --semmet-target-md: 40px;
-  --semmet-elevation-1: 0 1px 2px rgba(20, 24, 23, 0.1), 0 1px 1px rgba(20, 24, 23, 0.06);
-  --semmet-motion: 120ms 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 {
   font: inherit;
-  font-weight: 500;
-  color: var(--semmet-color-primary);
   background: none;
-  border: 1px solid currentColor;
-  border-radius: var(--semmet-radius-sm);
-  min-height: var(--semmet-target-md);
-  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-primary) 8%, transparent);
 }
 
 button:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
+  outline: 2px solid currentColor;
   outline-offset: 2px;
 }
 
@@ -41,13 +18,5 @@ button:focus-visible {
   position: absolute;
   bottom: 100%;
   left: 0;
-  margin-bottom: var(--semmet-space-2xs);
-  padding: var(--semmet-space-2xs);
-  border-radius: var(--semmet-radius-sm);
-  background: var(--semmet-color-inverse-surface);
-  color: var(--semmet-color-inverse-on-surface);
-  font-size: 0.8125rem;
-  line-height: 1.4;
   white-space: nowrap;
-  box-shadow: var(--semmet-elevation-1);
 }

package/src/tooltip/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 tooltip 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/tree-view/files/__name@dasherize__/__name@dasherize__.css.template

@@ -1,17 +1,5 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-on-surface: #18181b;
-  --semmet-color-on-surface-variant: #52525b;
-  --semmet-radius-sm: 6px;
-  --semmet-space-2xs: 8px;
-  --semmet-space-sm: 24px;
-  --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;
-  color: var(--semmet-color-on-surface);
 }
 
 [role='tree'],
@@ -22,27 +10,18 @@
 }
 
 [role='group'] {
-  padding-left: var(--semmet-space-sm);
+  padding-left: 1rem;
 }
 
 [role='treeitem'] {
   display: flex;
   align-items: center;
-  gap: var(--semmet-space-2xs);
-  min-height: var(--semmet-target-md);
-  padding: var(--semmet-space-2xs);
-  border-radius: var(--semmet-radius-sm);
   cursor: pointer;
-  transition: background-color var(--semmet-motion);
-}
-
-[role='treeitem']:hover {
-  background: color-mix(in srgb, var(--semmet-color-on-surface) 6%, transparent);
 }
 
 [role='treeitem']:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
-  outline-offset: -2px;
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
 }
 
 [role='treeitem'][aria-expanded]::before {
@@ -50,10 +29,9 @@
   width: 0.4rem;
   height: 0.4rem;
   flex-shrink: 0;
-  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);
 }
 
 [role='treeitem'][aria-expanded='true']::before {

package/src/tree-view/files/__name@dasherize__/__name@dasherize__.html.template

@@ -3,10 +3,10 @@
 Usage from a parent component template:
 Import <%= classify(name) %> in that parent component.
 
-<<%= selector %> />
+<<%= selector %> label="Files" [tree]="fileTree" />
 -->
-<ul role="tree" aria-label="Files">
-  @for (root of tree; track root.id) {
+<ul role="tree" [attr.aria-label]="label()">
+  @for (root of tree(); track root.id) {
     <li
       #treeItem
       role="treeitem"