semmet-angular 0.42.0 → 0.44.0

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

@@ -1,133 +1,62 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-on-surface: #18181b;
-  --semmet-color-on-surface-variant: #52525b;
-  --semmet-color-accent: #2563eb;
-  --semmet-space-3xs: 4px;
-  --semmet-space-2xs: 8px;
-  --semmet-space-xs: 16px;
-  --semmet-space-sm: 24px;
-  --semmet-space-md: 32px;
-  --semmet-space-lg: 48px;
-  --semmet-space-xl: 64px;
-  --semmet-space-2xl: 80px;
-  --semmet-space-3xl: 120px;
-
   display: block;
-  color: var(--semmet-color-on-surface);
-  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
-  font-size: 1rem;
-  line-height: 1.5;
 }
 
 .semmet-block {
   display: grid;
-  gap: var(--semmet-space-lg);
-  max-width: 72rem;
-  margin-inline: auto;
-  margin-block: var(--semmet-space-3xl);
-}
-
-.semmet-block--hero {
-  min-height: 60vh;
-  align-content: center;
-}
-
-.semmet-block--header {
-  max-width: none;
-  margin-block: 0;
-}
-
-.semmet-block--footer {
-  max-width: none;
-  margin-block: var(--semmet-space-3xl) 0;
 }
 
 .semmet-block__header {
   display: grid;
-  gap: var(--semmet-space-xs);
-  max-width: 44rem;
 }
 
 .semmet-block__eyebrow {
   margin: 0;
-  color: var(--semmet-color-accent);
-  font-size: 0.8125rem;
-  font-weight: 700;
-  letter-spacing: 0;
-  text-transform: uppercase;
 }
 
 h1,
 h2 {
   margin: 0;
-  color: var(--semmet-color-primary);
-  font-size: 2.5rem;
-  line-height: 1.05;
-  font-weight: 700;
 }
 
 .semmet-block__summary {
   margin: 0;
-  color: var(--semmet-color-on-surface-variant);
-  font-size: 1.125rem;
 }
 
 .semmet-block__grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
-  gap: var(--semmet-space-md);
 }
 
 .semmet-block__stack {
   display: grid;
-  gap: var(--semmet-space-sm);
 }
 
 .semmet-block__stats {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
-  gap: var(--semmet-space-md);
   margin: 0;
 }
 
 .semmet-block__stats div {
   display: grid;
-  gap: var(--semmet-space-2xs);
 }
 
