@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/Calendar/preview.html ADDED
@@ -0,0 +1,449 @@
1
+ <!-- @dsCard group="Data" height=1400 -->
2
+ <!doctype html>
3
+ <html>
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>Calendar</title>
7
+ <link rel="stylesheet" href="../../tokens.css">
8
+ <link rel="stylesheet" href="../bundle.css">
9
+ </head>
10
+ <body>
11
+ <div class="ws-stage ws-stage--grey ws-stage--column">
12
+
13
+ <div class="ws-stack">
14
+ <span class="ws-muted">A month of a campaign's work: the steps and the view over it, a key for the tones, a day's items as rows that open (three, then how many more), a milestone a diamond, the launch week lit and named in the key, today ringed</span>
15
+ <section class="ws-card ws-card--inset ws-calendar" aria-labelledby="cal-month">
16
+ <div class="ws-calendar__bar">
17
+ <h3 class="ws-section ws-calendar__title" id="cal-month" aria-live="polite">November 2026</h3>
18
+ <div class="ws-calendar__steps">
19
+ <button type="button" class="ws-icon-btn ws-icon-btn--sm" aria-label="Previous month"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.5 3.5L5 8l4.5 4.5"/></svg></button>
20
+ <button type="button" class="ws-btn ws-btn--secondary ws-btn--sm">Today</button>
21
+ <button type="button" class="ws-icon-btn ws-icon-btn--sm" aria-label="Next month"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.5 3.5L11 8l-4.5 4.5"/></svg></button>
22
+ </div>
23
+ <div class="ws-segmented" role="group" aria-label="Calendar view">
24
+ <button type="button" class="ws-segmented__item" aria-pressed="true">Month</button>
25
+ <button type="button" class="ws-segmented__item" aria-pressed="false">Week</button>
26
+ </div>
27
+ </div>
28
+ <div class="ws-calendar__key" aria-label="Key">
29
+ <span><span class="ws-calendar__item-mark" aria-hidden="true"></span>Emails and texts</span>
30
+ <span><span class="ws-calendar__item-mark ws-calendar__item--2" aria-hidden="true"></span>Events</span>
31
+ <span><span class="ws-calendar__item-mark ws-calendar__item--3" aria-hidden="true"></span>Posts and ads</span>
32
+ <span><span class="ws-calendar__item-mark ws-calendar__item--milestone" aria-hidden="true"></span>Milestones</span>
33
+ <span><span class="ws-calendar__key-lit" aria-hidden="true"></span>Launch week</span>
34
+ </div>
35
+ <div class="ws-calendar__weekdays" aria-hidden="true"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div>
36
+ <ol class="ws-calendar__days" aria-label="November 2026">
37
+ <li class="ws-calendar__day ws-calendar__day--outside">
38
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Mon</span><time class="ws-calendar__date" datetime="2026-10-26"><span class="ws-sr">Monday, October </span>26</time></div>
39
+ </li>
40
+ <li class="ws-calendar__day ws-calendar__day--outside">
41
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Tue</span><time class="ws-calendar__date" datetime="2026-10-27"><span class="ws-sr">Tuesday, October </span>27</time></div>
42
+ </li>
43
+ <li class="ws-calendar__day ws-calendar__day--outside">
44
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Wed</span><time class="ws-calendar__date" datetime="2026-10-28"><span class="ws-sr">Wednesday, October </span>28</time></div>
45
+ </li>
46
+ <li class="ws-calendar__day ws-calendar__day--outside">
47
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Thu</span><time class="ws-calendar__date" datetime="2026-10-29"><span class="ws-sr">Thursday, October </span>29</time></div>
48
+ </li>
49
+ <li class="ws-calendar__day ws-calendar__day--outside">
50
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Fri</span><time class="ws-calendar__date" datetime="2026-10-30"><span class="ws-sr">Friday, October </span>30</time></div>
51
+ </li>
52
+ <li class="ws-calendar__day ws-calendar__day--outside">
53
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Sat</span><time class="ws-calendar__date" datetime="2026-10-31"><span class="ws-sr">Saturday, October </span>31</time></div>
54
+ </li>
55
+ <li class="ws-calendar__day">
56
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Sun</span><time class="ws-calendar__date" datetime="2026-11-01"><span class="ws-sr">Sunday, November </span>1</time></div>
57
+ </li>
58
+ <li class="ws-calendar__day">
59
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Mon</span><time class="ws-calendar__date" datetime="2026-11-02"><span class="ws-sr">Monday, November </span>2</time></div>
60
+ <ul class="ws-calendar__items">
61
+ <li><a class="ws-calendar__item" href="#" title="Email 1: the announcement"><span>Email 1: the announcement</span></a></li>
62
+ </ul>
63
+ </li>
64
+ <li class="ws-calendar__day">
65
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Tue</span><time class="ws-calendar__date" datetime="2026-11-03"><span class="ws-sr">Tuesday, November </span>3</time></div>
66
+ <ul class="ws-calendar__items">
67
+ <li><a class="ws-calendar__item ws-calendar__item--2" href="#" title="Webinar invites go out"><span>Webinar invites go out</span></a></li>
68
+ </ul>
69
+ </li>
70
+ <li class="ws-calendar__day">
71
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Wed</span><time class="ws-calendar__date" datetime="2026-11-04"><span class="ws-sr">Wednesday, November </span>4</time></div>
72
+ </li>
73
+ <li class="ws-calendar__day">
74
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Thu</span><time class="ws-calendar__date" datetime="2026-11-05"><span class="ws-sr">Thursday, November </span>5</time></div>
75
+ <ul class="ws-calendar__items">
76
+ <li><a class="ws-calendar__item ws-calendar__item--3" href="#" title="Partner post on LinkedIn"><span>Partner post on LinkedIn</span></a></li>
77
+ </ul>
78
+ </li>
79
+ <li class="ws-calendar__day">
80
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Fri</span><time class="ws-calendar__date" datetime="2026-11-06"><span class="ws-sr">Friday, November </span>6</time></div>
81
+ <ul class="ws-calendar__items">
82
+ <li><a class="ws-calendar__item ws-calendar__item--milestone" href="#" title="Gate 2: copy signed off"><span>Gate 2: copy signed off</span></a></li>
83
+ </ul>
84
+ </li>
85
+ <li class="ws-calendar__day">
86
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Sat</span><time class="ws-calendar__date" datetime="2026-11-07"><span class="ws-sr">Saturday, November </span>7</time></div>
87
+ </li>
88
+ <li class="ws-calendar__day">
89
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Sun</span><time class="ws-calendar__date" datetime="2026-11-08"><span class="ws-sr">Sunday, November </span>8</time></div>
90
+ </li>
91
+ <li class="ws-calendar__day">
92
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Mon</span><time class="ws-calendar__date" datetime="2026-11-09"><span class="ws-sr">Monday, November </span>9</time></div>
93
+ <ul class="ws-calendar__items">
94
+ <li><a class="ws-calendar__item" href="#" title="Email 2: the how-to"><span>Email 2: the how-to</span></a></li>
95
+ <li><a class="ws-calendar__item ws-calendar__item--3" href="#" title="Retarget ads go live"><span>Retarget ads go live</span></a></li>
96
+ </ul>
97
+ </li>
98
+ <li class="ws-calendar__day">
99
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Tue</span><time class="ws-calendar__date" datetime="2026-11-10" aria-current="date"><span class="ws-sr">Tuesday, November </span>10</time></div>
100
+ <ul class="ws-calendar__items">
101
+ <li><a class="ws-calendar__item ws-calendar__item--needs" href="#" title="Walk Stephen through the demo"><span>Walk Stephen through the demo</span></a></li>
102
+ <li><a class="ws-calendar__item ws-calendar__item--3" href="#" title="Blog post: what is new"><span>Blog post: what is new</span></a></li>
103
+ <li><a class="ws-calendar__item" href="#" title="Text reminder to sign-ups"><span>Text reminder to sign-ups</span></a></li>
104
+ </ul>
105
+ <button type="button" class="ws-btn ws-btn--text ws-calendar__more">1 more</button>
106
+ </li>
107
+ <li class="ws-calendar__day">
108
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Wed</span><time class="ws-calendar__date" datetime="2026-11-11"><span class="ws-sr">Wednesday, November </span>11</time></div>
109
+ </li>
110
+ <li class="ws-calendar__day">
111
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Thu</span><time class="ws-calendar__date" datetime="2026-11-12"><span class="ws-sr">Thursday, November </span>12</time></div>
112
+ <ul class="ws-calendar__items">
113
+ <li><a class="ws-calendar__item ws-calendar__item--2" href="#" title="Webinar: the new portal"><span>Webinar: the new portal</span></a></li>
114
+ </ul>
115
+ </li>
116
+ <li class="ws-calendar__day">
117
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Fri</span><time class="ws-calendar__date" datetime="2026-11-13"><span class="ws-sr">Friday, November </span>13</time></div>
118
+ <ul class="ws-calendar__items">
119
+ <li><a class="ws-calendar__item" href="#" title="Email 3: last call"><span>Email 3: last call</span></a></li>
120
+ </ul>
121
+ </li>
122
+ <li class="ws-calendar__day">
123
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Sat</span><time class="ws-calendar__date" datetime="2026-11-14"><span class="ws-sr">Saturday, November </span>14</time></div>
124
+ </li>
125
+ <li class="ws-calendar__day">
126
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Sun</span><time class="ws-calendar__date" datetime="2026-11-15"><span class="ws-sr">Sunday, November </span>15</time></div>
127
+ </li>
128
+ <li class="ws-calendar__day ws-calendar__day--lit">
129
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Mon</span><time class="ws-calendar__date" datetime="2026-11-16"><span class="ws-sr">Monday, November </span>16</time></div>
130
+ </li>
131
+ <li class="ws-calendar__day ws-calendar__day--lit">
132
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Tue</span><time class="ws-calendar__date" datetime="2026-11-17"><span class="ws-sr">Tuesday, November </span>17</time></div>
133
+ <ul class="ws-calendar__items">
134
+ <li><a class="ws-calendar__item ws-calendar__item--milestone" href="#" title="Launch day"><span>Launch day</span></a></li>
135
+ <li><a class="ws-calendar__item ws-calendar__item--3" href="#" title="Launch post on every channel"><span>Launch post on every channel</span></a></li>
136
+ </ul>
137
+ </li>
138
+ <li class="ws-calendar__day ws-calendar__day--lit">
139
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Wed</span><time class="ws-calendar__date" datetime="2026-11-18"><span class="ws-sr">Wednesday, November </span>18</time></div>
140
+ <ul class="ws-calendar__items">
141
+ <li><a class="ws-calendar__item" href="#" title="Recap email"><span>Recap email</span></a></li>
142
+ </ul>
143
+ </li>
144
+ <li class="ws-calendar__day ws-calendar__day--lit">
145
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Thu</span><time class="ws-calendar__date" datetime="2026-11-19"><span class="ws-sr">Thursday, November </span>19</time></div>
146
+ </li>
147
+ <li class="ws-calendar__day ws-calendar__day--lit">
148
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Fri</span><time class="ws-calendar__date" datetime="2026-11-20"><span class="ws-sr">Friday, November </span>20</time></div>
149
+ </li>
150
+ <li class="ws-calendar__day ws-calendar__day--lit">
151
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Sat</span><time class="ws-calendar__date" datetime="2026-11-21"><span class="ws-sr">Saturday, November </span>21</time></div>
152
+ </li>
153
+ <li class="ws-calendar__day ws-calendar__day--lit">
154
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Sun</span><time class="ws-calendar__date" datetime="2026-11-22"><span class="ws-sr">Sunday, November </span>22</time></div>
155
+ </li>
156
+ <li class="ws-calendar__day">
157
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Mon</span><time class="ws-calendar__date" datetime="2026-11-23"><span class="ws-sr">Monday, November </span>23</time></div>
158
+ </li>
159
+ <li class="ws-calendar__day">
160
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Tue</span><time class="ws-calendar__date" datetime="2026-11-24"><span class="ws-sr">Tuesday, November </span>24</time></div>
161
+ <ul class="ws-calendar__items">
162
+ <li><a class="ws-calendar__item ws-calendar__item--2" href="#" title="Retro with the team"><span>Retro with the team</span></a></li>
163
+ </ul>
164
+ </li>
165
+ <li class="ws-calendar__day">
166
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Wed</span><time class="ws-calendar__date" datetime="2026-11-25"><span class="ws-sr">Wednesday, November </span>25</time></div>
167
+ </li>
168
+ <li class="ws-calendar__day">
169
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Thu</span><time class="ws-calendar__date" datetime="2026-11-26"><span class="ws-sr">Thursday, November </span>26</time></div>
170
+ </li>
171
+ <li class="ws-calendar__day">
172
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Fri</span><time class="ws-calendar__date" datetime="2026-11-27"><span class="ws-sr">Friday, November </span>27</time></div>
173
+ </li>
174
+ <li class="ws-calendar__day">
175
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Sat</span><time class="ws-calendar__date" datetime="2026-11-28"><span class="ws-sr">Saturday, November </span>28</time></div>
176
+ </li>
177
+ <li class="ws-calendar__day">
178
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Sun</span><time class="ws-calendar__date" datetime="2026-11-29"><span class="ws-sr">Sunday, November </span>29</time></div>
179
+ </li>
180
+ <li class="ws-calendar__day">
181
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Mon</span><time class="ws-calendar__date" datetime="2026-11-30"><span class="ws-sr">Monday, November </span>30</time></div>
182
+ </li>
183
+ <li class="ws-calendar__day ws-calendar__day--outside">
184
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Tue</span><time class="ws-calendar__date" datetime="2026-12-01"><span class="ws-sr">Tuesday, December </span>1</time></div>
185
+ </li>
186
+ <li class="ws-calendar__day ws-calendar__day--outside">
187
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Wed</span><time class="ws-calendar__date" datetime="2026-12-02"><span class="ws-sr">Wednesday, December </span>2</time></div>
188
+ </li>
189
+ <li class="ws-calendar__day ws-calendar__day--outside">
190
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Thu</span><time class="ws-calendar__date" datetime="2026-12-03"><span class="ws-sr">Thursday, December </span>3</time></div>
191
+ </li>
192
+ <li class="ws-calendar__day ws-calendar__day--outside">
193
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Fri</span><time class="ws-calendar__date" datetime="2026-12-04"><span class="ws-sr">Friday, December </span>4</time></div>
194
+ </li>
195
+ <li class="ws-calendar__day ws-calendar__day--outside">
196
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Sat</span><time class="ws-calendar__date" datetime="2026-12-05"><span class="ws-sr">Saturday, December </span>5</time></div>
197
+ </li>
198
+ <li class="ws-calendar__day ws-calendar__day--outside">
199
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Sun</span><time class="ws-calendar__date" datetime="2026-12-06"><span class="ws-sr">Sunday, December </span>6</time></div>
200
+ </li>
201
+ </ol>
202
+ </section>
203
+ </div>
204
+
205
+ <div class="ws-stack">
206
+ <span class="ws-muted">A week: one row of seven taller days, every item shown, an empty day says so</span>
207
+ <section class="ws-card ws-card--inset ws-calendar ws-calendar--week" aria-labelledby="cal-week">
208
+ <div class="ws-calendar__bar">
209
+ <h3 class="ws-section ws-calendar__title" id="cal-week" aria-live="polite">Nov 9 to 15, 2026</h3>
210
+ <div class="ws-calendar__steps">
211
+ <button type="button" class="ws-icon-btn ws-icon-btn--sm" aria-label="Previous week"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.5 3.5L5 8l4.5 4.5"/></svg></button>
212
+ <button type="button" class="ws-btn ws-btn--secondary ws-btn--sm">Today</button>
213
+ <button type="button" class="ws-icon-btn ws-icon-btn--sm" aria-label="Next week"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.5 3.5L11 8l-4.5 4.5"/></svg></button>
214
+ </div>
215
+ <div class="ws-segmented" role="group" aria-label="Calendar view">
216
+ <button type="button" class="ws-segmented__item" aria-pressed="false">Month</button>
217
+ <button type="button" class="ws-segmented__item" aria-pressed="true">Week</button>
218
+ </div>
219
+ </div>
220
+ <div class="ws-calendar__weekdays" aria-hidden="true"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div>
221
+ <ol class="ws-calendar__days" aria-label="Week of November 9, 2026">
222
+ <li class="ws-calendar__day">
223
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Mon</span><time class="ws-calendar__date" datetime="2026-11-09"><span class="ws-sr">Monday, November </span>9</time></div>
224
+ <ul class="ws-calendar__items">
225
+ <li><a class="ws-calendar__item" href="#" title="Email 2: the how-to"><span>Email 2: the how-to</span></a></li>
226
+ <li><a class="ws-calendar__item ws-calendar__item--3" href="#" title="Retarget ads go live"><span>Retarget ads go live</span></a></li>
227
+ </ul>
228
+ </li>
229
+ <li class="ws-calendar__day">
230
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Tue</span><time class="ws-calendar__date" datetime="2026-11-10" aria-current="date"><span class="ws-sr">Tuesday, November </span>10</time></div>
231
+ <ul class="ws-calendar__items">
232
+ <li><a class="ws-calendar__item ws-calendar__item--needs" href="#" title="Walk Stephen through the demo"><span>Walk Stephen through the demo</span></a></li>
233
+ <li><a class="ws-calendar__item ws-calendar__item--3" href="#" title="Blog post: what is new"><span>Blog post: what is new</span></a></li>
234
+ <li><a class="ws-calendar__item" href="#" title="Text reminder to sign-ups"><span>Text reminder to sign-ups</span></a></li>
235
+ <li><a class="ws-calendar__item ws-calendar__item--3" href="#" title="Press note to partners"><span>Press note to partners</span></a></li>
236
+ </ul>
237
+ </li>
238
+ <li class="ws-calendar__day">
239
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Wed</span><time class="ws-calendar__date" datetime="2026-11-11"><span class="ws-sr">Wednesday, November </span>11</time></div>
240
+ <p class="ws-calendar__empty">Nothing due</p>
241
+ </li>
242
+ <li class="ws-calendar__day">
243
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Thu</span><time class="ws-calendar__date" datetime="2026-11-12"><span class="ws-sr">Thursday, November </span>12</time></div>
244
+ <ul class="ws-calendar__items">
245
+ <li><a class="ws-calendar__item ws-calendar__item--2" href="#" title="Webinar: the new portal"><span>Webinar: the new portal</span></a></li>
246
+ </ul>
247
+ </li>
248
+ <li class="ws-calendar__day">
249
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Fri</span><time class="ws-calendar__date" datetime="2026-11-13"><span class="ws-sr">Friday, November </span>13</time></div>
250
+ <ul class="ws-calendar__items">
251
+ <li><a class="ws-calendar__item" href="#" title="Email 3: last call"><span>Email 3: last call</span></a></li>
252
+ </ul>
253
+ </li>
254
+ <li class="ws-calendar__day">
255
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Sat</span><time class="ws-calendar__date" datetime="2026-11-14"><span class="ws-sr">Saturday, November </span>14</time></div>
256
+ <p class="ws-calendar__empty">Nothing due</p>
257
+ </li>
258
+ <li class="ws-calendar__day">
259
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Sun</span><time class="ws-calendar__date" datetime="2026-11-15"><span class="ws-sr">Sunday, November </span>15</time></div>
260
+ <p class="ws-calendar__empty">Nothing due</p>
261
+ </li>
262
+ </ol>
263
+ </section>
264
+ </div>
265
+
266
+ <div class="ws-stack" style="max-width: 360px;">
267
+ <span class="ws-muted">The same month in a narrow column (a phone, a side panel): an agenda, a row a day that holds something, today kept</span>
268
+ <section class="ws-card ws-card--inset ws-calendar" aria-labelledby="cal-agenda">
269
+ <div class="ws-calendar__bar">
270
+ <h3 class="ws-section ws-calendar__title" id="cal-agenda" aria-live="polite">November 2026</h3>
271
+ <div class="ws-calendar__steps">
272
+ <button type="button" class="ws-icon-btn ws-icon-btn--sm" aria-label="Previous month"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.5 3.5L5 8l4.5 4.5"/></svg></button>
273
+ <button type="button" class="ws-btn ws-btn--secondary ws-btn--sm">Today</button>
274
+ <button type="button" class="ws-icon-btn ws-icon-btn--sm" aria-label="Next month"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.5 3.5L11 8l-4.5 4.5"/></svg></button>
275
+ </div>
276
+ </div>
277
+ <div class="ws-calendar__weekdays" aria-hidden="true"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div>
278
+ <ol class="ws-calendar__days" aria-label="November 2026">
279
+ <li class="ws-calendar__day ws-calendar__day--outside">
280
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Mon</span><time class="ws-calendar__date" datetime="2026-10-26"><span class="ws-sr">Monday, October </span>26</time></div>
281
+ </li>
282
+ <li class="ws-calendar__day ws-calendar__day--outside">
283
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Tue</span><time class="ws-calendar__date" datetime="2026-10-27"><span class="ws-sr">Tuesday, October </span>27</time></div>
284
+ </li>
285
+ <li class="ws-calendar__day ws-calendar__day--outside">
286
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Wed</span><time class="ws-calendar__date" datetime="2026-10-28"><span class="ws-sr">Wednesday, October </span>28</time></div>
287
+ </li>
288
+ <li class="ws-calendar__day ws-calendar__day--outside">
289
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Thu</span><time class="ws-calendar__date" datetime="2026-10-29"><span class="ws-sr">Thursday, October </span>29</time></div>
290
+ </li>
291
+ <li class="ws-calendar__day ws-calendar__day--outside">
292
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Fri</span><time class="ws-calendar__date" datetime="2026-10-30"><span class="ws-sr">Friday, October </span>30</time></div>
293
+ </li>
294
+ <li class="ws-calendar__day ws-calendar__day--outside">
295
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Sat</span><time class="ws-calendar__date" datetime="2026-10-31"><span class="ws-sr">Saturday, October </span>31</time></div>
296
+ </li>
297
+ <li class="ws-calendar__day">
298
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Sun</span><time class="ws-calendar__date" datetime="2026-11-01"><span class="ws-sr">Sunday, November </span>1</time></div>
299
+ </li>
300
+ <li class="ws-calendar__day">
301
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Mon</span><time class="ws-calendar__date" datetime="2026-11-02"><span class="ws-sr">Monday, November </span>2</time></div>
302
+ <ul class="ws-calendar__items">
303
+ <li><a class="ws-calendar__item" href="#" title="Email 1: the announcement"><span>Email 1: the announcement</span></a></li>
304
+ </ul>
305
+ </li>
306
+ <li class="ws-calendar__day">
307
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Tue</span><time class="ws-calendar__date" datetime="2026-11-03"><span class="ws-sr">Tuesday, November </span>3</time></div>
308
+ <ul class="ws-calendar__items">
309
+ <li><a class="ws-calendar__item ws-calendar__item--2" href="#" title="Webinar invites go out"><span>Webinar invites go out</span></a></li>
310
+ </ul>
311
+ </li>
312
+ <li class="ws-calendar__day">
313
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Wed</span><time class="ws-calendar__date" datetime="2026-11-04"><span class="ws-sr">Wednesday, November </span>4</time></div>
314
+ </li>
315
+ <li class="ws-calendar__day">
316
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Thu</span><time class="ws-calendar__date" datetime="2026-11-05"><span class="ws-sr">Thursday, November </span>5</time></div>
317
+ <ul class="ws-calendar__items">
318
+ <li><a class="ws-calendar__item ws-calendar__item--3" href="#" title="Partner post on LinkedIn"><span>Partner post on LinkedIn</span></a></li>
319
+ </ul>
320
+ </li>
321
+ <li class="ws-calendar__day">
322
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Fri</span><time class="ws-calendar__date" datetime="2026-11-06"><span class="ws-sr">Friday, November </span>6</time></div>
323
+ <ul class="ws-calendar__items">
324
+ <li><a class="ws-calendar__item ws-calendar__item--milestone" href="#" title="Gate 2: copy signed off"><span>Gate 2: copy signed off</span></a></li>
325
+ </ul>
326
+ </li>
327
+ <li class="ws-calendar__day">
328
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Sat</span><time class="ws-calendar__date" datetime="2026-11-07"><span class="ws-sr">Saturday, November </span>7</time></div>
329
+ </li>
330
+ <li class="ws-calendar__day">
331
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Sun</span><time class="ws-calendar__date" datetime="2026-11-08"><span class="ws-sr">Sunday, November </span>8</time></div>
332
+ </li>
333
+ <li class="ws-calendar__day">
334
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Mon</span><time class="ws-calendar__date" datetime="2026-11-09"><span class="ws-sr">Monday, November </span>9</time></div>
335
+ <ul class="ws-calendar__items">
336
+ <li><a class="ws-calendar__item" href="#" title="Email 2: the how-to"><span>Email 2: the how-to</span></a></li>
337
+ <li><a class="ws-calendar__item ws-calendar__item--3" href="#" title="Retarget ads go live"><span>Retarget ads go live</span></a></li>
338
+ </ul>
339
+ </li>
340
+ <li class="ws-calendar__day">
341
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Tue</span><time class="ws-calendar__date" datetime="2026-11-10" aria-current="date"><span class="ws-sr">Tuesday, November </span>10</time></div>
342
+ <ul class="ws-calendar__items">
343
+ <li><a class="ws-calendar__item ws-calendar__item--needs" href="#" title="Walk Stephen through the demo"><span>Walk Stephen through the demo</span></a></li>
344
+ <li><a class="ws-calendar__item ws-calendar__item--3" href="#" title="Blog post: what is new"><span>Blog post: what is new</span></a></li>
345
+ <li><a class="ws-calendar__item" href="#" title="Text reminder to sign-ups"><span>Text reminder to sign-ups</span></a></li>
346
+ </ul>
347
+ <button type="button" class="ws-btn ws-btn--text ws-calendar__more">1 more</button>
348
+ </li>
349
+ <li class="ws-calendar__day">
350
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Wed</span><time class="ws-calendar__date" datetime="2026-11-11"><span class="ws-sr">Wednesday, November </span>11</time></div>
351
+ </li>
352
+ <li class="ws-calendar__day">
353
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Thu</span><time class="ws-calendar__date" datetime="2026-11-12"><span class="ws-sr">Thursday, November </span>12</time></div>
354
+ <ul class="ws-calendar__items">
355
+ <li><a class="ws-calendar__item ws-calendar__item--2" href="#" title="Webinar: the new portal"><span>Webinar: the new portal</span></a></li>
356
+ </ul>
357
+ </li>
358
+ <li class="ws-calendar__day">
359
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Fri</span><time class="ws-calendar__date" datetime="2026-11-13"><span class="ws-sr">Friday, November </span>13</time></div>
360
+ <ul class="ws-calendar__items">
361
+ <li><a class="ws-calendar__item" href="#" title="Email 3: last call"><span>Email 3: last call</span></a></li>
362
+ </ul>
363
+ </li>
364
+ <li class="ws-calendar__day">
365
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Sat</span><time class="ws-calendar__date" datetime="2026-11-14"><span class="ws-sr">Saturday, November </span>14</time></div>
366
+ </li>
367
+ <li class="ws-calendar__day">
368
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Sun</span><time class="ws-calendar__date" datetime="2026-11-15"><span class="ws-sr">Sunday, November </span>15</time></div>
369
+ </li>
370
+ <li class="ws-calendar__day ws-calendar__day--lit">
371
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Mon</span><time class="ws-calendar__date" datetime="2026-11-16"><span class="ws-sr">Monday, November </span>16</time></div>
372
+ </li>
373
+ <li class="ws-calendar__day ws-calendar__day--lit">
374
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Tue</span><time class="ws-calendar__date" datetime="2026-11-17"><span class="ws-sr">Tuesday, November </span>17</time></div>
375
+ <ul class="ws-calendar__items">
376
+ <li><a class="ws-calendar__item ws-calendar__item--milestone" href="#" title="Launch day"><span>Launch day</span></a></li>
377
+ <li><a class="ws-calendar__item ws-calendar__item--3" href="#" title="Launch post on every channel"><span>Launch post on every channel</span></a></li>
378
+ </ul>
379
+ </li>
380
+ <li class="ws-calendar__day ws-calendar__day--lit">
381
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Wed</span><time class="ws-calendar__date" datetime="2026-11-18"><span class="ws-sr">Wednesday, November </span>18</time></div>
382
+ <ul class="ws-calendar__items">
383
+ <li><a class="ws-calendar__item" href="#" title="Recap email"><span>Recap email</span></a></li>
384
+ </ul>
385
+ </li>
386
+ <li class="ws-calendar__day ws-calendar__day--lit">
387
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Thu</span><time class="ws-calendar__date" datetime="2026-11-19"><span class="ws-sr">Thursday, November </span>19</time></div>
388
+ </li>
389
+ <li class="ws-calendar__day ws-calendar__day--lit">
390
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Fri</span><time class="ws-calendar__date" datetime="2026-11-20"><span class="ws-sr">Friday, November </span>20</time></div>
391
+ </li>
392
+ <li class="ws-calendar__day ws-calendar__day--lit">
393
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Sat</span><time class="ws-calendar__date" datetime="2026-11-21"><span class="ws-sr">Saturday, November </span>21</time></div>
394
+ </li>
395
+ <li class="ws-calendar__day ws-calendar__day--lit">
396
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Sun</span><time class="ws-calendar__date" datetime="2026-11-22"><span class="ws-sr">Sunday, November </span>22</time></div>
397
+ </li>
398
+ <li class="ws-calendar__day">
399
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Mon</span><time class="ws-calendar__date" datetime="2026-11-23"><span class="ws-sr">Monday, November </span>23</time></div>
400
+ </li>
401
+ <li class="ws-calendar__day">
402
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Tue</span><time class="ws-calendar__date" datetime="2026-11-24"><span class="ws-sr">Tuesday, November </span>24</time></div>
403
+ <ul class="ws-calendar__items">
404
+ <li><a class="ws-calendar__item ws-calendar__item--2" href="#" title="Retro with the team"><span>Retro with the team</span></a></li>
405
+ </ul>
406
+ </li>
407
+ <li class="ws-calendar__day">
408
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Wed</span><time class="ws-calendar__date" datetime="2026-11-25"><span class="ws-sr">Wednesday, November </span>25</time></div>
409
+ </li>
410
+ <li class="ws-calendar__day">
411
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Thu</span><time class="ws-calendar__date" datetime="2026-11-26"><span class="ws-sr">Thursday, November </span>26</time></div>
412
+ </li>
413
+ <li class="ws-calendar__day">
414
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Fri</span><time class="ws-calendar__date" datetime="2026-11-27"><span class="ws-sr">Friday, November </span>27</time></div>
415
+ </li>
416
+ <li class="ws-calendar__day">
417
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Sat</span><time class="ws-calendar__date" datetime="2026-11-28"><span class="ws-sr">Saturday, November </span>28</time></div>
418
+ </li>
419
+ <li class="ws-calendar__day">
420
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Sun</span><time class="ws-calendar__date" datetime="2026-11-29"><span class="ws-sr">Sunday, November </span>29</time></div>
421
+ </li>
422
+ <li class="ws-calendar__day">
423
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Mon</span><time class="ws-calendar__date" datetime="2026-11-30"><span class="ws-sr">Monday, November </span>30</time></div>
424
+ </li>
425
+ <li class="ws-calendar__day ws-calendar__day--outside">
426
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Tue</span><time class="ws-calendar__date" datetime="2026-12-01"><span class="ws-sr">Tuesday, December </span>1</time></div>
427
+ </li>
428
+ <li class="ws-calendar__day ws-calendar__day--outside">
429
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Wed</span><time class="ws-calendar__date" datetime="2026-12-02"><span class="ws-sr">Wednesday, December </span>2</time></div>
430
+ </li>
431
+ <li class="ws-calendar__day ws-calendar__day--outside">
432
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Thu</span><time class="ws-calendar__date" datetime="2026-12-03"><span class="ws-sr">Thursday, December </span>3</time></div>
433
+ </li>
434
+ <li class="ws-calendar__day ws-calendar__day--outside">
435
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Fri</span><time class="ws-calendar__date" datetime="2026-12-04"><span class="ws-sr">Friday, December </span>4</time></div>
436
+ </li>
437
+ <li class="ws-calendar__day ws-calendar__day--outside">
438
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Sat</span><time class="ws-calendar__date" datetime="2026-12-05"><span class="ws-sr">Saturday, December </span>5</time></div>
439
+ </li>
440
+ <li class="ws-calendar__day ws-calendar__day--outside">
441
+ <div class="ws-calendar__day-head"><span class="ws-calendar__weekday" aria-hidden="true">Sun</span><time class="ws-calendar__date" datetime="2026-12-06"><span class="ws-sr">Sunday, December </span>6</time></div>
442
+ </li>
443
+ </ol>
444
+ </section>
445
+ </div>
446
+
447
+ </div>
448
+ </body>
449
+ </html>
package/design-system/components/Calendar/style.css ADDED
@@ -0,0 +1,61 @@
1
+ /* ---- Calendar: things on dates. A month (or a week) of days, Monday first, each day holding its items as rows that
2
+ open; the steps and the view switch over it. The days abut on 0.5 px lines; today's number is ringed in the needs
3
+ step, as DateInput's is. Under 40rem of its own width the month reads as an agenda: a row a day, the days with
4
+ nothing hidden, today kept. ---- */
5
+ .ws-calendar { container: ws-calendar / inline-size; display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
6
+ .ws-calendar__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); }
7
+ .ws-calendar__title { margin-right: auto; }
8
+ .ws-calendar__steps { display: flex; align-items: center; gap: var(--space-xxs); }
9
+ /* The key: what each item's tone means, in the meta words, each beside its mark (__item-mark with the item's tone class). */
10
+ /* Fixed 160 columns, so a key that wraps keeps its marks on shared edges. */
11
+ .ws-calendar__key { display: grid; grid-template-columns: repeat(auto-fill, var(--space-8xl)); gap: var(--space-xxs) var(--space-sm); font-size: var(--ws-text-dense); line-height: var(--space-md); color: var(--color-text-muted); }
12
+ .ws-calendar__key > span { display: inline-flex; align-items: center; gap: var(--space-xxs-plus); }
13
+ /* The lit period's swatch in the key: the tint on a 0.5 px edge. */
14
+ .ws-calendar__key-lit { flex: none; width: var(--space-sm); height: var(--space-sm); border-radius: var(--ws-radius-chip); background: var(--ws-tint-accent); box-shadow: inset 0 0 0 var(--ws-hairline) var(--ws-edge-card); }
15
+ /* Weekday names once over the grid, 11 px medium muted, centred over their days as the numbers are; read aloud with
16
+ each day instead. */
17
+ .ws-calendar__weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); font-size: var(--ws-text-micro); line-height: var(--ws-leading-micro); font-weight: 500; color: var(--color-text-muted); text-align: center; }
18
+ /* The days: the 0.5 px lines are the grid's own ground showing between them. */
19
+ .ws-calendar__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--ws-hairline); overflow: hidden; border: var(--ws-hairline) solid var(--ws-edge-card); border-radius: var(--ws-radius-control); background: var(--ws-edge-card); }
20
+ .ws-calendar__day { display: flex; flex-direction: column; gap: var(--space-3xs); min-width: 0; min-height: var(--space-7xl); padding: var(--space-xxs); background: var(--color-bg-page); }
21
+ /* Days in a period the view is about (the launch week, the phase in hand): one quiet tint, named in the key. */
22
+ .ws-calendar__day--lit { background: var(--ws-tint-accent); }
23
+ .ws-calendar__day-head { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: var(--space-lg); }
24
+ .ws-calendar__weekday { display: none; }
25
+ .ws-calendar__date { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: var(--space-lg); height: var(--space-lg); padding: 0 var(--space-xxs); border-radius: var(--radius-full); font-size: var(--ws-text-dense); line-height: var(--space-md); font-weight: 500; color: var(--color-text-heading); font-variant-numeric: tabular-nums; }
26
+ .ws-calendar__day--outside .ws-calendar__date { color: var(--color-text-muted); font-weight: 400; }
27
+ /* Today: a 1 px ring and the number in the salmon's AA step (the salmon itself is 2.6:1 on the cream). */
28
+ .ws-calendar__date[aria-current="date"] { box-shadow: inset 0 0 0 var(--ws-line) var(--ws-word-needs); color: var(--ws-word-needs); font-weight: 600; }
29
+ .ws-calendar__items { display: flex; flex-direction: column; gap: var(--space-3xs); min-width: 0; }
30
+ /* An item: a 24 px row on the sunk cream, its tone a 6 px dot (a milestone a diamond), its words one line, whole in
31
+ its title. A link or a button when it opens the thing; hover is the wash, never a lift. */
32
+ .ws-calendar__item { --ws-calendar-tone: var(--tone, var(--color-text-heading)); display: flex; align-items: center; gap: var(--space-xxs-plus); min-width: 0; min-height: var(--space-lg); padding: 0 var(--space-xxs-plus); border-radius: var(--ws-radius-control); background-color: var(--ws-surface-sunk); font-size: var(--ws-text-dense); line-height: var(--space-md); color: var(--color-text-heading); text-align: left; text-decoration: none; }
33
+ .ws-calendar__item::before, .ws-calendar__item-mark { content: ""; flex: none; width: var(--space-xxs-plus); height: var(--space-xxs-plus); border-radius: var(--radius-full); background: var(--ws-calendar-tone, var(--color-text-heading)); }
34
+ .ws-calendar__item > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
35
+ .ws-calendar__item--2 { --ws-calendar-tone: var(--tone, var(--ws-chart-finished)); }
36
+ .ws-calendar__item--3 { --ws-calendar-tone: var(--tone, var(--ws-chart-past-half)); }
37
+ .ws-calendar__item--needs { --ws-calendar-tone: var(--tone, var(--ws-chart-under-half)); }
38
+ .ws-calendar__item--milestone::before, .ws-calendar__item-mark.ws-calendar__item--milestone { border-radius: var(--ws-radius-bar); transform: rotate(45deg); }
39
+ .ws-calendar__item--milestone { font-weight: 500; }
40
+ :is(a, button).ws-calendar__item { cursor: pointer; transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
41
+ @media (hover: hover) { :is(a, button).ws-calendar__item:hover { background-image: linear-gradient(var(--ws-hover), var(--ws-hover)); } }
42
+ :is(a, button).ws-calendar__item:active { background-image: linear-gradient(var(--ws-hover-strong), var(--ws-hover-strong)); }
43
+ /* Touch: an item is a boxed control, so 40 tall (K10). */
44
+ @media (pointer: coarse) { .ws-calendar__item { min-height: var(--ws-touch); } }
45
+ .ws-calendar__item:focus-visible { outline: var(--ws-focus-width) solid var(--ws-focus-color); outline-offset: calc(var(--ws-focus-width) * -1); }
46
+ .ws-calendar__more { align-self: flex-start; justify-self: start; margin-left: 0; font-size: var(--ws-text-dense); }
47
+ .ws-calendar__empty { padding: var(--space-xxs) var(--space-xxs-plus); font-size: var(--ws-text-dense); line-height: var(--space-md); color: var(--color-text-muted); }
48
+ /* Week: one row of seven taller days. */
49
+ .ws-calendar--week .ws-calendar__day { min-height: var(--space-9xl); }
50
+ /* Agenda: a narrow column (a phone) reads the same markup as a list of the days that hold something. */
51
+ @container ws-calendar (width < 40rem) {
52
+ .ws-calendar__weekdays { display: none; }
53
+ .ws-calendar__days { grid-template-columns: minmax(0, 1fr); gap: 0; border: 0; border-radius: 0; background: none; }
54
+ .ws-calendar__days > .ws-calendar__day { display: grid; grid-template-columns: var(--space-2xl) minmax(0, 1fr); align-items: start; gap: var(--space-3xs) var(--space-sm); min-height: 0; padding: var(--space-xs) 0; }
55
+ .ws-calendar__items, .ws-calendar__more, .ws-calendar__empty { grid-column: 2; }
56
+ .ws-calendar__day + .ws-calendar__day { border-top: var(--ws-hairline) solid var(--ws-edge-card); }
57
+ .ws-calendar__day--outside, .ws-calendar__day:not(:has(.ws-calendar__item, [aria-current="date"])) { display: none; }
58
+ .ws-calendar__day--lit { background: none; }
59
+ .ws-calendar__day-head { flex-direction: column; gap: 0; }
60
+ .ws-calendar__weekday { display: block; font-size: var(--ws-text-micro); line-height: var(--ws-leading-micro); font-weight: 500; color: var(--color-text-muted); }
61
+ }
package/design-system/components/Card/README.md CHANGED
@@ -22,6 +22,11 @@ every other surface builds on it.
22
22
 
23
23
  ## Anatomy
24
24
 
25
+ - **A picture** (`ws-card__media`, the card's first part: an image tile, an asset or template choice): edge to edge,
26
+ square by default (set `aspect-ratio` for another), `object-fit: cover` (a logo takes `contain` on the app's own
27
+ checker), its top corners rounded to the cream's 7 px, so the card itself is never clipped and a tab, a menu or a
28
+ tip still shows. Under it, a caption in `ws-card__body` (8 above, 12 round). Never `overflow: hidden` on the card.
29
+
25
30
  - The rim: a `--ws-rim` (1 px) border in `--ws-tray` (#EDEDED), 8 px corners (`--ws-radius-card`). The cream
26
31
  (`--color-bg-page`) inside has 7 px corners (`--ws-radius-card-inner`), so the two are concentric. No outline, no
27
32
  shadow at rest.
@@ -74,6 +79,12 @@ height. A band under 26rem wide (it measures itself) gives its acts the whole li
74
79
  - **Focus**: the 2 px navy outline, 2 px out (`--ws-focus-*`). A focused row or foot draws it inside itself.
75
80
  - **Selected** (in a row of cards): the rim darkens and a 2 px navy tab sits 8 px under the card, 16 px in from each
76
81
  side. Say it in the markup too (`aria-pressed`, `aria-current` or `aria-selected`).
82
+ - **Selected in a grid, or on a picture** (`ws-card--ring` with `ws-card--selected`): the tab would fall in the gap
83
+ above the next row, so the choice is drawn on the card: the rim turns navy with a hairline more outside it, a flush
84
+ 2 px ring (the focus ring stands 2 off, so the two never look alike), and a 24 px navy tick (`ws-card__tick`, kept in
85
+ the markup and shown only while selected) on the top right corner, on a 2 px cream ring so it reads over a photo. It
86
+ pops in on the mark's curve; still under reduced motion. A grid of choices is a `role="group"` of `aria-pressed`
87
+ buttons (several) or a `radiogroup` (one).
77
88
  - **Open row**: a row whose detail is showing (`aria-expanded="true"` or `aria-current`) takes the sunk cream
78
89
  (`--ws-surface-sunk`); nothing moves. A hovered row takes the faint navy wash (`--ws-hover-faint`); the open row keeps its sunk cream under the
79
90
  wash, so hovering it never lightens it.
@@ -110,6 +121,8 @@ height. A band under 26rem wide (it measures itself) gives its acts the whole li
110
121
  | `tone` | `card` \| `sunk` \| `plain` | The surface look. Default `card`. |
111
122
  | `pad` | `none` \| `sm` \| `md` \| `lg` | Inside padding. Default `none`. |
112
123
  | `selected` | boolean | Rings the card as the one open or chosen. |
124
+ | `ring` | boolean | Draws `selected` on the card (a flush ring and a tick) instead of the tab under it: a grid of tiles, a card with a picture. |
125
+ | `media` | `ReactNode` | A picture as the card's first part (`ws-card__media`). |
113
126
  | `interactive` | boolean | Tints the card under the pointer though it is neither a link nor a button (its child is the real target). |
114
127
  | `className` | string | Layout only: width, grid placement, margins, flex. Never colour, edge, corners or padding. |
115
128