semmet-angular 0.11.0 → 0.12.0

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

@@ -0,0 +1,121 @@
+: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-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: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  font-size: 0.9375rem;
+}
+
+.semmet-list-group {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  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 {
+  border-block-start: 1px solid var(--semmet-color-outline);
+}
+
+.semmet-list-group__action {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  width: 100%;
+  min-height: 4rem;
+  padding: 0.875rem 1rem;
+  border: 0;
+  color: var(--semmet-color-on-surface);
+  background: var(--semmet-color-surface);
+  font: inherit;
+  text-align: start;
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background-color var(--semmet-motion),
+    color var(--semmet-motion),
+    opacity var(--semmet-motion);
+}
+
+.semmet-list-group__action:hover:not(:disabled):not(.semmet-list-group__action--disabled) {
+  background: var(--semmet-color-surface-muted);
+}
+
+.semmet-list-group__action--active {
+  color: var(--semmet-color-on-primary);
+  background: var(--semmet-color-primary);
+}
+
+.semmet-list-group__action:disabled,
+.semmet-list-group__action--disabled {
+  cursor: not-allowed;
+  opacity: 0.54;
+}
+
+.semmet-list-group__action:focus-visible {
+  position: relative;
+  z-index: 1;
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: -2px;
+}
+
+.semmet-list-group__content {
+  display: grid;
+  min-width: 0;
+  gap: 0.25rem;
+}
+
+.semmet-list-group__title {
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.semmet-list-group__description {
+  color: var(--semmet-color-on-surface-variant);
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+
+.semmet-list-group__action--active .semmet-list-group__description {
+  color: rgba(255, 255, 255, 0.76);
+}
+
+.semmet-list-group__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 999px;
+  color: var(--semmet-color-on-primary);
+  background: var(--semmet-color-primary);
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.semmet-list-group__action--active .semmet-list-group__badge {
+  color: var(--semmet-color-primary);
+  background: var(--semmet-color-on-primary);
+}

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

@@ -0,0 +1,47 @@
+<!-- Semmet Angular: List Group - semantic list with optional action and active states. -->
+<ul [id]="instanceId" [class]="listClasses()" [attr.aria-label]="label()">
+  @for (item of items(); track item.id) {
+    <li class="semmet-list-group__item">
+      @if (item.href) {
+        <a
+          class="semmet-list-group__action"
+          [class.semmet-list-group__action--active]="isActive(item)"
+          [class.semmet-list-group__action--disabled]="item.disabled"
+          [href]="item.disabled ? null : item.href"
+          [attr.aria-current]="isActive(item) ? 'page' : null"
+          [attr.aria-disabled]="item.disabled ? 'true' : null"
+          (click)="select(item)"
+        >
+          <span class="semmet-list-group__content">
+            <span class="semmet-list-group__title">{{ item.title }}</span>
+            @if (item.description) {
+              <span class="semmet-list-group__description">{{ item.description }}</span>
+            }
+          </span>
+          @if (item.badge) {
+            <span class="semmet-list-group__badge">{{ item.badge }}</span>
+          }
+        </a>
+      } @else {
+        <button
+          type="button"
+          class="semmet-list-group__action"
+          [class.semmet-list-group__action--active]="isActive(item)"
+          [disabled]="item.disabled"
+          [attr.aria-current]="isActive(item) ? 'true' : null"
+          (click)="select(item)"
+        >
+          <span class="semmet-list-group__content">
+            <span class="semmet-list-group__title">{{ item.title }}</span>
+            @if (item.description) {
+              <span class="semmet-list-group__description">{{ item.description }}</span>
+            }
+          </span>
+          @if (item.badge) {
+            <span class="semmet-list-group__badge">{{ item.badge }}</span>
+          }
+        </button>
+      }
+    </li>
+  }
+</ul>

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

@@ -0,0 +1,55 @@
+import { Component, booleanAttribute, computed, input, signal } from '@angular/core';
+
+interface <%= classify(name) %>Item {
+  id: string;
+  title: string;
+  description?: string;
+  badge?: string;
+  href?: string;
+  disabled?: boolean;
+  active?: boolean;
+}
+
+const DEFAULT_ITEMS: readonly <%= classify(name) %>Item[] = [
+  { id: 'profile', title: 'Profile', description: 'Personal details and public identity', active: true },
+  { id: 'security', title: 'Security', description: 'Password, sessions, and two-factor settings', badge: '2' },
+  { id: 'billing', title: 'Billing', description: 'Invoices and payment methods' },
+];
+
+let nextId = 0;
+
+@Component({
+  selector: '<%= selector %>',
+  imports: [],
+  templateUrl: './<%= dasherize(name) %>.html',
+  styleUrl: './<%= dasherize(name) %>.css',
+})
+export class <%= classify(name) %> {
+  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+
+  readonly label = input('Settings sections');
+  readonly flush = input(false, { transform: booleanAttribute });
+  readonly selectable = input(true, { transform: booleanAttribute });
+  readonly items = input<readonly <%= classify(name) %>Item[]>(DEFAULT_ITEMS);
+
+  protected readonly selectedId = signal<string | null>(
+    DEFAULT_ITEMS.find((item) => item.active)?.id ?? DEFAULT_ITEMS[0]?.id ?? null,
+  );
+
+  protected readonly listClasses = computed(() => [
+    'semmet-list-group',
+    this.flush() ? 'semmet-list-group--flush' : '',
+  ].filter(Boolean).join(' '));
+
+  protected isActive(item: <%= classify(name) %>Item): boolean {
+    return this.selectable() ? this.selectedId() === item.id : Boolean(item.active);
+  }
+
+  protected select(item: <%= classify(name) %>Item): void {
+    if (!this.selectable() || item.disabled) {
+      return;
+    }
+
+    this.selectedId.set(item.id);
+  }
+}

package/src/list-group/index.d.ts

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

package/src/list-group/index.js

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

package/src/list-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,SAAS,GAAG,IAAA,iDAA4B,GAAE,CAAC"}

package/src/list-group/index.ts

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

package/src/list-group/schema.d.ts

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

package/src/list-group/schema.js

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

package/src/list-group/schema.js.map

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

package/src/list-group/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularListGroup",
+  "title": "Semmet Angular List Group Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular List Group component with semantic list structure, active state, optional badges, and action items.",
+  "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 list group component?"
+    },
+    "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/list-group/schema.ts

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

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

@@ -0,0 +1,158 @@
+:host {
+  --semmet-color-primary: #18181b;
+  --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-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: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
+}
+
+.semmet-navbar {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  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-1);
+}
+
+.semmet-navbar__brand {
+  display: inline-flex;
+  align-items: center;
+  min-height: 2.5rem;
+  color: inherit;
+  font-size: 1.0625rem;
+  font-weight: 800;
+  text-decoration: none;
+}
+
+.semmet-navbar__toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 1px solid var(--semmet-color-outline);
+  border-radius: var(--semmet-radius-md);
+  color: inherit;
+  background: var(--semmet-color-surface);
+  cursor: pointer;
+}
+
+.semmet-navbar__toggle span,
+.semmet-navbar__toggle span::before,
+.semmet-navbar__toggle span::after {
+  display: block;
+  width: 1.125rem;
+  height: 0.125rem;
+  border-radius: 999px;
+  background: currentColor;
+}
+
+.semmet-navbar__toggle span {
+  position: relative;
+}
+
+.semmet-navbar__toggle span::before,
+.semmet-navbar__toggle span::after {
+  position: absolute;
+  left: 0;
+  content: '';
+}
+
+.semmet-navbar__toggle span::before {
+  top: -0.375rem;
+}
+
+.semmet-navbar__toggle span::after {
+  top: 0.375rem;
+}
+
+.semmet-navbar__menu {
+  display: none;
+  grid-column: 1 / -1;
+}
+
+.semmet-navbar__menu--open {
+  display: block;
+}
+
+.semmet-navbar__list {
+  display: grid;
+  gap: 0.25rem;
+  margin: 0;
+  padding: 0.5rem 0 0;
+  list-style: none;
+}
+
+.semmet-navbar__link {
+  display: flex;
+  align-items: center;
+  min-height: 2.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--semmet-radius-md);
+  color: var(--semmet-color-on-surface-variant);
+  font-weight: 650;
+  text-decoration: none;
+  transition:
+    background-color var(--semmet-motion),
+    color var(--semmet-motion),
+    opacity var(--semmet-motion);
+}
+
+.semmet-navbar__link:hover:not(.semmet-navbar__link--disabled) {
+  color: var(--semmet-color-on-surface);
+  background: var(--semmet-color-surface-muted);
+}
+
+.semmet-navbar__link--current {
+  color: var(--semmet-color-on-surface);
+  background: var(--semmet-color-surface-muted);
+}
+
+.semmet-navbar__link--disabled {
+  cursor: not-allowed;
+  opacity: 0.52;
+}
+
+.semmet-navbar__brand:focus-visible,
+.semmet-navbar__toggle:focus-visible,
+.semmet-navbar__link:focus-visible {
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: 2px;
+}
+
+@media (min-width: 48rem) {
+  .semmet-navbar {
+    grid-template-columns: auto 1fr;
+    padding-inline: 1rem;
+  }
+
+  .semmet-navbar__toggle {
+    display: none;
+  }
+
+  .semmet-navbar__menu {
+    display: block;
+    grid-column: auto;
+  }
+
+  .semmet-navbar__list {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.25rem;
+    padding: 0;
+  }
+}

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

