semmet-angular 0.42.0 → 0.43.0

package/src/navigation-menu/files/__name@dasherize__/__name@dasherize__.css.template

@@ -1,25 +1,10 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-surface: #ffffff;
-  --semmet-color-on-surface: #18181b;
-  --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);
-
   display: block;
-  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
-  font-size: 0.9375rem;
 }
 
 nav > ul {
   display: flex;
   align-items: center;
-  gap: var(--semmet-space-3xs);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -33,28 +18,17 @@ a,
 button {
   display: inline-flex;
   align-items: center;
-  gap: var(--semmet-space-2xs);
-  min-height: var(--semmet-target-md);
   font: inherit;
-  font-weight: 500;
-  color: var(--semmet-color-on-surface);
+  color: inherit;
   background: none;
   border: none;
-  border-radius: var(--semmet-radius-sm);
-  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
   cursor: pointer;
   text-decoration: none;
-  transition: background-color var(--semmet-motion);
-}
-
-a:hover,
-button:hover {
-  background: color-mix(in srgb, var(--semmet-color-on-surface) 6%, transparent);
 }
 
 a:focus-visible,
 button:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
+  outline: 2px solid currentColor;
   outline-offset: 2px;
 }
 
@@ -62,10 +36,9 @@ button::after {
   content: '';
   width: 0.4rem;
   height: 0.4rem;
-  border-right: 2px solid var(--semmet-color-on-surface);
-  border-bottom: 2px solid var(--semmet-color-on-surface);
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
   transform: rotate(45deg);
-  transition: transform var(--semmet-motion);
 }
 
 button[aria-expanded='true']::after {
@@ -77,13 +50,9 @@ nav > ul ul {
   z-index: 1;
   top: 100%;
   left: 0;
-  min-width: 12rem;
-  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);
 }
 
 nav > ul ul li a {

package/src/navigation-menu/files/__name@dasherize__/__name@dasherize__.html.template

@@ -3,12 +3,12 @@
 Usage from a parent component template:
 Import <%= classify(name) %> in that parent component.
 
-<<%= selector %> />
+<<%= selector %> label="Main" />
 -->
 <!-- Deliberately avoids the ARIA menu/menuitem roles — APG reserves those for app-style menus. -->
-<nav aria-label="Main">
+<nav [attr.aria-label]="label()">
   <ul>
-    <li><a href="/">Home</a></li>
+    <li><a [href]="homeHref()">{{ homeLabel() }}</a></li>
     <li>
       <button
         type="button"
@@ -17,11 +17,12 @@ Import <%= classify(name) %> in that parent component.
         [id]="instanceId + '-button'"
         (click)="toggleSubmenu()"
       >
-        Products
+        {{ submenuLabel() }}
       </button>
       <ul [id]="instanceId + '-submenu'" [attr.aria-labelledby]="instanceId + '-button'" [hidden]="!expanded()">
-        <li><a href="/products/first">First product</a></li>
-        <li><a href="/products/second">Second product</a></li>
+        @for (link of submenuLinks(); track link.href) {
+          <li><a [href]="link.href">{{ link.label }}</a></li>
+        }
       </ul>
     </li>
   </ul>

package/src/navigation-menu/files/__name@dasherize__/__name@dasherize__.ts.template

@@ -1,4 +1,9 @@
-import { Component, signal } from '@angular/core';
+import { Component, input, signal } from '@angular/core';
+
+interface <%= classify(name) %>Link {
+  label: string;
+  href: string;
+}
 
 let nextId = 0;
 
@@ -12,6 +17,15 @@ export class <%= classify(name) %> {
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
   protected readonly expanded = signal(false);
 
+  readonly label = input('Main');
+  readonly homeLabel = input('Home');
+  readonly homeHref = input('/');
+  readonly submenuLabel = input('Products');
+  readonly submenuLinks = input<readonly <%= classify(name) %>Link[]>([
+    { label: 'First product', href: '/products/first' },
+    { label: 'Second product', href: '/products/second' },
+  ]);
+
   protected toggleSubmenu(): void {
     this.expanded.update((value) => !value);
   }

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

@@ -1,38 +1,15 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-on-primary: #ffffff;
-  --semmet-color-surface: #ffffff;
-  --semmet-color-backdrop: rgba(24, 24, 27, 0.44);
-  --semmet-color-outline: #d4d4d8;
-  --semmet-color-on-surface: #27272a;
-  --semmet-color-on-surface-variant: #71717a;
-  --semmet-radius-md: 10px;
-  --semmet-space-2xs: 8px;
-  --semmet-space-xs: 16px;
-  --semmet-space-sm: 24px;
-  --semmet-target-md: 40px;
-  --semmet-elevation-3: 0 20px 48px rgba(20, 24, 23, 0.22), 0 8px 20px rgba(20, 24, 23, 0.14);
-  --semmet-motion: 220ms cubic-bezier(0.2, 0, 0, 1);
-
   display: inline-block;
-  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
 }
 
 .semmet-offcanvas__trigger {
-  min-height: var(--semmet-target-md);
-  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
-  border: 1px solid transparent;
-  border-radius: var(--semmet-radius-md);
-  color: var(--semmet-color-on-primary);
-  background: var(--semmet-color-primary);
   font: inherit;
-  font-weight: 650;
   cursor: pointer;
 }
 
 .semmet-offcanvas__trigger:focus-visible,
 .semmet-offcanvas__close:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
+  outline: 2px solid currentColor;
   outline-offset: 2px;
 }
 
