@pithyjs/pidl-catalog 0.1.0-beta.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/LICENSE +21 -0
- package/dist/specs/atoms/actions/button.pidl.json +289 -0
- package/dist/specs/atoms/actions/icon-group.pidl.json +141 -0
- package/dist/specs/atoms/actions/segmented-control.pidl.json +137 -0
- package/dist/specs/atoms/content/action-tile.pidl.json +135 -0
- package/dist/specs/atoms/content/badge.pidl.json +189 -0
- package/dist/specs/atoms/content/callout.pidl.json +170 -0
- package/dist/specs/atoms/content/code-block.pidl.json +170 -0
- package/dist/specs/atoms/content/heading.pidl.json +175 -0
- package/dist/specs/atoms/content/icon.pidl.json +127 -0
- package/dist/specs/atoms/content/image.pidl.json +227 -0
- package/dist/specs/atoms/content/prose.pidl.json +183 -0
- package/dist/specs/atoms/content/stat.pidl.json +158 -0
- package/dist/specs/atoms/content/tabs.pidl.json +207 -0
- package/dist/specs/atoms/content/text.pidl.json +212 -0
- package/dist/specs/atoms/content/tile.pidl.json +156 -0
- package/dist/specs/atoms/data/donut.pidl.json +352 -0
- package/dist/specs/atoms/data/gauge.pidl.json +274 -0
- package/dist/specs/atoms/forms/checkbox-group.pidl.json +170 -0
- package/dist/specs/atoms/forms/checkbox.pidl.json +323 -0
- package/dist/specs/atoms/forms/file-picker.pidl.json +161 -0
- package/dist/specs/atoms/forms/form-field.pidl.json +106 -0
- package/dist/specs/atoms/forms/input.pidl.json +466 -0
- package/dist/specs/atoms/forms/radio-group.pidl.json +174 -0
- package/dist/specs/atoms/forms/radio.pidl.json +312 -0
- package/dist/specs/atoms/forms/search-input.pidl.json +265 -0
- package/dist/specs/atoms/forms/select.pidl.json +420 -0
- package/dist/specs/atoms/forms/textarea.pidl.json +422 -0
- package/dist/specs/atoms/forms/toggle.pidl.json +314 -0
- package/dist/specs/layout/grid-item.pidl.json +120 -0
- package/dist/specs/layout/grid.pidl.json +157 -0
- package/dist/specs/layout/page-section.pidl.json +105 -0
- package/dist/specs/layout/smart-container.pidl.json +148 -0
- package/dist/specs/layout/stack.pidl.json +144 -0
- package/dist/specs/organisms/content/accordion.pidl.json +196 -0
- package/dist/specs/organisms/content/card.pidl.json +283 -0
- package/dist/specs/organisms/feedback/alert-dialog.pidl.json +158 -0
- package/dist/specs/organisms/feedback/modal.pidl.json +133 -0
- package/dist/specs/organisms/feedback/toast.pidl.json +150 -0
- package/dist/specs/organisms/forms/dynamic-form.pidl.json +314 -0
- package/dist/specs/organisms/forms/form.pidl.json +135 -0
- package/dist/specs/organisms/forms/subscribe-form.pidl.json +188 -0
- package/dist/specs/organisms/navigation/command-palette.pidl.json +263 -0
- package/dist/specs/organisms/navigation/docs-sidebar.pidl.json +264 -0
- package/dist/specs/organisms/navigation/navbar.pidl.json +356 -0
- package/dist/specs/organisms/navigation/table-of-contents.pidl.json +197 -0
- package/dist/specs/sections/contact-section.pidl.json +183 -0
- package/dist/specs/sections/cta-section.pidl.json +168 -0
- package/dist/specs/sections/faq-section.pidl.json +202 -0
- package/dist/specs/sections/features-section.pidl.json +214 -0
- package/dist/specs/sections/footer-section.pidl.json +187 -0
- package/dist/specs/sections/hero-section.pidl.json +202 -0
- package/dist/src/borders-psychology.d.ts +17 -0
- package/dist/src/borders-psychology.d.ts.map +1 -0
- package/dist/src/borders-psychology.js +42 -0
- package/dist/src/borders-psychology.js.map +1 -0
- package/dist/src/color-psychology.d.ts +20 -0
- package/dist/src/color-psychology.d.ts.map +1 -0
- package/dist/src/color-psychology.js +57 -0
- package/dist/src/color-psychology.js.map +1 -0
- package/dist/src/design-intelligence.d.ts +13 -0
- package/dist/src/design-intelligence.d.ts.map +1 -0
- package/dist/src/design-intelligence.js +36 -0
- package/dist/src/design-intelligence.js.map +1 -0
- package/dist/src/index.d.ts +6238 -0
- package/dist/src/index.d.ts.map +1 -0
- package/dist/src/index.js +105 -0
- package/dist/src/index.js.map +1 -0
- package/dist/src/motion-psychology.d.ts +19 -0
- package/dist/src/motion-psychology.d.ts.map +1 -0
- package/dist/src/motion-psychology.js +47 -0
- package/dist/src/motion-psychology.js.map +1 -0
- package/dist/src/mutation-vocabulary.d.ts +13 -0
- package/dist/src/mutation-vocabulary.d.ts.map +1 -0
- package/dist/src/mutation-vocabulary.js +67 -0
- package/dist/src/mutation-vocabulary.js.map +1 -0
- package/dist/src/radius-psychology.d.ts +17 -0
- package/dist/src/radius-psychology.d.ts.map +1 -0
- package/dist/src/radius-psychology.js +42 -0
- package/dist/src/radius-psychology.js.map +1 -0
- package/dist/src/shadows-psychology.d.ts +17 -0
- package/dist/src/shadows-psychology.d.ts.map +1 -0
- package/dist/src/shadows-psychology.js +44 -0
- package/dist/src/shadows-psychology.js.map +1 -0
- package/dist/src/spacing-psychology.d.ts +22 -0
- package/dist/src/spacing-psychology.d.ts.map +1 -0
- package/dist/src/spacing-psychology.js +59 -0
- package/dist/src/spacing-psychology.js.map +1 -0
- package/dist/src/typography-psychology.d.ts +22 -0
- package/dist/src/typography-psychology.d.ts.map +1 -0
- package/dist/src/typography-psychology.js +68 -0
- package/dist/src/typography-psychology.js.map +1 -0
- package/package.json +64 -0
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
{
|
|
2
|
+
"kind": "component",
|
|
3
|
+
"id": "ui.features-section",
|
|
4
|
+
"name": "FeaturesSection",
|
|
5
|
+
"displayName": "Features Section",
|
|
6
|
+
"version": "0.1.0",
|
|
7
|
+
"level": "section",
|
|
8
|
+
"domain": "sections",
|
|
9
|
+
"bidi": true,
|
|
10
|
+
"description": "Feature grid section with icon, heading, and description per item. Renders a responsive grid of feature cards with optional section heading.",
|
|
11
|
+
"props": [
|
|
12
|
+
{
|
|
13
|
+
"name": "heading",
|
|
14
|
+
"reactive": true,
|
|
15
|
+
"label": "Heading",
|
|
16
|
+
"type": "string | Signal<string>",
|
|
17
|
+
"placeholder": "Why choose us",
|
|
18
|
+
"description": "Section heading text displayed above the feature grid"
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"name": "headingLevel",
|
|
22
|
+
"label": "Heading level",
|
|
23
|
+
"editor": { "tab": "settings" },
|
|
24
|
+
"type": "number",
|
|
25
|
+
"enum": [1, 2, 3, 4, 5, 6],
|
|
26
|
+
"default": 2,
|
|
27
|
+
"description": "Heading level — feature item titles use headingLevel+1"
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"name": "subheading",
|
|
31
|
+
"reactive": true,
|
|
32
|
+
"label": "Subheading",
|
|
33
|
+
"type": "string | Signal<string>",
|
|
34
|
+
"placeholder": "Everything you need to ship great products.",
|
|
35
|
+
"description": "Section description below heading"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"name": "items",
|
|
39
|
+
"reactive": true,
|
|
40
|
+
"label": "Items",
|
|
41
|
+
"type": "FeatureItem[] | Signal<FeatureItem[]>",
|
|
42
|
+
"required": true,
|
|
43
|
+
"placeholder": [
|
|
44
|
+
{
|
|
45
|
+
"icon": "zap",
|
|
46
|
+
"title": "Lightning fast",
|
|
47
|
+
"description": "Sub-second page loads with fine-grained reactivity."
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"icon": "shield",
|
|
51
|
+
"title": "Secure by default",
|
|
52
|
+
"description": "Built-in protection against the OWASP top 10."
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"icon": "users",
|
|
56
|
+
"title": "Built for teams",
|
|
57
|
+
"description": "Collaborate seamlessly with role-based access control."
|
|
58
|
+
}
|
|
59
|
+
],
|
|
60
|
+
"description": "Array of feature items with icon, title, and description",
|
|
61
|
+
"itemSchema": {
|
|
62
|
+
"icon": {
|
|
63
|
+
"type": "string",
|
|
64
|
+
"editor": { "type": "icon" },
|
|
65
|
+
"description": "Icon name (decorative)"
|
|
66
|
+
},
|
|
67
|
+
"title": {
|
|
68
|
+
"type": "string",
|
|
69
|
+
"required": true,
|
|
70
|
+
"description": "Feature title"
|
|
71
|
+
},
|
|
72
|
+
"description": {
|
|
73
|
+
"type": "string",
|
|
74
|
+
"required": true,
|
|
75
|
+
"description": "Feature description"
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"name": "columns",
|
|
81
|
+
"label": "Columns",
|
|
82
|
+
"editor": { "tab": "layout" },
|
|
83
|
+
"type": "number",
|
|
84
|
+
"enum": [2, 3, 4],
|
|
85
|
+
"default": 3,
|
|
86
|
+
"description": "Number of grid columns (clamped 2-4)"
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"name": "spacing",
|
|
90
|
+
"label": "Spacing",
|
|
91
|
+
"editor": { "tab": "layout", "type": "token-space" },
|
|
92
|
+
"type": "enum",
|
|
93
|
+
"enum": ["0", "xs", "sm", "md", "lg", "xl"],
|
|
94
|
+
"default": "xl",
|
|
95
|
+
"description": "Vertical padding — maps to u-py-* utilities"
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"name": "variant",
|
|
99
|
+
"label": "Display mode",
|
|
100
|
+
"editor": { "tab": "content" },
|
|
101
|
+
"type": "enum",
|
|
102
|
+
"enum": ["icon", "numbered"],
|
|
103
|
+
"default": "icon",
|
|
104
|
+
"description": "icon = classic feature grid (each item shows its decorative icon). numbered = a 'steps' / 'how it works' mode: each item shows its 1-based ordinal as a prominent step number instead of an icon, and the grid renders as an ordered <ol> for correct assistive-tech sequencing. In numbered mode an item's icon is ignored (steps are numbered, not icon'd)."
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"name": "id",
|
|
108
|
+
"label": "Anchor ID",
|
|
109
|
+
"editor": { "tab": "settings" },
|
|
110
|
+
"type": "string",
|
|
111
|
+
"description": "Optional anchor id for in-page linking"
|
|
112
|
+
}
|
|
113
|
+
],
|
|
114
|
+
"events": [],
|
|
115
|
+
"slots": [
|
|
116
|
+
{
|
|
117
|
+
"name": "extras",
|
|
118
|
+
"displayName": "Extras",
|
|
119
|
+
"description": "Extra content below the feature grid, e.g. a \"See all features\" link."
|
|
120
|
+
}
|
|
121
|
+
],
|
|
122
|
+
"tokens": {
|
|
123
|
+
"spacing.vertical": "--space-{spacing} (via u-py-*)",
|
|
124
|
+
"spacing.container": "--space-md (gutter padding)",
|
|
125
|
+
"icon.size": "--icon-size-lg (via u-icon-lg utility)",
|
|
126
|
+
"title.color": "--color-text (via Heading component)",
|
|
127
|
+
"description.color": "--color-text-muted (via Text component)"
|
|
128
|
+
},
|
|
129
|
+
"spacing": {
|
|
130
|
+
"header-to-grid": "--space-lg (acquaintances — section header and feature grid)",
|
|
131
|
+
"icon-to-title": "--space-xs (lovers — icon and feature title)",
|
|
132
|
+
"title-to-description": "--space-sm (close friends — title and description)",
|
|
133
|
+
"grid-gap": "--space-md (friends — cards in a grid)"
|
|
134
|
+
},
|
|
135
|
+
"designGuidance": {
|
|
136
|
+
"surface": "Feature cards use --color-surface-variant background with --radius-lg and --border-width-hairline border to create contained, lifted card appearance. Each card has --space-lg internal padding.",
|
|
137
|
+
"depth": "Cards have --shadow-xs at rest. On hover, cards lift upward (translate Y by --space-xs) and shadow increases to --shadow-md. This creates a tactile, interactive feel.",
|
|
138
|
+
"borders": "Hairline border at --color-border at rest. On hover, border tints toward --color-primary (25% mix) to subtly indicate interactivity.",
|
|
139
|
+
"interactivity": "Cards are hover-interactive: lift + shadow + border tint. Transitions are motion-safe wrapped. In forced-colors mode, hover shadow is removed and border uses CanvasText.",
|
|
140
|
+
"bestPractices": [
|
|
141
|
+
"Feature cards should feel interactive on hover — the lift + shadow signals premium quality",
|
|
142
|
+
"Never remove the card background/padding — cards without containment look like plain text lists",
|
|
143
|
+
"3 columns is the sweet spot for most content; use 2 for longer descriptions, 4 for icon-only features",
|
|
144
|
+
"Grid uses CSS auto-fit with min-column tokens — columns collapse naturally when container is too narrow, no breakpoints needed",
|
|
145
|
+
"Icons are decorative — the title carries the semantic meaning",
|
|
146
|
+
"Section header text is constrained to 60ch max for readability",
|
|
147
|
+
"Entrance stagger animation supports up to 6 items — items beyond 6 animate simultaneously",
|
|
148
|
+
"variant='icon' (default) for a grid of parallel, unordered benefits or capabilities; variant='numbered' for an ORDERED sequence — 'how it works', onboarding, a step-by-step process — where the order itself is the message",
|
|
149
|
+
"In numbered mode the grid is a real <ol> so screen readers announce the sequence; the visible step number is decorative (aria-hidden) and an item's icon is ignored"
|
|
150
|
+
]
|
|
151
|
+
},
|
|
152
|
+
"constraints": [
|
|
153
|
+
"items should be a non-empty array (empty arrays render zero cards with a DEV warning)",
|
|
154
|
+
"Feature titles use headingLevel+1 (clamped to max 6) for correct hierarchy",
|
|
155
|
+
"Icons render as decorative (aria-hidden) since titles carry the meaning",
|
|
156
|
+
"columns clamped to 2-4 range"
|
|
157
|
+
],
|
|
158
|
+
"a11y": [
|
|
159
|
+
"Renders semantic <section> element with aria-labelledby linked to heading",
|
|
160
|
+
"Heading hierarchy: section heading at headingLevel, feature titles at headingLevel+1",
|
|
161
|
+
"Icons are decorative (aria-hidden=true, role=none)",
|
|
162
|
+
"Grid uses semantic markup (not ARIA grid role)"
|
|
163
|
+
],
|
|
164
|
+
"ai": {
|
|
165
|
+
"synonyms": [
|
|
166
|
+
"features",
|
|
167
|
+
"feature grid",
|
|
168
|
+
"benefits",
|
|
169
|
+
"what we offer",
|
|
170
|
+
"highlights",
|
|
171
|
+
"capabilities",
|
|
172
|
+
"steps",
|
|
173
|
+
"numbered",
|
|
174
|
+
"how it works",
|
|
175
|
+
"process",
|
|
176
|
+
"step-by-step",
|
|
177
|
+
"onboarding"
|
|
178
|
+
],
|
|
179
|
+
"avoid": [
|
|
180
|
+
"manual grid of cards — use FeaturesSection with items array",
|
|
181
|
+
"skipping heading levels — feature titles auto-increment from section heading"
|
|
182
|
+
],
|
|
183
|
+
"patterns": [
|
|
184
|
+
"3-column features: <FeaturesSection heading=\"'Features'\" items=\"features\"/>",
|
|
185
|
+
"2-column with subheading: <FeaturesSection heading=\"'Why Us'\" subheading=\"'Built different'\" columns=\"2\" items=\"benefits\"/>",
|
|
186
|
+
"Without section heading: <FeaturesSection items=\"features\" columns=\"4\"/>",
|
|
187
|
+
"Numbered steps / how it works: <FeaturesSection variant=\"'numbered'\" heading=\"'How it works'\" items=\"steps\"/>"
|
|
188
|
+
]
|
|
189
|
+
},
|
|
190
|
+
"examples": [
|
|
191
|
+
{
|
|
192
|
+
"id": "basic-features",
|
|
193
|
+
"title": "Feature grid with heading",
|
|
194
|
+
"pithy": "<FeaturesSection heading=\"'Why PithyJS?'\" items=\"features\"/>",
|
|
195
|
+
"assertions": [
|
|
196
|
+
"renders <section>",
|
|
197
|
+
"h2 section heading",
|
|
198
|
+
"grid with feature cards",
|
|
199
|
+
"h3 feature titles"
|
|
200
|
+
]
|
|
201
|
+
},
|
|
202
|
+
{
|
|
203
|
+
"id": "numbered-steps",
|
|
204
|
+
"title": "Numbered steps (how it works)",
|
|
205
|
+
"pithy": "<FeaturesSection variant=\"'numbered'\" heading=\"'How it works'\" items=\"steps\"/>",
|
|
206
|
+
"assertions": [
|
|
207
|
+
"grid renders as <ol> with data-variant='numbered'",
|
|
208
|
+
"each card is an <li>",
|
|
209
|
+
"1-based step numbers in .ui-features-step",
|
|
210
|
+
"step number is aria-hidden"
|
|
211
|
+
]
|
|
212
|
+
}
|
|
213
|
+
]
|
|
214
|
+
}
|
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
{
|
|
2
|
+
"kind": "component",
|
|
3
|
+
"id": "ui.footer-section",
|
|
4
|
+
"name": "FooterSection",
|
|
5
|
+
"displayName": "Footer Section",
|
|
6
|
+
"version": "0.1.0",
|
|
7
|
+
"level": "section",
|
|
8
|
+
"domain": "sections",
|
|
9
|
+
"bidi": true,
|
|
10
|
+
"description": "Page footer with navigation link groups, branding, and copyright. Uses semantic <footer> element with <nav> for link groups.",
|
|
11
|
+
"props": [
|
|
12
|
+
{
|
|
13
|
+
"name": "groups",
|
|
14
|
+
"reactive": true,
|
|
15
|
+
"label": "Link groups",
|
|
16
|
+
"type": "FooterLinkGroup[] | Signal<FooterLinkGroup[]>",
|
|
17
|
+
"placeholder": [
|
|
18
|
+
{
|
|
19
|
+
"title": "Product",
|
|
20
|
+
"links": [
|
|
21
|
+
{ "label": "Features", "href": "/features" },
|
|
22
|
+
{ "label": "Pricing", "href": "/pricing" }
|
|
23
|
+
]
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"title": "Company",
|
|
27
|
+
"links": [
|
|
28
|
+
{ "label": "About", "href": "/about" },
|
|
29
|
+
{ "label": "Blog", "href": "/blog" }
|
|
30
|
+
]
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"title": "Support",
|
|
34
|
+
"links": [
|
|
35
|
+
{ "label": "Help", "href": "/help" },
|
|
36
|
+
{ "label": "Contact", "href": "/contact" }
|
|
37
|
+
]
|
|
38
|
+
}
|
|
39
|
+
],
|
|
40
|
+
"description": "Navigation link groups — each with title and array of {label, href} links",
|
|
41
|
+
"itemSchema": {
|
|
42
|
+
"title": {
|
|
43
|
+
"type": "string",
|
|
44
|
+
"required": true,
|
|
45
|
+
"description": "Group heading"
|
|
46
|
+
},
|
|
47
|
+
"links": {
|
|
48
|
+
"type": "array",
|
|
49
|
+
"required": true,
|
|
50
|
+
"description": "Links in this group",
|
|
51
|
+
"itemSchema": {
|
|
52
|
+
"label": {
|
|
53
|
+
"type": "string",
|
|
54
|
+
"required": true,
|
|
55
|
+
"description": "Link text"
|
|
56
|
+
},
|
|
57
|
+
"href": {
|
|
58
|
+
"type": "string",
|
|
59
|
+
"required": true,
|
|
60
|
+
"description": "Link URL"
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"name": "brandName",
|
|
68
|
+
"reactive": true,
|
|
69
|
+
"label": "Brand name",
|
|
70
|
+
"type": "string | Signal<string>",
|
|
71
|
+
"placeholder": "Your Brand",
|
|
72
|
+
"description": "Brand name displayed in copyright line"
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"name": "copyrightYear",
|
|
76
|
+
"label": "Copyright year",
|
|
77
|
+
"editor": { "tab": "settings" },
|
|
78
|
+
"type": "number",
|
|
79
|
+
"description": "Copyright year — defaults to current year"
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"name": "headingLevel",
|
|
83
|
+
"label": "Heading level",
|
|
84
|
+
"editor": { "tab": "settings" },
|
|
85
|
+
"type": "number",
|
|
86
|
+
"enum": [1, 2, 3, 4, 5, 6],
|
|
87
|
+
"default": 3,
|
|
88
|
+
"description": "Heading level for group titles"
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
"name": "spacing",
|
|
92
|
+
"label": "Spacing",
|
|
93
|
+
"editor": { "tab": "layout", "type": "token-space" },
|
|
94
|
+
"type": "enum",
|
|
95
|
+
"enum": ["0", "xs", "sm", "md", "lg", "xl"],
|
|
96
|
+
"default": "lg",
|
|
97
|
+
"description": "Vertical padding — maps to u-py-* utilities"
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"name": "id",
|
|
101
|
+
"label": "Anchor ID",
|
|
102
|
+
"editor": { "tab": "settings" },
|
|
103
|
+
"type": "string",
|
|
104
|
+
"description": "Optional anchor id"
|
|
105
|
+
}
|
|
106
|
+
],
|
|
107
|
+
"events": [],
|
|
108
|
+
"slots": [
|
|
109
|
+
{
|
|
110
|
+
"name": "extras",
|
|
111
|
+
"displayName": "Extras",
|
|
112
|
+
"description": "Extra footer content such as social icons or a newsletter form."
|
|
113
|
+
}
|
|
114
|
+
],
|
|
115
|
+
"tokens": {
|
|
116
|
+
"spacing.vertical": "--space-{spacing} (via u-py-*)",
|
|
117
|
+
"spacing.container": "--space-md (gutter padding)",
|
|
118
|
+
"border.divider": "--border-width-hairline, --color-border",
|
|
119
|
+
"copyright.color": "--color-text-muted"
|
|
120
|
+
},
|
|
121
|
+
"spacing": {
|
|
122
|
+
"groups-gap": "--space-lg (acquaintances — between link group columns)",
|
|
123
|
+
"title-to-links": "--space-sm (close friends — group title and link list)",
|
|
124
|
+
"link-items": "--space-xs (lovers — between individual links)",
|
|
125
|
+
"nav-to-children": "--space-lg (acquaintances — nav and custom content)",
|
|
126
|
+
"divider-to-copyright": "--space-lg (acquaintances — divider and copyright)"
|
|
127
|
+
},
|
|
128
|
+
"designGuidance": {
|
|
129
|
+
"surface": "Footer has no background fill — it's separated from content by a hairline border at the top (--border-width-hairline, --color-border). The divider between nav and copyright uses the same treatment.",
|
|
130
|
+
"depth": "No shadows. Footer is flat and subordinate to page content. Visual hierarchy comes from muted text colors and smaller font sizes.",
|
|
131
|
+
"borders": "Top border on the footer element and an <hr> divider above copyright. Both use --color-border hairline weight. In forced-colors mode, borders use CanvasText.",
|
|
132
|
+
"interactivity": "Links use --color-text-muted at rest with --font-size-sm. On hover, color transitions to --color-primary (motion-safe). In forced-colors mode, links use LinkText system color.",
|
|
133
|
+
"bestPractices": [
|
|
134
|
+
"Footer links should be muted and small — they are secondary navigation, not primary CTAs",
|
|
135
|
+
"Always set brandName for professional copyright line",
|
|
136
|
+
"3-4 link groups is the sweet spot — more becomes overwhelming on mobile",
|
|
137
|
+
"Grid auto-collapses columns on narrow viewports — no breakpoint management needed",
|
|
138
|
+
"Project social icons or newsletter signup into the default slot between nav and copyright"
|
|
139
|
+
]
|
|
140
|
+
},
|
|
141
|
+
"constraints": [
|
|
142
|
+
"Uses semantic <footer> element (not <section>)",
|
|
143
|
+
"Navigation links wrapped in <nav aria-label='Footer'> when groups are provided",
|
|
144
|
+
"Link groups use <ul>/<li> semantic markup",
|
|
145
|
+
"Group titles use heading level for proper hierarchy",
|
|
146
|
+
"Copyright year defaults to current year if omitted"
|
|
147
|
+
],
|
|
148
|
+
"a11y": [
|
|
149
|
+
"Renders semantic <footer> element",
|
|
150
|
+
"<nav aria-label='Footer'> for navigation links",
|
|
151
|
+
"Link groups use <ul>/<li> for screen reader list navigation",
|
|
152
|
+
"Each link list carries an explicit role=\"list\" because u-list-reset applies list-style: none !important, which strips list semantics in Safari/VoiceOver — the attribute is load-bearing, not redundant, and must not be removed",
|
|
153
|
+
"Group titles use correct heading level for document outline",
|
|
154
|
+
"Divider uses <hr> element for semantic separation"
|
|
155
|
+
],
|
|
156
|
+
"ai": {
|
|
157
|
+
"synonyms": [
|
|
158
|
+
"footer",
|
|
159
|
+
"page footer",
|
|
160
|
+
"site footer",
|
|
161
|
+
"bottom bar",
|
|
162
|
+
"footer nav"
|
|
163
|
+
],
|
|
164
|
+
"avoid": [
|
|
165
|
+
"div for footer — use FooterSection with semantic <footer>",
|
|
166
|
+
"plain text links — use groups with structured link arrays"
|
|
167
|
+
],
|
|
168
|
+
"patterns": [
|
|
169
|
+
"Basic footer: <FooterSection brandName=\"'PithyJS'\" groups=\"footerGroups\"/>",
|
|
170
|
+
"With social icons: <FooterSection brandName=\"'Acme'\" groups=\"navGroups\"><div>Social icons here</div></FooterSection>",
|
|
171
|
+
"Minimal copyright: <FooterSection brandName=\"'MyApp'\"/>"
|
|
172
|
+
]
|
|
173
|
+
},
|
|
174
|
+
"examples": [
|
|
175
|
+
{
|
|
176
|
+
"id": "full-footer",
|
|
177
|
+
"title": "Footer with nav groups and copyright",
|
|
178
|
+
"pithy": "<FooterSection brandName=\"'PithyJS'\" groups=\"[{title:'Product',links:[{label:'Features',href:'/features'}]},{title:'Company',links:[{label:'About',href:'/about'}]}]\"/>",
|
|
179
|
+
"assertions": [
|
|
180
|
+
"renders <footer>",
|
|
181
|
+
"<nav> with aria-label",
|
|
182
|
+
"link groups in grid",
|
|
183
|
+
"copyright with brand name"
|
|
184
|
+
]
|
|
185
|
+
}
|
|
186
|
+
]
|
|
187
|
+
}
|
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
{
|
|
2
|
+
"kind": "component",
|
|
3
|
+
"id": "ui.hero-section",
|
|
4
|
+
"name": "HeroSection",
|
|
5
|
+
"displayName": "Hero Section",
|
|
6
|
+
"version": "0.1.0",
|
|
7
|
+
"level": "section",
|
|
8
|
+
"domain": "sections",
|
|
9
|
+
"bidi": true,
|
|
10
|
+
"description": "Hero section template with heading, subtext, and CTA area. Two layout variants: centered (stacked, text-centered) and split (image + text side by side). Children projected as CTA buttons.",
|
|
11
|
+
"props": [
|
|
12
|
+
{
|
|
13
|
+
"name": "variant",
|
|
14
|
+
"label": "Variant",
|
|
15
|
+
"type": "enum",
|
|
16
|
+
"enum": ["centered", "split"],
|
|
17
|
+
"default": "centered",
|
|
18
|
+
"description": "Layout variant — centered (stacked with center-aligned text) or split (image beside text)"
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"name": "eyebrow",
|
|
22
|
+
"reactive": true,
|
|
23
|
+
"label": "Eyebrow",
|
|
24
|
+
"type": "string | Signal<string>",
|
|
25
|
+
"placeholder": "NEW",
|
|
26
|
+
"description": "Small uppercased label above the heading (e.g. 'NEW', 'INTRODUCING')"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"name": "heading",
|
|
30
|
+
"reactive": true,
|
|
31
|
+
"label": "Heading",
|
|
32
|
+
"type": "string | Signal<string>",
|
|
33
|
+
"required": true,
|
|
34
|
+
"placeholder": "Build something amazing",
|
|
35
|
+
"description": "Primary heading text"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"name": "headingLevel",
|
|
39
|
+
"label": "Heading level",
|
|
40
|
+
"editor": { "tab": "settings" },
|
|
41
|
+
"type": "number",
|
|
42
|
+
"enum": [1, 2, 3, 4, 5, 6],
|
|
43
|
+
"default": 1,
|
|
44
|
+
"description": "Heading level for semantic correctness — typically 1 for page hero"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"name": "subheading",
|
|
48
|
+
"reactive": true,
|
|
49
|
+
"label": "Subheading",
|
|
50
|
+
"type": "string | Signal<string>",
|
|
51
|
+
"placeholder": "Ship faster with a framework designed for performance and developer joy.",
|
|
52
|
+
"description": "Subheading / description text displayed below the heading"
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"name": "imageSrc",
|
|
56
|
+
"reactive": true,
|
|
57
|
+
"label": "Image source",
|
|
58
|
+
"type": "string | Signal<string>",
|
|
59
|
+
"editor": { "visibleWhen": { "prop": "variant", "equals": "split" } },
|
|
60
|
+
"placeholder": "https://placehold.co/480x320?text=Hero+image",
|
|
61
|
+
"description": "Image source URL for split variant hero"
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"name": "imageAlt",
|
|
65
|
+
"reactive": true,
|
|
66
|
+
"label": "Alt text",
|
|
67
|
+
"type": "string | Signal<string>",
|
|
68
|
+
"kind": "alt-text",
|
|
69
|
+
"editor": { "visibleWhen": { "prop": "variant", "equals": "split" } },
|
|
70
|
+
"placeholder": "Replace this image and update the alt text",
|
|
71
|
+
"description": "Image alt text — required when imageSrc is provided"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"name": "imageWidth",
|
|
75
|
+
"label": "Image width",
|
|
76
|
+
"editor": {
|
|
77
|
+
"tab": "layout",
|
|
78
|
+
"visibleWhen": { "prop": "variant", "equals": "split" }
|
|
79
|
+
},
|
|
80
|
+
"type": "number",
|
|
81
|
+
"placeholder": 480,
|
|
82
|
+
"description": "Image width for CLS prevention"
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"name": "imageHeight",
|
|
86
|
+
"label": "Image height",
|
|
87
|
+
"editor": {
|
|
88
|
+
"tab": "layout",
|
|
89
|
+
"visibleWhen": { "prop": "variant", "equals": "split" }
|
|
90
|
+
},
|
|
91
|
+
"type": "number",
|
|
92
|
+
"placeholder": 320,
|
|
93
|
+
"description": "Image height for CLS prevention"
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
"name": "spacing",
|
|
97
|
+
"label": "Spacing",
|
|
98
|
+
"editor": { "tab": "layout", "type": "token-space" },
|
|
99
|
+
"type": "enum",
|
|
100
|
+
"enum": ["0", "xs", "sm", "md", "lg", "xl"],
|
|
101
|
+
"default": "xl",
|
|
102
|
+
"description": "Vertical padding — maps to u-py-* utilities"
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
"name": "id",
|
|
106
|
+
"label": "Anchor ID",
|
|
107
|
+
"editor": { "tab": "settings" },
|
|
108
|
+
"type": "string",
|
|
109
|
+
"description": "Optional anchor id for in-page linking"
|
|
110
|
+
}
|
|
111
|
+
],
|
|
112
|
+
"events": [],
|
|
113
|
+
"slots": [
|
|
114
|
+
{
|
|
115
|
+
"name": "actions",
|
|
116
|
+
"displayName": "Actions",
|
|
117
|
+
"description": "Call-to-action buttons rendered below the heading.",
|
|
118
|
+
"accepts": ["ui.button"]
|
|
119
|
+
}
|
|
120
|
+
],
|
|
121
|
+
"tokens": {
|
|
122
|
+
"spacing.vertical": "--space-{spacing} (via u-py-*)",
|
|
123
|
+
"spacing.container": "--space-md (gutter padding)",
|
|
124
|
+
"heading.color": "--color-text (via Heading component)",
|
|
125
|
+
"subheading.color": "--color-text-muted (via Text component)"
|
|
126
|
+
},
|
|
127
|
+
"spacing": {
|
|
128
|
+
"heading-to-subheading": "--space-sm (close friends — heading and subheading)",
|
|
129
|
+
"content-to-actions": "--space-lg (acquaintances — text block and CTA buttons)",
|
|
130
|
+
"content-to-image": "--space-xl (strangers — content side and image side in split)"
|
|
131
|
+
},
|
|
132
|
+
"designGuidance": {
|
|
133
|
+
"surface": "Hero uses a subtle radial gradient glow (::before pseudo-element) for visual depth. No explicit background — relies on page background for transparency. The glow uses --color-primary at 8% opacity for brand presence.",
|
|
134
|
+
"depth": "Content sits at z-index: 1 above the decorative glow. No box-shadow on the section itself — depth comes from the radial gradient and spacing.",
|
|
135
|
+
"borders": "No borders on hero — it should feel open and expansive. Section separation achieved through generous vertical padding (--space-xl).",
|
|
136
|
+
"interactivity": "Hero is not interactive. CTA buttons handle all interaction. Use eyebrow prop for extra polish signal above the heading.",
|
|
137
|
+
"bestPractices": [
|
|
138
|
+
"Always use eyebrow + heading + subheading for a complete visual hierarchy",
|
|
139
|
+
"Prefer ghost variant over outline for secondary CTA button — outline border competes with the solid button's weight",
|
|
140
|
+
"Center-aligned headings should be short (2-5 words) — text-wrap: balance prevents orphaned words",
|
|
141
|
+
"Description text is constrained to 60ch max for readability — do not override",
|
|
142
|
+
"Split variant stacks on narrow viewports — design content to work in both orientations"
|
|
143
|
+
]
|
|
144
|
+
},
|
|
145
|
+
"constraints": [
|
|
146
|
+
"imageSrc requires imageAlt for accessibility",
|
|
147
|
+
"imageSrc and imageAlt are only meaningful in the 'split' variant",
|
|
148
|
+
"Use headingLevel=1 for page hero, headingLevel=2 when used mid-page",
|
|
149
|
+
"Children should contain CTA buttons — projected into the actions area",
|
|
150
|
+
"Split variant uses flex-wrap with min-column tokens — stacks naturally when container is too narrow for two columns",
|
|
151
|
+
"Split container uses fluid-center-parent (justify-content: center) and text side uses fluid-center-child (max-inline-size) — text block centers when wrapped to full width; image absorbs remaining space in two-column mode so centering has no effect"
|
|
152
|
+
],
|
|
153
|
+
"a11y": [
|
|
154
|
+
"Renders semantic <section> element with aria-labelledby linked to heading",
|
|
155
|
+
"Heading uses correct <h1>-<h6> tag via Heading component",
|
|
156
|
+
"Image requires alt text when provided",
|
|
157
|
+
"CTA buttons in actions area maintain natural tab order"
|
|
158
|
+
],
|
|
159
|
+
"ai": {
|
|
160
|
+
"synonyms": [
|
|
161
|
+
"hero",
|
|
162
|
+
"banner",
|
|
163
|
+
"landing hero",
|
|
164
|
+
"above the fold",
|
|
165
|
+
"splash",
|
|
166
|
+
"hero banner"
|
|
167
|
+
],
|
|
168
|
+
"avoid": [
|
|
169
|
+
"div with large text — use HeroSection with heading prop",
|
|
170
|
+
"skipping heading levels — use headingLevel prop correctly",
|
|
171
|
+
"image without alt text — always provide imageAlt with imageSrc"
|
|
172
|
+
],
|
|
173
|
+
"patterns": [
|
|
174
|
+
"Landing page hero: <HeroSection heading=\"'Welcome'\" subheading=\"'Build faster'\"><Button>Get Started</Button></HeroSection>",
|
|
175
|
+
"Split hero with image: <HeroSection variant=\"'split'\" heading=\"'Product Name'\" imageSrc=\"'/hero.jpg'\" imageAlt=\"'Product screenshot'\"><Button>Try Free</Button></HeroSection>",
|
|
176
|
+
"Mid-page hero: <HeroSection headingLevel=\"2\" heading=\"'Features'\" spacing=\"'lg'\"/>"
|
|
177
|
+
]
|
|
178
|
+
},
|
|
179
|
+
"examples": [
|
|
180
|
+
{
|
|
181
|
+
"id": "centered-hero",
|
|
182
|
+
"title": "Centered hero with CTA",
|
|
183
|
+
"pithy": "<HeroSection heading=\"'Welcome to PithyJS'\" subheading=\"'Build faster with fine-grained reactivity'\"><Button color=\"'primary'\">Get Started</Button><Button variant=\"'outline'\">Learn More</Button></HeroSection>",
|
|
184
|
+
"assertions": [
|
|
185
|
+
"renders <section>",
|
|
186
|
+
"h1 with heading text",
|
|
187
|
+
"p with subheading",
|
|
188
|
+
"children in actions area"
|
|
189
|
+
]
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
"id": "split-hero",
|
|
193
|
+
"title": "Split hero with image",
|
|
194
|
+
"pithy": "<HeroSection variant=\"'split'\" heading=\"'Ship Faster'\" imageSrc=\"'/hero.jpg'\" imageAlt=\"'Dashboard'\"><Button>Start Free</Button></HeroSection>",
|
|
195
|
+
"assertions": [
|
|
196
|
+
"renders split layout",
|
|
197
|
+
"image present",
|
|
198
|
+
"content beside image"
|
|
199
|
+
]
|
|
200
|
+
}
|
|
201
|
+
]
|
|
202
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/** @codex { "id": "pithy.pidl-catalog.borders-psychology", "title": "Borders Psychology Guidance", "category": "feature" } */
|
|
2
|
+
/**
|
|
3
|
+
* Borders Psychology guidance — proprietary research-backed border-weight rules,
|
|
4
|
+
* injected into the AI system prompt so generated sites use a border style that
|
|
5
|
+
* fits the user's industry / use-case / mood.
|
|
6
|
+
*
|
|
7
|
+
* Border weight signals structure and definition: minimal/none reads airy,
|
|
8
|
+
* modern, content-first; subtle reads gently defined; standard reads clear and
|
|
9
|
+
* structured; strong reads bold, utilitarian, data-dense. Maps onto the design
|
|
10
|
+
* system's border presets (minimal / subtle / standard / strong). Intentionally
|
|
11
|
+
* compact for the 0.1 release.
|
|
12
|
+
*
|
|
13
|
+
* This file lives in the private @pithyjs/pidl-catalog package and is NEVER
|
|
14
|
+
* published to npm — it is IP and must stay server-side.
|
|
15
|
+
*/
|
|
16
|
+
export declare const BORDERS_PSYCHOLOGY_GUIDANCE: string;
|
|
17
|
+
//# sourceMappingURL=borders-psychology.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"borders-psychology.d.ts","sourceRoot":"","sources":["../../src/borders-psychology.ts"],"names":[],"mappings":"AAAA,8HAA8H;AAE9H;;;;;;;;;;;;;GAaG;AAEH,eAAO,MAAM,2BAA2B,QAyBhC,CAAC"}
|