@repobit/dex-system-design 0.23.17 → 0.23.19

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 (4) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/package.json +5 -6
  3. package/src/components/anchor/anchor-nav.css.js +1 -1
  4. package/src/components/anchor/anchor.stories.js +243 -96
package/CHANGELOG.md CHANGED
@@ -3,6 +3,21 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.23.19](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.18...@repobit/dex-system-design@0.23.19) (2026-05-04)
7
+
8
+ ### Bug Fixes
9
+
10
+ * **DEX-27259:** update dependencies to fixed versions
11
+ * **DEX-27259:** update internal workspace dependencies
12
+
13
+
14
+ ## [0.23.18](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.17...@repobit/dex-system-design@0.23.18) (2026-04-30)
15
+
16
+ ### Bug Fixes
17
+
18
+ * **DEX-1014:** css adjustments for anchor-nav
19
+
20
+
6
21
  ## [0.23.17](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.16...@repobit/dex-system-design@0.23.17) (2026-04-29)
7
22
 
8
23
  ### Bug Fixes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@repobit/dex-system-design",
3
- "version": "0.23.17",
3
+ "version": "0.23.19",
4
4
  "description": "Design system based on Web Components.",
5
5
  "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
6
6
  "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -70,10 +70,9 @@
70
70
  "url": "https://github.com/bitdefender/dex-core/issues"
71
71
  },
72
72
  "dependencies": {
73
- "@repobit/dex-store": "^1.3.14",
74
- "@repobit/dex-store-elements": "^1.4.6",
75
- "lit": "^3.3.2",
76
- "lit-query": "^0.0.1"
73
+ "@repobit/dex-store": "1.3.15",
74
+ "@repobit/dex-store-elements": "1.4.7",
75
+ "lit": "^3.3.2"
77
76
  },
78
77
  "devDependencies": {
79
78
  "@chromatic-com/storybook": "^3.2.7",
@@ -89,5 +88,5 @@
89
88
  "volta": {
90
89
  "node": "24.14.0"
91
90
  },
92
- "gitHead": "7e0f9b42767c23f33e6b6b79665bec599b432a69"
91
+ "gitHead": "1de08b3f76a15755f3776728a8305dda06ec3173"
93
92
  }
package/src/components/anchor/anchor-nav.css.js CHANGED
@@ -6,7 +6,7 @@ export const anchorNavStyles = css`
6
6
  width: 100%;
7
7
  background: var(--color-neutral-0);
8
8
  --bd-accesibility-focus: var(--color-blue-500);
9
- --anchor-nav-max-width: var(--layout-compare-grid-max, 100%);
9
+ --anchor-nav-max-width: 1290px;
10
10
  }
11
11
 
12
12
  :host(.is-sticky) {
package/src/components/anchor/anchor.stories.js CHANGED
@@ -3,9 +3,8 @@ import "../Button/Button.js";
3
3
  import "../heading/heading.js";
4
4
  import "../image/image.js";
5
5
  import "../link/link.js";
6
- import "./anchor-nav.js";
7
-
8
6
  import "../paragraph/paragraph.js";
7
+ import "./anchor-nav.js";
9
8
 
10
9
  export default {
11
10
  title : "Components/AnchorNav",
@@ -14,49 +13,88 @@ export default {
14
13
  docs: {
15
14
  description: {
16
15
  component: `
