semmet-angular 0.42.0 → 0.43.0

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

@@ -1,46 +1,22 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-on-primary: #ffffff;
-  --semmet-radius-sm: 8px;
-  --semmet-space-3xs: 4px;
-  --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;
 }
 
 [role='alert'] {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--semmet-space-xs);
-  padding: var(--semmet-space-xs);
-  color: var(--semmet-color-on-primary);
-  background: var(--semmet-color-primary);
-  border-radius: var(--semmet-radius-sm);
 }
 
 button {
   font: inherit;
-  font-size: 1.125rem;
-  line-height: 1;
   color: inherit;
   background: none;
   border: none;
   cursor: pointer;
-  border-radius: 4px;
-  padding: var(--semmet-space-3xs) var(--semmet-space-2xs);
-  transition: background-color var(--semmet-motion);
-}
-
-button:hover {
-  background: color-mix(in srgb, var(--semmet-color-on-primary) 20%, transparent);
 }
 
 button:focus-visible {
-  outline: 2px solid var(--semmet-color-on-primary);
+  outline: 2px solid currentColor;
   outline-offset: 2px;
 }

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

@@ -3,11 +3,11 @@
 Usage from a parent component template:
 Import <%= classify(name) %> in that parent component.
 
-<<%= selector %> />
+<<%= selector %> message="Your changes have been saved." />
 -->
 @if (visible()) {
   <div role="alert" [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/alert/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;
 
@@ -12,6 +12,9 @@ export class <%= classify(name) %> {
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
   protected readonly visible = signal(true);
 
+  readonly message = input('Your changes have been saved.');
+  readonly dismissLabel = input('Dismiss');
+
   protected dismiss(): void {
     this.visible.set(false);
   }

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

@@ -1,59 +1,18 @@
-:host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-on-primary: #ffffff;
-  --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;
 }
 
-[role='alertdialog'] button:last-of-type {
-  color: var(--semmet-color-on-primary);
-  background: var(--semmet-color-primary);
-  margin-left: var(--semmet-space-2xs);
-}
-
-[role='alertdialog'] button:last-of-type:hover {
-  background: color-mix(in srgb, var(--semmet-color-primary) 88%, black);
-}
-
 .backdrop {
   position: fixed;
   inset: 0;
-  background: var(--semmet-color-scrim);
 }
 
 [role='alertdialog'] {
@@ -63,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='alertdialog']:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
+  outline: 2px solid currentColor;
   outline-offset: 2px;
 }
 
 [role='alertdialog'] h2 {
-  margin: 0 0 var(--semmet-space-xs);
-  font-size: 1.25rem;
-  font-weight: 500;
-}
-
-[role='alertdialog'] > div {
-  margin-bottom: var(--semmet-space-sm);
-  color: var(--semmet-color-on-surface-variant);
+  margin: 0;
 }

package/src/alert-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="Delete item" title="Confirm delete" />
 -->
-<button type="button" (click)="open($event)">Delete item</button>
+<button type="button" (click)="open($event)">{{ triggerLabel() }}</button>
 
 @if (isOpen()) {
   <div class="backdrop" (click)="close()"></div>
@@ -18,9 +18,9 @@ Import <%= classify(name) %> in that parent component.
     tabindex="-1"
     (keydown)="handleDialogKeydown($event)"
   >
-    <h2 [id]="instanceId + '-title'">Confirm action</h2>
-    <div [id]="instanceId + '-description'">Are you sure you want to continue? This action cannot be undone.</div>
-    <button type="button" (click)="close()">Cancel</button>
-    <button type="button" (click)="close()">Confirm</button>
+    <h2 [id]="instanceId + '-title'">{{ title() }}</h2>
+    <div [id]="instanceId + '-description'">{{ description() }}</div>
+    <button type="button" (click)="close()">{{ cancelLabel() }}</button>
+    <button type="button" (click)="close()">{{ confirmLabel() }}</button>
   </div>
 }

package/src/alert-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,12 @@ export class <%= classify(name) %> {
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
   protected readonly isOpen = signal(false);
 
+  readonly triggerLabel = input('Delete item');
+  readonly title = input('Confirm action');
+  readonly description = input('Are you sure you want to continue? This action cannot be undone.');
+  readonly cancelLabel = input('Cancel');
+  readonly confirmLabel = input('Confirm');
+
   protected open(event: MouseEvent): void {
     this.triggerElement = event.currentTarget as HTMLElement;
     this.isOpen.set(true);

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

@@ -0,0 +1,17 @@
+:host {
+  display: inline-block;
+}
+
+.semmet-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.semmet-avatar__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

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

@@ -0,0 +1,28 @@
+<!-- Semmet Angular: Avatar - image or initials with decorative and accessible-label modes. -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> name="Ada Lovelace" src="/assets/ada.jpg" />
+<<%= selector %> name="Grace Hopper" />
+
+<<%= selector %> name="Katherine Johnson">
+  <ng-template <%= camelize(name) %>Fallback>
+    KJ
+  </ng-template>
+</<%= selector %>>
+-->
+<span
+  [class]="avatarClasses()"
+  [attr.role]="src() ? null : 'img'"
+  [attr.aria-label]="src() ? null : accessibleLabel()"
+  [attr.aria-hidden]="ariaHidden()"
+>
+  @if (src()) {
+    <img class="semmet-avatar__image" [src]="src()" [alt]="altText()" />
+  } @else if (fallback(); as fallbackSlot) {
+    <ng-container [ngTemplateOutlet]="fallbackSlot.templateRef" />
+  } @else {
+    <span class="semmet-avatar__initials" aria-hidden="true">{{ initials() }}</span>
+  }
+</span>

package/src/avatar/files/__name@dasherize__/__name@dasherize__.spec.ts.template

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { <%= classify(name) %> } from './<%= dasherize(name) %>';
+
+@Component({
+  imports: [<%= classify(name) %>],
+  template: `<<%= selector %> name="Ada Lovelace" />`,
+})
+class Host {}
+
+describe('<%= classify(name) %>', () => {
+  let fixture: ComponentFixture<Host>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [Host] }).compileComponents();
+    fixture = TestBed.createComponent(Host);
+    fixture.detectChanges();
+  });
+
+  it('renders initials with image semantics when no src is provided', () => {
+    const avatar = fixture.nativeElement.querySelector('.semmet-avatar');
+
+    expect(avatar.getAttribute('role')).toBe('img');
+    expect(avatar.getAttribute('aria-label')).toBe('Ada Lovelace');
+    expect(avatar.textContent).toContain('AL');
+  });
+});

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

