semmet-angular 0.42.0 → 0.44.0

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

@@ -1,59 +1,22 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-on-primary: #ffffff;
-  --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-color-danger: #b42318;
-  --semmet-radius-sm: 8px;
-  --semmet-space-2xs: 8px;
-  --semmet-space-xs: 16px;
-  --semmet-target-lg: 48px;
-  --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-input-group__label {
   display: inline-block;
-  margin-block-end: var(--semmet-space-2xs);
-  color: var(--semmet-color-on-surface);
-  font-weight: 650;
-}
-
-.semmet-input-group__required {
-  color: var(--semmet-color-danger);
 }
 
 .semmet-input-group {
   display: flex;
   align-items: stretch;
   width: 100%;
-  min-height: var(--semmet-target-lg);
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-sm);
-  overflow: hidden;
-  color: var(--semmet-color-on-surface);
-  background: var(--semmet-color-surface);
-  transition:
-    border-color var(--semmet-motion),
-    box-shadow var(--semmet-motion),
-    opacity var(--semmet-motion);
 }
 
 .semmet-input-group:focus-within {
-  outline: 2px solid var(--semmet-color-primary);
+  outline: 2px solid currentColor;
   outline-offset: 2px;
 }
 
-.semmet-input-group--invalid {
-  border-color: var(--semmet-color-danger);
-}
-
 .semmet-input-group--disabled {
   opacity: 0.58;
 }
@@ -63,29 +26,15 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0 var(--semmet-space-xs);
   white-space: nowrap;
 }
 
-.semmet-input-group__addon {
-  color: var(--semmet-color-on-surface-variant);
-  background: var(--semmet-color-surface-muted);
-  border-inline-end: 1px solid var(--semmet-color-outline);
-}
-
-.semmet-input-group__control + .semmet-input-group__addon {
-  border-inline-start: 1px solid var(--semmet-color-outline);
-  border-inline-end: 0;
-}
-
 .semmet-input-group__control {
   min-width: 0;
   flex: 1 1 auto;
-  border: 0;
   color: inherit;
   background: transparent;
   font: inherit;
-  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
 }
 
 .semmet-input-group__control:focus {
@@ -93,12 +42,7 @@
 }
 
 .semmet-input-group__button {
-  border: 0;
-  border-inline-start: 1px solid var(--semmet-color-outline);
-  color: var(--semmet-color-on-primary);
-  background: var(--semmet-color-primary);
   font: inherit;
-  font-weight: 650;
   cursor: pointer;
 }
 
@@ -108,15 +52,5 @@
 
 .semmet-input-group__hint,
 .semmet-input-group__error {
-  margin: var(--semmet-space-2xs) 0 0;
-  font-size: 0.875rem;
-  line-height: 1.4;
-}
-
-.semmet-input-group__hint {
-  color: var(--semmet-color-on-surface-variant);
-}
-
-.semmet-input-group__error {
-  color: var(--semmet-color-danger);
+  margin: 0;
 }

package/src/input-group/files/__name@dasherize__/__name@dasherize__.html.template

@@ -1,9 +1,13 @@
-<!-- Semmet Angular: Input Group - native input with addon text announced through aria-describedby. -->
+<!-- Semmet Angular: Input Group - native input with projected addons announced through aria-describedby. -->
 <!--
 Usage from a parent component template:
-Import <%= classify(name) %> in that parent component.
+Import <%= classify(name) %>, <%= classify(name) %>Prefix, and <%= classify(name) %>Suffix in that parent component.
 
-<<%= selector %> label="Website" prefix="https://" suffix=".com" [(value)]="website" />
+<<%= selector %> label="Search" type="search" [(value)]="query">
+  <ng-template <%= camelize(name) %>Prefix>
+    <svg aria-hidden="true" viewBox="0 0 20 20"><path d="M8.5 3a5.5 5.5 0 0 1 4.3 8.9l3.15 3.15-1.4 1.4-3.15-3.15A5.5 5.5 0 1 1 8.5 3Zm0 2a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Z" /></svg>
+  </ng-template>
+</<%= selector %>>
 -->
 <label class="semmet-input-group__label" [for]="instanceId">
   {{ label() }}