17
- **BdAnchorNav** is a sticky navigation bar with anchor links and a customizable CTA button.
16
+ **BdAnchorNav** este un navbar sticky cu linkuri de ancorare și un buton CTA customizabil.
17
+
18
+ Lățimea conținutului interior se ajustează **automat** la cel mai lat sibling din containerul părinte,
19
+ prin \`ResizeObserver\` — fără a fi necesară setarea manuală a \`max-width\`.
20
+
21
+ ### Elemente
22
+ - \`<bd-anchor-nav>\` — containerul nav
23
+ - \`<bd-anchor-nav-item>\` — item declarativ (via atributul \`title\` și opțional \`href\`)
24
+ - \`slot="cta"\` — slot opțional pentru butonul CTA (fallback: \`<a>\` simplu)
25
+
26
+ ### Sticky behavior
27
+ - Când navul iese din viewport, devine \`position: fixed\` full-width
28
+ - Border-ul și background-ul sunt full-width
29
+ - Conținutul (linkuri + CTA) rămâne centrat și aliniat cu cel mai lat sibling
30
+
31
+ ---
32
+
33
+ ### Utilizare simplă (fallback CTA)
34
+ \`\`\`html
35
+ <div>
36
+ <bd-anchor-nav cta-label="Buy now" cta-href="https://www.bitdefender.com/buy">
37
+ <bd-anchor-nav-item title="Overview" href="#overview"></bd-anchor-nav-item>
38
+ <bd-anchor-nav-item title="Features" href="#features"></bd-anchor-nav-item>
39
+ <bd-anchor-nav-item title="Pricing" href="#pricing"></bd-anchor-nav-item>
40
+ </bd-anchor-nav>
18
41
 
19
- ### Elements
20
- - \`<bd-anchor-nav>\` — the nav container
21
- - \`<bd-anchor-nav-item>\` — declarative items (via \`title\` and optional \`href\` attributes)
42
+ <bd-compare-section>...</bd-compare-section>
43
+ <section id="overview">...</section>
44
+ </div>
45
+ \`\`\`
22
46
 
23
- ### Usage — child elements
47
+ ### Utilizare cu slot CTA customizat
24
48
  \`\`\`html
25
- <bd-anchor-nav cta-label="Buy now" cta-href="https://www.bitdefender.com/buy">
26
- <bd-anchor-nav-item title="Overview" href="#anchor-1-section"></bd-anchor-nav-item>
27
- <bd-anchor-nav-item title="Features" href="#anchor-2-section"></bd-anchor-nav-item>
28
- <bd-anchor-nav-item title="Pricing" href="#section-pricing"></bd-anchor-nav-item>
49
+ <bd-anchor-nav>
50
+ <bd-anchor-nav-item title="Overview" href="#overview"></bd-anchor-nav-item>
51
+ <bd-anchor-nav-item title="Pricing" href="#pricing"></bd-anchor-nav-item>
52
+
53
+ <bd-button-link
54
+ slot="cta"
55
+ kind="danger"
56
+ size="md"
57
+ href="https://www.bitdefender.com/buy"
58
+ label="Cumpără acum"
59
+ buyLink
60
+ >
61
+ Cumpără acum
62
+ </bd-button-link>
29
63
  </bd-anchor-nav>
30
64
  \`\`\`
31
65
 
32
- ### Usage — programmatic items prop
66
+ ### Utilizare programatică cu \`.items\`
33
67
  \`\`\`html
34
68
  <bd-anchor-nav
35
69
  cta-label="Buy now"
36
70
  cta-href="https://www.bitdefender.com/buy"
37
- .items=${[
38
- { title: "Overview", href: "#anchor-1-section" },
39
- { title: "Features", href: "#anchor-2-section" },
40
- { title: "Pricing", href: "#section-pricing" }
71
+ .items=\${[
72
+ { title: "Overview", href: "#overview" },
73
+ { title: "Features", href: "#features" },
74
+ { title: "Pricing", href: "#pricing" }
41
75
  ]}
42
76
  ></bd-anchor-nav>
43
77
  \`\`\`
44
78
 
45
- ### Attributes
46
-
47
- #### \`bd-anchor-nav\`
48
- | Attribute | Type | Default | Description |
49
- |--------------|--------|----------------------|------------------------------------------------------|
50
- | \`cta-label\` | String | \`"Buy now"\` | Text label for the CTA button |
51
- | \`cta-href\` | String | \`"#section-pricing"\` | href for the CTA button |
52
- | \`aria-label\` | String | \`"Section navigation"\` | Accessible label for the \`<nav>\` landmark |
53
- | \`items\` | Array | — | \`{ title, href }[]\` — overrides child elements |
54
-
55
- #### \`bd-anchor-nav-item\`
56
- | Attribute | Type | Description |
57
- |-----------|--------|----------------------------------------------------------|
58
- | \`title\` | String | Link label |
59
- | \`href\` | String | Target URL or anchor (default: \`#anchor-N-section\`) |
79
+ ---
80
+
81
+ ### Atribute \`bd-anchor-nav\`
82
+ | Atribut | Tip | Default | Descriere |
83
+ |--------------|--------|--------------------------|--------------------------------------------------|
84
+ | \`cta-label\` | String | \`"Buy now"\` | Textul butonului CTA fallback |
85
+ | \`cta-href\` | String | \`"#section-pricing"\` | href-ul butonului CTA fallback |
86
+ | \`aria-label\` | String | \`"Section navigation"\` | Label accesibil pentru \`<nav>\` |
87
+ | \`items\` | Array | — | \`{ title, href }[]\` — suprascrie child items |
88
+
89
+ ### Atribute \`bd-anchor-nav-item\`
90
+ | Atribut | Tip | Descriere |
91
+ |---------|--------|--------------------------------------------------------|
92
+ | \`title\` | String | Textul linkului |
93
+ | \`href\` | String | URL sau ancoră (default: \`#anchor-N-section\`) |
94
+
95
+ ### Slot \`cta\`
96
+ Orice element cu \`slot="cta"\` înlocuiește butonul CTA fallback.
97
+ Pe mobile devine automat full-width prin \`::slotted([slot="cta"])\`.
60
98
  `