@@ -0,0 +1,35 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { Component, Directive, TemplateRef, booleanAttribute, computed, contentChild, inject, input } from '@angular/core';
+
+@Directive({
+  selector: 'ng-template[<%= camelize(name) %>Fallback]',
+})
+export class <%= classify(name) %>Fallback {
+  readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
+}
+
+@Component({
+  selector: '<%= selector %>',
+  imports: [NgTemplateOutlet],
+  templateUrl: './<%= dasherize(name) %>.html',
+  styleUrl: './<%= dasherize(name) %>.css',
+})
+export class <%= classify(name) %> {
+  protected readonly fallback = contentChild(<%= classify(name) %>Fallback);
+
+  readonly src = input('');
+  readonly name = input('Ada Lovelace');
+  readonly label = input('');
+  readonly decorative = input(false, { transform: booleanAttribute });
+  readonly size = input<string>('md');
+
+  protected readonly avatarClasses = computed(() => `semmet-avatar semmet-avatar--${this.size()}`);
+  protected readonly accessibleLabel = computed(() => this.decorative() ? null : this.label() || this.name());
+  protected readonly ariaHidden = computed(() => this.decorative() ? 'true' : null);
+  protected readonly altText = computed(() => this.decorative() ? '' : this.accessibleLabel() ?? '');
+
+  protected readonly initials = computed(() => {
+    const words = this.name().trim().split(/\s+/).filter(Boolean);
+    return words.slice(0, 2).map((word) => word[0]?.toUpperCase() ?? '').join('') || '?';
+  });
+}

package/src/avatar/index.d.ts

@@ -0,0 +1 @@
+export declare const avatar: (options: import("./schema").Schema) => import("@angular-devkit/schematics").Rule;

package/src/avatar/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.avatar = void 0;
+const generate_component_1 = require("../utils/generate-component");
+exports.avatar = (0, generate_component_1.createAriaComponentSchematic)({ includeSharedUnitTest: false });
+//# sourceMappingURL=index.js.map

package/src/avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,MAAM,GAAG,IAAA,iDAA4B,EAAC,EAAE,qBAAqB,EAAE,KAAK,EAAE,CAAC,CAAC"}

package/src/avatar/index.ts

@@ -0,0 +1,3 @@
+import { createAriaComponentSchematic } from '../utils/generate-component';
+
+export const avatar = createAriaComponentSchematic({ includeSharedUnitTest: false });

package/src/avatar/schema.d.ts

@@ -0,0 +1 @@
+export { ComponentSchematicOptions as Schema } from '../utils/schema-types';

package/src/avatar/schema.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=schema.js.map

