semmet-angular 0.36.0 → 0.38.0

package/README.en.md

@@ -1,12 +1,12 @@
 # semmet-angular
 
-**Accessible UI Delivery Kit for Angular.**
+**Accessible UI delivery dev kit in Angular.**
 
-`semmet-angular` is a delivery-focused schematic collection for Angular teams that want to ship accessible UI faster: components with real ARIA behavior, a consistent visual identity, and generated test files from the first command.
+`semmet-angular` is a delivery-focused schematic collection for Angular teams that want to ship accessible UI faster: components with real ARIA behavior, validated compositions/blocks, and generated test files from the first command.
 
-Semmet Angular helps teams generate, test, verify, and package accessible Angular UI using the Angular CLI ecosystem.
+Semmet Angular helps teams generate, compose, test, verify, and package accessible Angular UI using the Angular CLI ecosystem.
 
-**Gerar. Testar. Verificar. Empacotar.**
+**Generate. Compose. Test. Verify. Package.**
 
 Read the broader product direction in [PRODUCT_VISION.md](./PRODUCT_VISION.md).
 
@@ -19,6 +19,7 @@ Brazilian Portuguese documentation is available in [README.md](./README.md).
 ```
 ng add semmet-angular
 ng generate semmet-angular:accordion my-faq
+ng generate semmet-angular:block section-card
 ng generate semmet-angular:ci
 ng generate semmet-angular:docker
 ng generate semmet-angular:deploy
@@ -26,6 +27,14 @@ ng generate semmet-angular:deploy
 
 `ng add semmet-angular` installs the package and configures the delivery workflow once for the target application, including Playwright e2e support, npm scripts, and `npm run verify`. Each generated component is dropped into your project exactly like `ng generate component` would (respecting your `angular.json` project, source root, and selector prefix), and has **zero runtime dependency** on this package — `semmet-angular` is only needed at generation time.
 
+## Layered Architecture
+
+Use isolated components when you need fine-grained control, or compositions when you want to accelerate accessible screens with validated structure.
+
+- **Components**: isolated schematics such as `button`, `card`, `accordion`, `table`, and `navbar`.
+- **Compositions / Blocks**: ready-made sections such as `section-card`, `section-faq`, `section-pricing`, `section-stats`, `section-table`, `section-form`, `section-tabs`, `section-list-group`, `section-alert`, `section-progress`, `section-carousel`, `header-navbar`, `footer-navigation`, and `command-list`.
+- **Delivery**: `ng add`, `ci`, `docker`, `deploy`, and `verify`.
+
 ## Generated tests
 
 Every component schematic generates test files next to the component:

package/README.md

@@ -1,12 +1,12 @@
 # semmet-angular
 
-**Kit de entrega de UI acessível para Angular.**
+**Dev kit de entrega de UI acessível em Angular.**
 
-`semmet-angular` é uma coleção de schematics focada em entrega para times Angular que querem publicar interfaces acessíveis mais rápido: componentes com comportamento ARIA real, identidade visual consistente e arquivos de teste gerados desde o primeiro comando.
+`semmet-angular` é uma coleção de schematics focada em entrega para times Angular que querem publicar interfaces acessíveis mais rápido: componentes com comportamento ARIA real, compositions/blocks com estrutura validada e arquivos de teste gerados desde o primeiro comando.
 
-Semmet Angular ajuda times a gerar, testar, verificar e empacotar UI acessível usando o ecossistema do Angular CLI.
+Semmet Angular ajuda times a gerar, compor, testar, verificar e empacotar UI acessível usando o ecossistema do Angular CLI.
 
-**Gerar. Testar. Verificar. Empacotar.**
+**Gerar. Compor. Testar. Verificar. Empacotar.**
 
 Leia a direção geral do produto em [PRODUCT_VISION.md](./PRODUCT_VISION.md).
 
@@ -19,6 +19,7 @@ English documentation is available in [README.en.md](./README.en.md).
 ```bash
 ng add semmet-angular
 ng generate semmet-angular:accordion minha-faq
+ng generate semmet-angular:block section-card
 ng generate semmet-angular:ci
 ng generate semmet-angular:docker
 ng generate semmet-angular:deploy
@@ -26,6 +27,14 @@ ng generate semmet-angular:deploy
 
 `ng add semmet-angular` instala o pacote e configura uma vez o fluxo de entrega da aplicação alvo, incluindo suporte a e2e com Playwright, scripts npm e `npm run verify`. Cada componente gerado entra no seu projeto do mesmo jeito que entraria com `ng generate component` (respeitando `angular.json`, `sourceRoot` e prefixo de seletor), e tem **zero dependência em tempo de execução** deste pacote — `semmet-angular` só é necessário na geração.
 