@@ -40,7 +17,6 @@
   position: fixed;
   inset: 0;
   z-index: 1000;
-  background: var(--semmet-color-backdrop);
 }
 
 .semmet-offcanvas__panel {
@@ -48,10 +24,6 @@
   z-index: 1001;
   display: grid;
   grid-template-rows: auto 1fr;
-  color: var(--semmet-color-on-surface);
-  background: var(--semmet-color-surface);
-  box-shadow: var(--semmet-elevation-3);
-  animation: semmet-offcanvas-enter var(--semmet-motion);
 }
 
 .semmet-offcanvas__panel--start,
@@ -88,9 +60,6 @@
   display: flex;
   align-items: start;
   justify-content: space-between;
-  gap: var(--semmet-space-xs);
-  padding: var(--semmet-space-sm);
-  border-block-end: 1px solid var(--semmet-color-outline);
 }
 
 .semmet-offcanvas__title,
@@ -99,36 +68,20 @@
   margin: 0;
 }
 
-.semmet-offcanvas__title {
-  font-size: 1.125rem;
-  line-height: 1.25;
-}
-
-.semmet-offcanvas__description {
-  margin-block-start: var(--semmet-space-2xs);
-  color: var(--semmet-color-on-surface-variant);
-  line-height: 1.4;
-}
-
 .semmet-offcanvas__close {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
-  width: var(--semmet-target-md);
-  height: var(--semmet-target-md);
+  width: 2rem;
+  height: 2rem;
   border: 0;
-  border-radius: 999px;
   color: inherit;
   background: transparent;
   cursor: pointer;
 }
 
-.semmet-offcanvas__close:hover {
-  background: #f4f4f5;
-}
-
 .semmet-offcanvas__close span,
 .semmet-offcanvas__close span::before,
 .semmet-offcanvas__close span::after {
@@ -146,7 +99,6 @@
   position: absolute;
   top: 50%;
   left: 0;
-  border-radius: 999px;
   background: currentColor;
   content: '';
 }
@@ -162,23 +114,4 @@
 .semmet-offcanvas__body {
   min-height: 0;
   overflow: auto;
-  padding: var(--semmet-space-sm);
-}
-
-.semmet-offcanvas__placeholder {
-  color: var(--semmet-color-on-surface-variant);
-  line-height: 1.5;
-}
-
-@keyframes semmet-offcanvas-enter {
-  from {
-    opacity: 0;
-    transform: translateX(1rem);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .semmet-offcanvas__panel {
-    animation-duration: 1ms;
-  }
 }

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

@@ -1,23 +1,10 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-on-primary: #ffffff;
-  --semmet-color-on-surface: #18181b;
-  --semmet-color-on-surface-variant: #52525b;
-  --semmet-radius-sm: 8px;
-  --semmet-space-3xs: 4px;
-  --semmet-space-2xs: 8px;
-  --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;
 }
 
 ul {
   display: flex;
   align-items: center;
-  gap: var(--semmet-space-3xs);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -28,39 +15,21 @@ button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: var(--semmet-target-md);
-  min-height: var(--semmet-target-md);
-  padding: 0 var(--semmet-space-2xs);
   font: inherit;
-  font-weight: 500;
-  color: var(--semmet-color-on-surface);
+  color: inherit;
   background: none;
-  border: 1px solid transparent;
-  border-radius: var(--semmet-radius-sm);
   text-decoration: none;
   cursor: pointer;
   box-sizing: border-box;
-  transition: background-color var(--semmet-motion), color var(--semmet-motion);
-}
-
-a:hover,
-button:not(:disabled):hover {
-  background: color-mix(in srgb, var(--semmet-color-on-surface) 6%, transparent);
 }
 
 a:focus-visible,
 button:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
+  outline: 2px solid currentColor;
   outline-offset: 2px;
 }
 
-a[aria-current='page'] {
-  background: var(--semmet-color-primary);
-  color: var(--semmet-color-on-primary);
-}
-
 button:disabled {
-  color: var(--semmet-color-on-surface-variant);
   opacity: 0.5;
   cursor: not-allowed;
 }

package/src/pagination/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="Search results pages" />
 -->
-<nav aria-label="Pagination">
+<nav [attr.aria-label]="label()">
   <ul>
     <li>
