semmet-angular 0.42.0 → 0.44.0

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

@@ -1,32 +1,16 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-outline: #71717a;
-  --semmet-color-on-surface: #18181b;
-  --semmet-color-on-surface-variant: #52525b;
-  --semmet-space-2xs: 8px;
-  --semmet-space-md: 32px;
-  --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;
 }
 
 [role='radiogroup'] > span {
   display: block;
-  margin-bottom: var(--semmet-space-2xs);
-  font-weight: 500;
-  color: var(--semmet-color-on-surface);
 }
 
 [role='radio'] {
   position: relative;
   display: flex;
   align-items: center;
-  min-height: var(--semmet-target-md);
-  padding: var(--semmet-space-2xs) 0 var(--semmet-space-2xs) var(--semmet-space-md);
-  color: var(--semmet-color-on-surface-variant);
+  padding-left: 1.5rem;
   cursor: pointer;
   user-select: none;
 }
@@ -38,18 +22,8 @@
   width: 1.125rem;
   height: 1.125rem;
   box-sizing: border-box;
-  border: 2px solid var(--semmet-color-outline);
+  border: 2px solid currentColor;
   border-radius: 50%;
-  transition: border-color var(--semmet-motion);
-}
-
-[role='radio'][aria-checked='true'] {
-  color: var(--semmet-color-on-surface);
-  font-weight: 500;
-}
-
-[role='radio'][aria-checked='true']::before {
-  border-color: var(--semmet-color-primary);
 }
 
 [role='radio'][aria-checked='true']::after {
@@ -60,11 +34,10 @@
   width: 0.625rem;
   height: 0.625rem;
   border-radius: 50%;
-  background: var(--semmet-color-primary);
+  background: currentColor;
 }
 
 [role='radio']:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
+  outline: 2px solid currentColor;
   outline-offset: 2px;
-  border-radius: 4px;
 }

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

@@ -3,10 +3,10 @@
 Usage from a parent component template:
 Import <%= classify(name) %> in that parent component.
 
-<<%= selector %> />
+<<%= selector %> label="Choose a plan" />
 -->
 <div role="radiogroup" [attr.aria-labelledby]="instanceId + '-label'">
-  <span [id]="instanceId + '-label'">Choose a plan</span>
+  <span [id]="instanceId + '-label'">{{ label() }}</span>
   @for (option of options; track option.id; let i = $index) {
     <div
       #radio

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

@@ -1,4 +1,4 @@
-import { Component, ElementRef, signal, viewChildren } from '@angular/core';
+import { Component, ElementRef, input, signal, viewChildren } from '@angular/core';
 
 interface <%= classify(name) %>Option {
   id: number;
@@ -17,6 +17,7 @@ export class <%= classify(name) %> {
   private readonly radios = viewChildren<ElementRef<HTMLElement>>('radio');
 
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+  readonly label = input('Choose a plan');
   protected readonly options: <%= classify(name) %>Option[] = [
     { id: 1, label: 'Monthly' },
     { id: 2, label: 'Yearly' },

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

@@ -0,0 +1,17 @@
+:host {
+  display: inline-block;
+}
+
+.semmet-rating,
+.semmet-rating__item {
+  display: inline-flex;
+}
+
+.semmet-rating__item[role='radio'] {
+  cursor: pointer;
+}
+
+.semmet-rating__item:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}

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

@@ -0,0 +1,34 @@
+<!-- Semmet Angular: Rating - readonly image semantics or interactive radiogroup semantics. -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> [value]="4" />
+<<%= selector %> [readonly]="false" (valueChange)="saveRating($event)" />
+-->
+@if (readonly()) {
+  <div class="semmet-rating" role="img" [attr.aria-label]="accessibleLabel()">
+    @for (item of values(); track item) {
+      <span class="semmet-rating__item" [class.semmet-rating__item--filled]="isFilled(item)" aria-hidden="true">★</span>
+    }
+  </div>
+} @else {
+  <div class="semmet-rating" role="radiogroup" [attr.aria-labelledby]="instanceId + '-label'">
+    <span [id]="instanceId + '-label'" class="semmet-rating__label">{{ label() }}</span>
+    @for (item of values(); track item; let i = $index) {
+      <span
+        #ratingOption
+        class="semmet-rating__item"
+        role="radio"
+        [class.semmet-rating__item--filled]="isFilled(item)"
+        [attr.aria-label]="item + ' out of ' + max()"
+        [attr.aria-checked]="isSelected(item)"
+        [tabIndex]="isSelected(item) ? 0 : -1"
+        (click)="select(item)"
+        (keydown)="navigate($event, i)"
+      >
+        ★
+      </span>
+    }
+  </div>
+}

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

@@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { <%= classify(name) %> } from './<%= dasherize(name) %>';
+
+@Component({
+  imports: [<%= classify(name) %>],
+  template: `<<%= selector %> [readonly]="false" />`,
+})
+class Host {}
+
+describe('<%= classify(name) %>', () => {
+  let fixture: ComponentFixture<Host>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [Host] }).compileComponents();
+    fixture = TestBed.createComponent(Host);
+    fixture.detectChanges();
+  });
+
+  it('uses radiogroup semantics when interactive', () => {
+    const group = fixture.nativeElement.querySelector('[role="radiogroup"]');
+    const options = fixture.nativeElement.querySelectorAll('[role="radio"]');
+
+    expect(group?.getAttribute('aria-labelledby')).toBeTruthy();
+    expect(options.length).toBe(5);
+    expect(options[3].getAttribute('aria-checked')).toBe('true');
+  });
+
+  it('updates checked rating on click', () => {
+    const options = fixture.debugElement.queryAll(By.css('[role="radio"]'));
+
+    options[1].triggerEventHandler('click');
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelectorAll('[role="radio"]')[1].getAttribute('aria-checked')).toBe('true');
+  });
+});

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