@@ -0,0 +1,36 @@
+<!-- Semmet Angular: Navbar - semantic navigation with responsive disclosure behavior. -->
+<!-- Deliberately avoids role="menu"; regular site navigation should stay as nav/list/link semantics. -->
+<nav class="semmet-navbar" [attr.aria-label]="label()">
+  <a class="semmet-navbar__brand" [href]="brandHref()">{{ brand() }}</a>
+
+  <button
+    type="button"
+    class="semmet-navbar__toggle"
+    [attr.aria-label]="toggleLabel()"
+    [attr.aria-controls]="instanceId + '-menu'"
+    [attr.aria-expanded]="expanded()"
+    (click)="toggle()"
+  >
+    <span aria-hidden="true"></span>
+  </button>
+
+  <div [id]="instanceId + '-menu'" [class]="menuClasses()">
+    <ul class="semmet-navbar__list">
+      @for (item of items(); track item.href) {
+        <li class="semmet-navbar__item">
+          <a
+            class="semmet-navbar__link"
+            [class.semmet-navbar__link--current]="item.current"
+            [class.semmet-navbar__link--disabled]="item.disabled"
+            [href]="item.disabled ? null : item.href"
+            [attr.aria-current]="item.current ? 'page' : null"
+            [attr.aria-disabled]="item.disabled ? 'true' : null"
+            (click)="close()"
+          >
+            {{ item.label }}
+          </a>
+        </li>
+      }
+    </ul>
+  </div>
+</nav>

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

