semmet-angular 0.1.0 → 0.3.0

package/README.md

@@ -35,6 +35,10 @@ Each generated component is dropped into your project exactly like `ng generate
 - No `.component` suffix on file names or class names (`accordion.ts`, `export class Accordion`), matching the current `ng generate component` convention.
 - A unique per-instance id (`<name>-0`, `<name>-1`, ...) so multiple instances of the same generated component never collide on `id`/`aria-controls`/`aria-labelledby`.
 
+## Visual identity
+
+Every generated component shares the same Material Design-informed look — clean surfaces, subtle elevation, a consistent radius/motion scale — using its own color palette (not Material's colors, to stay clear of any lookalike/plagiarism concern). The tokens are plain CSS custom properties declared on each component's `:host` (e.g. `--semmet-color-primary`, `--semmet-radius-md`, `--semmet-elevation-1`), so you can either use the defaults as-is or override the whole family from a global stylesheet without touching the generated files.
+
 ## Options
 
 Every schematic accepts the same three options (same as `ng generate component`):

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "semmet-angular",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Angular schematics that generate real, ARIA-conformant standalone components (Accordion, Tabs, Dialog, Disclosure, Tooltip...) with signals-based state and keyboard interaction built in.",
   "publisher": "danilodevsilva",
   "license": "MIT",

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

@@ -1,31 +1,75 @@
 :host {
+  --semmet-color-primary: #0d7a72;
+  --semmet-color-surface: #ffffff;
+  --semmet-color-outline: #d7dedd;
+  --semmet-color-on-surface: #1b201f;
+  --semmet-color-on-surface-variant: #576260;
+  --semmet-radius-md: 12px;
+  --semmet-elevation-1: 0 1px 2px rgba(20, 24, 23, 0.1), 0 1px 1px rgba(20, 24, 23, 0.06);
+  --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
+
   display: block;
-  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: var(--semmet-color-on-surface);
+  background: var(--semmet-color-surface);
+  border: 1px solid var(--semmet-color-outline);
+  border-radius: var(--semmet-radius-md);
+  box-shadow: var(--semmet-elevation-1);
+  overflow: hidden;
 }
 
 h3 {
   margin: 0;
 }
 
+h3:not(:first-of-type) {
+  border-top: 1px solid var(--semmet-color-outline);
+}
+
 button {
   display: flex;
   align-items: center;
+  gap: 0.75rem;
   width: 100%;
-  padding: 0.75rem 1rem;
+  padding: 0.875rem 1.125rem;
   font: inherit;
+  font-weight: 500;
   color: inherit;
   background: none;
-  border: 1px solid currentColor;
-  border-radius: 6px;
+  border: none;
   cursor: pointer;
   text-align: left;
+  transition: background-color var(--semmet-motion);
+}
+
+button:hover {
+  background: color-mix(in srgb, var(--semmet-color-on-surface) 6%, transparent);
 }
 
 button:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: -2px;
+}
+
+button::after {
+  content: '';
+  width: 0.5rem;
+  height: 0.5rem;
+  margin-left: auto;
+  flex-shrink: 0;
+  border-right: 2px solid var(--semmet-color-on-surface-variant);
+  border-bottom: 2px solid var(--semmet-color-on-surface-variant);
+  transform: rotate(45deg);
+  transition: transform var(--semmet-motion);
+}
+
+button[aria-expanded='true']::after {
+  transform: rotate(-135deg);
 }
 
 [role='region'] {
-  padding: 0.75rem 1rem;
+  padding: 0 1.125rem 1.125rem;
+  color: var(--semmet-color-on-surface-variant);
 }

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

@@ -8,7 +8,7 @@
       [attr.aria-controls]="instanceId + '-panel-' + item.id"
       [id]="instanceId + '-header-' + item.id"
       (click)="toggle(item.id)"
-      (keydown)="onHeaderKeydown($event, i)"
+      (keydown)="navigateHeaders($event, i)"
     >
       {{ item.title }}
     </button>

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

@@ -15,21 +15,21 @@ let nextId = 0;
   styleUrl: './<%= dasherize(name) %>.css',
 })
 export class <%= classify(name) %> {
-  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+  private readonly headerButtons = viewChildren<ElementRef<HTMLButtonElement>>('headerButton');
 
-  readonly items: <%= classify(name) %>Item[] = [
+  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+  protected readonly items: <%= classify(name) %>Item[] = [
     { id: 1, title: 'First section title', content: 'First panel content' },
     { id: 2, title: 'Second section title', content: 'Second panel content' },
   ];
 
   private readonly expandedIds = signal<ReadonlySet<number>>(new Set([1]));
-  private readonly headerButtons = viewChildren<ElementRef<HTMLButtonElement>>('headerButton');
 
-  isExpanded(id: number): boolean {
+  protected isExpanded(id: number): boolean {
     return this.expandedIds().has(id);
   }
 
-  toggle(id: number): void {
+  protected toggle(id: number): void {
     const next = new Set(this.expandedIds());
     if (next.has(id)) {
       next.delete(id);
@@ -40,7 +40,7 @@ export class <%= classify(name) %> {
   }
 
   // Up/Down/Home/End move focus between headers — optional but APG-recommended keyboard support.
-  onHeaderKeydown(event: KeyboardEvent, index: number): void {
+  protected navigateHeaders(event: KeyboardEvent, index: number): void {
     const buttons = this.headerButtons();
     if (buttons.length === 0) {
       return;

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

@@ -1,11 +1,43 @@
 :host {
-  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --semmet-color-primary: #0d7a72;
+  --semmet-color-surface: #ffffff;
+  --semmet-color-on-surface: #1b201f;
+  --semmet-color-on-surface-variant: #576260;
+  --semmet-color-scrim: rgba(20, 24, 23, 0.45);
+  --semmet-radius-lg: 20px;
+  --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;
+  padding: 0.5rem 1rem;
+  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-offset: 2px;
 }
 
 .backdrop {
   position: fixed;
   inset: 0;
-  background: rgb(0 0 0 / 50%);
+  background: var(--semmet-color-scrim);
 }
 
 [role='dialog'] {
@@ -13,20 +45,27 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  min-width: 20rem;
+  min-width: 22rem;
   max-width: 90vw;
   padding: 1.5rem;
-  border-radius: 8px;
-  background: canvas;
-  color: canvastext;
-  box-shadow: 0 10px 30px rgb(0 0 0 / 25%);
+  border-radius: var(--semmet-radius-lg);
+  background: var(--semmet-color-surface);
+  color: var(--semmet-color-on-surface);
+  box-shadow: var(--semmet-elevation-3);
 }
 
 [role='dialog']:focus-visible {
-  outline: 2px solid currentColor;
+  outline: 2px solid var(--semmet-color-primary);
   outline-offset: 2px;
 }
 
-button {
-  font: inherit;
+[role='dialog'] h2 {
+  margin: 0 0 0.75rem;
+  font-size: 1.25rem;
+  font-weight: 500;
+}
+
+[role='dialog'] > div {
+  margin-bottom: 1.25rem;
+  color: var(--semmet-color-on-surface-variant);
 }

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

@@ -9,7 +9,7 @@
     aria-modal="true"
     [attr.aria-labelledby]="instanceId + '-title'"
     tabindex="-1"
-    (keydown)="onKeydown($event)"
+    (keydown)="handleDialogKeydown($event)"
   >
     <h2 [id]="instanceId + '-title'">Dialog title</h2>
     <div>Dialog content</div>

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

@@ -19,19 +19,19 @@ export class <%= classify(name) %> {
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
   protected readonly isOpen = signal(false);
 
-  open(event: MouseEvent): void {
+  protected open(event: MouseEvent): void {
     this.triggerElement = event.currentTarget as HTMLElement;
     this.isOpen.set(true);
     // Focus moves into the dialog only after Angular flushes the DOM update that un-hides it.
     afterNextRender(() => this.focusFirstElement(), { injector: this.injector });
   }
 
-  close(): void {
+  protected close(): void {
     this.isOpen.set(false);
     this.triggerElement?.focus();
   }
 
-  onKeydown(event: KeyboardEvent): void {
+  protected handleDialogKeydown(event: KeyboardEvent): void {
     if (event.key === 'Escape') {
       this.close();
       return;

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

@@ -1,27 +1,67 @@
 :host {
+  --semmet-color-primary: #0d7a72;
+  --semmet-color-surface: #ffffff;
+  --semmet-color-outline: #d7dedd;
+  --semmet-color-on-surface: #1b201f;
+  --semmet-color-on-surface-variant: #576260;
+  --semmet-radius-md: 12px;
+  --semmet-elevation-1: 0 1px 2px rgba(20, 24, 23, 0.1), 0 1px 1px rgba(20, 24, 23, 0.06);
+  --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
+
   display: block;
-  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: var(--semmet-color-on-surface);
+  background: var(--semmet-color-surface);
+  border: 1px solid var(--semmet-color-outline);
+  border-radius: var(--semmet-radius-md);
+  box-shadow: var(--semmet-elevation-1);
+  overflow: hidden;
 }
 
 button {
   display: flex;
   align-items: center;
+  gap: 0.75rem;
   width: 100%;
-  padding: 0.75rem 1rem;
+  padding: 0.875rem 1.125rem;
   font: inherit;
+  font-weight: 500;
   color: inherit;
   background: none;
-  border: 1px solid currentColor;
-  border-radius: 6px;
+  border: none;
   cursor: pointer;
   text-align: left;
+  transition: background-color var(--semmet-motion);
+}
+
+button:hover {
+  background: color-mix(in srgb, var(--semmet-color-on-surface) 6%, transparent);
 }
 
 button:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: -2px;
+}
+
+button::after {
+  content: '';
+  width: 0.5rem;
+  height: 0.5rem;
+  margin-left: auto;
+  flex-shrink: 0;
+  border-right: 2px solid var(--semmet-color-on-surface-variant);
+  border-bottom: 2px solid var(--semmet-color-on-surface-variant);
+  transform: rotate(45deg);
+  transition: transform var(--semmet-motion);
+}
+
+button[aria-expanded='true']::after {
+  transform: rotate(-135deg);
 }
 
 div {
-  padding: 0.75rem 1rem;
+  padding: 0 1.125rem 1.125rem;
+  color: var(--semmet-color-on-surface-variant);
 }

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

@@ -12,7 +12,7 @@ export class <%= classify(name) %> {
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
   protected readonly expanded = signal(false);
 
-  toggle(): void {
+  protected toggle(): void {
     this.expanded.update((value) => !value);
   }
 }

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

@@ -1,39 +1,73 @@
 :host {
+  --semmet-color-primary: #0d7a72;
+  --semmet-color-outline: #d7dedd;
+  --semmet-color-on-surface: #1b201f;
+  --semmet-color-on-surface-variant: #576260;
+  --semmet-radius-sm: 8px;
+  --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
+
   display: block;
-  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: var(--semmet-color-on-surface);
 }
 
 [role='tablist'] {
   display: flex;
   gap: 0.25rem;
-  border-bottom: 1px solid currentColor;
+  border-bottom: 1px solid var(--semmet-color-outline);
 }
 
 [role='tab'] {
+  position: relative;
   font: inherit;
-  color: inherit;
+  font-weight: 500;
+  color: var(--semmet-color-on-surface-variant);
   background: none;
   border: none;
-  padding: 0.6rem 1rem;
+  border-radius: var(--semmet-radius-sm) var(--semmet-radius-sm) 0 0;
+  padding: 0.75rem 1.125rem;
   cursor: pointer;
-  border-bottom: 2px solid transparent;
+  transition: background-color var(--semmet-motion), color var(--semmet-motion);
 }
 
-[role='tab'][aria-selected='true'] {
-  border-bottom-color: currentColor;
-  font-weight: 600;
+[role='tab']:hover {
+  background: color-mix(in srgb, var(--semmet-color-on-surface) 6%, transparent);
 }
 
 [role='tab']:focus-visible {
-  outline: 2px solid currentColor;
+  outline: 2px solid var(--semmet-color-primary);
   outline-offset: 2px;
 }
 
+[role='tab']::after {
+  content: '';
+  position: absolute;
+  left: 0.5rem;
+  right: 0.5rem;
+  bottom: -1px;
+  height: 2px;
+  border-radius: 2px 2px 0 0;
+  background: var(--semmet-color-primary);
+  transform: scaleX(0);
+  transition: transform var(--semmet-motion);
+}
+
+[role='tab'][aria-selected='true'] {
+  color: var(--semmet-color-primary);
+}
+
+[role='tab'][aria-selected='true']::after {
+  transform: scaleX(1);
+}
+
 [role='tabpanel'] {
-  padding: 1rem 0;
+  padding: 1.125rem 0.25rem;
+  color: var(--semmet-color-on-surface-variant);
 }
 
 [role='tabpanel']:focus-visible {
-  outline: 2px solid currentColor;
+  outline: 2px solid var(--semmet-color-primary);
   outline-offset: 2px;
 }

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

@@ -10,7 +10,7 @@
       [id]="instanceId + '-tab-' + item.id"
       [tabIndex]="isActive(item.id) ? 0 : -1"
       (click)="select(item.id)"
-      (keydown)="onTabKeydown($event, i)"
+      (keydown)="navigateTabs($event, i)"
     >
       {{ item.label }}
     </button>

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

@@ -15,26 +15,26 @@ let nextId = 0;
   styleUrl: './<%= dasherize(name) %>.css',
 })
 export class <%= classify(name) %> {
-  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+  private readonly tabButtons = viewChildren<ElementRef<HTMLButtonElement>>('tabButton');
 
-  readonly items: <%= classify(name) %>Item[] = [
+  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+  protected readonly items: <%= classify(name) %>Item[] = [
     { id: 1, label: 'First tab', content: 'First panel content' },
     { id: 2, label: 'Second tab', content: 'Second panel content' },
   ];
 
   private readonly activeId = signal(this.items[0].id);
-  private readonly tabButtons = viewChildren<ElementRef<HTMLButtonElement>>('tabButton');
 
-  isActive(id: number): boolean {
+  protected isActive(id: number): boolean {
     return this.activeId() === id;
   }
 
-  select(id: number): void {
+  protected select(id: number): void {
     this.activeId.set(id);
   }
 
   // Left/Right/Home/End move focus AND selection (automatic activation model, per APG tabs pattern).
-  onTabKeydown(event: KeyboardEvent, index: number): void {
+  protected navigateTabs(event: KeyboardEvent, index: number): void {
     const buttons = this.tabButtons();
     if (buttons.length === 0) {
       return;

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

@@ -1,21 +1,35 @@
 :host {
+  --semmet-color-primary: #0d7a72;
+  --semmet-color-inverse-surface: #2f3736;
+  --semmet-color-inverse-on-surface: #ffffff;
+  --semmet-radius-sm: 6px;
+  --semmet-elevation-1: 0 1px 2px rgba(20, 24, 23, 0.1), 0 1px 1px rgba(20, 24, 23, 0.06);
+  --semmet-motion: 120ms cubic-bezier(0.2, 0, 0, 1);
+
   position: relative;
   display: inline-block;
-  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  font-size: 0.9375rem;
 }
 
 button {
   font: inherit;
-  color: inherit;
+  font-weight: 500;
+  color: var(--semmet-color-primary);
   background: none;
   border: 1px solid currentColor;
-  border-radius: 6px;
-  padding: 0.4rem 0.75rem;
+  border-radius: var(--semmet-radius-sm);
+  padding: 0.5rem 1rem;
   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 currentColor;
+  outline: 2px solid var(--semmet-color-primary);
   outline-offset: 2px;
 }
 
@@ -23,11 +37,13 @@ button:focus-visible {
   position: absolute;
   bottom: 100%;
   left: 0;
-  margin-bottom: 0.35rem;
-  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
-  background: #111827;
-  color: #fff;
-  font-size: 0.85rem;
+  margin-bottom: 0.4rem;
+  padding: 0.375rem 0.625rem;
+  border-radius: var(--semmet-radius-sm);
+  background: var(--semmet-color-inverse-surface);
+  color: var(--semmet-color-inverse-on-surface);
+  font-size: 0.8125rem;
+  line-height: 1.4;
   white-space: nowrap;
+  box-shadow: var(--semmet-elevation-1);
 }

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

@@ -6,7 +6,7 @@
   (mouseleave)="hide()"
   (focus)="show()"
   (blur)="hide()"
-  (keydown)="onTriggerKeydown($event)"
+  (keydown)="closeOnEscape($event)"
 >
   Hover me
 </button>

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

@@ -12,15 +12,15 @@ export class <%= classify(name) %> {
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
   protected readonly visible = signal(false);
 
-  show(): void {
+  protected show(): void {
     this.visible.set(true);
   }
 
-  hide(): void {
+  protected hide(): void {
     this.visible.set(false);
   }
 
-  onTriggerKeydown(event: KeyboardEvent): void {
+  protected closeOnEscape(event: KeyboardEvent): void {
     if (event.key === 'Escape') {
       this.hide();
     }