@@ -0,0 +1,75 @@
+import { Component, ElementRef, booleanAttribute, computed, input, output, signal, viewChildren } from '@angular/core';
+
+let nextId = 0;
+
+@Component({
+  selector: '<%= selector %>',
+  imports: [],
+  templateUrl: './<%= dasherize(name) %>.html',
+  styleUrl: './<%= dasherize(name) %>.css',
+})
+export class <%= classify(name) %> {
+  private readonly ratingOptions = viewChildren<ElementRef<HTMLElement>>('ratingOption');
+
+  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+
+  readonly label = input('Rating');
+  readonly max = input(5);
+  readonly value = input<number | null>(null);
+  readonly readonly = input(true, { transform: booleanAttribute });
+  readonly valueChange = output<number>();
+
+  protected readonly selectedValue = signal(4);
+  protected readonly activeValue = computed(() => this.value() ?? this.selectedValue());
+  protected readonly values = computed(() => Array.from({ length: Math.max(1, this.max()) }, (_, index) => index + 1));
+  protected readonly accessibleLabel = computed(() => `${this.activeValue()} out of ${this.max()} ${this.label()}`);
+
+  protected isSelected(value: number): boolean {
+    return this.activeValue() === value;
+  }
+
+  protected isFilled(value: number): boolean {
+    return value <= this.activeValue();
+  }
+
+  protected select(value: number): void {
+    if (this.readonly()) {
+      return;
+    }
+
+    this.selectedValue.set(value);
+    this.valueChange.emit(value);
+  }
+
+  protected navigate(event: KeyboardEvent, index: number): void {
+    if (this.readonly()) {
+      return;
+    }
+
+    const values = this.values();
+    let nextIndex: number;
+
+    switch (event.key) {
+      case 'ArrowDown':
+      case 'ArrowLeft':
+        nextIndex = (index - 1 + values.length) % values.length;
+        break;
+      case 'ArrowUp':
+      case 'ArrowRight':
+        nextIndex = (index + 1) % values.length;
+        break;
+      case 'Home':
+        nextIndex = 0;
+        break;
+      case 'End':
+        nextIndex = values.length - 1;
+        break;
+      default:
+        return;
+    }
+
+    event.preventDefault();
+    this.select(values[nextIndex]);
+    this.ratingOptions()[nextIndex]?.nativeElement.focus();
+  }
+}

package/src/rating/index.d.ts

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

package/src/rating/index.js

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

package/src/rating/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/rating/index.ts

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

package/src/rating/schema.d.ts

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

package/src/rating/schema.js

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

package/src/rating/schema.js.map

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

package/src/rating/schema.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularRating",
+  "title": "Semmet Angular Rating Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Rating component with readonly image semantics or interactive radiogroup semantics.",
+  "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 rating 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/rating/schema.ts

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

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

