@felloinnovations/brand-kit 0.5.1 → 0.5.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 (104) hide show
  1. package/AGENTS.md +29 -9
  2. package/CHANGELOG.md +86 -0
  3. package/README.md +10 -4
  4. package/design-system/01-how-claude-decides.md +5 -3
  5. package/design-system/03-colour.md +19 -1
  6. package/design-system/05-space-and-layout.md +2 -1
  7. package/design-system/08-choosing-components.md +20 -4
  8. package/design-system/09-charts.md +6 -3
  9. package/design-system/11-page-recipes.md +40 -1
  10. package/design-system/13-motion.md +1 -1
  11. package/design-system/15-ai-experiences.md +11 -0
  12. package/design-system/17-decisions.md +41 -0
  13. package/design-system/components/AppShell/README.md +89 -21
  14. package/design-system/components/AppShell/preview.html +148 -3
  15. package/design-system/components/AppShell/style.css +47 -0
  16. package/design-system/components/Avatar/README.md +6 -3
  17. package/design-system/components/Avatar/preview.html +2 -1
  18. package/design-system/components/Avatar/style.css +3 -0
  19. package/design-system/components/Banner/README.md +9 -5
  20. package/design-system/components/Banner/preview.html +9 -0
  21. package/design-system/components/Banner/style.css +3 -0
  22. package/design-system/components/Button/README.md +29 -2
  23. package/design-system/components/Button/preview.html +33 -1
  24. package/design-system/components/Button/style.css +21 -0
  25. package/design-system/components/Calendar/README.md +148 -0
  26. package/design-system/components/Calendar/preview.html +449 -0
  27. package/design-system/components/Calendar/style.css +61 -0
  28. package/design-system/components/Card/README.md +13 -0
  29. package/design-system/components/Card/preview.html +23 -0
  30. package/design-system/components/Card/style.css +19 -0
  31. package/design-system/components/ChatCard/README.md +74 -3
  32. package/design-system/components/ChatCard/preview.html +126 -25
  33. package/design-system/components/ChatCard/style.css +6 -0
  34. package/design-system/components/Chip/README.md +16 -7
  35. package/design-system/components/Chip/preview.html +25 -1
  36. package/design-system/components/Chip/style.css +5 -0
  37. package/design-system/components/Combobox/README.md +10 -4
  38. package/design-system/components/Combobox/preview.html +19 -4
  39. package/design-system/components/Combobox/style.css +7 -1
  40. package/design-system/components/CommentThread/README.md +138 -0
  41. package/design-system/components/CommentThread/preview.html +134 -0
  42. package/design-system/components/CommentThread/style.css +41 -0
  43. package/design-system/components/DateInput/README.md +38 -4
  44. package/design-system/components/DateInput/preview.html +50 -2
  45. package/design-system/components/DateInput/style.css +6 -0
  46. package/design-system/components/Dialog/README.md +26 -3
  47. package/design-system/components/Dialog/preview.html +80 -0
  48. package/design-system/components/Dialog/style.css +28 -3
  49. package/design-system/components/EmptyState/README.md +1 -1
  50. package/design-system/components/Fold/README.md +21 -0
  51. package/design-system/components/Fold/preview.html +44 -1
  52. package/design-system/components/Fold/style.css +30 -0
  53. package/design-system/components/InlineEdit/README.md +116 -0
  54. package/design-system/components/InlineEdit/preview.html +135 -0
  55. package/design-system/components/InlineEdit/style.css +34 -0
  56. package/design-system/components/Input/README.md +20 -1
  57. package/design-system/components/Input/preview.html +24 -0
  58. package/design-system/components/Input/style.css +13 -1
  59. package/design-system/components/KanbanBoard/README.md +68 -4
  60. package/design-system/components/KanbanBoard/preview.html +129 -0
  61. package/design-system/components/KanbanBoard/style.css +31 -0
  62. package/design-system/components/PlanTimeline/README.md +144 -0
  63. package/design-system/components/PlanTimeline/preview.html +109 -0
  64. package/design-system/components/PlanTimeline/style.css +64 -0
  65. package/design-system/components/README.md +11 -6
  66. package/design-system/components/Skeleton/README.md +66 -2
  67. package/design-system/components/Skeleton/preview.html +83 -1
  68. package/design-system/components/Starter/README.md +1 -1
  69. package/design-system/components/Starter/preview.html +1 -1
  70. package/design-system/components/Stepper/README.md +81 -5
  71. package/design-system/components/Stepper/preview.html +64 -1
  72. package/design-system/components/Stepper/style.css +29 -0
  73. package/design-system/components/StreakCalendar/README.md +1 -0
  74. package/design-system/components/Table/README.md +7 -3
  75. package/design-system/components/Table/preview.html +15 -0
  76. package/design-system/components/Table/style.css +2 -0
  77. package/design-system/components/TextDiff/README.md +96 -0
  78. package/design-system/components/TextDiff/preview.html +42 -0
  79. package/design-system/components/TextDiff/style.css +21 -0
  80. package/design-system/components/Timeline/README.md +3 -1
  81. package/design-system/components/TrendLine/README.md +38 -7
  82. package/design-system/components/TrendLine/preview.html +140 -3
  83. package/design-system/components/TrendLine/style.css +12 -2
  84. package/design-system/components/bundle.css +483 -7
  85. package/design-system/tokens.json +15 -1
  86. package/dist/fello-core.css +2 -2
  87. package/dist/fello.css +2 -2
  88. package/dist/fello.scoped.css +2 -2
  89. package/dist/index.d.ts +1 -1
  90. package/dist/scoped.js +2 -2
  91. package/dist/tokens.d.ts +8 -0
  92. package/dist/tokens.js +8 -0
  93. package/package.json +7 -2
  94. package/scripts/check-drift.mjs +325 -0
  95. package/scripts/token-model.mjs +2 -1
  96. package/tokens/_dark.css +2 -0
  97. package/tokens/_product.css +2 -0
  98. package/tokens/palettes.ts +1 -1
  99. package/tokens/shadcn-compat.css +1 -1
  100. package/tokens/shadcn-compat.hsl.css +1 -1
  101. package/tokens/tokens.css +14 -1
  102. package/tokens/tokens.md +53 -46
  103. package/tokens/tokens.root.css +14 -1
  104. package/tokens/tokens.ts +9 -1
