semmet-angular 0.42.0 → 0.44.0

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

@@ -1,29 +1,9 @@
 :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-radius-sm: 8px;
-  --semmet-space-2xs: 8px;
-  --semmet-space-xs: 16px;
-  --semmet-space-sm: 24px;
-  --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-button-group {
   display: inline-flex;
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-sm);
-  overflow: hidden;
-  background: var(--semmet-color-surface);
 }
 
 .semmet-button-group--vertical {
@@ -34,56 +14,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 2.75rem;
-  border: 0;
-  border-inline-end: 1px solid var(--semmet-color-outline);
-  color: var(--semmet-color-on-surface);
-  background: var(--semmet-color-surface);
   font: inherit;
-  font-weight: 650;
-  line-height: 1.2;
-  white-space: nowrap;
   cursor: pointer;
-  transition:
-    background-color var(--semmet-motion),
-    color var(--semmet-motion),
-    opacity var(--semmet-motion);
-}
-
-.semmet-button-group--vertical .semmet-button-group__button {
-  border-inline-end: 0;
-  border-block-end: 1px solid var(--semmet-color-outline);
-}
-
-.semmet-button-group__button:last-child {
-  border-inline-end: 0;
-  border-block-end: 0;
-}
-
-.semmet-button-group--sm .semmet-button-group__button {
-  min-height: var(--semmet-target-sm);
-  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
-  font-size: 0.875rem;
-}
-
-.semmet-button-group--md .semmet-button-group__button {
-  min-height: var(--semmet-target-md);
-  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
-}
-
-.semmet-button-group--lg .semmet-button-group__button {
-  min-height: var(--semmet-target-lg);
-  padding: var(--semmet-space-xs) var(--semmet-space-sm);
-  font-size: 1rem;
-}
-
-.semmet-button-group__button:hover:not(:disabled) {
-  background: var(--semmet-color-surface-muted);
-}
-
-.semmet-button-group__button--pressed {
-  color: var(--semmet-color-on-primary);
-  background: var(--semmet-color-primary);
 }
 
 .semmet-button-group__button:disabled {
@@ -94,6 +26,6 @@
 .semmet-button-group__button:focus-visible {
   position: relative;
   z-index: 1;
-  outline: 2px solid var(--semmet-color-primary);
-  outline-offset: -2px;
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
 }

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

@@ -3,7 +3,6 @@ import { Component, Directive, TemplateRef, booleanAttribute, computed, contentC
 
 type <%= classify(name) %>Orientation = 'horizontal' | 'vertical';
 type <%= classify(name) %>SelectionMode = 'none' | 'single' | 'multiple';
-type <%= classify(name) %>Size = 'sm' | 'md' | 'lg';
 
 export interface <%= classify(name) %>Item {
   id: string;
@@ -41,7 +40,7 @@ export class <%= classify(name) %> {
   readonly label = input('View options');
   readonly orientation = input<<%= classify(name) %>Orientation>('horizontal');
   readonly selectionMode = input<<%= classify(name) %>SelectionMode>('single');
-  readonly size = input<<%= classify(name) %>Size>('md');
+  readonly size = input<string>('md');
   readonly disabled = input(false, { transform: booleanAttribute });
   readonly items = input<readonly <%= classify(name) %>Item[]>(DEFAULT_ITEMS);
   readonly selectedIds = model<readonly string[]>(DEFAULT_SELECTED_IDS);

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

@@ -1,67 +0,0 @@
-: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-2xs: 8px;
-  --semmet-space-xs: 16px;
-  --semmet-space-sm: 24px;
-
-  display: block;
-  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
-  font-size: 0.9375rem;
-}
-
-article {
-  overflow: hidden;
-  background: var(--semmet-color-surface);
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-md);
-}
-
-h3 {
-  margin: var(--semmet-space-sm) var(--semmet-space-sm) var(--semmet-space-2xs);
-  font-size: 1.0625rem;
-  font-weight: 500;
-  color: var(--semmet-color-on-surface);
-}
-
-p {
-  margin: 0;
-}
-
-.semmet-card__media :is(img, video, svg) {
-  display: block;
-  width: 100%;
-  height: auto;
-}
-
-.semmet-card__description {
-  margin: 0 var(--semmet-space-sm) var(--semmet-space-xs);
-  color: var(--semmet-color-on-surface-variant);
-}
-
-.semmet-card__actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--semmet-space-xs);
-  margin: 0 var(--semmet-space-sm) var(--semmet-space-sm);
-}
-
-a {
-  color: var(--semmet-color-primary);
-  font-weight: 500;
-  text-decoration: none;
-  border-radius: 4px;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-
-a:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
-  outline-offset: 2px;
-}

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