@@ -18,7 +22,9 @@ Import <%= classify(name) %> in that parent component.
 >
   @if (hasPrefix()) {
     <span class="semmet-input-group__addon" [id]="instanceId + '-prefix'">
-      {{ prefix() }}
+      @if (prefix(); as prefixSlot) {
+        <ng-container [ngTemplateOutlet]="prefixSlot.templateRef" />
+      }
     </span>
   }
   <input
@@ -35,7 +41,9 @@ Import <%= classify(name) %> in that parent component.
   />
   @if (hasSuffix()) {
     <span class="semmet-input-group__addon" [id]="instanceId + '-suffix'">
-      {{ suffix() }}
+      @if (suffix(); as suffixSlot) {
+        <ng-container [ngTemplateOutlet]="suffixSlot.templateRef" />
+      }
     </span>
   }
   @if (hasAction()) {

package/src/input-group/files/__name@dasherize__/__name@dasherize__.ts.template

@@ -1,23 +1,38 @@
-import { Component, booleanAttribute, computed, input, model, output } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { Component, Directive, TemplateRef, booleanAttribute, computed, contentChild, inject, input, model, output } from '@angular/core';
 
 type <%= classify(name) %>InputType = 'text' | 'email' | 'search' | 'tel' | 'url';
 
 let nextId = 0;
 
+@Directive({
+  selector: 'ng-template[<%= camelize(name) %>Prefix]',
+})
+export class <%= classify(name) %>Prefix {
+  readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
+}
+
+@Directive({
+  selector: 'ng-template[<%= camelize(name) %>Suffix]',
+})
+export class <%= classify(name) %>Suffix {
+  readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
+}
+
 @Component({
   selector: '<%= selector %>',
-  imports: [],
+  imports: [NgTemplateOutlet],
   templateUrl: './<%= dasherize(name) %>.html',
   styleUrl: './<%= dasherize(name) %>.css',
 })
 export class <%= classify(name) %> {
+  protected readonly prefix = contentChild(<%= classify(name) %>Prefix);
+  protected readonly suffix = contentChild(<%= classify(name) %>Suffix);
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
 
   readonly label = input('Website');
   readonly type = input<<%= classify(name) %>InputType>('url');
   readonly placeholder = input('example');
-  readonly prefix = input('https://');
-  readonly suffix = input('.com');
   readonly buttonLabel = input('Apply');
   readonly hint = input('Use a short, memorable address.');
   readonly errorMessage = input('');
@@ -26,8 +41,8 @@ export class <%= classify(name) %> {
   readonly value = model('');
   readonly buttonClick = output<MouseEvent>();
 
-  protected readonly hasPrefix = computed(() => this.prefix().trim().length > 0);
-  protected readonly hasSuffix = computed(() => this.suffix().trim().length > 0);
+  protected readonly hasPrefix = computed(() => Boolean(this.prefix()));
+  protected readonly hasSuffix = computed(() => Boolean(this.suffix()));
   protected readonly hasAction = computed(() => this.buttonLabel().trim().length > 0);
   protected readonly hasError = computed(() => this.errorMessage().trim().length > 0);
 

package/src/input-group/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 group 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/landmarks/files/__name@dasherize__/__name@dasherize__.css.template

@@ -1,30 +1,6 @@
 :host {
-  --semmet-color-outline: #d4d4d8;
-  --semmet-color-on-surface: #18181b;
-  --semmet-color-on-surface-variant: #52525b;
-  --semmet-space-xs: 16px;
-  --semmet-space-sm: 24px;
-
   display: grid;
   grid-template-columns: 1fr;
-  gap: var(--semmet-space-sm);
-  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
-  color: var(--semmet-color-on-surface);
-}
-
-header,
-nav,
-footer {
-  padding: var(--semmet-space-xs) 0;
-}
-
-header {
-  border-bottom: 1px solid var(--semmet-color-outline);
-}
-
-footer {
-  border-top: 1px solid var(--semmet-color-outline);
-  color: var(--semmet-color-on-surface-variant);
 }
 
 main {

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

@@ -15,13 +15,13 @@ Import <%= classify(name) %> in that parent component.
 <header>
   <ng-content select="[header]"></ng-content>
 </header>
-<nav aria-label="Main">
+<nav [attr.aria-label]="navigationLabel()">
   <ng-content select="[nav]"></ng-content>
 </nav>
 <main>
   <ng-content></ng-content>
 </main>
-<aside aria-label="Related links">
+<aside [attr.aria-label]="asideLabel()">
   <ng-content select="[aside]"></ng-content>
 </aside>
 <footer>

package/src/landmarks/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 navigationLabel = input('Main');
+  readonly asideLabel = input('Related links');
+}

package/src/landmarks/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 layout 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/list-group/files/__name@dasherize__/__name@dasherize__.css.template

@@ -1,123 +0,0 @@
-:host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-on-primary: #ffffff;
-  --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-space-xl: 64px;
-  --semmet-target-sm: 32px;
-  --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-list-group {
-  display: grid;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-md);
-  background: var(--semmet-color-surface);
-  list-style: none;
-}
-
-.semmet-list-group--flush {
-  border-radius: 0;
-}
-
-.semmet-list-group__item + .semmet-list-group__item {
-  border-block-start: 1px solid var(--semmet-color-outline);
-}
-
-.semmet-list-group__action {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--semmet-space-xs);
-  width: 100%;
-  min-height: var(--semmet-space-xl);
-  padding: var(--semmet-space-xs);
-  border: 0;
-  color: var(--semmet-color-on-surface);
-  background: var(--semmet-color-surface);
-  font: inherit;
-  text-align: start;
-  text-decoration: none;
-  cursor: pointer;
-  transition:
-    background-color var(--semmet-motion),
-    color var(--semmet-motion),
-    opacity var(--semmet-motion);
-}
-
-.semmet-list-group__action:hover:not(:disabled):not(.semmet-list-group__action--disabled) {
-  background: var(--semmet-color-surface-muted);
-}
-
-.semmet-list-group__action--active {
-  color: var(--semmet-color-on-primary);
-  background: var(--semmet-color-primary);
-}
-
-.semmet-list-group__action:disabled,
-.semmet-list-group__action--disabled {
-  cursor: not-allowed;
-  opacity: 0.54;
-}
-
-.semmet-list-group__action:focus-visible {
-  position: relative;
-  z-index: 1;
-  outline: 2px solid var(--semmet-color-primary);
-  outline-offset: -2px;
-}
-
-.semmet-list-group__content {
-  display: grid;
-  min-width: 0;
-  gap: var(--semmet-space-3xs);
-}
-
-.semmet-list-group__title {
-  font-weight: 700;
-  line-height: 1.25;
-}
-
-.semmet-list-group__description {
-  color: var(--semmet-color-on-surface-variant);
-  font-size: 0.875rem;
-  line-height: 1.4;
-}
-
-.semmet-list-group__action--active .semmet-list-group__description {
-  color: rgba(255, 255, 255, 0.76);
-}
-
-.semmet-list-group__badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: var(--semmet-target-sm);
-  min-height: var(--semmet-target-sm);
-  padding: var(--semmet-space-3xs) var(--semmet-space-2xs);
-  border-radius: 999px;
-  color: var(--semmet-color-on-primary);
-  background: var(--semmet-color-primary);
-  font-size: 0.75rem;
-  font-weight: 700;
-  line-height: 1;
-}
-
-.semmet-list-group__action--active .semmet-list-group__badge {
-  color: var(--semmet-color-primary);
-  background: var(--semmet-color-on-primary);
-}