package/design-system/components/TrendLine/preview.html CHANGED
@@ -1,4 +1,4 @@
1
- <!-- @dsCard group="Charts" height=2320 -->
1
+ <!-- @dsCard group="Charts" height=3500 -->
2
2
  <!doctype html>
3
3
  <html>
4
4
  <head>
@@ -100,6 +100,126 @@
100
100
  </section>
101
101
  </div>
102
102
 
103
+ <div class="ws-stack" style="max-width: 1194px;">
104
+ <span class="ws-muted">Several series (up to three, one unit, one axis): a __series box for each after the first, the tones navy, teal, purple; lines only, no hatch and no Bars / Line switch. Point along it: the reading names every series.</span>
105
+ <section class="ws-card ws-card--compound" aria-labelledby="tl-s-t">
106
+ <header class="ws-head">
107
+ <div>
108
+ <h3 class="ws-title" id="tl-s-t">More onboardings start than graduate</h3>
109
+ <p class="ws-body">30 started and 21 graduated so far in November; 12 stalled, the most this year.</p>
110
+ </div>
111
+ </header>
112
+ <div class="ws-card__body">
113
+ <figure class="ws-trend-line" style="--n: 6; --ticks: 4;" aria-labelledby="tl-s-t" data-trend-live>
114
+ <div class="ws-trend-line__plot" aria-hidden="true">
115
+ <div class="ws-trend-line__y"><span style="--y: 0%;">40</span><span style="--y: 25%;">30</span><span style="--y: 50%;">20</span><span style="--y: 75%;">10</span><span style="--y: 100%;">0</span></div>
116
+ <div class="ws-trend-line__area">
117
+ <span class="ws-trend-line__rule" style="--y: 0%;"></span><span class="ws-trend-line__rule" style="--y: 25%;"></span><span class="ws-trend-line__rule" style="--y: 50%;"></span><span class="ws-trend-line__rule" style="--y: 75%;"></span>
118
+ <span class="ws-trend-line__draw"><svg class="ws-trend-line__lines" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"><path d="M8.33 45 L25 30 L41.67 37.5 L58.33 22.5 L75 15 L91.67 25"/></svg></span>
119
+ <span class="ws-trend-line__point" style="--i: 0; --y: 45%;"></span>
120
+ <span class="ws-trend-line__point" style="--i: 1; --y: 30%;"></span>
121
+ <span class="ws-trend-line__point" style="--i: 2; --y: 37.5%;"></span>
122
+ <span class="ws-trend-line__point" style="--i: 3; --y: 22.5%;"></span>
123
+ <span class="ws-trend-line__point" style="--i: 4; --y: 15%;"></span>
124
+ <span class="ws-trend-line__point ws-trend-line__point--now" style="--i: 5; --y: 25%;"></span>
125
+ <span class="ws-trend-line__series">
126
+ <span class="ws-trend-line__draw"><svg class="ws-trend-line__lines" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"><path d="M8.33 70 L25 62.5 L41.67 52.5 L58.33 55 L75 40 L91.67 47.5"/></svg></span>
127
+ <span class="ws-trend-line__point" style="--i: 0; --y: 70%;"></span>
128
+ <span class="ws-trend-line__point" style="--i: 1; --y: 62.5%;"></span>
129
+ <span class="ws-trend-line__point" style="--i: 2; --y: 52.5%;"></span>
130
+ <span class="ws-trend-line__point" style="--i: 3; --y: 55%;"></span>
131
+ <span class="ws-trend-line__point" style="--i: 4; --y: 40%;"></span>
132
+ <span class="ws-trend-line__point ws-trend-line__point--now" style="--i: 5; --y: 47.5%;"></span>
133
+ </span>
134
+ <span class="ws-trend-line__series">
135
+ <span class="ws-trend-line__draw"><svg class="ws-trend-line__lines" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"><path d="M8.33 90 L25 85 L41.67 87.5 L58.33 80 L75 77.5 L91.67 70"/></svg></span>
136
+ <span class="ws-trend-line__point" style="--i: 0; --y: 90%;"></span>
137
+ <span class="ws-trend-line__point" style="--i: 1; --y: 85%;"></span>
138
+ <span class="ws-trend-line__point" style="--i: 2; --y: 87.5%;"></span>
139
+ <span class="ws-trend-line__point" style="--i: 3; --y: 80%;"></span>
140
+ <span class="ws-trend-line__point" style="--i: 4; --y: 77.5%;"></span>
141
+ <span class="ws-trend-line__point ws-trend-line__point--now" style="--i: 5; --y: 70%;"></span>
142
+ </span>
143
+ <span class="ws-trend-line__band"></span>
144
+ </div>
145
+ <div class="ws-trend-line__x"><span title="June">Jun</span><span title="July">Jul</span><span title="August">Aug</span><span title="September">Sep</span><span title="October">Oct</span><span class="ws-trend-line__now" title="November, month to date">Nov</span></div>
146
+ </div>
147
+ <ul class="ws-trend-line__legend" aria-hidden="true"><li>Started</li><li class="ws-trend-line__key--2">Graduated</li><li class="ws-trend-line__key--3">Stalled</li></ul>
148
+ <div class="ws-trend-line__table"><table>
149
+ <caption>Onboardings by month</caption>
150
+ <thead><tr><th scope="col">Month</th><th scope="col">Started</th><th scope="col">Graduated</th><th scope="col">Stalled</th></tr></thead>
151
+ <tbody><tr><th scope="row">June</th><td>22</td><td>12</td><td>4</td></tr><tr><th scope="row">July</th><td>28</td><td>15</td><td>6</td></tr><tr><th scope="row">August</th><td>25</td><td>19</td><td>5</td></tr><tr><th scope="row">September</th><td>31</td><td>18</td><td>8</td></tr><tr><th scope="row">October</th><td>34</td><td>24</td><td>9</td></tr><tr><th scope="row">November, month to date</th><td>30</td><td>21</td><td>12</td></tr></tbody>
152
+ </table></div>
153
+ </figure>
154
+ </div>
155
+ </section>
156
+ </div>
157
+
158
+ <div class="ws-stack" style="max-width: 1194px;">
159
+ <span class="ws-muted">Units or scales far apart (one series four times the other): never two value axes. Two TrendLines stacked in one card on the same periods, each with its own axis and key; the period names only under the last.</span>
160
+ <section class="ws-card ws-card--compound" aria-labelledby="tl-p-t">
161
+ <header class="ws-head">
162
+ <div>
163
+ <h3 class="ws-title" id="tl-p-t">Tickets grew faster than accounts</h3>
164
+ <p class="ws-body">Accounts rose 11% since June; tickets opened rose 28%.</p>
165
+ </div>
166
+ </header>
167
+ <div class="ws-card__body">
168
+ <figure class="ws-trend-line" style="--n: 6; --ticks: 3;" aria-label="Accounts by month" data-trend-live>
169
+ <div class="ws-trend-line__plot" aria-hidden="true">
170
+ <div class="ws-trend-line__y"><span style="--y: 0%;">3K</span><span style="--y: 33.33%;">2K</span><span style="--y: 66.67%;">1K</span><span style="--y: 100%;">0</span></div>
171
+ <div class="ws-trend-line__area">
172
+ <span class="ws-trend-line__rule" style="--y: 0%;"></span><span class="ws-trend-line__rule" style="--y: 33.33%;"></span><span class="ws-trend-line__rule" style="--y: 66.67%;"></span>
173
+ <span class="ws-trend-line__draw">
174
+ <span class="ws-trend-line__hatch" style="clip-path: polygon(8.33% 19.67%, 25% 17.67%, 41.67% 16%, 58.33% 14%, 75% 12.33%, 91.67% 10.47%, 91.67% 100%, 8.33% 100%);"></span>
175
+ <svg class="ws-trend-line__lines" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"><path d="M8.33 19.67 L25 17.67 L41.67 16 L58.33 14 L75 12.33 L91.67 10.47"/></svg>
176
+ </span>
177
+ <span class="ws-trend-line__point" style="--i: 0; --y: 19.67%;"></span>
178
+ <span class="ws-trend-line__point" style="--i: 1; --y: 17.67%;"></span>
179
+ <span class="ws-trend-line__point" style="--i: 2; --y: 16%;"></span>
180
+ <span class="ws-trend-line__point" style="--i: 3; --y: 14%;"></span>
181
+ <span class="ws-trend-line__point" style="--i: 4; --y: 12.33%;"></span>
182
+ <span class="ws-trend-line__point" style="--i: 5; --y: 10.47%;"></span>
183
+ <span class="ws-trend-line__band"></span>
184
+ </div>
185
+ </div>
186
+ <ul class="ws-trend-line__legend" aria-hidden="true"><li>Accounts</li></ul>
187
+ <div class="ws-trend-line__table"><table>
188
+ <caption>Accounts by month</caption>
189
+ <thead><tr><th scope="col">Month</th><th scope="col">Accounts</th></tr></thead>
190
+ <tbody><tr><th scope="row">June</th><td>2,410 accounts</td></tr><tr><th scope="row">July</th><td>2,470 accounts</td></tr><tr><th scope="row">August</th><td>2,520 accounts</td></tr><tr><th scope="row">September</th><td>2,580 accounts</td></tr><tr><th scope="row">October</th><td>2,630 accounts</td></tr><tr><th scope="row">November</th><td>2,686 accounts</td></tr></tbody>
191
+ </table></div>
192
+ </figure>
193
+ <figure class="ws-trend-line" style="--n: 6; --ticks: 3; --tone: var(--ws-chart-finished);" aria-label="Tickets opened by month" data-trend-live>
194
+ <div class="ws-trend-line__plot" aria-hidden="true">
195
+ <div class="ws-trend-line__y"><span style="--y: 0%;">300</span><span style="--y: 33.33%;">200</span><span style="--y: 66.67%;">100</span><span style="--y: 100%;">0</span></div>
196
+ <div class="ws-trend-line__area">
197
+ <span class="ws-trend-line__rule" style="--y: 0%;"></span><span class="ws-trend-line__rule" style="--y: 33.33%;"></span><span class="ws-trend-line__rule" style="--y: 66.67%;"></span>
198
+ <span class="ws-trend-line__draw">
199
+ <span class="ws-trend-line__hatch" style="clip-path: polygon(8.33% 40%, 25% 30%, 41.67% 35%, 58.33% 20%, 75% 13.33%, 91.67% 23.33%, 91.67% 100%, 8.33% 100%);"></span>
200
+ <svg class="ws-trend-line__lines" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"><path d="M8.33 40 L25 30 L41.67 35 L58.33 20 L75 13.33 L91.67 23.33"/></svg>
201
+ </span>
202
+ <span class="ws-trend-line__point" style="--i: 0; --y: 40%;"></span>
203
+ <span class="ws-trend-line__point" style="--i: 1; --y: 30%;"></span>
204
+ <span class="ws-trend-line__point" style="--i: 2; --y: 35%;"></span>
205
+ <span class="ws-trend-line__point" style="--i: 3; --y: 20%;"></span>
206
+ <span class="ws-trend-line__point" style="--i: 4; --y: 13.33%;"></span>
207
+ <span class="ws-trend-line__point" style="--i: 5; --y: 23.33%;"></span>
208
+ <span class="ws-trend-line__band"></span>
209
+ </div>
210
+ <div class="ws-trend-line__x"><span title="June">Jun</span><span title="July">Jul</span><span title="August">Aug</span><span title="September">Sep</span><span title="October">Oct</span><span title="November">Nov</span></div>
211
+ </div>
212
+ <ul class="ws-trend-line__legend" aria-hidden="true"><li>Tickets opened</li></ul>
213
+ <div class="ws-trend-line__table"><table>
214
+ <caption>Tickets opened by month</caption>
215
+ <thead><tr><th scope="col">Month</th><th scope="col">Tickets opened</th></tr></thead>
216
+ <tbody><tr><th scope="row">June</th><td>180 tickets</td></tr><tr><th scope="row">July</th><td>210 tickets</td></tr><tr><th scope="row">August</th><td>195 tickets</td></tr><tr><th scope="row">September</th><td>240 tickets</td></tr><tr><th scope="row">October</th><td>260 tickets</td></tr><tr><th scope="row">November</th><td>230 tickets</td></tr></tbody>
217
+ </table></div>
218
+ </figure>
219
+ </div>
220
+ </section>
221
+ </div>
222
+
103
223
  <div class="ws-stack" style="max-width: 1194px;">