-      <button type="button" [disabled]="!hasPrevious()" (click)="goToPrevious()" aria-label="Previous page">
-        Previous
+      <button type="button" [disabled]="!hasPrevious()" (click)="goToPrevious()" [attr.aria-label]="previousAriaLabel()">
+        {{ previousLabel() }}
       </button>
     </li>
     @for (page of pages; track page) {
@@ -24,8 +24,8 @@ Import <%= classify(name) %> in that parent component.
       </li>
     }
     <li>
-      <button type="button" [disabled]="!hasNext()" (click)="goToNext()" aria-label="Next page">
-        Next
+      <button type="button" [disabled]="!hasNext()" (click)="goToNext()" [attr.aria-label]="nextAriaLabel()">
+        {{ nextLabel() }}
       </button>
     </li>
   </ul>

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

@@ -1,4 +1,4 @@
-import { Component, computed, signal } from '@angular/core';
+import { Component, computed, input, signal } from '@angular/core';
 
 @Component({
   selector: '<%= selector %>',
@@ -7,6 +7,12 @@ import { Component, computed, signal } from '@angular/core';
   styleUrl: './<%= dasherize(name) %>.css',
 })
 export class <%= classify(name) %> {
+  readonly label = input('Pagination');
+  readonly previousLabel = input('Previous');
+  readonly previousAriaLabel = input('Previous page');
+  readonly nextLabel = input('Next');
+  readonly nextAriaLabel = input('Next page');
+
   protected readonly pages = [1, 2, 3, 4, 5];
   protected readonly currentPage = signal(1);
 

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

@@ -1,78 +1,47 @@
 :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-2xs: 8px;
-  --semmet-space-xs: 16px;
-  --semmet-space-md: 32px;
-  --semmet-target-sm: 32px;
-  --semmet-target-md: 40px;
-  --semmet-elevation-2: 0 12px 28px rgba(20, 24, 23, 0.16), 0 4px 12px 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;
 }
 
 .semmet-popover__trigger {
-  min-height: var(--semmet-target-md);
-  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-md);
-  color: var(--semmet-color-on-surface);
-  background: var(--semmet-color-surface);
   font: inherit;
-  font-weight: 650;
   cursor: pointer;
 }
 
 .semmet-popover__trigger:focus-visible,
 .semmet-popover__close:focus-visible,
 .semmet-popover__panel:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
+  outline: 2px solid currentColor;
   outline-offset: 2px;
 }
 
 .semmet-popover__panel {
   position: absolute;
   z-index: 20;
-  width: min(20rem, calc(100vw - var(--semmet-space-md)));
-  padding: var(--semmet-space-xs);
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-md);
-  color: var(--semmet-color-on-surface);
-  background: var(--semmet-color-surface);
-  box-shadow: var(--semmet-elevation-2);
-  animation: semmet-popover-enter var(--semmet-motion);
+  max-width: 100vw;
 }
 
 .semmet-popover__panel--top {
   left: 50%;
-  bottom: calc(100% + var(--semmet-space-2xs));
+  bottom: 100%;
   transform: translateX(-50%);
 }
 
 .semmet-popover__panel--right {
   top: 50%;
-  left: calc(100% + var(--semmet-space-2xs));
+  left: 100%;
   transform: translateY(-50%);
 }
 
 .semmet-popover__panel--bottom {
-  top: calc(100% + var(--semmet-space-2xs));
+  top: 100%;
   left: 50%;
   transform: translateX(-50%);
 }
 
 .semmet-popover__panel--left {
   top: 50%;
-  right: calc(100% + var(--semmet-space-2xs));
+  right: 100%;
   transform: translateY(-50%);
 }
 
@@ -80,7 +49,6 @@
   display: flex;
   align-items: start;
   justify-content: space-between;
-  gap: var(--semmet-space-xs);
 }
 
 .semmet-popover__title,
@@ -88,36 +56,20 @@
   margin: 0;
 }
 
-.semmet-popover__title {
-  font-size: 1rem;
-  line-height: 1.3;
-}
-
-.semmet-popover__body {
-  margin-block-start: var(--semmet-space-2xs);
-  color: var(--semmet-color-on-surface-variant);
-  line-height: 1.5;
-}
-
 .semmet-popover__close {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
-  width: var(--semmet-target-sm);
-  height: var(--semmet-target-sm);
+  width: 2rem;
+  height: 2rem;
   border: 0;
-  border-radius: 999px;
   color: inherit;
   background: transparent;
   cursor: pointer;
 }
 
-.semmet-popover__close:hover {
-  background: var(--semmet-color-surface-muted);
-}
-
 .semmet-popover__close span,
 .semmet-popover__close span::before,
 .semmet-popover__close span::after {
@@ -135,7 +87,6 @@
   position: absolute;
   top: 50%;
   left: 0;
-  border-radius: 999px;
   background: currentColor;
   content: '';
 }
@@ -147,15 +98,3 @@
 .semmet-popover__close span::after {
   transform: rotate(-45deg);
 }
-
-@keyframes semmet-popover-enter {
-  from {
-    opacity: 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .semmet-popover__panel {
-    animation-duration: 1ms;
-  }
-}