@cobwds/mcp-server 1.19.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/README.md +235 -0
  2. package/data/cem/custom-elements.json +15923 -0
  3. package/data/guides/.gitkeep +0 -0
  4. package/data/guides/fonts.md +56 -0
  5. package/data/guides/form-validation.md +169 -0
  6. package/data/guides/frameworks/angular.md +71 -0
  7. package/data/guides/frameworks/dotnet.md +42 -0
  8. package/data/guides/frameworks/drupal.md +39 -0
  9. package/data/guides/frameworks/react.md +115 -0
  10. package/data/guides/frameworks/vanilla.md +45 -0
  11. package/data/guides/installation.md +73 -0
  12. package/data/guides/page-structure.md +161 -0
  13. package/data/guides/styles.md +48 -0
  14. package/data/guides/themes.md +61 -0
  15. package/data/tokens/tokens.css +479 -0
  16. package/data/tokens/tokens.json +1553 -0
  17. package/dist/index.d.ts +9 -0
  18. package/dist/index.d.ts.map +1 -0
  19. package/dist/index.js +16 -0
  20. package/dist/lib/cem-parser.d.ts +102 -0
  21. package/dist/lib/cem-parser.d.ts.map +1 -0
  22. package/dist/lib/cem-parser.js +92 -0
  23. package/dist/lib/search.d.ts +20 -0
  24. package/dist/lib/search.d.ts.map +1 -0
  25. package/dist/lib/search.js +87 -0
  26. package/dist/lib/token-parser.d.ts +128 -0
  27. package/dist/lib/token-parser.d.ts.map +1 -0
  28. package/dist/lib/token-parser.js +431 -0
  29. package/dist/prompts/cobwds-mode.d.ts +8 -0
  30. package/dist/prompts/cobwds-mode.d.ts.map +1 -0
  31. package/dist/prompts/cobwds-mode.js +60 -0
  32. package/dist/resources/components.d.ts +12 -0
  33. package/dist/resources/components.d.ts.map +1 -0
  34. package/dist/resources/components.js +62 -0
  35. package/dist/resources/guides.d.ts +11 -0
  36. package/dist/resources/guides.d.ts.map +1 -0
  37. package/dist/resources/guides.js +76 -0
  38. package/dist/resources/index.d.ts +8 -0
  39. package/dist/resources/index.d.ts.map +1 -0
  40. package/dist/resources/index.js +13 -0
  41. package/dist/resources/tokens.d.ts +17 -0
  42. package/dist/resources/tokens.d.ts.map +1 -0
  43. package/dist/resources/tokens.js +312 -0
  44. package/dist/server.d.ts +11 -0
  45. package/dist/server.d.ts.map +1 -0
  46. package/dist/server.js +30 -0
  47. package/dist/tools/component-tools.d.ts +12 -0
  48. package/dist/tools/component-tools.d.ts.map +1 -0
  49. package/dist/tools/component-tools.js +95 -0
  50. package/dist/tools/guide-tools.d.ts +9 -0
  51. package/dist/tools/guide-tools.d.ts.map +1 -0
  52. package/dist/tools/guide-tools.js +80 -0
  53. package/dist/tools/index.d.ts +8 -0
  54. package/dist/tools/index.d.ts.map +1 -0
  55. package/dist/tools/index.js +17 -0
  56. package/dist/tools/token-tools.d.ts +13 -0
  57. package/dist/tools/token-tools.d.ts.map +1 -0
  58. package/dist/tools/token-tools.js +207 -0
  59. package/dist/tools/utility-tools.d.ts +8 -0
  60. package/dist/tools/utility-tools.d.ts.map +1 -0
  61. package/dist/tools/utility-tools.js +293 -0
  62. package/dist/tools/validation-tools.d.ts +11 -0
  63. package/dist/tools/validation-tools.d.ts.map +1 -0
  64. package/dist/tools/validation-tools.js +60 -0
  65. package/package.json +54 -0