104
224
  <span class="ws-muted">Hover, held (__point--on): the band behind the column and the rest stepped back; on the line, the guide to the baseline and the grown dot</span>
105
225
  <div class="ws-board">
@@ -338,12 +458,29 @@
338
458
  card.innerHTML = '<span class="ws-hover-card__eyebrow"><span class="ws-hover-card__swatch" style="--ws-hover-card-swatch: var(--color-text-heading);"></span><span></span></span><span class="ws-hover-card__title"></span>';
339
459
  area.append(card);
340
460
  }
461
+ /* Several series: the card sits over the period's highest dot and reads every series, a row each with its
462
+ swatch in the key's order (navy, teal, purple), from the table's columns. */
463
+ const tops = $$('.ws-trend-line__point', area).filter((p) => Number(p.style.getPropertyValue('--i')) === i).map((p) => p.style.getPropertyValue('--y').trim());
464
+ const top = tops.sort((a, b) => parseFloat(a) - parseFloat(b))[0];
341
465
  card.style.left = x + '%';
342
- card.style.top = 'calc(' + pt.style.getPropertyValue('--y') + ' - ' + (fig.classList.contains('ws-trend-line--bars') ? '0px' : 'var(--ws-trend-line-dot)') + ')';
466
+ card.style.top = 'calc(' + top + ' - ' + (fig.classList.contains('ws-trend-line--bars') ? '0px' : 'var(--ws-trend-line-dot)') + ')';
343
467
  card.classList.toggle('ws-hover-card--start', x < 25);