@@ -0,0 +1,47 @@
+import { Component, computed, input, signal } from '@angular/core';
+
+interface <%= classify(name) %>Item {
+  label: string;
+  href: string;
+  current?: boolean;
+  disabled?: boolean;
+}
+
+const DEFAULT_ITEMS: readonly <%= classify(name) %>Item[] = [
+  { label: 'Home', href: '/', current: true },
+  { label: 'Projects', href: '/projects' },
+  { label: 'About', href: '/about' },
+  { label: 'Contact', href: '/contact' },
+];
+
+let nextId = 0;
+
+@Component({
+  selector: '<%= selector %>',
+  imports: [],
+  templateUrl: './<%= dasherize(name) %>.html',
+  styleUrl: './<%= dasherize(name) %>.css',
+})
+export class <%= classify(name) %> {
+  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+  protected readonly expanded = signal(false);
+
+  readonly label = input('Primary navigation');
+  readonly brand = input('Semmet');
+  readonly brandHref = input('/');
+  readonly toggleLabel = input('Toggle navigation');
+  readonly items = input<readonly <%= classify(name) %>Item[]>(DEFAULT_ITEMS);
+
+  protected readonly menuClasses = computed(() => [
+    'semmet-navbar__menu',
+    this.expanded() ? 'semmet-navbar__menu--open' : '',
+  ].filter(Boolean).join(' '));
+
+  protected toggle(): void {
+    this.expanded.update((value) => !value);
+  }
+
+  protected close(): void {
+    this.expanded.set(false);
+  }
+}

package/src/navbar/index.d.ts

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

package/src/navbar/index.js

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

package/src/navbar/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,GAAE,CAAC"}

package/src/navbar/index.ts

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

package/src/navbar/schema.d.ts

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

package/src/navbar/schema.js

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

package/src/navbar/schema.js.map

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

package/src/navbar/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularNavbar",
+  "title": "Semmet Angular Navbar Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Navbar component with semantic navigation, responsive disclosure toggle, and current-page state.",
+  "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 navbar component?"
+    },
+    "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/navbar/schema.ts

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