package/data/guides/page-structure.md ADDED
@@ -0,0 +1,161 @@
1
+ # COBWDS Page Structure Guide
2
+
3
+ ## Overview
4
+
5
+ All COB web pages should follow a consistent structure using COBWDS components for headers, footers, and navigation. This ensures accessibility compliance and brand consistency.
6
+
7
+ ## Required Page Structure
8
+
9
+ ```
10
+ ┌─────────────────────────────────────┐
11
+ │ cob-skipnav (hidden until focused) │
12
+ ├─────────────────────────────────────┤
13
+ │ cob-unavheader (Universal header) │
14
+ ├─────────────────────────────────────┤
15
+ │ cob-globalheader (Agency header) │
16
+ ├─────────────────────────────────────┤
17
+ │ │
18
+ │ <main id="main-content"> │
19
+ │ Page content goes here │
20
+ │ </main> │
21
+ │ │
22
+ ├─────────────────────────────────────┤
23
+ │ cob-backtotop │
24
+ ├─────────────────────────────────────┤
25
+ │ <footer> │
26
+ │ cob-globalfooter (Agency footer) │
27
+ │ cob-unavfooter (Universal footer) │
28
+ │ </footer> │
29
+ └─────────────────────────────────────┘
30
+ ```
31
+
32
+ ## Component Order (Top to Bottom)
33
+
34
+ ### Header Section
35
+ 1. **`<cob-skipnav>`** - Skip navigation link (first focusable element)
36
+ 2. **`<cob-unavheader>`** - COB Universal header (Boston.gov branding)
37
+ 3. **`<cob-globalheader>`** - Agency-specific header with navigation
38
+
39
+ ### Main Content
40
+ 4. **`<main id="main-content">`** - Semantic landmark containing page content
41
+ - The `id="main-content"` is the default target for `cob-skipnav`
42
+ - All primary page content belongs inside this element
43
+
44
+ ### Footer Section
45
+ 5. **`<cob-backtotop>`** - Back to top button (before footer)
46
+ 6. **`<footer>`** - Semantic footer landmark containing:
47
+ - **`<cob-globalfooter>`** - Agency-specific footer with links
48
+ - **`<cob-unavfooter>`** - COB Universal footer
49
+
50
+ ## Complete Page Template
51
+
52
+ ```html
53
+ <!DOCTYPE html>
54
+ <html lang="en">
55
+ <head>
56
+ <meta charset="UTF-8">
57
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
58
+ <title>Page Title | Agency Name</title>
59
+
60
+ <!-- COBWDS Styles -->
61
+ <link rel="stylesheet" href="path/to/@cobwds/styles/dist/cobwds-full.min.css">
62
+ <!-- Agency Theme (optional) -->
63
+ <link rel="stylesheet" href="path/to/@cobwds/styles/dist/cobwds-theme-[agency].min.css">
64
+ <!-- Fonts -->
65
+ <link rel="preconnect" href="https://fonts.googleapis.com">
66
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
67
+ <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">
68
+ </head>
69
+ <body>
70
+ <!-- Skip Navigation (must be first focusable element) -->
71
+ <cob-skipnav></cob-skipnav>
72
+
73
+ <!-- COB Universal Header -->
74
+ <cob-unavheader></cob-unavheader>
75
+
76
+ <!-- Agency Global Header -->
77
+ <cob-globalheader
78
+ appName="Agency Name"
79
+ homepageLink="https://www.boston.gov/">
80
+ <ul>
81
+ <li><a href="/about">About</a></li>
82
+ <li><a href="/services">Services</a></li>
83
+ <li><a href="/contact">Contact</a></li>
84
+ </ul>
85
+ </cob-globalheader>
86
+
87
+ <!-- Main Content Area -->
88
+ <main id="main-content">
89
+ <div class="cob-grid-container">
90
+ <!-- Page content here -->
91
+ <h1>Page Title</h1>
92
+ <p>Content...</p>
93
+ </div>
94
+ </main>
95
+
96
+ <!-- Back to Top Button -->
97
+ <cob-backtotop></cob-backtotop>
98
+
99
+ <!-- Footer Section -->
100
+ <footer>
101
+ <cob-globalfooter
102
+ agencyName="Agency Name"
103
+ homepageLink="https://www.boston.gov/">
104
+ <ul>
105
+ <li><a href="/accessibility">Accessibility</a></li>
106
+ <li><a href="/privacy">Privacy Policy</a></li>
107
+ <li><a href="/contact">Contact Us</a></li>
108
+ </ul>
109
+ </cob-globalfooter>
110
+
111
+ <cob-unavfooter></cob-unavfooter>
112
+ </footer>
113
+
114
+ <!-- COBWDS Components JavaScript -->
115
+ <script type="module" src="path/to/@cobwds/components/dist/cobwds.js"></script>
116
+ </body>
117
+ </html>
118
+ ```
119
+
120
+ ## Page with Sidebar (e.g., Multi-Step Form)
121
+
122
+ For pages with a sidebar (like a stepper), use the grid system within `<main>`:
123
+
124
+ ```html
125
+ <main id="main-content">
126
+ <div class="cob-grid-container">
127
+ <div class="cob-grid-row">
128
+ <!-- Sidebar (stepper, navigation) -->
129
+ <cob-stepper
130
+ label="Application"
131
+ class="cob-grid-col-12 cob-desktop:cob-grid-col-3">
132
+ <cob-step label="Step 1" current></cob-step>
133
+ <cob-step label="Step 2"></cob-step>
134
+ <cob-step label="Step 3"></cob-step>
135
+ </cob-stepper>
136
+
137
+ <!-- Main content area -->
138
+ <div class="cob-grid-col-12 cob-desktop:cob-grid-col-9">
139
+ <h1>Step 1: Personal Information</h1>
140
+ <!-- Form content -->
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </main>
145
+ ```
146
+
147
+ ## Accessibility Requirements
148
+
149
+ 1. **Skip Navigation**: `cob-skipnav` must be the first focusable element
150
+ 2. **Main Landmark**: Use `<main id="main-content">` for primary content
151
+ 3. **Footer Landmark**: Wrap footer components in `<footer>` element
152
+ 4. **Language**: Set `lang` attribute on `<html>` element
153
+ 5. **Page Title**: Include descriptive `<title>` with page name and agency
154
+
155
+ ## Common Mistakes to Avoid
156
+
157
+ - Do not place `cob-skipnav` after other focusable elements
158
+ - Do not use `href="#app"` or wrapper div as skipnav target (use `#main-content`)
159
+ - Do not omit the `<main>` landmark element
160
+ - Do not place `cob-backtotop` inside the `<footer>` element
161
+ - Do not omit `<footer>` wrapper around footer components
package/data/guides/styles.md ADDED
@@ -0,0 +1,48 @@
1
+ # COBWDS Styles Guide
2
+
3
+ ## Choosing a stylesheet
4
+
5
+ COBWDS provides three CSS bundles. Choose based on your project:
6
+
7
+ | File | Reset | Typography | Utilities | CSS Variables |
8
+ |------|-------|------------|-----------|---------------|
9
+ | `cobwds-full.min.css` | Yes | Yes | Yes | Yes |
10
+ | `cobwds-typography.min.css` | No | Yes | No | Yes |
11
+ | `cobwds.min.css` | No | No | No | Yes |
12
+
13
+ **New project?** Use `cobwds-full.min.css` — it includes a CSS reset, typography, and utility/layout classes so you can start building immediately.
14
+
15
+ **Existing project?** Use `cobwds.min.css` — it loads only the CSS variables that style COBWDS components, without overriding your existing reset or typography.
16
+
17
+ ## Installation via npm
18
+
19
+ ```bash
20
+ npm install @cobwds/styles
21
+ ```
22
+
23
+ ```css
24
+ /* New project — full bundle */
25
+ @import '@cobwds/styles/full';
26
+
27
+ /* Existing project — variables only */
28
+ @import '@cobwds/styles';
29
+
30
+ /* Typography only */
31
+ @import '@cobwds/styles/typography';
32
+ ```
33
+
34
+ ## Agency theming
35
+
36
+ Apply an agency theme with a `data-theme` attribute:
37
+
38
+ ```html
39
+ <html data-theme="health">
40
+ ```
41
+
42
+ Or with a CSS class:
43
+
44
+ ```html
45
+ <body class="cob-theme-health">
46
+ ```
47
+
48
+ Use the `get_tokens` tool with `output: "themes"` to see all available agency themes.
package/data/guides/themes.md ADDED
@@ -0,0 +1,61 @@
1
+ # COBWDS Themes
2
+
3
+ COBWDS supports 8 agency themes that remap the `--cob-color-theme-*` design tokens to agency-specific color palettes. The default theme (Boston.gov blue) is active when no theme is explicitly set.
4
+
5
+ ## Available Themes
6
+
7
+ | Theme ID | Name | Description | Primary Color |
8
+ |----------|------|-------------|---------------|
9
+ | `default` | Default (City of Boston) | Default City of Boston theme | `#1871BD` |
10
+ | `admin` | Administration | For administrative and regulatory agencies | `#a2350a` |
11
+ | `business` | Business | For commerce and economic development agencies | `#084b52` |
12
+ | `environment` | Environment | For environmental and conservation agencies | `#233f2b` |
13
+ | `health` | Health | For health and human services agencies | `#43285d` |
14
+ | `local` | Local Government | For local government entities | `#402217` |
15
+ | `safety` | Public Safety | For public safety agencies | `#435d6e` |
16
+ | `transportation` | Transportation | For DOT and transit authorities | `#0b5583` |
17
+
18
+ ## How to Apply a Theme
19
+
20
+ ### HTML attribute (recommended)
21
+
22
+ Set the `data-cob-theme` attribute on a root element:
23
+
24
+ ```html
25
+ <html data-cob-theme="admin">
26
+ ```
27
+
28
+ ### CSS class
29
+
30
+ Apply a theme class to any element:
31
+
32
+ ```html
33
+ <body class="cob-theme-admin">
34
+ ```
35
+
36
+ ### Scoped theming
37
+
38
+ Apply a theme to a specific section of the page:
39
+
40
+ ```html
41
+ <section data-cob-theme="health">
42
+ <!-- All COBWDS components inside will use the Health theme -->
43
+ </section>
44
+ ```
45
+
46
+ ## What Themes Change
47
+
48
+ Themes remap these CSS custom properties to the agency's color palette:
49
+
50
+ - `--cob-color-theme` — primary theme color
51
+ - `--cob-color-theme-strong` — darker variant
52
+ - `--cob-color-theme-stronger` — darkest variant
53
+ - `--cob-color-theme-weak` — lighter variant
54
+ - `--cob-color-theme-weaker` — lightest variant
55
+ - `--cob-color-theme-weakest` — near-white variant
56
+
57
+ All COBWDS components that use `--cob-color-theme-*` tokens automatically reflect the active theme.
58
+
59
+ ## Default Behavior
60
+
61
+ The default theme applies at `:root` level. You do not need to set `data-cob-theme="default"` unless you are overriding a parent theme within a nested section.