344
468
  card.classList.toggle('ws-hover-card--end', x > 75);
345
469
  card.querySelector('.ws-hover-card__eyebrow > span:last-child').textContent = rows[i].querySelector('th').textContent;
346
- card.querySelector('.ws-hover-card__title').textContent = rows[i].querySelector('td').textContent;
470
+ const cells = $$('td', rows[i]), title = card.querySelector('.ws-hover-card__title');
471
+ const tones = ['var(--color-text-heading)', 'var(--ws-chart-finished)', 'var(--ws-chart-past-half)'];
472
+ $$('.ws-hover-card__row', card).forEach((r) => r.replaceWith());
473
+ title.hidden = cells.length > 1;
474
+ card.querySelector('.ws-hover-card__eyebrow > .ws-hover-card__swatch').hidden = cells.length > 1;
475
+ if (cells.length === 1) title.textContent = cells[0].textContent;
476
+ else cells.forEach((td, j) => {
477
+ const row = document.createElement('span');
478
+ row.className = 'ws-hover-card__row';
479
+ row.innerHTML = '<span class="ws-hover-card__swatch" style="--ws-hover-card-swatch: ' + tones[j] + ';"></span><span class="ws-hover-card__label"></span><span class="ws-hover-card__value"></span>';
480
+ row.children[1].textContent = $$('thead th', fig)[j + 1].textContent;
481
+ row.children[2].textContent = td.textContent;
482
+ card.append(row);
483
+ });
347
484
  };
