semmet-angular 0.11.0 → 0.12.0

package/README.md

@@ -10,7 +10,7 @@
 
 ## Usage
 
-```bash
+```
 npm install -D semmet-angular
 ng generate semmet-angular:accordion my-faq
 ```
@@ -25,7 +25,7 @@ Some generated components are containers: they own the ARIA wiring, keyboard beh
 
 Example after generating `faq`:
 
-```ts
+```
 import { Component, signal } from '@angular/core';
 import { Faq, FaqItem } from './faq/faq';
 import { ProfilePanel } from './profile-panel/profile-panel';
@@ -43,7 +43,7 @@ export class App {
 }
 ```
 
-```html
+```
 <app-faq>
   <ng-template faqItem id="profile" title="Profile" [expanded]="true">
     <app-profile-panel />
@@ -57,7 +57,7 @@ export class App {
 
 The same pattern applies to `tabs`, `carousel`, and `disclosure`:
 
-```html
+```
 <app-settings-tabs>
   <ng-template settingsTabsItem id="profile" label="Profile" [selected]="true">
     <app-profile-panel />
@@ -79,7 +79,7 @@ The same pattern applies to `tabs`, `carousel`, and `disclosure`:
 
 By default, projected panel/slide content is preserved after its first render. Set `[preserveContent]="false"` on the generated container to destroy inactive content when it closes or becomes inactive.
 
-## Schematics (33)
+## Schematics (43)
 
 **Overlays & disclosure**
 
@@ -89,9 +89,13 @@ By default, projected panel/slide content is preserved after its first render. S
 | `ng generate semmet-angular:disclosure <name>` | [Disclosure](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) | Click/Enter/Space toggle |
 | `ng generate semmet-angular:dialog <name>` | [Dialog (Modal)](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) | Focus moves in on open; Tab/Shift+Tab focus trap; Escape closes; focus returns to trigger on close |
 | `ng generate semmet-angular:alert-dialog <name>` | [Alert Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/) | Same focus trap as Dialog; initial focus on the least destructive action (Cancel) |
+| `ng generate semmet-angular:offcanvas <name>` | Offcanvas / Drawer | Modal dialog semantics; focus moves in; Tab/Shift+Tab focus trap; Escape/backdrop close; focus returns to trigger |
+| `ng generate semmet-angular:popover <name>` | Popover | Disclosure trigger with `aria-haspopup="dialog"`; Escape closes; outside click dismisses |
 | `ng generate semmet-angular:tooltip <name>` | [Tooltip](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/) | Shows on hover **and** focus (required for keyboard users); hides on blur/mouseleave/Escape |
 | `ng generate semmet-angular:menu-button <name>` | [Menu Button](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/) | Up/Down/Home/End/Escape inside the menu; closes on outside click; focus returns to the trigger |
 | `ng generate semmet-angular:button <name>` | Button | Native `<button>` with variant, size, disabled, busy, and optional pressed state |
+| `ng generate semmet-angular:button-group <name>` | Button Group | Native grouped buttons with `role="group"` and optional `aria-pressed` toggle state |
+| `ng generate semmet-angular:close-button <name>` | Close Button | Native icon button with required accessible label |
 
 **Navigation & structure**
 
@@ -100,12 +104,14 @@ By default, projected panel/slide content is preserved after its first render. S
 | `ng generate semmet-angular:tabs <name>` | [Tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) | Automatic activation; Left/Right/Home/End with roving `tabindex` |
 | `ng generate semmet-angular:breadcrumb <name>` | [Breadcrumb](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/) | Static — plain links + `aria-current="page"` |
 | `ng generate semmet-angular:navigation-menu <name>` | [Navigation Menu (Disclosure)](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/) | Click/Enter/Space toggles the submenu — deliberately avoids `role="menu"`, reserved for app-style menus |
+| `ng generate semmet-angular:navbar <name>` | Navbar | Semantic `nav`/list/link structure with responsive disclosure toggle and `aria-current` |
 | `ng generate semmet-angular:pagination <name>` | Pagination | Working page state; Previous/Next disable at the boundaries |
 | `ng generate semmet-angular:skip-link <name>` | [Skip Link](https://www.w3.org/WAI/WCAG21/Techniques/general/G1) | Hidden until focused, per the standard skip-link pattern |
 | `ng generate semmet-angular:landmarks <name>` | [Landmarks (Page Skeleton)](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/) | Content-projected layout wrapper (`header`/`nav`/`main`/`aside`/`footer` slots) |
 | `ng generate semmet-angular:tree-view <name>` | [Tree View](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/) | Up/Down/Left/Right/Home/End/Enter with roving `tabindex` across visible nodes |
 | `ng generate semmet-angular:toolbar <name>` | [Toolbar](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/) | Left/Right/Home/End with roving `tabindex` |
 | `ng generate semmet-angular:card <name>` | Card | Static — semantic `<article>` + heading structure |
+| `ng generate semmet-angular:list-group <name>` | List Group | Semantic list structure with action items, active state, optional badges, and disabled states |
 | `ng generate semmet-angular:table <name>` | [Table](https://www.w3.org/WAI/ARIA/apg/patterns/table/) | Static — caption + scoped headers |
 
 **Forms & inputs**
@@ -114,6 +120,8 @@ By default, projected panel/slide content is preserved after its first render. S
 |---|---|---|
 | `ng generate semmet-angular:form <name>` | Form | Native `<form>` with labeled controls, inline validation, and status messaging |
 | `ng generate semmet-angular:input <name>` | Input | Native `<input>` with label, hint, validation message wiring, and signal-backed value |
+| `ng generate semmet-angular:select <name>` | Select | Native `<select>` with label, hint, validation message wiring, and signal-backed value |
+| `ng generate semmet-angular:input-group <name>` | Input Group | Native `<input>` with prefix/suffix addons announced via `aria-describedby` and optional action button |
 | `ng generate semmet-angular:textarea <name>` | Textarea | Native `<textarea>` with label, hint, counter, validation message wiring, and signal-backed value |
 | `ng generate semmet-angular:checkbox <name>` | [Checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/) | Click/Enter/Space toggle |
 | `ng generate semmet-angular:radio-group <name>` | [Radio Group](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) | Up/Down/Left/Right/Home/End move focus and selection together |
@@ -132,6 +140,8 @@ By default, projected panel/slide content is preserved after its first render. S
 | `ng generate semmet-angular:alert <name>` | [Alert](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) | Dismissible assertive live region |
 | `ng generate semmet-angular:toast <name>` | Toast / Notification | Auto-dismisses after 5s (cleaned up via `DestroyRef`); dismissible early |
 | `ng generate semmet-angular:skeleton <name>` | Skeleton Loading | Composable loading placeholder for text, media, circles, cards, and custom blocks |
+| `ng generate semmet-angular:badge <name>` | Badge | Compact status label/counter with decorative mode and optional accessible label |
+| `ng generate semmet-angular:spinner <name>` | Spinner | Loading status with `role="status"`, visually hidden label by default, and reduced-motion support |
 | `ng generate semmet-angular:carousel <name>` | [Carousel](https://www.w3.org/WAI/ARIA/apg/patterns/carousel/) | Previous/Next controls; `aria-live="polite"` slide region |
 
 ## What every generated component looks like

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "semmet-angular",
-  "version": "0.11.0",
+  "version": "0.12.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/badge/files/__name@dasherize__/__name@dasherize__.css.template

@@ -0,0 +1,102 @@
+:host {
+  --semmet-color-primary: #18181b;
+  --semmet-color-on-primary: #ffffff;
+  --semmet-color-neutral: #f4f4f5;
+  --semmet-color-on-neutral: #27272a;
+  --semmet-color-success: #067647;
+  --semmet-color-on-success: #ffffff;
+  --semmet-color-warning: #b54708;
+  --semmet-color-on-warning: #ffffff;
+  --semmet-color-danger: #b42318;
+  --semmet-color-on-danger: #ffffff;
+  --semmet-color-info: #175cd3;
+  --semmet-color-on-info: #ffffff;
+  --semmet-radius-full: 999px;
+  --semmet-radius-sm: 6px;
+
+  display: inline-block;
+  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
+}
+
+.semmet-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  border-radius: var(--semmet-radius-sm);
+  font-weight: 700;
+  line-height: 1;
+  white-space: nowrap;
+  vertical-align: baseline;
+}
+
+.semmet-badge--sm {
+  min-height: 1.25rem;
+  padding: 0.25rem 0.375rem;
+  font-size: 0.6875rem;
+}
+
+.semmet-badge--md {
+  min-height: 1.5rem;
+  padding: 0.3125rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+.semmet-badge--lg {
+  min-height: 1.75rem;
+  padding: 0.375rem 0.625rem;
+  font-size: 0.8125rem;
+}
+
+.semmet-badge--pill {
+  border-radius: var(--semmet-radius-full);
+}
+
+.semmet-badge--dot {
+  min-width: auto;
+  padding-inline-start: 0.375rem;
+}
+
+.semmet-badge--dot:has(.semmet-badge__dot):not(:has(.semmet-badge__label)) {
+  width: 0.75rem;
+  min-height: 0.75rem;
+  padding: 0;
+  border-radius: var(--semmet-radius-full);
+}
+
+.semmet-badge__dot {
+  width: 0.5em;
+  height: 0.5em;
+  border-radius: var(--semmet-radius-full);
+  background: currentColor;
+}
+
+.semmet-badge--neutral {
+  color: var(--semmet-color-on-neutral);
+  background: var(--semmet-color-neutral);
+}
+
+.semmet-badge--primary {
+  color: var(--semmet-color-on-primary);
+  background: var(--semmet-color-primary);
+}
+
+.semmet-badge--success {
+  color: var(--semmet-color-on-success);
+  background: var(--semmet-color-success);
+}
+
+.semmet-badge--warning {
+  color: var(--semmet-color-on-warning);
+  background: var(--semmet-color-warning);
+}
+
+.semmet-badge--danger {
+  color: var(--semmet-color-on-danger);
+  background: var(--semmet-color-danger);
+}
+
+.semmet-badge--info {
+  color: var(--semmet-color-on-info);
+  background: var(--semmet-color-info);
+}

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

@@ -0,0 +1,14 @@
+<!-- Semmet Angular: Badge - compact text metadata, status labels, or counters. -->
+<span
+  [id]="instanceId"
+  [class]="badgeClasses()"
+  [attr.aria-hidden]="ariaHidden()"
+  [attr.aria-label]="ariaLabel()"
+>
+  @if (dot()) {
+    <span class="semmet-badge__dot" aria-hidden="true"></span>
+  }
+  @if (!dot() || label()) {
+    <span class="semmet-badge__label">{{ label() }}</span>
+  }
+</span>

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

@@ -0,0 +1,43 @@
+import { Component, booleanAttribute, computed, input } from '@angular/core';
+
+type <%= classify(name) %>Variant = 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+type <%= classify(name) %>Size = 'sm' | 'md' | 'lg';
+
+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('Badge');
+  readonly variant = input<<%= classify(name) %>Variant>('neutral');
+  readonly size = input<<%= classify(name) %>Size>('md');
+  readonly pill = input(false, { transform: booleanAttribute });
+  readonly dot = input(false, { transform: booleanAttribute });
+  readonly decorative = input(false, { transform: booleanAttribute });
+  readonly accessibleLabel = input('');
+
+  protected readonly badgeClasses = computed(() => [
+    'semmet-badge',
+    `semmet-badge--${this.variant()}`,
+    `semmet-badge--${this.size()}`,
+    this.pill() ? 'semmet-badge--pill' : '',
+    this.dot() ? 'semmet-badge--dot' : '',
+  ].filter(Boolean).join(' '));
+
+  protected readonly ariaHidden = computed(() => this.decorative() ? 'true' : null);
+
+  protected readonly ariaLabel = computed(() => {
+    if (this.decorative()) {
+      return null;
+    }
+
+    const label = this.accessibleLabel().trim();
+    return label.length > 0 ? label : null;
+  });
+}

package/src/badge/index.d.ts

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

package/src/badge/index.js

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

package/src/badge/index.js.map

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

package/src/badge/index.ts

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

package/src/badge/schema.d.ts

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

package/src/badge/schema.js

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

package/src/badge/schema.js.map

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

package/src/badge/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularBadge",
+  "title": "Semmet Angular Badge Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Badge component for accessible status labels, counters, and compact metadata.",
+  "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 badge 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/badge/schema.ts

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

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

@@ -0,0 +1,93 @@
+: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-radius-sm: 8px;
+  --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
+
+  display: inline-block;
+  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
+}
+
+.semmet-button-group {
+  display: inline-flex;
+  border: 1px solid var(--semmet-color-outline);
+  border-radius: var(--semmet-radius-sm);
+  overflow: hidden;
+  background: var(--semmet-color-surface);
+}
+
+.semmet-button-group--vertical {
+  flex-direction: column;
+}
+
+.semmet-button-group__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2.75rem;
+  border: 0;
+  border-inline-end: 1px solid var(--semmet-color-outline);
+  color: var(--semmet-color-on-surface);
+  background: var(--semmet-color-surface);
+  font: inherit;
+  font-weight: 650;
+  line-height: 1.2;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    background-color var(--semmet-motion),
+    color var(--semmet-motion),
+    opacity var(--semmet-motion);
+}
+
+.semmet-button-group--vertical .semmet-button-group__button {
+  border-inline-end: 0;
+  border-block-end: 1px solid var(--semmet-color-outline);
+}
+
+.semmet-button-group__button:last-child {
+  border-inline-end: 0;
+  border-block-end: 0;
+}
+
+.semmet-button-group--sm .semmet-button-group__button {
+  min-height: 2rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.semmet-button-group--md .semmet-button-group__button {
+  min-height: 2.5rem;
+  padding: 0.5rem 1rem;
+}
+
+.semmet-button-group--lg .semmet-button-group__button {
+  min-height: 3rem;
+  padding: 0.75rem 1.25rem;
+  font-size: 1rem;
+}
+
+.semmet-button-group__button:hover:not(:disabled) {
+  background: var(--semmet-color-surface-muted);
+}
+
+.semmet-button-group__button--pressed {
+  color: var(--semmet-color-on-primary);
+  background: var(--semmet-color-primary);
+}
+
+.semmet-button-group__button:disabled {
+  cursor: not-allowed;
+  opacity: 0.52;
+}
+
+.semmet-button-group__button:focus-visible {
+  position: relative;
+  z-index: 1;
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: -2px;
+}

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

@@ -0,0 +1,20 @@
+<!-- Semmet Angular: Button Group - grouped native buttons with optional toggle state. -->
+<div
+  [id]="instanceId"
+  [class]="groupClasses()"
+  role="group"
+  [attr.aria-label]="label()"
+>
+  @for (item of items(); track item.id) {
+    <button
+      type="button"
+      class="semmet-button-group__button"
+      [class.semmet-button-group__button--pressed]="isPressed(item)"
+      [disabled]="disabled() || item.disabled"
+      [attr.aria-pressed]="ariaPressed(item)"
+      (click)="activate(item)"
+    >
+      {{ item.label }}
+    </button>
+  }
+</div>

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

@@ -0,0 +1,85 @@
+import { Component, booleanAttribute, computed, input, signal } from '@angular/core';
+
+type <%= classify(name) %>Orientation = 'horizontal' | 'vertical';
+type <%= classify(name) %>SelectionMode = 'none' | 'single' | 'multiple';
+type <%= classify(name) %>Size = 'sm' | 'md' | 'lg';
+
+interface <%= classify(name) %>Item {
+  id: string;
+  label: string;
+  disabled?: boolean;
+  pressed?: boolean;
+}
+
+const DEFAULT_ITEMS: readonly <%= classify(name) %>Item[] = [
+  { id: 'day', label: 'Day', pressed: true },
+  { id: 'week', label: 'Week' },
+  { id: 'month', label: 'Month' },
+];
+
+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('View options');
+  readonly orientation = input<<%= classify(name) %>Orientation>('horizontal');
+  readonly selectionMode = input<<%= classify(name) %>SelectionMode>('single');
+  readonly size = input<<%= classify(name) %>Size>('md');
+  readonly disabled = input(false, { transform: booleanAttribute });
+  readonly items = input<readonly <%= classify(name) %>Item[]>(DEFAULT_ITEMS);
+
+  protected readonly selectedIds = signal<ReadonlySet<string>>(
+    new Set(DEFAULT_ITEMS.filter((item) => item.pressed).map((item) => item.id)),
+  );
+
+  protected readonly groupClasses = computed(() => [
+    'semmet-button-group',
+    `semmet-button-group--${this.orientation()}`,
+    `semmet-button-group--${this.size()}`,
+  ].join(' '));
+
+  protected isPressed(item: <%= classify(name) %>Item): boolean | null {
+    if (this.selectionMode() === 'none') {
+      return item.pressed ?? null;
+    }
+
+    return this.selectedIds().has(item.id);
+  }
+
+  protected ariaPressed(item: <%= classify(name) %>Item): string | null {
+    const pressed = this.isPressed(item);
+    return pressed === null ? null : String(pressed);
+  }
+
+  protected activate(item: <%= classify(name) %>Item): void {
+    if (this.disabled() || item.disabled) {
+      return;
+    }
+
+    if (this.selectionMode() === 'none') {
+      return;
+    }
+
+    if (this.selectionMode() === 'single') {
+      this.selectedIds.set(new Set([item.id]));
+      return;
+    }
+
+    this.selectedIds.update((selectedIds) => {
+      const next = new Set(selectedIds);
+      if (next.has(item.id)) {
+        next.delete(item.id);
+      } else {
+        next.add(item.id);
+      }
+      return next;
+    });
+  }
+}

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

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

package/src/button-group/index.js

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

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

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

package/src/button-group/index.ts

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

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

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

package/src/button-group/schema.js

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

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

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

package/src/button-group/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularButtonGroup",
+  "title": "Semmet Angular Button Group Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Button Group component with grouped native buttons and optional toggle 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 button 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/button-group/schema.ts

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