@@ -1,62 +1,17 @@
-<!-- Semmet Angular: Card — https://www.w3.org/WAI/tutorials/page-structure/headings/ -->
+<!-- Semmet Angular: Card - semantic article with a required accessible heading anchor. -->
 <!--
 Usage from a parent component template:
-Import <%= classify(name) %> and any slot directives you use in that parent component.
-
-<<%= selector %> title="Accessible components" description="Generate Angular components with ARIA." />
+Import <%= classify(name) %> in that parent component.
 
 <<%= selector %>>
-  <ng-template <%= camelize(name) %>Media>
-    <img src="..." alt="..." />
-  </ng-template>
-
-  <ng-template <%= camelize(name) %>Title>
-    Accessible components
-  </ng-template>
-
-  <ng-template <%= camelize(name) %>Description>
-    Generate Angular components with ARIA, keyboard behavior and signals.
-  </ng-template>
-
-  <ng-template <%= camelize(name) %>Actions>
-    <a href="/docs">Read docs</a>
-  </ng-template>
+  <h3 <%= camelize(name) %>Heading>Accessible components</h3>
+  <p>Generate Angular components with ARIA, keyboard behavior and signals.</p>
+  <a href="/docs">Read docs</a>
 </<%= selector %>>
 -->
-<article [attr.aria-labelledby]="labelledBy()">
-  @if (media(); as mediaSlot) {
-    <div class="semmet-card__media">
-      <ng-container [ngTemplateOutlet]="mediaSlot.templateRef" />
-    </div>
-  }
-
-  @if (hasTitle()) {
-    <h3 [id]="instanceId + '-title'">
-      @if (titleTemplate(); as titleSlot) {
-        <ng-container [ngTemplateOutlet]="titleSlot.templateRef" />
-      } @else {
-        {{ title() }}
-      }
-    </h3>
-  }
-
-  @if (hasDescription()) {
-    <div class="semmet-card__description">
-      @if (descriptionTemplate(); as descriptionSlot) {
-        <ng-container [ngTemplateOutlet]="descriptionSlot.templateRef" />
-      } @else {
-        <p>{{ description() }}</p>
-      }
-    </div>
-  }
-
-  @if (hasActions()) {
-    <div class="semmet-card__actions">
-      @if (actions(); as actionsSlot) {
-        <ng-container [ngTemplateOutlet]="actionsSlot.templateRef" />
-      } @else {
-        <a [href]="linkHref()">{{ linkLabel() }}</a>
-      }
-    </div>
-  }
+<article [attr.aria-labelledby]="instanceId + '-heading'">
+  <div [id]="instanceId + '-heading'">
+    <ng-content select="[<%= camelize(name) %>Heading]" />
+  </div>
+  <ng-content />
 </article>

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

@@ -1,56 +1,13 @@
-import { NgTemplateOutlet } from '@angular/common';
-import { Component, Directive, TemplateRef, computed, contentChild, inject, input } from '@angular/core';
+import { Component } from '@angular/core';
 
 let nextId = 0;
 
-@Directive({
-  selector: 'ng-template[<%= camelize(name) %>Media]',
-})
-export class <%= classify(name) %>Media {
-  readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
-}
-
-@Directive({
-  selector: 'ng-template[<%= camelize(name) %>Title]',
-})
-export class <%= classify(name) %>Title {
-  readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
-}
-
-@Directive({
-  selector: 'ng-template[<%= camelize(name) %>Description]',
-})
-export class <%= classify(name) %>Description {
-  readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
-}
-
-@Directive({
-  selector: 'ng-template[<%= camelize(name) %>Actions]',
-})
-export class <%= classify(name) %>Actions {
-  readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
-}
-
 @Component({
   selector: '<%= selector %>',
-  imports: [NgTemplateOutlet],
+  imports: [],
   templateUrl: './<%= dasherize(name) %>.html',
   styleUrl: './<%= dasherize(name) %>.css',
 })
 export class <%= classify(name) %> {
-  protected readonly media = contentChild(<%= classify(name) %>Media);
-  protected readonly titleTemplate = contentChild(<%= classify(name) %>Title);
-  protected readonly descriptionTemplate = contentChild(<%= classify(name) %>Description);
-  protected readonly actions = contentChild(<%= classify(name) %>Actions);
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
-
-  readonly title = input('Card title');
-  readonly description = input('Card description text.');
-  readonly linkHref = input('#');
-  readonly linkLabel = input('Learn more');
-
-  protected readonly hasTitle = computed(() => Boolean(this.titleTemplate()) || this.title().trim().length > 0);
-  protected readonly labelledBy = computed(() => this.hasTitle() ? `${this.instanceId}-title` : null);
-  protected readonly hasDescription = computed(() => Boolean(this.descriptionTemplate()) || this.description().trim().length > 0);
-  protected readonly hasActions = computed(() => Boolean(this.actions()) || this.linkLabel().trim().length > 0);
 }

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