348
485
  const hide = () => {
349
486
  clearTimeout(leave);
package/design-system/components/TrendLine/style.css CHANGED
@@ -30,6 +30,16 @@
30
30
  .ws-trend-line__lines path { fill: none; stroke: var(--ws-trend-line-tone); stroke-width: var(--ws-chart-line); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
31
31
  /* What is still to come (a projection): a dotted 1 px line. */
32
32
  .ws-trend-line__lines .ws-trend-line__ahead { stroke-width: var(--ws-line); stroke-dasharray: 0.1 calc(var(--ws-hairline) * 5); }
33
+ /* Several series (up to 3, one unit, one axis): the first is the figure's own __draw and points; each other is a
34
+ __series box (display: contents, so its points still sit on the plot) holding its own __draw (the path only) and its
35
+ points. The tones run navy, teal, purple (salmon is the reference's), each series' own --tone over it; the key's
36
+ __key--2 and __key--3 match. With several series: no hatch (one area claims a whole, two areas cover each other), and
37
+ the period in progress keeps its series' tone (its name and the dotted __ahead say it). */
38
+ .ws-trend-line__series { display: contents; }
39
+ .ws-trend-line__series, .ws-trend-line__legend > .ws-trend-line__key--2 { --ws-trend-line-tone: var(--tone, var(--ws-chart-finished)); }
40
+ .ws-trend-line__series ~ .ws-trend-line__series, .ws-trend-line__legend > .ws-trend-line__key--3 { --ws-trend-line-tone: var(--tone, var(--ws-chart-past-half)); }
41
+ .ws-trend-line__area:has(> .ws-trend-line__series) .ws-trend-line__hatch { display: none; }
42
+ .ws-trend-line__area:has(> .ws-trend-line__series) .ws-trend-line__point--now { --ws-trend-line-mark: var(--ws-trend-line-tone); }
33
43
  /* A point: its period's slot, from 12 above its value (the pointer's room) to the baseline. The column (::before) runs
34
44
  from the value to the baseline, its corners 1 px, cut by the grid's lines (set --ticks on the figure to the number of
35
45
  even steps the grid has; 1 cuts only at the top line); the dot (::after) is 8 on the value, ringed in the ground so the
@@ -60,14 +70,14 @@
60
70
  .ws-trend-line__point:is(:focus-visible, .ws-trend-line__point--on) { anchor-name: --ws-trend-line-at; }
61
71
  .ws-trend-line__band { position-anchor: --ws-trend-line-at; left: anchor(left); right: anchor(right); width: auto; top: calc(anchor(top) + var(--ws-trend-line-hit)); background: repeating-linear-gradient(to bottom, var(--ws-trend-line-tone) 0 var(--ws-ring), transparent 0 calc(var(--ws-ring) * 2)) center / var(--ws-line) 100% no-repeat; }
62
72
  .ws-trend-line--bars .ws-trend-line__band { top: 0; background: var(--ws-hover); }
63
- .ws-trend-line__area:has(> .ws-trend-line__point:is(:focus-visible, .ws-trend-line__point--on)) > .ws-trend-line__band { opacity: 1; }
73
+ .ws-trend-line__area:has(.ws-trend-line__point:is(:focus-visible, .ws-trend-line__point--on)) > .ws-trend-line__band { opacity: 1; }
64
74
  }
65
75
  .ws-trend-line__point:is(:focus-visible, .ws-trend-line__point--on)::after { transform: scale(1.5); box-shadow: 0 0 0 var(--ws-trend-line-ring) var(--color-bg-page), 0 0 0 var(--space-xxs-plus) color-mix(in srgb, var(--ws-trend-line-mark) 12%, transparent); }
66
76
  .ws-trend-line--bars .ws-trend-line__area:has(> .ws-trend-line__point:is(:focus-visible, .ws-trend-line__point--on)) > .ws-trend-line__point:not(:focus-visible, .ws-trend-line__point--on)::before { opacity: var(--ws-dim); }
67
77
  @media (hover: hover) {
68
78
  @supports (anchor-name: --a) {
69
79
  .ws-trend-line__point:hover { anchor-name: --ws-trend-line-at; }
70
- .ws-trend-line__area:has(> .ws-trend-line__point:hover) > .ws-trend-line__band { opacity: 1; }
80
+ .ws-trend-line__area:has(.ws-trend-line__point:hover) > .ws-trend-line__band { opacity: 1; }
71
81
  }
72
82
  .ws-trend-line__point:hover::after { transform: scale(1.5); box-shadow: 0 0 0 var(--ws-trend-line-ring) var(--color-bg-page), 0 0 0 var(--space-xxs-plus) color-mix(in srgb, var(--ws-trend-line-mark) 12%, transparent); }
73
83
  .ws-trend-line--bars .ws-trend-line__area:has(> .ws-trend-line__point:hover) > .ws-trend-line__point:not(:hover)::before { opacity: var(--ws-dim); }