@cobwds/mcp-server 1.19.3

package/data/guides/fonts.md

@@ -0,0 +1,56 @@
+# COBWDS Font Setup Guide
+
+## Overview
+
+COBWDS uses two open-license Google Fonts:
+
+- **Lora** — body text
+- **Montserrat** — headings, display text, agency titles, and UI elements
+
+## Installation (Google Fonts)
+
+Add this to your HTML head:
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
+```
+
+Or include the Storybook helper stylesheet:
+
+```html
+<link rel="stylesheet" href="/assets/fonts/cobwds-fonts.css">
+```
+
+## Font Tokens
+
+| Token | Description | Font |
+|-------|-------------|------|
+| `--cob-font-family-body` | Body / paragraph text | Lora |
+| `--cob-font-family-ui` | Buttons, labels, forms | Montserrat |
+| `--cob-font-family-heading` | h1–h6 | Montserrat |
+| `--cob-font-family-display` | Hero / display text | Montserrat |
+| `--cob-font-family-agency` | Agency / program titles | Montserrat |
+| `--cob-font-family-serif` | Primitive serif | Lora |
+| `--cob-font-family-sans` | Primitive sans | Montserrat |
+| `--cob-font-family-monospace` | Code | Roboto Mono / system mono |
+
+### Usage Example
+```css
+.custom-heading {
+  font-family: var(--cob-font-family-heading);
+}
+
+.custom-body {
+  font-family: var(--cob-font-family-body);
+}
+```
+
+## Fallback Fonts
+
+If custom fonts are unavailable, the web design system falls back to:
+
+- **Serif (Lora):** Georgia, Cambria, Times New Roman, Times, serif
+- **Sans (Montserrat):** -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif
+- **Monospace:** Consolas, Courier, monospace

package/data/guides/form-validation.md

@@ -0,0 +1,169 @@
+# COBWDS Form Validation Guide
+
+## Overview
+
+COBWDS form components include built-in validation support using the `showError` and `errorMessage` properties. All form components integrate with ElementInternals for native form validation.
+
+## Error Display Properties
+
+All COBWDS form components support these validation properties:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `showError` | boolean | When true, displays the error state |
+| `errorMessage` | string | The error message to display |
+| `required` | boolean | Marks the field as required |
+
+## Error Summary Pattern
+
+Display an error summary at the top of forms with links to each field:
+
+```html
+<cob-alert type="danger" heading="Please correct the following errors">
+  <ul>
+    <li><a href="#email-field">Email address is required</a></li>
+    <li><a href="#phone-field">Phone number format is invalid</a></li>
+  </ul>
+</cob-alert>
+```
+
+This pattern:
+- Appears at the top of the form after submission attempt
+- Lists all errors with anchor links to the fields
+- Helps users quickly navigate to problem areas
+- Is essential for accessibility (screen reader users)
+
+## Inline Error Pattern
+
+Display errors directly on the form fields:
+
+```html
+<cob-textinput
+  id="email-field"
+  label="Email"
+  required
+  showError
+  errorMessage="Please enter a valid email address"
+></cob-textinput>
+
+<cob-select
+  id="state-field"
+  label="State"
+  required
+  showError
+  errorMessage="Please select a state"
+></cob-select>
+
+<cob-radiogroup
+  id="preference-field"
+  label="Contact Preference"
+  showError
+  errorMessage="Please select a contact preference"
+>
+  <cob-radiobutton label="Email" value="email"></cob-radiobutton>
+  <cob-radiobutton label="Phone" value="phone"></cob-radiobutton>
+</cob-radiogroup>
+```
+
+## Complete Form Example
+
+```html
+<form id="contact-form" novalidate>
+  <!-- Error summary (hidden initially, shown on validation failure) -->
+  <cob-alert id="error-summary" type="danger" heading="Please correct the following errors" hidden>
+    <ul id="error-list"></ul>
+  </cob-alert>
+
+  <cob-textinput
+    id="name-field"
+    label="Full Name"
+    required
+    class="cob-margin-b-300"
+  ></cob-textinput>
+
+  <cob-textinput
+    id="email-field"
+    label="Email Address"
+    type="email"
+    required
+    class="cob-margin-b-300"
+  ></cob-textinput>
+
+  <cob-textarea
+    id="message-field"
+    label="Message"
+    required
+    class="cob-margin-b-400"
+  ></cob-textarea>
+
+  <cob-button type="submit" label="Submit"></cob-button>
+</form>
+```
+
+## JavaScript Validation Example
+
+```javascript
+const form = document.getElementById('contact-form');
+const errorSummary = document.getElementById('error-summary');
+const errorList = document.getElementById('error-list');
+
+form.addEventListener('submit', (e) => {
+  e.preventDefault();
+
+  const errors = [];
+
+  // Validate each field
+  const nameField = document.getElementById('name-field');
+  if (!nameField.value) {
+    nameField.showError = true;
+    nameField.errorMessage = 'Full name is required';
+    errors.push({ id: 'name-field', message: 'Full name is required' });
+  } else {
+    nameField.showError = false;
+  }
+
+  const emailField = document.getElementById('email-field');
+  if (!emailField.value) {
+    emailField.showError = true;
+    emailField.errorMessage = 'Email address is required';
+    errors.push({ id: 'email-field', message: 'Email address is required' });
+  } else if (!isValidEmail(emailField.value)) {
+    emailField.showError = true;
+    emailField.errorMessage = 'Please enter a valid email address';
+    errors.push({ id: 'email-field', message: 'Please enter a valid email address' });
+  } else {
+    emailField.showError = false;
+  }
+
+  // Show/hide error summary
+  if (errors.length > 0) {
+    errorList.innerHTML = errors
+      .map(err => `<li><a href="#${err.id}">${err.message}</a></li>`)
+      .join('');
+    errorSummary.hidden = false;
+    errorSummary.scrollIntoView({ behavior: 'smooth' });
+  } else {
+    errorSummary.hidden = true;
+    form.submit();
+  }
+});
+```
+
+## Form Components with Validation Support
+
+The following COBWDS components support `showError` and `errorMessage`:
+
+- `cob-textinput` - Text input fields
+- `cob-textarea` - Multi-line text areas
+- `cob-select` - Dropdown selects
+- `cob-radiogroup` - Radio button groups
+- `cob-checkbox` - Checkboxes
+- `cob-checkboxgroup` - Checkbox groups
+- `cob-date` - Date pickers
+
+## Accessibility Considerations
+
+1. **Error summary links**: Include anchor links to fields for keyboard navigation
+2. **Focus management**: Move focus to error summary or first error field on validation failure
+3. **ARIA attributes**: COBWDS components automatically set `aria-invalid` and `aria-describedby`
+4. **Clear error messages**: Use specific, actionable error text

package/data/guides/frameworks/angular.md

@@ -0,0 +1,71 @@
+# COBWDS with Angular
+
+> **Note:** Angular integration is currently untested. The guidance below is based on standard web component usage patterns and may require adjustments.
+
+## Installation
+
+```bash
+npm install @cobwds/components @cobwds/styles
+```
+
+## Load styles
+
+Add the COBWDS stylesheet to `angular.json`:
+
+```json
+{
+  "projects": {
+    "your-app": {
+      "architect": {
+        "build": {
+          "options": {
+            "styles": [
+              "node_modules/@cobwds/styles/dist/cobwds-full.min.css",
+              "src/styles.css"
+            ]
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+Use `cobwds-full.min.css` for new projects (includes reset, typography, and utilities) or `cobwds.min.css` for existing projects (CSS variables only).
+
+## Configuration
+
+Add `CUSTOM_ELEMENTS_SCHEMA` to your module so Angular allows custom element tags:
+
+```typescript
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class AppModule {}
+```
+
+For standalone components:
+
+```typescript
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+@Component({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<cob-button label="Click me"></cob-button>`
+})
+export class MyComponent {}
+```
+
+## Usage
+
+Import components in the component or module where they're used:
+
+```typescript
+import '@cobwds/cob-button';
+```
+
+```html
+<cob-button label="Click me"></cob-button>
+```

package/data/guides/frameworks/dotnet.md

@@ -0,0 +1,42 @@
+# COBWDS with .NET / Blazor
+
+> **Note:** .NET / Blazor integration is currently untested. The guidance below is based on standard web component usage patterns and may require adjustments.
+
+## Installation
+
+Add the COBWDS scripts and styles to your layout file (e.g., `_Layout.cshtml` or `App.razor`).
+
+Install via npm:
+
+```bash
+npm install @cobwds/components @cobwds/styles
+```
+
+Then reference in your layout:
+
+```html
+<head>
+  <!-- New project: includes reset, typography, and utility classes -->
+  <link rel="stylesheet" href="node_modules/@cobwds/styles/dist/cobwds-full.min.css" />
+
+  <!-- Existing project: CSS variables only -->
+  <!-- <link rel="stylesheet" href="node_modules/@cobwds/styles/dist/cobwds.min.css" /> -->
+
+  <script type="module" src="node_modules/@cobwds/components/dist/cobwds.es.js"></script>
+</head>
+```
+
+## Usage in Razor
+
+```razor
+<cob-button label="Click me"></cob-button>
+<cob-alert type="info">This is an informational message.</cob-alert>
+```
+
+## Usage in Blazor
+
+Blazor treats unknown elements as custom elements by default. No additional configuration is needed:
+
+```razor
+<cob-button label="Submit" variant="filled"></cob-button>
+```

package/data/guides/frameworks/drupal.md

@@ -0,0 +1,39 @@
+# COBWDS with Drupal
+
+> **Note:** Drupal integration is currently untested. The guidance below is based on standard web component usage patterns and may require adjustments.
+
+## Installation
+
+Install the packages:
+
+```bash
+npm install @cobwds/components @cobwds/styles
+```
+
+Add the COBWDS styles and scripts to your theme's `*.libraries.yml`:
+
+```yaml
+cobwds:
+  css:
+    theme:
+      # New project: includes reset, typography, and utility classes
+      /node_modules/@cobwds/styles/dist/cobwds-full.min.css: { minified: true }
+      # Existing project: CSS variables only
+      # /node_modules/@cobwds/styles/dist/cobwds.min.css: { minified: true }
+  js:
+    /node_modules/@cobwds/components/dist/cobwds.es.js: { attributes: { type: module } }
+```
+
+Then attach the library in your theme's `.info.yml`:
+
+```yaml
+libraries:
+  - mytheme/cobwds
+```
+
+## Usage in Twig
+
+```twig
+<cob-button label="{{ 'Click me'|t }}"></cob-button>
+<cob-alert type="info">{{ 'This is an alert.'|t }}</cob-alert>
+```

package/data/guides/frameworks/react.md

@@ -0,0 +1,115 @@
+# COBWDS with React
+
+> **Note:** React integration is currently untested. The guidance below is based on standard web component usage patterns and may require adjustments.
+
+## Installation
+
+```bash
+npm install @cobwds/components @cobwds/styles
+```
+
+## Load styles
+
+Import the COBWDS stylesheet in your app entry point (e.g., `index.tsx` or `App.tsx`):
+
+```tsx
+// New project: includes reset, typography, and utility classes
+import '@cobwds/styles/dist/cobwds-full.min.css';
+
+// Existing project: CSS variables only (styles components, nothing else)
+// import '@cobwds/styles/dist/cobwds.min.css';
+```
+
+## Usage
+
+Import components and use them in JSX:
+
+```tsx
+import '@cobwds/cob-button';
+import '@cobwds/cob-alert';
+
+function App() {
+  return (
+    <div>
+      <cob-button label="Click me"></cob-button>
+      <cob-alert type="info">This is an alert.</cob-alert>
+    </div>
+  );
+}
+```
+
+## Notes on web components in React
+
+- String attributes work normally: `<cob-button label="Click me" />`
+- For event listeners, use `ref` and `addEventListener` — React's synthetic event system doesn't forward to custom elements
+- Boolean attributes should be set explicitly: `<cob-button disabled={true} />`
+
+## Using the stepper in React (multi-page pattern)
+
+`cob-stepper` requires careful state management in React. Two state variables are needed:
+
+- `currentStep` — the furthest step the user has reached (progress boundary). Maps to the `current` prop on `CobStep`.
+- `viewingStep` — which step's content is currently displayed. Maps to the `selected` prop on `CobStep`.
+
+**Always pass both `current` and `selected` explicitly from React state.** Without explicit `selected`, the stepper's internal fallback will override the user's sidebar navigation on every React re-render.
+
+**Event listening:** Use `onNysStepClick` on each `CobStep` (not on `CobStepper`). Always call `e.preventDefault()` to suppress `href`-based page navigation.
+
+**Do not use `href` for SPA routing.** Omit `href` and handle step changes entirely in React state.
+
+**Do not place `<CobStepper>` inside a `<form>` element.**
+
+```tsx
+import { useState } from 'react';
+import { CobStepper, CobStep, CobButton } from '@cobwds/components/react';
+
+const STEPS = [
+  { label: 'Personal Info',   content: <PersonalInfoForm /> },
+  { label: 'Contact Details', content: <ContactForm /> },
+  { label: 'Review',          content: <ReviewForm /> },
+];
+
+export function MultiStepForm() {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [viewingStep, setViewingStep] = useState(0);
+
+  function handleContinue() {
+    if (viewingStep < STEPS.length - 1) {
+      setCurrentStep(viewingStep + 1);
+      setViewingStep(viewingStep + 1);
+    }
+  }
+
+  return (
+    <div className="cob-grid-row">
+      <CobStepper label="Application" className="cob-grid-col-12 cob-desktop:cob-grid-col-3">
+        {STEPS.map((step, i) => (
+          <CobStep
+            key={i}
+            label={step.label}
+            current={i === currentStep}
+            selected={i === viewingStep}
+            onNysStepClick={(e) => { e.preventDefault(); setViewingStep(i); }}
+          />
+        ))}
+        <div slot="actions">
+          <CobButton label="Save & Exit" variant="outline" fullWidth />
+        </div>
+      </CobStepper>
+
+      <main className="cob-grid-col-12 cob-desktop:cob-grid-col-9">
+        {STEPS[viewingStep].content}
+        <div style={{ display: 'flex', gap: '8px', marginTop: '16px' }}>
+          {viewingStep > 0 && (
+            <CobButton label="Back" variant="outline"
+              onNysClick={() => setViewingStep((v) => v - 1)} />
+          )}
+          {viewingStep === currentStep && currentStep < STEPS.length - 1 && (
+            <CobButton label="Continue" onNysClick={handleContinue} />
+          )}
+        </div>
+      </main>
+    </div>
+  );
+}
+```

package/data/guides/frameworks/vanilla.md

@@ -0,0 +1,45 @@
+# COBWDS with Vanilla JavaScript
+
+## Installation
+
+```bash
+npm install @cobwds/components @cobwds/styles
+```
+
+## Load styles
+
+Choose the right stylesheet for your project:
+
+```html
+<!-- New project: includes reset, typography, and utility classes -->
+<link rel="stylesheet" href="node_modules/@cobwds/styles/dist/cobwds-full.min.css" />
+
+<!-- Existing project: CSS variables only (styles components, nothing else) -->
+<link rel="stylesheet" href="node_modules/@cobwds/styles/dist/cobwds.min.css" />
+```
+
+## Usage
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <link rel="stylesheet" href="node_modules/@cobwds/styles/dist/cobwds-full.min.css" />
+  <script type="module">
+    import '@cobwds/components';
+  </script>
+</head>
+<body>
+  <cob-button label="Click me"></cob-button>
+</body>
+</html>
+```
+
+You can also import individual components to reduce bundle size:
+
+```html
+<script type="module">
+  import '@cobwds/cob-button';
+  import '@cobwds/cob-alert';
+</script>
+```

package/data/guides/installation.md

@@ -0,0 +1,73 @@
+# COBWDS Installation Guide
+
+## 1. Install the component package
+
+```bash
+npm install @cobwds/components
+```
+
+## 2. Load the styles
+
+COBWDS components require CSS variables to render correctly. Choose the right stylesheet based on your project:
+
+### New project (recommended)
+
+Use `cobwds-full.min.css` — includes a CSS reset, typography styles, and utility/layout classes:
+
+```html
+<link rel="stylesheet" href="/path/to/cobwds-full.min.css" />
+```
+
+### Existing project
+
+If you already have a CSS reset and typography, use `cobwds.min.css` — loads only the CSS variables that style the components:
+
+```html
+<link rel="stylesheet" href="/path/to/cobwds.min.css" />
+```
+
+### Via npm
+
+```bash
+npm install @cobwds/styles
+```
+
+```css
+/* New project — full bundle with reset, typography, and utilities */
+@import '@cobwds/styles/full';
+
+/* Existing project — CSS variables only */
+@import '@cobwds/styles';
+```
+
+## 3. Import and use components
+
+Import components individually:
+
+```javascript
+import '@cobwds/cob-button';
+import '@cobwds/cob-alert';
+```
+
+Or import all components:
+
+```javascript
+import '@cobwds/components';
+```
+
+Then use them in HTML:
+
+```html
+<cob-button label="Click me" variant="filled"></cob-button>
+<cob-alert type="info">This is an informational message.</cob-alert>
+```
+
+## Style bundles reference
+
+| File | Reset | Typography | Utilities | CSS Variables |
+|------|-------|------------|-----------|---------------|
+| `cobwds-full.min.css` | Yes | Yes | Yes | Yes |
+| `cobwds-typography.min.css` | No | Yes | No | Yes |
+| `cobwds.min.css` | No | No | No | Yes |
+
+Use the `get_tokens` tool to explore available design tokens, or `get_utility_classes` for layout and spacing utilities.