@fairmint/ui 0.3.12 → 0.3.14

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 (2) hide show
  1. package/dist/styles.css +19 -4
  2. package/package.json +1 -1
package/dist/styles.css CHANGED
@@ -83,6 +83,7 @@
83
83
 
84
84
  .fairmint-step-progress__list {
85
85
  display: flex;
86
+ justify-content: space-between;
86
87
  gap: 0.5rem;
87
88
  width: 100%;
88
89
  margin: 0 0 1.5rem;
@@ -98,13 +99,27 @@
98
99
 
99
100
  .fairmint-step-progress[data-orientation="vertical"] .fairmint-step-progress__list {
100
101
  flex-direction: column;
102
+ justify-content: flex-start;
101
103
  margin: 0;
102
104
  overflow: visible;
103
105
  }
104
106
 
107
+ /*
108
+ * Sized to its label, capped, and never grown to fill a share.
109
+ *
110
+ * Three things have to hold at once. A short step like "Sign" should not sit in a
111
+ * pill stretched to a quarter of the row, so the item takes its content width
112
+ * rather than an equal share. A wordy step should not push its neighbours aside,
113
+ * so `max-width` caps it and the label ellipsises inside. And once the steps stop
114
+ * fitting, the row should run past the container for the list to scroll rather than
115
+ * every pill squeezing down — which is what shrinking to `min-width: 0` used to do.
116
+ *
117
+ * The spare room goes *between* the pills via `justify-content` on the list, not
118
+ * inside them.
119
+ */
105
120
  .fairmint-step-progress__item {
106
- min-width: 0;
107
- flex: 1 1 0;
121
+ flex: 0 1 auto;
122
+ max-width: 14rem;
108
123
  }
109
124
 
110
125
  .fairmint-step-progress[data-orientation="vertical"] .fairmint-step-progress__item {
@@ -190,12 +205,12 @@
190
205
  text-overflow: ellipsis;
191
206
  white-space: nowrap;
192
207
  font-size: 0.875rem;
193
- font-weight: 500;
208
+ font-weight: 400;
194
209
  line-height: 1.25;
195
210
  }
196
211
 
197
212
  .fairmint-step-progress__pill[data-state="active"] .fairmint-step-progress__label {
198
- font-weight: 700;
213
+ font-weight: 600;
199
214
  }
200
215
 
201
216
  @media (max-width: 47.99em) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fairmint/ui",
3
- "version": "0.3.12",
3
+ "version": "0.3.14",
4
4
  "type": "module",
5
5
  "description": "Fairmint design system and UI component library",
6
6
  "license": "UNLICENSED",