-.semmet-block__stats dt {
-  color: var(--semmet-color-primary);
-  font-size: 2rem;
-  font-weight: 700;
-  line-height: 1.1;
+.semmet-block__footer-brand {
+  display: grid;
 }
 
-.semmet-block__stats dd {
-  color: var(--semmet-color-on-surface-variant);
+.semmet-block__footer-nav {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
 }
 
-dd {
+.semmet-block__footer-nav ul {
   margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
-@media (max-width: 48rem) {
-  .semmet-block {
-    gap: var(--semmet-space-md);
-    margin-block: var(--semmet-space-xl);
-  }
-
-  .semmet-block--header {
-    margin-block: 0;
-  }
-
-  .semmet-block--footer {
-    margin-block: var(--semmet-space-xl) 0;
-  }
-
-  .semmet-block__grid,
-  .semmet-block__stack,
-  .semmet-block__stats {
-    gap: var(--semmet-space-sm);
-  }
+dd {
+  margin: 0;
 }

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

@@ -1,4 +1,5 @@
 <!-- Semmet Angular: Block / Composition - accessible section scaffold. -->
+<!-- Semmet Angular: starter scaffold. Edit or replace this markup freely; it is generated application code, not a Semmet runtime API. -->
 <!--
 Usage from a parent component template:
 Import <%= classify(name) %> in that parent component.
@@ -23,13 +24,9 @@ Import <%= classify(name) %> in that parent component.
   </header>
   <div class="semmet-block__grid">
     @for (item of items; track item.title) {
-      <<%= supportSelector %> linkLabel="">
-        <ng-template <%= camelize(supportName) %>Title>
-          {{ item.title }}
-        </ng-template>
-        <ng-template <%= camelize(supportName) %>Description>
-          <p>{{ item.text }}</p>
-        </ng-template>
+      <<%= supportSelector %>>
+        <h3 <%= camelize(supportName) %>Heading>{{ item.title }}</h3>
+        <p>{{ item.text }}</p>
       </<%= supportSelector %>>
     }
   </div>
@@ -95,7 +92,14 @@ Import <%= classify(name) %> in that parent component.
     <h2 id="<%= dasherize(name) %>-title">{{ title }}</h2>
     <p class="semmet-block__summary">{{ summary }}</p>
   </header>
-  <<%= supportSelector %> />
+  <ul <%= camelize(supportName) %> [activeId]="items[0].title" label="<%= classify(kind) %>">
+    @for (item of items; track item.title) {
+      <li <%= camelize(supportName) %>Item [value]="item.title">
+        <h3>{{ item.title }}</h3>
+        <p>{{ item.text }}</p>
+      </li>
+    }
+  </ul>
 </section>
 <% } else if (kind === 'section-alert') { %>
 <section class="semmet-block" aria-labelledby="<%= dasherize(name) %>-title">
@@ -144,14 +148,24 @@ Import <%= classify(name) %> in that parent component.
 </header>
 <% } else if (kind === 'footer-navigation') { %>
 <footer class="semmet-block semmet-block--footer">
-  <<%= supportSelector %>>
-    <ng-template <%= camelize(supportName) %>Brand>
-      {{ title }}
-    </ng-template>
-    <ng-template <%= camelize(supportName) %>Actions>
-      <a href="#main-content">Back to content</a>
-    </ng-template>
-  </<%= supportSelector %>>
+  <div class="semmet-block__footer-brand">
+    <p>{{ title }}</p>
+    <a href="#main-content">Back to content</a>
+  </div>
+  <nav class="semmet-block__footer-nav" aria-label="Footer navigation">
+    @for (group of footerGroups; track group.title) {
+      <section aria-labelledby="<%= dasherize(name) %>-footer-{{ $index }}">
+        <h2 id="<%= dasherize(name) %>-footer-{{ $index }}">{{ group.title }}</h2>
+        <ul>
+          @for (link of group.links; track link.href) {
+            <li>
+              <a [href]="link.href">{{ link.label }}</a>
+            </li>
+          }
+        </ul>
+      </section>
+    }
+  </nav>
 </footer>
 <% } else if (kind === 'section-pricing') { %>
 <section class="semmet-block" aria-labelledby="<%= dasherize(name) %>-title">
@@ -163,15 +177,9 @@ Import <%= classify(name) %> in that parent component.
   <div class="semmet-block__grid">
     @for (item of items; track item.title) {
       <<%= supportSelector %>>
-        <ng-template <%= camelize(supportName) %>Title>
-          {{ item.title }}
-        </ng-template>
-        <ng-template <%= camelize(supportName) %>Description>
-          <p>{{ item.text }}</p>
-        </ng-template>
-        <ng-template <%= camelize(supportName) %>Actions>
-          <a href="/contact">Choose plan</a>
-        </ng-template>
+        <h3 <%= camelize(supportName) %>Heading>{{ item.title }}</h3>
+        <p>{{ item.text }}</p>
+        <a href="/contact">Choose plan</a>
       </<%= supportSelector %>>
     }
   </div>

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

@@ -1,11 +1,6 @@
 import { Component } from '@angular/core';
 <% if (usesSupportingComponent) { %><% if (supportVariable === 'card') { %>import {
   <%= classify(supportName) %>,
-<% if (usesCardActions) { %>
-  <%= classify(supportName) %>Actions,
-<% } %>
-  <%= classify(supportName) %>Description,
-  <%= classify(supportName) %>Title,
 } from './<%= dasherize(supportName) %>/<%= dasherize(supportName) %>';
 <% } else if (supportVariable === 'accordion') { %>import {
   <%= classify(supportName) %>,
@@ -28,6 +23,10 @@ import { Component } from '@angular/core';
   <%= classify(supportName) %>,
   <%= classify(supportName) %>Slide,
 } from './<%= dasherize(supportName) %>/<%= dasherize(supportName) %>';
+<% } else if (supportVariable === 'listGroup') { %>import {
+  <%= classify(supportName) %>,
+  <%= classify(supportName) %>Item,
+} from './<%= dasherize(supportName) %>/<%= dasherize(supportName) %>';
 <% } else { %>import { <%= classify(supportName) %> } from './<%= dasherize(supportName) %>/<%= dasherize(supportName) %>';
 <% } %><% } %>
 
@@ -36,16 +35,19 @@ interface <%= classify(name) %>Item {
   text: string;
 }
 
+interface <%= classify(name) %>FooterGroup {
+  title: string;
+  links: readonly {
+    label: string;
+    href: string;
+  }[];
+}
+
 @Component({
   selector: '<%= selector %>',
   imports: [<% if (usesSupportingComponent) { %>
     <%= classify(supportName) %>,
 <% if (supportVariable === 'card') { %>
-<% if (usesCardActions) { %>
-    <%= classify(supportName) %>Actions,
-<% } %>
-    <%= classify(supportName) %>Description,
-    <%= classify(supportName) %>Title,
 <% } else if (supportVariable === 'accordion') { %>
     <%= classify(supportName) %>Item,
 <% } else if (supportVariable === 'table') { %>
@@ -57,6 +59,8 @@ interface <%= classify(name) %>Item {
     <%= classify(supportName) %>Item,
 <% } else if (supportVariable === 'carousel') { %>
     <%= classify(supportName) %>Slide,
+<% } else if (supportVariable === 'listGroup') { %>
+    <%= classify(supportName) %>Item,
 <% } %>
   <% } %>],
   templateUrl: './<%= dasherize(name) %>.html',
@@ -83,4 +87,31 @@ export class <%= classify(name) %> {
       text: 'Replace placeholder content with product components, inputs, outputs, and signals.',
     },
   ];
+
+  protected readonly footerGroups: readonly <%= classify(name) %>FooterGroup[] = [
+    {
+      title: 'Product',
+      links: [
+        { label: 'Overview', href: '/product' },
+        { label: 'Accessibility', href: '/accessibility' },
+        { label: 'Pricing', href: '/pricing' },
+      ],
+    },
+    {
+      title: 'Resources',
+      links: [
+        { label: 'Docs', href: '/docs' },
+        { label: 'Guides', href: '/guides' },
+        { label: 'Changelog', href: '/changelog' },
+      ],
+    },
+    {
+      title: 'Company',
+      links: [
+        { label: 'About', href: '/about' },
+        { label: 'Contact', href: '/contact' },
+        { label: 'Privacy', href: '/privacy' },
+      ],
+    },
+  ];
 }

package/src/block/schema.json

@@ -9,9 +9,17 @@
     "name": {
       "type": "string",
       "description": "The name for the new block 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 block 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."
+    },
     "kind": {
       "type": "string",
       "description": "The composition block pattern to generate. Defaults to the positional name when it matches a known block kind.",
@@ -37,15 +45,22 @@
     "path": {
       "type": "string",
       "format": "path",
-      "$default": { "$source": "workingDirectory" },
+      "$default": {
+        "$source": "workingDirectory"
+      },
       "description": "The path where the block 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 block to.",
-      "$default": { "$source": "projectName" }
+      "$default": {
+        "$source": "projectName"
+      }
     }
   },
-  "required": ["name", "project"]
+  "required": [
+    "name",
+    "project"
+  ]
 }

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

@@ -1,20 +1,11 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-on-surface: #18181b;
-  --semmet-color-on-surface-variant: #52525b;
-  --semmet-space-2xs: 8px;
-  --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;
 }
 
 ol {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--semmet-space-2xs);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -23,8 +14,6 @@ ol {
 li {
   display: flex;
   align-items: center;
-  gap: var(--semmet-space-2xs);
-  color: var(--semmet-color-on-surface-variant);
 }
 
 li:not(:last-child)::after {
@@ -33,21 +22,11 @@ li:not(:last-child)::after {
 }
 
 a {
-  color: var(--semmet-color-primary);
+  color: inherit;
   text-decoration: none;
-  border-radius: 4px;
-}
-
-a:hover {
-  text-decoration: underline;
 }
 
 a:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
+  outline: 2px solid currentColor;
   outline-offset: 2px;
 }
-
-li[aria-current='page'] {
-  color: var(--semmet-color-on-surface);
-  font-weight: 500;
-}

package/src/breadcrumb/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 %> label="Breadcrumb" currentPageLabel="Current page" [items]="breadcrumbItems" />
 -->
-<nav aria-label="Breadcrumb">
+<nav [attr.aria-label]="label()">
   <ol>
-    @for (item of items; track item.id) {
+    @for (item of items(); track item.id) {
       <li><a [href]="item.href">{{ item.label }}</a></li>
     }
-    <li aria-current="page">Current page</li>
+    <li aria-current="page">{{ currentPageLabel() }}</li>
   </ol>
 </nav>

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

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, input } from '@angular/core';
 
 interface <%= classify(name) %>Item {
   id: number;
@@ -6,6 +6,11 @@ interface <%= classify(name) %>Item {
   href: string;
 }
 
+const DEFAULT_ITEMS: readonly <%= classify(name) %>Item[] = [
+  { id: 1, label: 'Home', href: '/' },
+  { id: 2, label: 'Category', href: '/category' },
+];
+
 @Component({
   selector: '<%= selector %>',
   imports: [],
@@ -13,8 +18,7 @@ interface <%= classify(name) %>Item {
   styleUrl: './<%= dasherize(name) %>.css',
 })
 export class <%= classify(name) %> {
-  protected readonly items: <%= classify(name) %>Item[] = [
-    { id: 1, label: 'Home', href: '/' },
-    { id: 2, label: 'Category', href: '/category' },
-  ];
+  readonly label = input('Breadcrumb');
+  readonly currentPageLabel = input('Current page');
+  readonly items = input<readonly <%= classify(name) %>Item[]>(DEFAULT_ITEMS);
 }

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

@@ -1,93 +1,16 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-on-primary: #ffffff;
-  --semmet-color-danger: #b42318;
-  --semmet-color-on-danger: #ffffff;
-  --semmet-color-surface: #ffffff;
-  --semmet-color-outline: #d4d4d8;
-  --semmet-color-on-surface: #18181b;
-  --semmet-color-on-surface-variant: #52525b;
-  --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;
-  font-size: 0.9375rem;
 }
 
 .semmet-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--semmet-space-2xs);
-  min-width: 2.75rem;
-  border: 1px solid transparent;
-  border-radius: var(--semmet-radius-sm);
+  gap: 0.5em;
   font: inherit;
-  font-weight: 600;
-  line-height: 1.2;
   text-decoration: none;
-  white-space: nowrap;
   cursor: pointer;
   user-select: none;
-  transition:
-    background-color var(--semmet-motion),
-    border-color var(--semmet-motion),
-    color var(--semmet-motion),
-    transform var(--semmet-motion);
-}
-
-.semmet-button--sm {
-  min-height: var(--semmet-target-sm);
-  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
-  font-size: 0.875rem;
-}
-
-.semmet-button--md {
-  min-height: var(--semmet-target-md);
-  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
-}
-
-.semmet-button--lg {
-  min-height: var(--semmet-target-lg);
-  padding: var(--semmet-space-xs) var(--semmet-space-sm);
-  font-size: 1rem;
-}
-
-.semmet-button--primary {
-  color: var(--semmet-color-on-primary);
-  background: var(--semmet-color-primary);
-}
-
-.semmet-button--secondary {
-  color: var(--semmet-color-on-surface);
-  background: var(--semmet-color-surface);
-  border-color: var(--semmet-color-outline);
-}
-
-.semmet-button--danger {
-  color: var(--semmet-color-on-danger);
-  background: var(--semmet-color-danger);
-}
-
-.semmet-button--ghost {
-  color: var(--semmet-color-on-surface);
-  background: transparent;
-  border-color: transparent;
-}
-
-.semmet-button:hover:not(:disabled) {
-  transform: translateY(-1px);
-}
-
-.semmet-button:active:not(:disabled) {
-  transform: translateY(0);
 }
 
 .semmet-button:disabled {
@@ -96,7 +19,7 @@
 }
 
 .semmet-button:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
+  outline: 2px solid currentColor;
   outline-offset: 2px;
 }
 

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

@@ -1,9 +1,6 @@
 import { NgTemplateOutlet } from '@angular/common';
 import { Component, Directive, TemplateRef, computed, contentChild, inject, input, output } from '@angular/core';
 
-type <%= classify(name) %>Variant = 'primary' | 'secondary' | 'danger' | 'ghost';
-type <%= classify(name) %>Size = 'sm' | 'md' | 'lg';
-
 let nextId = 0;
 
 @Directive({
@@ -40,8 +37,8 @@ export class <%= classify(name) %> {
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
 
   readonly label = input('Continue');
-  readonly variant = input<<%= classify(name) %>Variant>('primary');
-  readonly size = input<<%= classify(name) %>Size>('md');
+  readonly variant = input<string>('primary');
+  readonly size = input<string>('md');
   readonly disabled = input(false);
   readonly busy = input(false);
   readonly pressed = input<boolean | null>(null);