semmet-angular 0.41.0 → 0.43.0

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

@@ -1,16 +1,5 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-on-surface: #27272a;
-  --semmet-color-on-inverse: #ffffff;
-  --semmet-color-hover: #f4f4f5;
-  --semmet-radius-full: 999px;
-  --semmet-target-sm: 32px;
-  --semmet-target-md: 40px;
-  --semmet-target-lg: 48px;
-  --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
-
   display: inline-block;
-  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
 }
 
 .semmet-close-button {
@@ -19,51 +8,25 @@
   align-items: center;
   justify-content: center;
   border: 0;
-  border-radius: var(--semmet-radius-full);
-  color: var(--semmet-color-on-surface);
   background: transparent;
+  color: inherit;
   cursor: pointer;
-  transition:
-    background-color var(--semmet-motion),
-    color var(--semmet-motion),
-    opacity var(--semmet-motion),
-    transform var(--semmet-motion);
+  font: inherit;
 }
 
 .semmet-close-button--sm {
-  width: var(--semmet-target-sm);
-  height: var(--semmet-target-sm);
+  width: 2rem;
+  height: 2rem;
 }
 
 .semmet-close-button--md {
-  width: var(--semmet-target-md);
-  height: var(--semmet-target-md);
+  width: 2.5rem;
+  height: 2.5rem;
 }
 
 .semmet-close-button--lg {
-  width: var(--semmet-target-lg);
-  height: var(--semmet-target-lg);
-}
-
-.semmet-close-button--default:hover:not(:disabled),
-.semmet-close-button--subtle {
-  background: var(--semmet-color-hover);
-}
-
-.semmet-close-button--inverse {
-  color: var(--semmet-color-on-inverse);
-}
-
-.semmet-close-button--inverse:hover:not(:disabled) {
-  background: rgba(255, 255, 255, 0.16);
-}
-
-.semmet-close-button:hover:not(:disabled) {
-  transform: scale(1.04);
-}
-
-.semmet-close-button:active:not(:disabled) {
-  transform: scale(0.98);
+  width: 3rem;
+  height: 3rem;
 }
 
 .semmet-close-button:disabled {
@@ -72,7 +35,7 @@
 }
 
 .semmet-close-button:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
+  outline: 2px solid currentColor;
   outline-offset: 2px;
 }
 
@@ -94,7 +57,6 @@
   position: absolute;
   top: 50%;
   left: 0;
-  border-radius: 999px;
   background: currentColor;
   content: '';
 }

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

@@ -1,8 +1,5 @@
 import { Component, booleanAttribute, computed, input, output } from '@angular/core';
 
-type <%= classify(name) %>Variant = 'default' | 'subtle' | 'inverse';
-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('Close');
-  readonly variant = input<<%= classify(name) %>Variant>('default');
-  readonly size = input<<%= classify(name) %>Size>('md');
+  readonly variant = input<string>('default');
+  readonly size = input<string>('md');
   readonly disabled = input(false, { transform: booleanAttribute });
   readonly buttonClick = output<MouseEvent>();
 

package/src/close-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 close 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/collection.json

@@ -71,6 +71,16 @@
       "factory": "./badge/index#badge",
       "schema": "./badge/schema.json"
     },
+    "avatar": {
+      "description": "Generates a standalone Angular Avatar component with image, initials, decorative, and accessible-label modes.",
+      "factory": "./avatar/index#avatar",
+      "schema": "./avatar/schema.json"
+    },
+    "rating": {
+      "description": "Generates a standalone Angular Rating component with readonly image semantics or interactive radiogroup semantics.",
+      "factory": "./rating/index#rating",
+      "schema": "./rating/schema.json"
+    },
     "close-button": {
       "description": "Generates a standalone Angular Close Button component with a native button and accessible label.",
       "factory": "./close-button/index#closeButton",
@@ -221,6 +231,11 @@
       "factory": "./progress-bar/index#progressBar",
       "schema": "./progress-bar/schema.json"
     },