61
99
  }
62
100
  }
@@ -64,17 +102,17 @@ export default {
64
102
  argTypes: {
65
103
  ctaLabel: {
66
104
  control : "text",
67
- description: "Text label for the CTA button",
105
+ description: "Textul butonului CTA fallback",
68
106
  table : { type: { summary: "string" }, defaultValue: { summary: "Buy now" }, category: "CTA" }
69
107
  },
70
108
  ctaHref: {
71
109
  control : "text",
72
- description: "href for the CTA button",
110
+ description: "href-ul butonului CTA fallback",
73
111
  table : { type: { summary: "string" }, defaultValue: { summary: "#section-pricing" }, category: "CTA" }
74
112
  },
75
113
  items: {
76
114
  control : "object",
77
- description: "Array of { title, href } objects (overrides child elements)",
115
+ description: "Array de { title, href } — suprascrie child elements",
78
116
  table : { type: { summary: "{ title: string, href: string }[]" }, category: "Content" }
79
117
  }
80
118
  }
@@ -83,18 +121,36 @@ export default {
83
121
 
84
122
  // ─── Helpers ─────────────────────────────────────────────────────────────────
85
123
 
86
- const renderNavChildren = (labels, ctaLabel = "Buy now", ctaHref = "#section-pricing") => html`
124
+ const navItems = (labels) => labels.map((item) => html`
125
+ <bd-anchor-nav-item
126
+ title=${typeof item === "string" ? item : item.title}
127
+ href=${typeof item === "string" ? "" : (item.href || "")}
128
+ ></bd-anchor-nav-item>
129
+ `);
130
+
131
+ const renderSimple = (labels, ctaLabel = "Buy now", ctaHref = "#section-pricing") => html`
87
132
  <bd-anchor-nav cta-label=${ctaLabel} cta-href=${ctaHref}>
88
- ${labels.map((item) => html`
89
- <bd-anchor-nav-item
90
- title=${typeof item === "string" ? item : item.title}
91
- href=${typeof item === "string" ? "" : (item.href || "")}
92
- ></bd-anchor-nav-item>
93
- `)}
133
+ ${navItems(labels)}
94
134
  </bd-anchor-nav>
95
135
  `;
96
136
 
97
- const renderNavItems = (items, ctaLabel = "Buy now", ctaHref = "#section-pricing") => html`
137
+ const renderWithSlotCta = (labels, ctaLabel = "Cumpără acum", ctaHref = "#section-pricing") => html`
138
+ <bd-anchor-nav>
139
+ ${navItems(labels)}
140
+ <bd-button-link
141
+ slot="cta"
142
+ kind="danger"
143
+ size="md"
144
+ href=${ctaHref}
145
+ label=${ctaLabel}
146
+ font-size="16px"
147
+ font-weight="600"
148
+ buyLink
149
+ >${ctaLabel}</bd-button-link>
150
+ </bd-anchor-nav>
151
+ `;
152
+
153
+ const renderWithItems = (items, ctaLabel = "Buy now", ctaHref = "#section-pricing") => html`
98
154
  <bd-anchor-nav
99
155
  cta-label=${ctaLabel}
100
156
  cta-href=${ctaHref}
@@ -102,16 +158,92 @@ const renderNavItems = (items, ctaLabel = "Buy now", ctaHref = "#section-pricing
102
158
  ></bd-anchor-nav>
103
159
  `;
104
160
 
161
+ /** Wrapper cu conținut sibling pentru a demonstra auto max-width */
162
+ const withSiblingContent = (navTemplate) => html`
163
+ <div style="margin: 0 auto;">
164
+ ${navTemplate}
165
+ <div style="
166
+ max-width: 900px;
167
+ margin: 0 auto;
168
+ padding: 40px 24px;
169
+ background: #f0f9ff;
170
+ border: 2px dashed #bfdbfe;
171
+ border-radius: 8px;
172
+ text-align: center;
173
+ color: #1e40af;
174
+ font-family: sans-serif;
175
+ ">
176
+ <strong>Sibling content — 900px max-width</strong><br>
177
+ <span style="font-size: 0.875rem; opacity: 0.8;">
178
+ Navul se aliniază automat la lățimea acestui element
179
+ </span>
180
+ </div>
181
+ </div>
182
+ `;
183
+
105
184
 
106
185
  // ─── Stories ─────────────────────────────────────────────────────────────────
107
186
 
108
187
  export const Default = {
109
- name : "Default (4 items)",
110
- render : () => renderNavChildren(["Overview", "Features", "Reviews", "Pricing"]),
188
+ name : "Default — fallback CTA",
189
+ render : () => renderSimple(["Overview", "Features", "Reviews", "Pricing"]),
111
190
  parameters: {
112
191
  docs: {
113
192
  description: {
114
- story: "Default nav with four anchor links. Each link auto-targets `#anchor-N-section`. The CTA defaults to `#section-pricing`."
193
+ story: "Nav cu 4 linkuri și butonul CTA fallback (`<a>` simplu). Fiecare link targhetează automat `#anchor-N-section`."
194
+ }
195
+ }
196
+ }
197
+ };
198
+
199
+ export const WithSlotCta = {
200
+ name : "Cu slot CTA — bd-button-link danger",
201
+ render : () => renderWithSlotCta(["Overview", "Features", "Reviews", "Pricing"]),
202
+ parameters: {
203
+ docs: {
204
+ description: {
205
+ story: "CTA customizat prin `slot=\"cta\"` cu `bd-button-link kind=\"danger\"`. Pe mobile devine automat full-width."
206
+ }
207
+ }
208
+ }
209
+ };
210
+
211
+ export const WithSlotCtaOutline = {
212
+ name : "Cu slot CTA — bd-button-link outline",
213
+ render: () => html`
214
+ <bd-anchor-nav>
215
+ ${navItems(["Overview", "Features", "Pricing"])}
216
+ <bd-button-link
217
+ slot="cta"
218
+ kind="outline"
219
+ size="md"
220
+ href="https://www.bitdefender.com/buy"
221
+ label="Cumpără acum"
222
+ font-size="16px"
223
+ font-weight="600"
224
+ >Cumpără acum</bd-button-link>
225
+ </bd-anchor-nav>
226
+ `,
227
+ parameters: {
228
+ docs: {
229
+ description: {
230
+ story: "CTA cu `kind=\"outline\"` — demonstrează flexibilitatea slot-ului CTA."
231
+ }
232
+ }
233
+ }
234
+ };
235
+
236
+ export const AutoMaxWidth = {
237
+ name : "Auto max-width — aliniere la sibling",
238
+ render: () => withSiblingContent(
239
+ renderSimple(["Overview", "Features", "Pricing"])
240
+ ),
241
+ parameters: {
242
+ docs: {
243
+ description: {
244
+ story: `Navul detectează automat lățimea celui mai lat sibling din containerul părinte
245
+ (via \`ResizeObserver\`) și centrează conținutul la acea lățime.
246
+ Border-ul rămâne full-width. Nu este necesară nicio configurare manuală.`
115
247
  }
116
248
  }
117
249
  }
@@ -119,7 +251,7 @@ export const Default = {
119
251
 
120
252
  export const CustomCtaHref = {
121
253
  name : "Custom CTA href",
122
- render: () => renderNavChildren(
254
+ render: () => renderSimple(
123
255
  ["Overview", "Features", "Reviews", "Pricing"],
124
256
  "Get Bitdefender",
125
257
  "https://www.bitdefender.com/buy"
@@ -127,14 +259,14 @@ export const CustomCtaHref = {
127
259
  parameters: {
128
260
  docs: {
129
261
  description: {
130
- story: "CTA button uses a full external URL via `cta-href`. The button label is overridden with `cta-label`."
262
+ story: "CTA fallback cu URL extern via `cta-href` și label customizat via `cta-label`."
131
263
  }
132
264
  }
133
265
  }
134
266
  };
135
267
 
136
268
  export const CustomItemHrefs = {
137
- name : "Custom item hrefs (child elements)",
269
+ name : "Custom item hrefs",
138
270
  render: () => html`
139
271
  <bd-anchor-nav cta-label="Buy now" cta-href="#section-pricing">
140
272
  <bd-anchor-nav-item title="Overview" href="#overview"></bd-anchor-nav-item>
@@ -146,15 +278,15 @@ export const CustomItemHrefs = {
146
278
  parameters: {
147
279
  docs: {
148
280
  description: {
149
- story: "Each `bd-anchor-nav-item` has a custom `href` attribute pointing to a specific section ID."
281
+ story: "Fiecare `bd-anchor-nav-item` are `href` customizat către un ID de secțiune specific."
150
282
  }
151
283
  }
152
284
  }
153
285
  };
154
286
 
155
287
  export const ProgrammaticItems = {
156
- name : "Programmatic items prop",
157
- render: () => renderNavItems(
288
+ name : "Programmatic .items prop",
289
+ render: () => renderWithItems(
158
290
  [
159
291
  { title: "Overview", href: "#anchor-1-section" },
160
292
  { title: "Features", href: "#anchor-2-section" },
@@ -167,7 +299,7 @@ export const ProgrammaticItems = {
167
299
  parameters: {
168
300
  docs: {
169
301
  description: {
170
- story: "Items defined via the `.items` property array instead of child elements. Useful for dynamic rendering from CMS data."
302
+ story: "Items definite via proprietatea `.items` — util pentru date din CMS sau config externă."
171
303
  }
172
304
  }
173
305
  }
@@ -175,37 +307,31 @@ export const ProgrammaticItems = {
175
307
 
176
308
  export const TwoItems = {
177
309
  name : "Two Items",
178
- render : () => renderNavChildren(["Overview", "Pricing"]),
310
+ render : () => renderSimple(["Overview", "Pricing"]),
179
311
  parameters: {
180
- docs: {
181
- description: { story: "Minimal nav with only two items." }
182
- }
312
+ docs: { description: { story: "Nav minimal cu 2 items." } }
183
313
  }
184
314
  };
185
315
 
186
316
  export const ManyItems = {
187
317
  name : "Many Items (7)",
188
- render : () => renderNavChildren(["Overview", "Features", "Security", "Performance", "Reviews", "FAQ", "Pricing"]),
318
+ render : () => renderSimple(["Overview", "Features", "Security", "Performance", "Reviews", "FAQ", "Pricing"]),
189
319
  parameters: {
190
- docs: {
191
- description: { story: "Seven items — tests overflow and truncation on narrow viewports." }
192
- }
320
+ docs: { description: { story: "7 items — testează overflow și truncarea pe viewport-uri înguste." } }
193
321
  }
194
322
  };
195
323
 
196
324
  export const SingleItem = {
197
- name : "Single Item (edge case)",
198
- render : () => renderNavChildren(["Pricing"]),
325
+ name : "Single Item",
326
+ render : () => renderSimple(["Pricing"]),
199
327
  parameters: {
200
- docs: {
201
- description: { story: "Edge case: single anchor item. Should be active by default." }
202
- }
328
+ docs: { description: { story: "Edge case: un singur item — trebuie să fie activ by default." } }
203
329
  }
204
330
  };
205
331
 
206
332
  export const LongLabels = {
207
- name : "Long Item Labels",
208
- render: () => renderNavChildren([
333
+ name : "Long Labels",
334
+ render: () => renderSimple([
209
335
  "Product Overview",
210
336
  "Advanced Security Features",
211
337
  "Performance Benchmarks",
@@ -213,47 +339,66 @@ export const LongLabels = {
213
339
  "Plans & Pricing"
214
340
  ]),
215
341
  parameters: {
216
- docs: {
217
- description: { story: "Long label strings — tests text overflow and wrapping." }
218
- }
342
+ docs: { description: { story: "Labels lungi — testează text overflow și wrapping." } }
219
343
  }
220
344
  };
221
345
 
222
346
  export const WithScrollTargets = {
223
- name : "With Scroll Targets",
347
+ name : "With Scroll Targets — demo complet",
224
348
  render: () => html`
225
- <div style="position: sticky; top: 0; z-index: 100;">
226
- <bd-anchor-nav
227
- cta-label="Buy now"
228
- cta-href="#section-pricing"
229
- >
349
+ <div>
350
+ <bd-anchor-nav cta-label="Cumpără acum" cta-href="#section-pricing">
230
351
  <bd-anchor-nav-item title="Overview" href="#anchor-1-section"></bd-anchor-nav-item>
231
352
  <bd-anchor-nav-item title="Features" href="#anchor-2-section"></bd-anchor-nav-item>
232
353
  <bd-anchor-nav-item title="Pricing" href="#anchor-3-section"></bd-anchor-nav-item>
233
354
  </bd-anchor-nav>
234
- </div>
235
355
 
236
- <div id="anchor-1-section" style="padding: 80px 24px; background: #EDF9FF;">
237
- <bd-h as="h2">Overview Section</bd-h>
238
- <bd-p kind="regular">This is the overview content area. The nav scrolls here when "Overview" is clicked.</bd-p>
239
- </div>
240
- <div id="anchor-2-section" style="padding: 80px 24px; background: #fff;">
241
- <bd-h as="h2">Features Section</bd-h>
242
- <bd-p kind="regular">This is the features content area.</bd-p>
243
- </div>
244
- <div id="anchor-3-section" style="padding: 80px 24px; background: #EDF9FF;">
245
- <bd-h as="h2">Pricing Section</bd-h>
246
- <bd-p kind="regular">This is the pricing content area.</bd-p>
247
- </div>
248
- <div id="section-pricing" style="padding: 80px 24px; background: #fff;">
249
- <bd-h as="h2">Buy Now Target</bd-h>
250
- <bd-p kind="regular">The "Buy now" button scrolls to this element (#section-pricing).</bd-p>
356
+ <!-- Conținut sibling — navul se aliniază automat la această lățime -->
357
+ <div style="max-width: 800px; margin: 0 auto;">
358
+
359
+ <div id="anchor-1-section" style="
360
+ min-height: 60vh; padding: 80px 24px;
361
+ background: #EDF9FF; border-bottom: 1px solid #e2e8f0;
362
+ ">
363
+ <bd-h as="h2">Overview Section</bd-h>
364
+ <bd-p kind="regular">
365
+ Navul de mai sus se aliniază automat la lățimea acestui container (800px).
366
+ Scroll în jos pentru a vedea sticky și scroll spy în acțiune.
367
+ </bd-p>
368
+ </div>
369
+
370
+ <div id="anchor-2-section" style="
371
+ min-height: 60vh; padding: 80px 24px;
372
+ background: #fff; border-bottom: 1px solid #e2e8f0;
373
+ ">
374
+ <bd-h as="h2">Features Section</bd-h>
375
+ <bd-p kind="regular">Conținut Features. Link-ul din nav devine activ când ajungi aici.</bd-p>
376
+ </div>
377
+
378
+ <div id="anchor-3-section" style="
379
+ min-height: 60vh; padding: 80px 24px;
380
+ background: #EDF9FF; border-bottom: 1px solid #e2e8f0;
381
+ ">
382
+ <bd-h as="h2">Pricing Section</bd-h>
383
+ <bd-p kind="regular">Conținut Pricing.</bd-p>
384
+ </div>
385
+
386
+ <div id="section-pricing" style="
387
+ min-height: 40vh; padding: 80px 24px; background: #fff;
388
+ ">
389
+ <bd-h as="h2">Buy Now Target</bd-h>
390
+ <bd-p kind="regular">Butonul CTA scrollează până aici.</bd-p>
391
+ </div>
392
+
393
+ </div>
251
394
  </div>
252
395
  `,
253
396
  parameters: {
254
397
  docs: {
255
398
  description: {
256
- story: "Full scroll demo with actual target sections. Click nav links or Buy now to trigger smooth scroll."
399
+ story: `Demo complet cu secțiuni reale. Navul detectează automat lățimea sibling-ului (800px)
400
+ și centrează conținutul la acea lățime. Border-ul rămâne full-width.
401
+ Sticky se oprește când containerul iese din viewport.`
257
402
  }
258
403
  }
259
404
  }
@@ -261,11 +406,13 @@ export const WithScrollTargets = {
261
406
 
262
407
  export const MobileView = {
263
408
  name : "Mobile View",
264
- render : () => renderNavChildren(["Overview", "Features", "Reviews", "Pricing"]),
409
+ render : () => renderWithSlotCta(["Overview", "Features", "Reviews", "Pricing"]),
265
410
  parameters: {
266
411
  viewport: { defaultViewport: "mobile1" },
267
412
  docs : {
268
- description: { story: "Nav at 375px mobile width — dropdown replaces link row." }
413
+ description: {
414
+ story: "Nav la 375px — dropdown înlocuiește linkurile, CTA apare după primul scroll. Pe mobile butonul devine full-width automat."
415
+ }
269
416
  }
270
417
  }
271
418
  };
@@ -292,7 +439,7 @@ export const Playground = {
292
439
  parameters: {
293
440
  docs: {
294
441
  description: {
295
- story: "Fully interactive playground. Edit `items`, `ctaLabel`, and `ctaHref` in Controls."
442
+ story: "Playground interactiv. Editează `items`, `ctaLabel` și `ctaHref` din Controls."
296
443
  }
297
444
  }
298
445
  }