package/src/avatar/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["schema.ts"],"names":[],"mappings":""}

package/src/avatar/schema.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularAvatar",
+  "title": "Semmet Angular Avatar Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Avatar component with image, initials, decorative, and accessible-label modes.",
+  "additionalProperties": false,
+  "properties": {
+    "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
+      },
+      "x-prompt": "What name would you like to use for the avatar 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"
+      },
+      "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"
+      }
+    }
+  },
+  "required": [
+    "name",
+    "project"
+  ]
+}

package/src/avatar/schema.ts

@@ -0,0 +1 @@
+export { ComponentSchematicOptions as Schema } from '../utils/schema-types';

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

@@ -1,105 +1,28 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-on-primary: #ffffff;
-  --semmet-color-neutral: #f4f4f5;
-  --semmet-color-on-neutral: #27272a;
-  --semmet-color-success: #067647;
-  --semmet-color-on-success: #ffffff;
-  --semmet-color-warning: #b54708;
-  --semmet-color-on-warning: #ffffff;
-  --semmet-color-danger: #b42318;
-  --semmet-color-on-danger: #ffffff;
-  --semmet-color-info: #175cd3;
-  --semmet-color-on-info: #ffffff;
-  --semmet-radius-full: 999px;
-  --semmet-radius-sm: 6px;
-  --semmet-space-3xs: 4px;
-  --semmet-space-2xs: 8px;
-  --semmet-target-sm: 32px;
-
   display: inline-block;
-  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
 }
 
 .semmet-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--semmet-space-2xs);
-  border-radius: var(--semmet-radius-sm);
-  font-weight: 700;
   line-height: 1;
   white-space: nowrap;
   vertical-align: baseline;
 }
 
-.semmet-badge--sm {
-  min-height: 1.25rem;
-  padding: var(--semmet-space-3xs) var(--semmet-space-2xs);
-  font-size: 0.6875rem;
-}
-
-.semmet-badge--md {
-  min-height: 1.5rem;
-  padding: var(--semmet-space-2xs);
-  font-size: 0.75rem;
-}
-
-.semmet-badge--lg {
-  min-height: 1.75rem;
-  padding: var(--semmet-space-2xs);
-  font-size: 0.8125rem;
-}
-
-.semmet-badge--pill {
-  border-radius: var(--semmet-radius-full);
-}
-
 .semmet-badge--dot {
   min-width: auto;
-  padding-inline-start: var(--semmet-space-2xs);
 }
 
 .semmet-badge--dot:has(.semmet-badge__dot):not(:has(.semmet-badge__label)) {
   width: 0.75rem;
   min-height: 0.75rem;
   padding: 0;
-  border-radius: var(--semmet-radius-full);
 }
 
 .semmet-badge__dot {
   width: 0.5em;
   height: 0.5em;
-  border-radius: var(--semmet-radius-full);
   background: currentColor;
 }
-
-.semmet-badge--neutral {
-  color: var(--semmet-color-on-neutral);
-  background: var(--semmet-color-neutral);
-}
-
-.semmet-badge--primary {
-  color: var(--semmet-color-on-primary);
-  background: var(--semmet-color-primary);
-}
-
-.semmet-badge--success {
-  color: var(--semmet-color-on-success);
-  background: var(--semmet-color-success);
-}
-
-.semmet-badge--warning {
-  color: var(--semmet-color-on-warning);
-  background: var(--semmet-color-warning);
-}
-
-.semmet-badge--danger {
-  color: var(--semmet-color-on-danger);
-  background: var(--semmet-color-danger);
-}
-
-.semmet-badge--info {
-  color: var(--semmet-color-on-info);
-  background: var(--semmet-color-info);
-}

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

@@ -1,9 +1,6 @@
 import { NgTemplateOutlet } from '@angular/common';
 import { Component, Directive, TemplateRef, booleanAttribute, computed, contentChild, inject, input } from '@angular/core';
 
-type <%= classify(name) %>Variant = 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
-type <%= classify(name) %>Size = 'sm' | 'md' | 'lg';
-
 let nextId = 0;
 
 @Directive({
@@ -24,8 +21,8 @@ export class <%= classify(name) %> {
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
 
   readonly label = input('Badge');
-  readonly variant = input<<%= classify(name) %>Variant>('neutral');
-  readonly size = input<<%= classify(name) %>Size>('md');
+  readonly variant = input<string>('neutral');
+  readonly size = input<string>('md');
   readonly pill = input(false, { transform: booleanAttribute });
   readonly dot = input(false, { transform: booleanAttribute });
   readonly decorative = input(false, { transform: booleanAttribute });