+    "steps": {
+      "description": "Generates a standalone Angular Steps component for ordered progress, current-step semantics, and optional keyboard navigation.",
+      "factory": "./steps/index#steps",
+      "schema": "./steps/schema.json"
+    },
     "skeleton": {
       "description": "Generates a standalone Angular Skeleton loading placeholder component for composable loading states.",
       "factory": "./skeleton/index#skeleton",

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

@@ -1,49 +1,21 @@
 :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;
 }
 
 label {
   display: block;
-  margin-bottom: var(--semmet-space-2xs);
-  font-weight: 500;
-  color: var(--semmet-color-on-surface);
 }
 
 input {
   width: 100%;
-  min-width: 14rem;
-  min-height: var(--semmet-target-md);
   font: inherit;
-  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);
   box-sizing: border-box;
-  transition: border-color var(--semmet-motion);
 }
 
 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;
 }
 
 ul {
@@ -52,30 +24,13 @@ ul {
   top: 100%;
   left: 0;
   right: 0;
-  margin: var(--semmet-space-3xs) 0 0;
-  padding: var(--semmet-space-2xs);
+  margin: 0;
+  padding: 0;
   list-style: none;
-  background: var(--semmet-color-surface);
-  border-radius: var(--semmet-radius-md);
-  box-shadow: var(--semmet-elevation-3);
   max-height: 12rem;
   overflow-y: auto;
 }
 
 [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);
-}
-
-[role='option']:hover {
-  background: color-mix(in srgb, var(--semmet-color-on-surface) 6%, transparent);
 }

package/src/combobox/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 a fruit" [items]="fruitOptions" />
 -->
-<label [id]="instanceId + '-label'" [for]="instanceId + '-input'">Choose a fruit</label>
+<label [id]="instanceId + '-label'" [for]="instanceId + '-input'">{{ label() }}</label>
 <input
   type="text"
   [id]="instanceId + '-input'"

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

@@ -1,10 +1,16 @@
-import { Component, computed, signal } from '@angular/core';
+import { Component, computed, input, signal } from '@angular/core';
 
 interface <%= classify(name) %>Item {
   id: number;
   label: string;
 }
 
