@phcdevworks/spectre-components 1.8.0 → 1.10.0
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.
- package/README.md +27 -18
- package/package.json +19 -19
package/README.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @phcdevworks/spectre-components
|
|
2
2
|
|
|
3
|
+
`@phcdevworks/spectre-components` is the Lit-based component layer of the
|
|
4
|
+
Spectre system. It implements Spectre's design contracts as reusable,
|
|
5
|
+
accessible, framework-agnostic web components.
|
|
6
|
+
|
|
7
|
+
Maintained by [PHCDevworks](https://go.phcdev.co). It draws on Spectre's
|
|
8
|
+
token and styling contracts to ship drop-in UI primitives, so applications
|
|
9
|
+
that need working components — rather than raw CSS or recipes to assemble
|
|
10
|
+
themselves — can consume Spectre without a framework-specific adapter.
|
|
11
|
+
|
|
3
12
|
## Repository Snapshot
|
|
4
13
|
|
|
5
14
|
| Field | Value |
|
|
@@ -7,7 +16,7 @@
|
|
|
7
16
|
| Project team | `project-design` |
|
|
8
17
|
| Repository role | Spectre L3a Lit web component layer |
|
|
9
18
|
| Package/artifact | `@phcdevworks/spectre-components` |
|
|
10
|
-
| Current version/status | 1.
|
|
19
|
+
| Current version/status | 1.10.0 |
|
|
11
20
|
|
|
12
21
|
## Standard Workflow
|
|
13
22
|
|
|
@@ -48,7 +57,7 @@ be consumed directly or wrapped by downstream adapter packages.
|
|
|
48
57
|
[Changelog](CHANGELOG.md) | [Roadmap](ROADMAP.md) |
|
|
49
58
|
[Security Policy](SECURITY.md)
|
|
50
59
|
|
|
51
|
-
## Why
|
|
60
|
+
## Why This Package Exists Alongside Spectre-UI
|
|
52
61
|
|
|
53
62
|
`@phcdevworks/spectre-ui` owns CSS: class recipes, Tailwind helpers, and the
|
|
54
63
|
styling contract that maps Spectre tokens to visual output. It ships CSS rules
|
|
@@ -72,7 +81,7 @@ If you only need CSS class names, use `@phcdevworks/spectre-ui` directly. If you
|
|
|
72
81
|
need ready-to-use HTML elements with behavior, accessibility, and a typed API,
|
|
73
82
|
use this package.
|
|
74
83
|
|
|
75
|
-
## Key
|
|
84
|
+
## Key Capabilities
|
|
76
85
|
|
|
77
86
|
- Lit-based custom elements on the Custom Elements standard
|
|
78
87
|
- Renders in **light DOM** so `@phcdevworks/spectre-ui` global styles apply
|
|
@@ -85,7 +94,7 @@ use this package.
|
|
|
85
94
|
- ESM + CJS dual build with TypeScript declaration files
|
|
86
95
|
- Tree-shakeable subpath exports per component
|
|
87
96
|
|
|
88
|
-
## When
|
|
97
|
+
## When To Use This Package
|
|
89
98
|
|
|
90
99
|
- You are building UI with the Spectre design system and want standards-based
|
|
91
100
|
custom elements with baked-in behavior and accessibility.
|
|
@@ -95,7 +104,7 @@ use this package.
|
|
|
95
104
|
- You are writing a framework adapter (React, Vue, Astro) and need a reliable,
|
|
96
105
|
stable element layer to wrap.
|
|
97
106
|
|
|
98
|
-
## When
|
|
107
|
+
## When Not To Use This Package
|
|
99
108
|
|
|
100
109
|
- You only need CSS class names — use `@phcdevworks/spectre-ui` directly.
|
|
101
110
|
- You are adding routing, shell logic, or app-startup orchestration — those are
|
|
@@ -109,7 +118,7 @@ use this package.
|
|
|
109
118
|
npm install @phcdevworks/spectre-components @phcdevworks/spectre-ui @phcdevworks/spectre-tokens
|
|
110
119
|
```
|
|
111
120
|
|
|
112
|
-
## Quick
|
|
121
|
+
## Quick Start
|
|
113
122
|
|
|
114
123
|
### Plain HTML
|
|
115
124
|
|
|
@@ -289,7 +298,7 @@ to the native `<label>` element.
|
|
|
289
298
|
**Keyboard behavior** — provided entirely by the native element inside each
|
|
290
299
|
component. No custom keyboard handling is layered on top.
|
|
291
300
|
|
|
292
|
-
## Light DOM
|
|
301
|
+
## Light DOM Rendering
|
|
293
302
|
|
|
294
303
|
All components render in **light DOM** (`createRenderRoot() { return this; }`).
|
|
295
304
|
This is intentional: it allows `@phcdevworks/spectre-ui` global CSS to reach the
|
|
@@ -1036,7 +1045,7 @@ body; all other children become the trigger content.
|
|
|
1036
1045
|
**Internal target** — `[data-sp-tooltip-native]` selects the native tooltip
|
|
1037
1046
|
body.
|
|
1038
1047
|
|
|
1039
|
-
## Package
|
|
1048
|
+
## Package Exports / API Surface
|
|
1040
1049
|
|
|
1041
1050
|
### Root — `@phcdevworks/spectre-components`
|
|
1042
1051
|
|
|
@@ -1149,7 +1158,7 @@ Size constants are shared between input, textarea, and select. Import
|
|
|
1149
1158
|
`spectreInputSizes` / `SpectreInputSize` from `.../input` when needed alongside
|
|
1150
1159
|
textarea or select.
|
|
1151
1160
|
|
|
1152
|
-
## Relationship
|
|
1161
|
+
## Relationship To The Rest Of Spectre
|
|
1153
1162
|
|
|
1154
1163
|
```
|
|
1155
1164
|
spectre-tokens → design values (colors, spacing, typography)
|
|
@@ -1226,17 +1235,17 @@ This runs: lint → typecheck → tests → build → export validation → cont
|
|
|
1226
1235
|
validation → invariant checks → ecosystem manifest validation. All steps must
|
|
1227
1236
|
pass.
|
|
1228
1237
|
|
|
1229
|
-
## AI
|
|
1238
|
+
## AI And Automation Boundaries
|
|
1230
1239
|
|
|
1231
1240
|
Claude Code (`claude-sonnet-4-6`) is the primary development agent for this
|
|
1232
|
-
repository. Codex handles releases
|
|
1233
|
-
|
|
1234
|
-
development support.
|
|
1235
|
-
|
|
1236
|
-
Claude Code, Codex,
|
|
1237
|
-
commit
|
|
1238
|
-
|
|
1239
|
-
|
|
1241
|
+
repository. Codex handles releases, including cutting tagged releases and
|
|
1242
|
+
GitHub Releases, and production stabilization. Jules handles small automated
|
|
1243
|
+
fixes and dependency updates. GitHub Copilot provides development support.
|
|
1244
|
+
|
|
1245
|
+
All AI agents with repository access (Claude Code, Codex, Copilot, Jules)
|
|
1246
|
+
have commit, push, and tag authority in this repository. Publishing to npm
|
|
1247
|
+
remains Bradley Potts's sole authority. See [AGENTS.md](AGENTS.md) for the
|
|
1248
|
+
full commit-policy and release-authority grant.
|
|
1240
1249
|
|
|
1241
1250
|
**Protected from automated change:** component public API surface (tags,
|
|
1242
1251
|
properties, events, slots, ARIA), the light-DOM rendering model, and the
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@phcdevworks/spectre-components",
|
|
3
|
-
"version": "1.
|
|
4
|
-
"description": "@phcdevworks/spectre-components is the Lit-based component layer of the Spectre system
|
|
3
|
+
"version": "1.10.0",
|
|
4
|
+
"description": "@phcdevworks/spectre-components is the Lit-based component layer of the Spectre system. It implements Spectre's design contracts as reusable, accessible, framework-agnostic web components.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"phcdevworks",
|
|
7
7
|
"spectre",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
],
|
|
24
24
|
"repository": {
|
|
25
25
|
"type": "git",
|
|
26
|
-
"url": "https://github.com/phcdevworks/spectre-components.git"
|
|
26
|
+
"url": "git+https://github.com/phcdevworks/spectre-components.git"
|
|
27
27
|
},
|
|
28
28
|
"bugs": {
|
|
29
29
|
"url": "https://github.com/phcdevworks/spectre-components/issues"
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"node": "^22.13.0 || >=24.0.0"
|
|
34
34
|
},
|
|
35
35
|
"type": "module",
|
|
36
|
-
"packageManager": "npm@
|
|
36
|
+
"packageManager": "npm@12.0.1",
|
|
37
37
|
"main": "./dist/index.cjs",
|
|
38
38
|
"module": "./dist/index.js",
|
|
39
39
|
"types": "./dist/index.d.ts",
|
|
@@ -219,31 +219,31 @@
|
|
|
219
219
|
"access": "public"
|
|
220
220
|
},
|
|
221
221
|
"peerDependencies": {
|
|
222
|
-
"typescript": "^5.
|
|
222
|
+
"typescript": "^5.0 || ^6.0 || ^7.0"
|
|
223
223
|
},
|
|
224
224
|
"dependencies": {
|
|
225
|
-
"@phcdevworks/spectre-tokens": "^
|
|
226
|
-
"@phcdevworks/spectre-ui": "^
|
|
225
|
+
"@phcdevworks/spectre-tokens": "^4.0.0",
|
|
226
|
+
"@phcdevworks/spectre-ui": "^3.0.0",
|
|
227
227
|
"lit": "^3.3.3"
|
|
228
228
|
},
|
|
229
229
|
"devDependencies": {
|
|
230
230
|
"@eslint/js": "^10.0.1",
|
|
231
|
-
"@phcdevworks/spectre-manifest": "^1.
|
|
232
|
-
"@playwright/test": "^1.
|
|
233
|
-
"@types/node": "^26.1.
|
|
234
|
-
"@typescript-eslint/eslint-plugin": "^8.
|
|
235
|
-
"@typescript-eslint/parser": "^8.
|
|
231
|
+
"@phcdevworks/spectre-manifest": "^1.1.0",
|
|
232
|
+
"@playwright/test": "^1.62.0",
|
|
233
|
+
"@types/node": "^26.1.1",
|
|
234
|
+
"@typescript-eslint/eslint-plugin": "^8.65.0",
|
|
235
|
+
"@typescript-eslint/parser": "^8.65.0",
|
|
236
|
+
"@typescript/native": "npm:typescript@^7.0.2",
|
|
236
237
|
"axe-core": "^4.12.1",
|
|
237
|
-
"eslint": "^10.
|
|
238
|
+
"eslint": "^10.8.0",
|
|
238
239
|
"globals": "^17.7.0",
|
|
239
|
-
"happy-dom": "^20.
|
|
240
|
+
"happy-dom": "^20.11.1",
|
|
240
241
|
"jiti": "^2.7.0",
|
|
241
|
-
"prettier": "^3.9.
|
|
242
|
-
"tailwindcss": "^4.3.2",
|
|
242
|
+
"prettier": "^3.9.6",
|
|
243
243
|
"tsup": "^8.5.1",
|
|
244
|
-
"typescript": "
|
|
245
|
-
"typescript-eslint": "^8.
|
|
246
|
-
"vite": "^8.1.
|
|
244
|
+
"typescript": "npm:@typescript/typescript6@^6.0.2",
|
|
245
|
+
"typescript-eslint": "^8.65.0",
|
|
246
|
+
"vite": "^8.1.5",
|
|
247
247
|
"vitest": "^4.1.10"
|
|
248
248
|
},
|
|
249
249
|
"allowScripts": {
|