package/src/list-group/files/__name@dasherize__/__name@dasherize__.e2e-spec.ts.template

@@ -4,23 +4,22 @@ test.describe('<%= classify(name) %>', () => {
   test('updates mounted list group active action', async ({ page }) => {
     await page.goto('/');
 
-    const component = page.locator('<%= selector %>').first();
+    const component = page.locator('[<%= camelize(name) %>]').first();
     test.skip(
       (await component.count()) === 0,
-      'Mount <<%= selector %> /> in a route or host component to enable this generated e2e test.'
+      'Mount a <%= camelize(name) %> list in a route or host component to enable this generated e2e test.'
     );
 
-    const list = component.locator('ul').first();
-    const actions = component.locator('.semmet-list-group__action');
+    const items = component.locator('[<%= camelize(name) %>Item]');
     test.skip(
-      (await actions.count()) < 2,
+      (await items.count()) < 2,
       'Mount at least two list group actions to enable this generated list-group e2e test.'
     );
 
-    await expect(list).toHaveAttribute('aria-label', /.+/);
-    await expect(actions.first()).toHaveAttribute('aria-current', /page|true/);
+    await expect(component).toHaveAttribute('aria-label', /.+/);
+    await expect(items.first()).toHaveAttribute('aria-current', /page|true/);
 
-    await actions.nth(1).click();
-    await expect(actions.nth(1)).toHaveAttribute('aria-current', /page|true/);
+    await items.nth(1).click();
+    await expect(items.nth(1)).toHaveAttribute('aria-current', /page|true/);
   });
 });