@@ -1,35 +1,9 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-surface: #ffffff;
-  --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-space-md: 32px;
-  --semmet-space-lg: 48px;
-  --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-select {
   display: grid;
-  gap: var(--semmet-space-2xs);
-  color: var(--semmet-color-on-surface);
-}
-
-.semmet-select__label {
-  font-weight: 650;
-}
-
-.semmet-select__required {
-  color: var(--semmet-color-danger);
 }
 
 .semmet-select__control-wrap {
@@ -40,7 +14,7 @@
 .semmet-select__control-wrap::after {
   position: absolute;
   top: 50%;
-  right: var(--semmet-space-xs);
+  right: 0.75em;
   width: 0.5rem;
   height: 0.5rem;
   border-right: 2px solid currentColor;
@@ -52,46 +26,21 @@
 
 .semmet-select__control {
   width: 100%;
-  min-height: var(--semmet-target-lg);
-  padding: var(--semmet-space-2xs) var(--semmet-space-lg) var(--semmet-space-2xs) var(--semmet-space-xs);
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-sm);
-  color: var(--semmet-color-on-surface);
-  background: var(--semmet-color-surface);
+  box-sizing: border-box;
   font: inherit;
-  line-height: 1.3;
   appearance: none;
-  transition:
-    border-color var(--semmet-motion),
-    box-shadow var(--semmet-motion),
-    opacity var(--semmet-motion);
 }
 
 .semmet-select__control:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
+  outline: 2px solid currentColor;
   outline-offset: 2px;
 }
 
-.semmet-select__control[aria-invalid='true'] {
-  border-color: var(--semmet-color-danger);
-}
-
 .semmet-select__control:disabled {
   cursor: not-allowed;
-  opacity: 0.58;
 }
 
 .semmet-select__hint,
 .semmet-select__error {
-  margin: var(--semmet-space-2xs) 0 0;
-  font-size: 0.875rem;
-  line-height: 1.4;
-}
-
-.semmet-select__hint {
-  color: var(--semmet-color-on-surface-variant);
-}
-
-.semmet-select__error {
-  color: var(--semmet-color-danger);
+  margin: 0;
 }

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

@@ -1,12 +1,4 @@
 :host {
-  --semmet-color-surface: #ffffff;
-  --semmet-color-outline: #d4d4d8;
-  --semmet-color-skeleton: #e4e4e7;
-  --semmet-color-skeleton-highlight: #f4f4f5;
-  --semmet-radius-sm: 8px;
-  --semmet-radius-md: 12px;
-  --semmet-space-2xs: 8px;
-
   display: block;
   width: 100%;
 }
@@ -17,8 +9,7 @@
   display: block;
   overflow: hidden;
   box-sizing: border-box;
-  background: var(--semmet-color-skeleton);
-  border-radius: var(--semmet-radius-sm);
+  background: currentColor;
 }
 
 .semmet-skeleton {
@@ -34,19 +25,15 @@
 
 .semmet-skeleton--card {
   min-height: 16rem;
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-md);
 }
 
 .semmet-skeleton--media {
   height: 12.5rem;
-  border-radius: var(--semmet-radius-md);
 }
 
 .semmet-skeleton-text {
   display: grid;
   width: 100%;
-  gap: var(--semmet-space-2xs);
 }
 
 .semmet-skeleton__line {
@@ -60,12 +47,7 @@
   position: absolute;
   inset: 0;
   transform: translateX(-100%);
-  background: linear-gradient(
-    90deg,
-    transparent,
-    var(--semmet-color-skeleton-highlight),
-    transparent
-  );
+  background: linear-gradient(90deg, transparent, Canvas, transparent);
   animation: semmet-skeleton-shimmer 1.35s ease-in-out infinite;
 }
 
@@ -75,15 +57,6 @@
   }
 }
 
-@media (prefers-color-scheme: dark) {
-  :host {
-    --semmet-color-surface: #18181b;
-    --semmet-color-outline: #3f3f46;
-    --semmet-color-skeleton: #27272a;
-    --semmet-color-skeleton-highlight: #3f3f46;
-  }
-}
-
 @media (prefers-reduced-motion: reduce) {
   .semmet-skeleton--animated::after,
   .semmet-skeleton-text--animated .semmet-skeleton__line::after {

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

@@ -1,7 +1,5 @@
 import { Component, booleanAttribute, computed, input, numberAttribute } from '@angular/core';
 
-type <%= classify(name) %>Variant = 'rect' | 'text' | 'circle' | 'card' | 'media';
-
 let nextId = 0;
 
 @Component({
@@ -13,7 +11,7 @@ let nextId = 0;
 export class <%= classify(name) %> {
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
 
-  readonly variant = input<<%= classify(name) %>Variant>('rect');
+  readonly variant = input<string>('rect');
   readonly width = input<string | null>(null);
   readonly height = input<string | null>(null);
   readonly size = input<string | null>(null);

package/src/skeleton/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 skeleton 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"
+  ]
 }