+const DEFAULT_ITEMS: readonly <%= classify(name) %>Item[] = [
+  { id: 1, label: 'Apple' },
+  { id: 2, label: 'Banana' },
+  { id: 3, label: 'Cherry' },
+];
+
 let nextId = 0;
 
 @Component({
@@ -15,18 +21,15 @@ let nextId = 0;
 })
 export class <%= classify(name) %> {
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
-  protected readonly items: <%= classify(name) %>Item[] = [
-    { id: 1, label: 'Apple' },
-    { id: 2, label: 'Banana' },
-    { id: 3, label: 'Cherry' },
-  ];
-
   protected readonly query = signal('');
   protected readonly isOpen = signal(false);
   protected readonly activeIndex = signal(-1);
 
+  readonly label = input('Choose a fruit');
+  readonly items = input<readonly <%= classify(name) %>Item[]>(DEFAULT_ITEMS);
+
   protected readonly filteredItems = computed(() =>
-    this.items.filter((item) => item.label.toLowerCase().includes(this.query().toLowerCase()))
+    this.items().filter((item) => item.label.toLowerCase().includes(this.query().toLowerCase()))
   );
 
   protected readonly activeDescendantId = computed(() => {

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

@@ -1,48 +1,18 @@
-:host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-surface: #ffffff;
-  --semmet-color-on-surface: #18181b;
-  --semmet-color-on-surface-variant: #52525b;
-  --semmet-color-scrim: rgba(20, 24, 23, 0.45);
-  --semmet-radius-lg: 20px;
-  --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);
-
-  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
-  font-size: 0.9375rem;
-  line-height: 1.5;
-}
-
 button {
   font: inherit;
-  font-weight: 500;
-  color: var(--semmet-color-primary);
   background: none;
   border: none;
-  border-radius: 8px;
-  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;
 }
 
 .backdrop {
   position: fixed;
   inset: 0;
-  background: var(--semmet-color-scrim);
 }
 
 [role='dialog'] {
@@ -52,25 +22,13 @@ button:focus-visible {
   transform: translate(-50%, -50%);
   min-width: 22rem;
   max-width: 90vw;
-  padding: var(--semmet-space-sm);
-  border-radius: var(--semmet-radius-lg);
-  background: var(--semmet-color-surface);
-  color: var(--semmet-color-on-surface);
-  box-shadow: var(--semmet-elevation-3);
 }
 
 [role='dialog']:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
+  outline: 2px solid currentColor;
   outline-offset: 2px;
 }
 
 [role='dialog'] h2 {
-  margin: 0 0 var(--semmet-space-xs);
-  font-size: 1.25rem;
-  font-weight: 500;
-}
-
-[role='dialog'] > div {
-  margin-bottom: var(--semmet-space-sm);
-  color: var(--semmet-color-on-surface-variant);
+  margin: 0;
 }

package/src/dialog/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 %> triggerLabel="Open details" title="Details" description="Review the current details." />
 -->
-<button type="button" (click)="open($event)">Open dialog</button>
+<button type="button" (click)="open($event)">{{ triggerLabel() }}</button>
 
 @if (isOpen()) {
   <div class="backdrop" (click)="close()"></div>
@@ -17,8 +17,8 @@ Import <%= classify(name) %> in that parent component.
     tabindex="-1"
     (keydown)="handleDialogKeydown($event)"
   >
-    <h2 [id]="instanceId + '-title'">Dialog title</h2>
-    <div>Dialog content</div>
-    <button type="button" (click)="close()">Close</button>
+    <h2 [id]="instanceId + '-title'">{{ title() }}</h2>
+    <div>{{ description() }}</div>
+    <button type="button" (click)="close()">{{ closeLabel() }}</button>
   </div>
 }

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

@@ -1,4 +1,4 @@
-import { Component, ElementRef, Injector, afterNextRender, inject, signal, viewChild } from '@angular/core';
+import { Component, ElementRef, Injector, afterNextRender, inject, input, signal, viewChild } from '@angular/core';
 
 const FOCUSABLE_SELECTOR =
   'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
@@ -19,6 +19,11 @@ export class <%= classify(name) %> {
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
   protected readonly isOpen = signal(false);
 
+  readonly triggerLabel = input('Open dialog');
+  readonly title = input('Dialog title');
+  readonly description = input('Dialog content');
+  readonly closeLabel = input('Close');
+
   protected open(event: MouseEvent): void {
     this.triggerElement = event.currentTarget as HTMLElement;
     this.isOpen.set(true);

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

@@ -1,48 +1,22 @@
 :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-md: 12px;
-  --semmet-space-xs: 16px;
-  --semmet-space-sm: 24px;
-  --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;
-  line-height: 1.5;
-  color: var(--semmet-color-on-surface);
-  background: var(--semmet-color-surface);
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-md);
-  overflow: hidden;
 }
 
 button {
   display: flex;
   align-items: center;
-  gap: var(--semmet-space-xs);
   width: 100%;
-  padding: var(--semmet-space-xs) var(--semmet-space-sm);
   font: inherit;
-  font-weight: 500;
   color: inherit;
   background: none;
   border: none;
   cursor: pointer;
   text-align: left;
-  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;
 }
 
 button::after {
@@ -51,17 +25,11 @@ button::after {
   height: 0.5rem;
   margin-left: auto;
   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);
 }
 
 button[aria-expanded='true']::after {
   transform: rotate(-135deg);
 }
-
-div {
-  padding: 0 var(--semmet-space-sm) var(--semmet-space-sm);
-  color: var(--semmet-color-on-surface-variant);
-}

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"
+  ]
 }