package/src/list-group/files/__name@dasherize__/__name@dasherize__.html.template

@@ -1,53 +1,19 @@
-<!-- Semmet Angular: List Group - semantic list with optional action and active states. -->
+<!-- Semmet Angular: List Group - headless list relationship directives. -->
 <!--
 Usage from a parent component template:
-Import <%= classify(name) %> in that parent component.
+Import <%= classify(name) %> and <%= classify(name) %>Item in that parent component.
 
-<<%= selector %> label="Settings sections" />
--->
-<ul [id]="instanceId" [class]="listClasses()" [attr.aria-label]="label()">
-  @for (item of items(); track item.id) {
-    <li class="semmet-list-group__item">
-      @if (item.href) {
-        <a
-          class="semmet-list-group__action"
-          [class.semmet-list-group__action--active]="isActive(item)"
-          [class.semmet-list-group__action--disabled]="item.disabled"
-          [href]="item.disabled ? null : item.href"
-          [attr.aria-current]="isActive(item) ? 'page' : null"
-          [attr.aria-disabled]="item.disabled ? 'true' : null"
-          (click)="select(item)"
-        >
-          <span class="semmet-list-group__content">
-            <span class="semmet-list-group__title">{{ item.title }}</span>
-            @if (item.description) {
-              <span class="semmet-list-group__description">{{ item.description }}</span>
-            }
-          </span>
-          @if (item.badge) {
-            <span class="semmet-list-group__badge">{{ item.badge }}</span>
-          }
-        </a>
-      } @else {
-        <button
-          type="button"
-          class="semmet-list-group__action"
-          [class.semmet-list-group__action--active]="isActive(item)"
-          [disabled]="item.disabled"
-          [attr.aria-current]="isActive(item) ? 'true' : null"
-          (click)="select(item)"
-        >
-          <span class="semmet-list-group__content">
-            <span class="semmet-list-group__title">{{ item.title }}</span>
-            @if (item.description) {
-              <span class="semmet-list-group__description">{{ item.description }}</span>
-            }
-          </span>
-          @if (item.badge) {
-            <span class="semmet-list-group__badge">{{ item.badge }}</span>
-          }
-        </button>
-      }
+<ul <%= camelize(name) %> label="Settings sections" [(activeId)]="activeSection">
+  @for (item of sections; track item.id) {
+    <li
+      <%= camelize(name) %>Item
+      [value]="item.id"
+      [disabled]="item.disabled"
+      #sectionItem="<%= camelize(name) %>Item"
+      [class.active]="sectionItem.active()"
+    >
+      <a [href]="item.href">{{ item.label }}</a>
     </li>
   }
 </ul>
+-->