+## Arquitetura em Camadas
+
+Use componentes isolados quando precisar de controle fino, ou compositions quando quiser acelerar telas acessíveis com estrutura já validada.
+
+- **Components**: schematics isolados como `button`, `card`, `accordion`, `table` e `navbar`.
+- **Compositions / Blocks**: seções prontas como `section-card`, `section-faq`, `section-pricing`, `section-stats`, `section-table`, `section-form`, `section-tabs`, `section-list-group`, `section-alert`, `section-progress`, `section-carousel`, `header-navbar`, `footer-navigation` e `command-list`.
+- **Delivery**: `ng add`, `ci`, `docker`, `deploy` e `verify`.
+
 ## Fluxo de Entrega
 
 Depois de rodar `ng add semmet-angular`, use:

package/README.pt-BR.md

@@ -1,12 +1,12 @@
 # semmet-angular
 
-**Kit de entrega de UI acessível para Angular.**
+**Dev kit de entrega de UI acessível em Angular.**
 
-`semmet-angular` é uma coleção de schematics focada em entrega para times Angular que querem publicar interfaces acessíveis mais rápido: componentes com comportamento ARIA real, identidade visual consistente e arquivos de teste gerados desde o primeiro comando.
+`semmet-angular` é uma coleção de schematics focada em entrega para times Angular que querem publicar interfaces acessíveis mais rápido: componentes com comportamento ARIA real, compositions/blocks com estrutura validada e arquivos de teste gerados desde o primeiro comando.
 
-Semmet Angular ajuda times a gerar, testar, verificar e empacotar UI acessível usando o ecossistema do Angular CLI.
+Semmet Angular ajuda times a gerar, compor, testar, verificar e empacotar UI acessível usando o ecossistema do Angular CLI.
 
-**Gerar. Testar. Verificar. Empacotar.**
+**Gerar. Compor. Testar. Verificar. Empacotar.**
 
 Leia a direção geral do produto em [PRODUCT_VISION.md](./PRODUCT_VISION.md).
 