@@ -1,18 +1,5 @@
 :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-md: 12px;
-  --semmet-space-xs: 16px;
-  --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;
 }
 
 section {
@@ -20,7 +7,6 @@ section {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
-  gap: var(--semmet-space-xs);
 }
 
 [aria-live] {
@@ -29,29 +15,13 @@ section {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--semmet-space-sm);
-  color: var(--semmet-color-on-surface);
-  background: var(--semmet-color-surface);
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-md);
   text-align: center;
 }
 
 button {
   flex-shrink: 0;
-  width: var(--semmet-target-md);
-  height: var(--semmet-target-md);
-  font-size: 1.25rem;
-  color: var(--semmet-color-on-primary);
-  background: var(--semmet-color-primary);
-  border: none;
-  border-radius: 50%;
+  font: inherit;
   cursor: pointer;
-  transition: background-color var(--semmet-motion);
-}
-
-button:hover {
-  background: color-mix(in srgb, var(--semmet-color-primary) 88%, black);
 }
 
 button:disabled {
@@ -60,6 +30,6 @@ button:disabled {
 }
 
 button:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
+  outline: 2px solid currentColor;
   outline-offset: 2px;
 }

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

@@ -3,7 +3,7 @@
 Usage from a parent component template:
 Import <%= classify(name) %> and <%= classify(name) %>Slide in that parent component.
 
-<<%= selector %>>
+<<%= selector %> label="Featured items">
   <ng-template <%= camelize(name) %>Slide id="intro" label="Introduction">
     <app-intro-slide />
   </ng-template>
@@ -15,8 +15,8 @@ Import <%= classify(name) %> and <%= classify(name) %>Slide in that parent compo
 
 Set [preserveContent]="false" on <<%= selector %>> to destroy inactive slide content.
 -->
-<section aria-roledescription="carousel" aria-label="Featured items">
-  <button type="button" [disabled]="slides().length <= 1" (click)="previous()" aria-label="Previous slide">‹</button>
+<section aria-roledescription="carousel" [attr.aria-label]="label()">
+  <button type="button" [disabled]="slides().length <= 1" (click)="previous()" [attr.aria-label]="previousLabel()">‹</button>
   <div aria-live="polite">
     @for (slide of slides(); track slide.id(); let i = $index) {
       <div
@@ -30,5 +30,5 @@ Set [preserveContent]="false" on <<%= selector %>> to destroy inactive slide con
       </div>
     }
   </div>
-  <button type="button" [disabled]="slides().length <= 1" (click)="next()" aria-label="Next slide">›</button>
+  <button type="button" [disabled]="slides().length <= 1" (click)="next()" [attr.aria-label]="nextLabel()">›</button>
 </section>

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

@@ -35,6 +35,10 @@ export class <%= classify(name) %>Slide {
 export class <%= classify(name) %> {
   protected readonly slides = contentChildren(<%= classify(name) %>Slide);
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+
+  readonly label = input('Featured items');
+  readonly previousLabel = input('Previous slide');
+  readonly nextLabel = input('Next slide');
   readonly preserveContent = input(true, { transform: booleanAttribute });
 
   protected readonly activeIndex = signal(0);

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

@@ -1,24 +1,12 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-on-primary: #ffffff;
-  --semmet-color-outline: #71717a;
-  --semmet-color-on-surface: #18181b;
-  --semmet-space-sm: 24px;
-  --semmet-target-sm: 32px;
-  --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='checkbox'] {
   position: relative;
   display: inline-flex;
   align-items: center;
-  padding-left: var(--semmet-space-sm);
-  min-height: var(--semmet-target-sm);
-  color: var(--semmet-color-on-surface);
+  padding-left: 1.5rem;
   cursor: pointer;
   user-select: none;
 }
@@ -30,15 +18,12 @@
   width: 1.125rem;
   height: 1.125rem;
   box-sizing: border-box;
-  border: 2px solid var(--semmet-color-outline);
-  border-radius: 4px;
+  border: 2px solid currentColor;
   background: transparent;
-  transition: background-color var(--semmet-motion), border-color var(--semmet-motion);
 }
 
 [role='checkbox'][aria-checked='true']::before {
-  background: var(--semmet-color-primary);
-  border-color: var(--semmet-color-primary);
+  background: currentColor;
 }
 
 [role='checkbox']::after {
@@ -54,11 +39,10 @@
 }
 
 [role='checkbox'][aria-checked='true']::after {
-  border-color: var(--semmet-color-on-primary);
+  border-color: Canvas;
 }
 
 [role='checkbox']:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
+  outline: 2px solid currentColor;
   outline-offset: 2px;
-  border-radius: 4px;
 }