@phcdevworks/spectre-components 1.9.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 +18 -18
- package/package.json +8 -9
package/README.md
CHANGED
|
@@ -16,7 +16,7 @@ themselves — can consume Spectre without a framework-specific adapter.
|
|
|
16
16
|
| Project team | `project-design` |
|
|
17
17
|
| Repository role | Spectre L3a Lit web component layer |
|
|
18
18
|
| Package/artifact | `@phcdevworks/spectre-components` |
|
|
19
|
-
| Current version/status | 1.
|
|
19
|
+
| Current version/status | 1.10.0 |
|
|
20
20
|
|
|
21
21
|
## Standard Workflow
|
|
22
22
|
|
|
@@ -57,7 +57,7 @@ be consumed directly or wrapped by downstream adapter packages.
|
|
|
57
57
|
[Changelog](CHANGELOG.md) | [Roadmap](ROADMAP.md) |
|
|
58
58
|
[Security Policy](SECURITY.md)
|
|
59
59
|
|
|
60
|
-
## Why
|
|
60
|
+
## Why This Package Exists Alongside Spectre-UI
|
|
61
61
|
|
|
62
62
|
`@phcdevworks/spectre-ui` owns CSS: class recipes, Tailwind helpers, and the
|
|
63
63
|
styling contract that maps Spectre tokens to visual output. It ships CSS rules
|
|
@@ -81,7 +81,7 @@ If you only need CSS class names, use `@phcdevworks/spectre-ui` directly. If you
|
|
|
81
81
|
need ready-to-use HTML elements with behavior, accessibility, and a typed API,
|
|
82
82
|
use this package.
|
|
83
83
|
|
|
84
|
-
## Key
|
|
84
|
+
## Key Capabilities
|
|
85
85
|
|
|
86
86
|
- Lit-based custom elements on the Custom Elements standard
|
|
87
87
|
- Renders in **light DOM** so `@phcdevworks/spectre-ui` global styles apply
|
|
@@ -94,7 +94,7 @@ use this package.
|
|
|
94
94
|
- ESM + CJS dual build with TypeScript declaration files
|
|
95
95
|
- Tree-shakeable subpath exports per component
|
|
96
96
|
|
|
97
|
-
## When
|
|
97
|
+
## When To Use This Package
|
|
98
98
|
|
|
99
99
|
- You are building UI with the Spectre design system and want standards-based
|
|
100
100
|
custom elements with baked-in behavior and accessibility.
|
|
@@ -104,7 +104,7 @@ use this package.
|
|
|
104
104
|
- You are writing a framework adapter (React, Vue, Astro) and need a reliable,
|
|
105
105
|
stable element layer to wrap.
|
|
106
106
|
|
|
107
|
-
## When
|
|
107
|
+
## When Not To Use This Package
|
|
108
108
|
|
|
109
109
|
- You only need CSS class names — use `@phcdevworks/spectre-ui` directly.
|
|
110
110
|
- You are adding routing, shell logic, or app-startup orchestration — those are
|
|
@@ -118,7 +118,7 @@ use this package.
|
|
|
118
118
|
npm install @phcdevworks/spectre-components @phcdevworks/spectre-ui @phcdevworks/spectre-tokens
|
|
119
119
|
```
|
|
120
120
|
|
|
121
|
-
## Quick
|
|
121
|
+
## Quick Start
|
|
122
122
|
|
|
123
123
|
### Plain HTML
|
|
124
124
|
|
|
@@ -298,7 +298,7 @@ to the native `<label>` element.
|
|
|
298
298
|
**Keyboard behavior** — provided entirely by the native element inside each
|
|
299
299
|
component. No custom keyboard handling is layered on top.
|
|
300
300
|
|
|
301
|
-
## Light DOM
|
|
301
|
+
## Light DOM Rendering
|
|
302
302
|
|
|
303
303
|
All components render in **light DOM** (`createRenderRoot() { return this; }`).
|
|
304
304
|
This is intentional: it allows `@phcdevworks/spectre-ui` global CSS to reach the
|
|
@@ -1045,7 +1045,7 @@ body; all other children become the trigger content.
|
|
|
1045
1045
|
**Internal target** — `[data-sp-tooltip-native]` selects the native tooltip
|
|
1046
1046
|
body.
|
|
1047
1047
|
|
|
1048
|
-
## Package
|
|
1048
|
+
## Package Exports / API Surface
|
|
1049
1049
|
|
|
1050
1050
|
### Root — `@phcdevworks/spectre-components`
|
|
1051
1051
|
|
|
@@ -1158,7 +1158,7 @@ Size constants are shared between input, textarea, and select. Import
|
|
|
1158
1158
|
`spectreInputSizes` / `SpectreInputSize` from `.../input` when needed alongside
|
|
1159
1159
|
textarea or select.
|
|
1160
1160
|
|
|
1161
|
-
## Relationship
|
|
1161
|
+
## Relationship To The Rest Of Spectre
|
|
1162
1162
|
|
|
1163
1163
|
```
|
|
1164
1164
|
spectre-tokens → design values (colors, spacing, typography)
|
|
@@ -1235,17 +1235,17 @@ This runs: lint → typecheck → tests → build → export validation → cont
|
|
|
1235
1235
|
validation → invariant checks → ecosystem manifest validation. All steps must
|
|
1236
1236
|
pass.
|
|
1237
1237
|
|
|
1238
|
-
## AI
|
|
1238
|
+
## AI And Automation Boundaries
|
|
1239
1239
|
|
|
1240
1240
|
Claude Code (`claude-sonnet-4-6`) is the primary development agent for this
|
|
1241
|
-
repository. Codex handles releases
|
|
1242
|
-
|
|
1243
|
-
development support.
|
|
1244
|
-
|
|
1245
|
-
Claude Code, Codex,
|
|
1246
|
-
commit
|
|
1247
|
-
|
|
1248
|
-
|
|
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.
|
|
1249
1249
|
|
|
1250
1250
|
**Protected from automated change:** component public API surface (tags,
|
|
1251
1251
|
properties, events, slots, ARIA), the light-DOM rendering model, and the
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@phcdevworks/spectre-components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.10.0",
|
|
4
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",
|
|
@@ -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"
|
|
@@ -222,25 +222,24 @@
|
|
|
222
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
231
|
"@phcdevworks/spectre-manifest": "^1.1.0",
|
|
232
|
-
"@playwright/test": "^1.
|
|
232
|
+
"@playwright/test": "^1.62.0",
|
|
233
233
|
"@types/node": "^26.1.1",
|
|
234
234
|
"@typescript-eslint/eslint-plugin": "^8.65.0",
|
|
235
235
|
"@typescript-eslint/parser": "^8.65.0",
|
|
236
236
|
"@typescript/native": "npm:typescript@^7.0.2",
|
|
237
237
|
"axe-core": "^4.12.1",
|
|
238
|
-
"eslint": "^10.
|
|
238
|
+
"eslint": "^10.8.0",
|
|
239
239
|
"globals": "^17.7.0",
|
|
240
|
-
"happy-dom": "^20.11.
|
|
240
|
+
"happy-dom": "^20.11.1",
|
|
241
241
|
"jiti": "^2.7.0",
|
|
242
|
-
"prettier": "^3.9.
|
|
243
|
-
"tailwindcss": "^4.3.3",
|
|
242
|
+
"prettier": "^3.9.6",
|
|
244
243
|
"tsup": "^8.5.1",
|
|
245
244
|
"typescript": "npm:@typescript/typescript6@^6.0.2",
|
|
246
245
|
"typescript-eslint": "^8.65.0",
|