@@ -17,6 +17,7 @@ Leia a direção geral do produto em [PRODUCT_VISION.md](./PRODUCT_VISION.md).
 ```bash
 ng add semmet-angular
 ng generate semmet-angular:accordion minha-faq
+ng generate semmet-angular:block section-card
 ng generate semmet-angular:ci
 ng generate semmet-angular:docker
 ng generate semmet-angular:deploy
@@ -24,6 +25,14 @@ ng generate semmet-angular:deploy
 
 `ng add semmet-angular` instala o pacote e configura uma vez o fluxo de entrega da aplicação alvo, incluindo suporte a e2e com Playwright, scripts npm e `npm run verify`. Cada componente gerado entra no seu projeto do mesmo jeito que entraria com `ng generate component` (respeitando `angular.json`, `sourceRoot` e prefixo de seletor), e tem **zero dependência em tempo de execução** deste pacote — `semmet-angular` só é necessário na geração.
 
+## Arquitetura em Camadas
+
+Use componentes isolados quando precisar de controle fino, ou compositions quando quiser acelerar telas acessíveis com estrutura já validada.
+
+- **Components**: schematics isolados como `button`, `card`, `accordion`, `table` e `navbar`.
+- **Compositions / Blocks**: seções prontas como `section-card`, `section-faq`, `section-pricing`, `section-stats`, `section-table`, `section-form`, `section-tabs`, `section-list-group`, `section-alert`, `section-progress`, `section-carousel`, `header-navbar`, `footer-navigation` e `command-list`.
+- **Delivery**: `ng add`, `ci`, `docker`, `deploy` e `verify`.
+
 ## Fluxo de Entrega
 
 Depois de rodar `ng add semmet-angular`, use:

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "semmet-angular",
-  "version": "0.36.0",
-  "description": "Accessible UI Delivery Kit for Angular: schematics that generate ARIA-conformant standalone components with styling, keyboard behavior, unit tests, and Playwright e2e smoke tests.",
+  "version": "0.38.0",
+  "description": "Accessible UI delivery dev kit in Angular: schematics that generate components, compositions, tests, and delivery scaffolds as native editable Angular code.",
   "publisher": "danilodevsilva",
   "license": "MIT",
   "keywords": [

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

@@ -5,7 +5,6 @@
   --semmet-color-on-surface: #18181b;
   --semmet-color-on-surface-variant: #52525b;
   --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;
@@ -16,7 +15,6 @@
   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;
 }
 

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

@@ -0,0 +1,103 @@
+:host {
+  --semmet-color-primary: #18181b;
+  --semmet-color-on-surface: #18181b;
+  --semmet-color-on-surface-variant: #52525b;
+  --semmet-color-accent: #2563eb;
+
+  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: 2rem;
+  max-width: 72rem;
+  margin-inline: auto;
+  margin-block: 4rem;
+}
+
+.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: 4rem 0;
+}
+
+.semmet-block__header {
+  display: grid;
+  gap: 0.75rem;
+  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: 1.25rem;
+}
+
+.semmet-block__stack {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.semmet-block__stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+  gap: 1rem;
+  margin: 0;
+}
+
+.semmet-block__stats div {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.semmet-block__stats dt {
+  color: var(--semmet-color-primary);
+  font-size: 2rem;
+  font-weight: 700;
+  line-height: 1.1;
+}
+
+.semmet-block__stats dd {
+  color: var(--semmet-color-on-surface-variant);
+}
+
+dd {
+  margin: 0;
+}

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

@@ -0,0 +1,209 @@
+<!-- Semmet Angular: Block / Composition - accessible section scaffold. -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+-->
+<% if (kind === 'hero') { %>
+<section class="semmet-block semmet-block--hero" aria-labelledby="<%= dasherize(name) %>-title">
+  <p>{{ eyebrow }}</p>
+  <h1 id="<%= dasherize(name) %>-title">{{ title }}</h1>
+  <p>{{ summary }}</p>
+  <p>
+    <a href="#main-content">Explore the page</a>
+  </p>
+</section>
+<% } else if (kind === 'section-card') { %>
+<section class="semmet-block" aria-labelledby="<%= dasherize(name) %>-title">
+  <header class="semmet-block__header">
+    <p class="semmet-block__eyebrow">{{ eyebrow }}</p>
+    <h2 id="<%= dasherize(name) %>-title">{{ title }}</h2>
+    <p class="semmet-block__summary">{{ summary }}</p>
+  </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 %>>
+    }
+  </div>
+</section>
+<% } else if (kind === 'section-faq') { %>
+<section class="semmet-block" aria-labelledby="<%= dasherize(name) %>-title">
+  <header class="semmet-block__header">
+    <p class="semmet-block__eyebrow">{{ eyebrow }}</p>
+    <h2 id="<%= dasherize(name) %>-title">{{ title }}</h2>
+    <p class="semmet-block__summary">{{ summary }}</p>
+  </header>
+  <div class="semmet-block__stack">
+    <<%= supportSelector %>>
+      @for (item of items; track item.title; let first = $first) {
+        <ng-template <%= camelize(supportName) %>Item [id]="item.title" [title]="item.title" [expanded]="first">
+          <p>{{ item.text }}</p>
+        </ng-template>
+      }
+    </<%= supportSelector %>>
+  </div>
+</section>
+<% } else if (kind === 'section-table') { %>
+<section class="semmet-block" aria-labelledby="<%= dasherize(name) %>-title">
+  <header class="semmet-block__header">
+    <p class="semmet-block__eyebrow">{{ eyebrow }}</p>
+    <h2 id="<%= dasherize(name) %>-title">{{ title }}</h2>
+    <p class="semmet-block__summary">{{ summary }}</p>
+  </header>
+  <<%= supportSelector %>>
+    <ng-template <%= camelize(supportName) %>Caption>
+      {{ title }}
+    </ng-template>
+  </<%= supportSelector %>>
+</section>
+<% } else if (kind === 'section-form') { %>
+<section class="semmet-block" aria-labelledby="<%= dasherize(name) %>-title">
+  <header class="semmet-block__header">
+    <p class="semmet-block__eyebrow">{{ eyebrow }}</p>
+    <h2 id="<%= dasherize(name) %>-title">{{ title }}</h2>
+    <p class="semmet-block__summary">{{ summary }}</p>
+  </header>
+  <<%= supportSelector %> />
+</section>
+<% } else if (kind === 'section-tabs') { %>
+<section class="semmet-block" aria-labelledby="<%= dasherize(name) %>-title">
+  <header class="semmet-block__header">
+    <p class="semmet-block__eyebrow">{{ eyebrow }}</p>
+    <h2 id="<%= dasherize(name) %>-title">{{ title }}</h2>
+    <p class="semmet-block__summary">{{ summary }}</p>
+  </header>
+  <<%= supportSelector %>>
+    @for (item of items; track item.title; let first = $first) {
+      <ng-template <%= camelize(supportName) %>Item [id]="item.title" [label]="item.title" [selected]="first">
+        <p>{{ item.text }}</p>
+      </ng-template>
+    }
+  </<%= supportSelector %>>
+</section>
+<% } else if (kind === 'section-list-group') { %>
+<section class="semmet-block" aria-labelledby="<%= dasherize(name) %>-title">
+  <header class="semmet-block__header">
+    <p class="semmet-block__eyebrow">{{ eyebrow }}</p>
+    <h2 id="<%= dasherize(name) %>-title">{{ title }}</h2>
+    <p class="semmet-block__summary">{{ summary }}</p>
+  </header>
+  <<%= supportSelector %> />
+</section>
+<% } else if (kind === 'section-alert') { %>
+<section class="semmet-block" aria-labelledby="<%= dasherize(name) %>-title">
+  <header class="semmet-block__header">
+    <p class="semmet-block__eyebrow">{{ eyebrow }}</p>
+    <h2 id="<%= dasherize(name) %>-title">{{ title }}</h2>
+    <p class="semmet-block__summary">{{ summary }}</p>
+  </header>
+  <<%= supportSelector %> />
+</section>
+<% } else if (kind === 'section-progress') { %>
+<section class="semmet-block" aria-labelledby="<%= dasherize(name) %>-title">
+  <header class="semmet-block__header">
+    <p class="semmet-block__eyebrow">{{ eyebrow }}</p>
+    <h2 id="<%= dasherize(name) %>-title">{{ title }}</h2>
+    <p class="semmet-block__summary">{{ summary }}</p>
+  </header>
+  <<%= supportSelector %> />
+</section>
+<% } else if (kind === 'section-carousel') { %>
+<section class="semmet-block" aria-labelledby="<%= dasherize(name) %>-title">
+  <header class="semmet-block__header">
+    <p class="semmet-block__eyebrow">{{ eyebrow }}</p>
+    <h2 id="<%= dasherize(name) %>-title">{{ title }}</h2>
+    <p class="semmet-block__summary">{{ summary }}</p>
+  </header>
+  <<%= supportSelector %>>
+    @for (item of items; track item.title) {
+      <ng-template <%= camelize(supportName) %>Slide [id]="item.title" [label]="item.title">
+        <h3>{{ item.title }}</h3>
+        <p>{{ item.text }}</p>
+      </ng-template>
+    }
+  </<%= supportSelector %>>
+</section>
+<% } else if (kind === 'header-navbar') { %>
+<header class="semmet-block semmet-block--header">
+  <<%= supportSelector %>>
+    <ng-template <%= camelize(supportName) %>Brand>
+      {{ title }}
+    </ng-template>
+    <ng-template <%= camelize(supportName) %>Actions>
+      <a href="#main-content">Skip to content</a>
+    </ng-template>
+  </<%= supportSelector %>>
+</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 %>>
+</footer>
+<% } else if (kind === 'section-pricing') { %>
+<section class="semmet-block" aria-labelledby="<%= dasherize(name) %>-title">
+  <header class="semmet-block__header">
+    <p class="semmet-block__eyebrow">{{ eyebrow }}</p>
+    <h2 id="<%= dasherize(name) %>-title">{{ title }}</h2>
+    <p class="semmet-block__summary">{{ summary }}</p>
+  </header>
+  <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>
+      </<%= supportSelector %>>
+    }
+  </div>
+</section>
+<% } else if (kind === 'section-stats') { %>
+<section class="semmet-block" aria-labelledby="<%= dasherize(name) %>-title">
+  <header class="semmet-block__header">
+    <p class="semmet-block__eyebrow">{{ eyebrow }}</p>
+    <h2 id="<%= dasherize(name) %>-title">{{ title }}</h2>
+    <p class="semmet-block__summary">{{ summary }}</p>
+  </header>
+  <dl class="semmet-block__stats">
+    @for (item of items; track item.title) {
+      <div>
+        <dt>{{ item.title }}</dt>
+        <dd>{{ item.text }}</dd>
+      </div>
+    }
+  </dl>
+</section>
+<% } else { %>
+<section class="semmet-block" aria-labelledby="<%= dasherize(name) %>-title">
+  <p>{{ eyebrow }}</p>
+  <h2 id="<%= dasherize(name) %>-title">{{ title }}</h2>
+  <p>{{ summary }}</p>
+  <ol class="semmet-block__stack">
+    @for (item of items; track item.title) {
+      <li>
+        <code>{{ item.title }}</code>
+        <p>{{ item.text }}</p>
+      </li>
+    }
+  </ol>
+</section>
+<% } %>

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

@@ -0,0 +1,86 @@
+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) %>,
+  <%= classify(supportName) %>Item,
+} from './<%= dasherize(supportName) %>/<%= dasherize(supportName) %>';
+<% } else if (supportVariable === 'table') { %>import {
+  <%= classify(supportName) %>,
+  <%= classify(supportName) %>Caption,
+} from './<%= dasherize(supportName) %>/<%= dasherize(supportName) %>';
+<% } else if (supportVariable === 'navbar') { %>import {
+  <%= classify(supportName) %>,
+  <%= classify(supportName) %>Actions,
+  <%= classify(supportName) %>Brand,
+} from './<%= dasherize(supportName) %>/<%= dasherize(supportName) %>';
+<% } else if (supportVariable === 'tabs') { %>import {
+  <%= classify(supportName) %>,
+  <%= classify(supportName) %>Item,
+} from './<%= dasherize(supportName) %>/<%= dasherize(supportName) %>';
+<% } else if (supportVariable === 'carousel') { %>import {
+  <%= classify(supportName) %>,
+  <%= classify(supportName) %>Slide,
+} from './<%= dasherize(supportName) %>/<%= dasherize(supportName) %>';
+<% } else { %>import { <%= classify(supportName) %> } from './<%= dasherize(supportName) %>/<%= dasherize(supportName) %>';
+<% } %><% } %>
+
+interface <%= classify(name) %>Item {
+  title: string;
+  text: 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') { %>
+    <%= classify(supportName) %>Caption,
+<% } else if (supportVariable === 'navbar') { %>
+    <%= classify(supportName) %>Actions,
+    <%= classify(supportName) %>Brand,
+<% } else if (supportVariable === 'tabs') { %>
+    <%= classify(supportName) %>Item,
+<% } else if (supportVariable === 'carousel') { %>
+    <%= classify(supportName) %>Slide,
+<% } %>
+  <% } %>],
+  templateUrl: './<%= dasherize(name) %>.html',
+  styleUrl: './<%= dasherize(name) %>.css',
+})
+export class <%= classify(name) %> {
+  protected readonly kind = '<%= kind %>';
+  protected readonly title = '<%= classify(kind) %>';
+  protected readonly eyebrow = 'Semmet composition';
+  protected readonly summary =
+    'Accessible Angular block generated as native, editable application code.';
+
+  protected readonly items: readonly <%= classify(name) %>Item[] = [
+    {
+      title: 'Accessible structure',
+      text: 'Semantic regions, headings, lists, and actions start in a sensible order.',
+    },
+    {
+      title: 'Angular-native output',
+      text: 'The generated files are regular standalone component files owned by your app.',
+    },
+    {
+      title: 'Ready to compose',
+      text: 'Replace placeholder content with product components, inputs, outputs, and signals.',
+    },
+  ];
+}

package/src/block/index.d.ts

@@ -0,0 +1 @@
+export declare const block: (options: import("../utils/generate-composition").CompositionSchematicOptions) => import("@angular-devkit/schematics").Rule;

package/src/block/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.block = void 0;
+const generate_composition_1 = require("../utils/generate-composition");
+exports.block = (0, generate_composition_1.createCompositionSchematic)('hero');
+//# sourceMappingURL=index.js.map

package/src/block/index.js.map

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

package/src/block/index.ts

@@ -0,0 +1,3 @@
+import { createCompositionSchematic } from '../utils/generate-composition';
+
+export const block = createCompositionSchematic('hero');

package/src/block/schema.d.ts

@@ -0,0 +1,7 @@
+export type BlockKind = 'hero' | 'section-card' | 'section-faq' | 'section-pricing' | 'section-stats' | 'section-table' | 'header-navbar' | 'command-list' | 'section-form' | 'section-tabs' | 'section-list-group' | 'section-alert' | 'section-progress' | 'footer-navigation' | 'section-carousel';
+export interface Schema {
+    name: string;
+    project: string;
+    path?: string;
+    kind?: BlockKind;
+}

package/src/block/schema.js

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

package/src/block/schema.js.map

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

package/src/block/schema.json

@@ -0,0 +1,51 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularBlock",
+  "title": "Semmet Angular Block Options Schema",
+  "type": "object",
+  "description": "Generates an accessible Angular composition block with semantic section structure.",
+  "additionalProperties": false,
+  "properties": {
+    "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 },
+      "x-prompt": "What name would you like to use for the block component?"
+    },
+    "kind": {
+      "type": "string",
+      "description": "The composition block pattern to generate. Defaults to the positional name when it matches a known block kind.",
+      "default": "hero",
+      "enum": [
+        "hero",
+        "section-card",
+        "section-faq",
+        "section-pricing",
+        "section-stats",
+        "section-table",
+        "header-navbar",
+        "command-list",
+        "section-form",
+        "section-tabs",
+        "section-list-group",
+        "section-alert",
+        "section-progress",
+        "footer-navigation",
+        "section-carousel"
+      ]
+    },
+    "path": {
+      "type": "string",
+      "format": "path",
+      "$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" }
+    }
+  },
+  "required": ["name", "project"]
+}

package/src/block/schema.ts

@@ -0,0 +1,23 @@
+export type BlockKind =
+  | 'hero'
+  | 'section-card'
+  | 'section-faq'
+  | 'section-pricing'
+  | 'section-stats'
+  | 'section-table'
+  | 'header-navbar'
+  | 'command-list'
+  | 'section-form'
+  | 'section-tabs'
+  | 'section-list-group'
+  | 'section-alert'
+  | 'section-progress'
+  | 'footer-navigation'
+  | 'section-carousel';
+
+export interface Schema {
+  name: string;
+  project: string;
+  path?: string;
+  kind?: BlockKind;
+}

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

@@ -8,7 +8,6 @@
   --semmet-color-on-surface: #18181b;
   --semmet-color-on-surface-variant: #52525b;
   --semmet-radius-sm: 8px;
-  --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: inline-block;
@@ -31,12 +30,10 @@
   white-space: nowrap;
   cursor: pointer;
   user-select: none;
-  box-shadow: var(--semmet-elevation-1);
   transition:
     background-color var(--semmet-motion),
     border-color var(--semmet-motion),
     color var(--semmet-motion),
-    box-shadow var(--semmet-motion),
     transform var(--semmet-motion);
 }
 
@@ -77,7 +74,6 @@
   color: var(--semmet-color-on-surface);
   background: transparent;
   border-color: transparent;
-  box-shadow: none;
 }
 
 .semmet-button:hover:not(:disabled) {
@@ -91,7 +87,6 @@
 .semmet-button:disabled {
   cursor: not-allowed;
   opacity: 0.56;
-  box-shadow: none;
 }
 
 .semmet-button:focus-visible {

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

@@ -5,7 +5,6 @@
   --semmet-color-on-surface: #18181b;
   --semmet-color-on-surface-variant: #52525b;
   --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);
 
   display: block;
   font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
@@ -17,7 +16,6 @@ article {
   background: var(--semmet-color-surface);
   border: 1px solid var(--semmet-color-outline);
   border-radius: var(--semmet-radius-md);
-  box-shadow: var(--semmet-elevation-1);
 }
 
 h3 {

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

@@ -5,7 +5,6 @@
   --semmet-color-outline: #d4d4d8;
   --semmet-color-on-surface: #18181b;
   --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;
@@ -31,7 +30,6 @@ section {
   background: var(--semmet-color-surface);
   border: 1px solid var(--semmet-color-outline);
   border-radius: var(--semmet-radius-md);
-  box-shadow: var(--semmet-elevation-1);
   text-align: center;
 }
 

package/src/collection.json

@@ -21,6 +21,11 @@
       "factory": "./deploy/index#deploy",
       "schema": "./deploy/schema.json"
     },
+    "block": {
+      "description": "Generates an accessible Angular composition block with semantic section structure.",
+      "factory": "./block/index#block",
+      "schema": "./block/schema.json"
+    },
     "accordion": {
       "description": "Generates a standalone Angular Accordion component following the W3C ARIA Authoring Practices Guide.",
       "factory": "./accordion/index#accordion",

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

@@ -5,7 +5,6 @@
   --semmet-color-on-surface: #18181b;
   --semmet-color-on-surface-variant: #52525b;
   --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;
@@ -16,7 +15,6 @@
   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;
 }
 

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

@@ -8,7 +8,6 @@
   --semmet-color-on-surface-variant: #52525b;
   --semmet-radius-sm: 8px;
   --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;
@@ -25,7 +24,6 @@ form {
   background: var(--semmet-color-surface);
   border: 1px solid var(--semmet-color-outline);
   border-radius: var(--semmet-radius-md);
-  box-shadow: var(--semmet-elevation-1);
 }
 
 h2 {
@@ -57,9 +55,7 @@ textarea {
   font: inherit;
   color: var(--semmet-color-on-surface);
   background: var(--semmet-color-surface);
-  transition:
-    border-color var(--semmet-motion),
-    box-shadow var(--semmet-motion);
+  transition: border-color var(--semmet-motion);
 }
 
 input {

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

@@ -7,7 +7,6 @@
   --semmet-color-on-surface: #27272a;
   --semmet-color-on-surface-variant: #71717a;
   --semmet-radius-md: 10px;
-  --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;
@@ -23,13 +22,11 @@
   border: 1px solid var(--semmet-color-outline);
   border-radius: var(--semmet-radius-md);
   background: var(--semmet-color-surface);
-  box-shadow: var(--semmet-elevation-1);
   list-style: none;
 }
 
 .semmet-list-group--flush {
   border-radius: 0;
-  box-shadow: none;
 }
 
 .semmet-list-group__item + .semmet-list-group__item {

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

@@ -6,7 +6,6 @@
   --semmet-color-on-surface: #27272a;
   --semmet-color-on-surface-variant: #71717a;
   --semmet-radius-md: 10px;
-  --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;
@@ -23,7 +22,6 @@
   border-radius: var(--semmet-radius-md);
   color: var(--semmet-color-on-surface);
   background: var(--semmet-color-surface);
-  box-shadow: var(--semmet-elevation-1);
 }
 
 .semmet-navbar__brand {

package/src/ng-add/schema.d.ts

@@ -1,4 +1,5 @@
 export interface Schema {
     project?: string;
+    saveDev?: boolean;
     skipE2e?: boolean;
 }

package/src/ng-add/schema.json

@@ -15,6 +15,11 @@
       "type": "boolean",
       "default": false,
       "description": "Skip Playwright e2e setup."
+    },
+    "saveDev": {
+      "type": "boolean",
+      "default": false,
+      "description": "Accepted from Angular CLI when ng add is invoked with --save-dev."
     }
   }
 }

package/src/ng-add/schema.ts

@@ -1,4 +1,5 @@
 export interface Schema {
   project?: string;
+  saveDev?: boolean;
   skipE2e?: boolean;
 }

package/src/utils/generate-composition.d.ts

@@ -0,0 +1,8 @@
+import { Rule } from '@angular-devkit/schematics';
+export interface CompositionSchematicOptions {
+    name: string;
+    project: string;
+    path?: string;
+    kind?: string;
+}
+export declare function createCompositionSchematic(defaultKind: string): (options: CompositionSchematicOptions) => Rule;

package/src/utils/generate-composition.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCompositionSchematic = createCompositionSchematic;
+const core_1 = require("@angular-devkit/core");
+const schematics_1 = require("@angular-devkit/schematics");
+const project_1 = require("@schematics/angular/utility/project");
+const workspace_1 = require("@schematics/angular/utility/workspace");
+const parse_name_1 = require("@schematics/angular/utility/parse-name");
+const validation_1 = require("@schematics/angular/utility/validation");
+const knownKinds = new Set([
+    'command-list',
+    'footer-navigation',
+    'header-navbar',
+    'hero',
+    'section-alert',
+    'section-carousel',
+    'section-card',
+    'section-faq',
+    'section-form',
+    'section-list-group',
+    'section-pricing',
+    'section-progress',
+    'section-stats',
+    'section-table',
+    'section-tabs',
+]);
+function getSupportingComponent(kind) {
+    switch (kind) {
+        case 'section-card':
+        case 'section-pricing':
+            return { templatePath: '../card/files', variable: 'card' };
+        case 'section-faq':
+            return { templatePath: '../accordion/files', variable: 'accordion' };
+        case 'section-table':
+            return { templatePath: '../table/files', variable: 'table' };
+        case 'header-navbar':
+        case 'footer-navigation':
+            return { templatePath: '../navbar/files', variable: 'navbar' };
+        case 'section-form':
+            return { templatePath: '../form/files', variable: 'form' };
+        case 'section-tabs':
+            return { templatePath: '../tabs/files', variable: 'tabs' };
+        case 'section-list-group':
+            return { templatePath: '../list-group/files', variable: 'listGroup' };
+        case 'section-alert':
+            return { templatePath: '../alert/files', variable: 'alert' };
+        case 'section-progress':
+            return { templatePath: '../progress-bar/files', variable: 'progressBar' };
+        case 'section-carousel':
+            return { templatePath: '../carousel/files', variable: 'carousel' };
+        default:
+            return null;
+    }
+}
+function createCompositionSchematic(defaultKind) {
+    return (0, project_1.createProjectSchematic)((options, { project }) => {
+        options.path ??= (0, workspace_1.buildDefaultPath)(project);
+        const parsedPath = (0, parse_name_1.parseName)(options.path, options.name);
+        const name = parsedPath.name;
+        const kind = knownKinds.has(name) && (options.kind === undefined || options.kind === defaultKind)
+            ? name
+            : options.kind ?? defaultKind;
+        const selector = `${project.prefix ? `${project.prefix}-` : ''}${core_1.strings.dasherize(name)}`;
+        const supportingComponent = getSupportingComponent(kind);
+        const supportName = supportingComponent ? `${name}-${supportingComponent.variable}` : '';
+        const supportSelector = supportName
+            ? `${project.prefix ? `${project.prefix}-` : ''}${core_1.strings.dasherize(supportName)}`
+            : '';
+        const usesCardActions = kind === 'section-pricing';
+        (0, validation_1.validateHtmlSelector)(selector);
+        (0, validation_1.validateClassName)(core_1.strings.classify(name));
+        if (supportingComponent) {
+            (0, validation_1.validateHtmlSelector)(supportSelector);
+            (0, validation_1.validateClassName)(core_1.strings.classify(supportName));
+        }
+        const templateSource = (0, schematics_1.apply)((0, schematics_1.url)('./files'), [
+            (0, schematics_1.applyTemplates)({
+                ...core_1.strings,
+                name,
+                selector,
+                kind,
+                supportName,
+                supportSelector,
+                supportVariable: supportingComponent?.variable ?? '',
+                usesSupportingComponent: Boolean(supportingComponent),
+                usesCardActions,
+            }),
+            (0, schematics_1.move)(parsedPath.path),
+        ]);
+        const rules = [(0, schematics_1.mergeWith)(templateSource)];
+        if (supportingComponent) {
+            const supportSource = (0, schematics_1.apply)((0, schematics_1.url)(supportingComponent.templatePath), [
+                (0, schematics_1.filter)((filePath) => !filePath.endsWith('.spec.ts.template') && !filePath.endsWith('.e2e-spec.ts.template')),
+                (0, schematics_1.applyTemplates)({ ...core_1.strings, name: supportName, selector: supportSelector }),
+                (0, schematics_1.move)(`${parsedPath.path}/${core_1.strings.dasherize(name)}`),
+            ]);
+            rules.push((0, schematics_1.mergeWith)(supportSource));
+        }
+        return (0, schematics_1.chain)(rules);
+    });
+}
+//# sourceMappingURL=generate-composition.js.map

package/src/utils/generate-composition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate-composition.js","sourceRoot":"","sources":["generate-composition.ts"],"names":[],"mappings":"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"}

package/src/utils/generate-composition.ts

@@ -0,0 +1,121 @@
+import { strings } from '@angular-devkit/core';
+import { Rule, apply, applyTemplates, chain, filter, mergeWith, move, url } from '@angular-devkit/schematics';
+import { createProjectSchematic } from '@schematics/angular/utility/project';
+import { buildDefaultPath } from '@schematics/angular/utility/workspace';
+import { parseName } from '@schematics/angular/utility/parse-name';
+import { validateClassName, validateHtmlSelector } from '@schematics/angular/utility/validation';
+
+export interface CompositionSchematicOptions {
+  name: string;
+  project: string;
+  path?: string;
+  kind?: string;
+}
+
+const knownKinds = new Set([
+  'command-list',
+  'footer-navigation',
+  'header-navbar',
+  'hero',
+  'section-alert',
+  'section-carousel',
+  'section-card',
+  'section-faq',
+  'section-form',
+  'section-list-group',
+  'section-pricing',
+  'section-progress',
+  'section-stats',
+  'section-table',
+  'section-tabs',
+]);
+
+interface SupportingComponent {
+  templatePath: string;
+  variable: string;
+}
+
+function getSupportingComponent(kind: string): SupportingComponent | null {
+  switch (kind) {
+    case 'section-card':
+    case 'section-pricing':
+      return { templatePath: '../card/files', variable: 'card' };
+    case 'section-faq':
+      return { templatePath: '../accordion/files', variable: 'accordion' };
+    case 'section-table':
+      return { templatePath: '../table/files', variable: 'table' };
+    case 'header-navbar':
+    case 'footer-navigation':
+      return { templatePath: '../navbar/files', variable: 'navbar' };
+    case 'section-form':
+      return { templatePath: '../form/files', variable: 'form' };
+    case 'section-tabs':
+      return { templatePath: '../tabs/files', variable: 'tabs' };
+    case 'section-list-group':
+      return { templatePath: '../list-group/files', variable: 'listGroup' };
+    case 'section-alert':
+      return { templatePath: '../alert/files', variable: 'alert' };
+    case 'section-progress':
+      return { templatePath: '../progress-bar/files', variable: 'progressBar' };
+    case 'section-carousel':
+      return { templatePath: '../carousel/files', variable: 'carousel' };
+    default:
+      return null;
+  }
+}
+
+export function createCompositionSchematic(defaultKind: string): (options: CompositionSchematicOptions) => Rule {
+  return createProjectSchematic<CompositionSchematicOptions>((options, { project }) => {
+    options.path ??= buildDefaultPath(project);
+
+    const parsedPath = parseName(options.path, options.name);
+    const name = parsedPath.name;
+    const kind = knownKinds.has(name) && (options.kind === undefined || options.kind === defaultKind)
+      ? name
+      : options.kind ?? defaultKind;
+    const selector = `${project.prefix ? `${project.prefix}-` : ''}${strings.dasherize(name)}`;
+    const supportingComponent = getSupportingComponent(kind);
+    const supportName = supportingComponent ? `${name}-${supportingComponent.variable}` : '';
+    const supportSelector = supportName
+      ? `${project.prefix ? `${project.prefix}-` : ''}${strings.dasherize(supportName)}`
+      : '';
+    const usesCardActions = kind === 'section-pricing';
+
+    validateHtmlSelector(selector);
+    validateClassName(strings.classify(name));
+
+    if (supportingComponent) {
+      validateHtmlSelector(supportSelector);
+      validateClassName(strings.classify(supportName));
+    }
+
+    const templateSource = apply(url('./files'), [
+      applyTemplates({
+        ...strings,
+        name,
+        selector,
+        kind,
+        supportName,
+        supportSelector,
+        supportVariable: supportingComponent?.variable ?? '',
+        usesSupportingComponent: Boolean(supportingComponent),
+        usesCardActions,
+      }),
+      move(parsedPath.path),
+    ]);
+
+    const rules: Rule[] = [mergeWith(templateSource)];
+
+    if (supportingComponent) {
+      const supportSource = apply(url(supportingComponent.templatePath), [
+        filter((filePath) => !filePath.endsWith('.spec.ts.template') && !filePath.endsWith('.e2e-spec.ts.template')),
+        applyTemplates({ ...strings, name: supportName, selector: supportSelector }),
+        move(`${parsedPath.path}/${strings.dasherize(name)}`),
+      ]);
+
+      rules.push(mergeWith(supportSource));
+    }
+
+    return chain(rules);
+  });
+}