@morscherlab/mint-sdk 1.4.0-beta.19 → 1.4.0-beta.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +2 -2
- package/dist/{install-C5psB1H0.js → install-qjELyNwc.js} +2 -2
- package/dist/{install-C5psB1H0.js.map → install-qjELyNwc.js.map} +1 -1
- package/dist/install.js +1 -1
- package/dist/{lab-BHVT1qN2.js → lab-UyTbokQC.js} +58 -51
- package/dist/{lab-BHVT1qN2.js.map → lab-UyTbokQC.js.map} +1 -1
- package/dist/lab.js +1 -1
- package/dist/styles.css +128 -21
- package/package.json +1 -1
- package/src/__tests__/components/SampleSelector.test.ts +20 -0
- package/src/__tests__/styles/cssTokens.test.ts +4 -1
- package/src/components/LayoutResizeHandle.story.vue +65 -4
- package/src/components/SampleSelector.story.vue +21 -6
- package/src/components/SampleSelector.vue +10 -3
- package/src/components/SectionCard.story.vue +33 -0
- package/src/styles/components/layout-resize-handle.css +59 -16
- package/src/styles/components/sample-selector.css +43 -0
- package/src/styles/components/section-card.css +26 -4
|
@@ -23,26 +23,69 @@
|
|
|
23
23
|
box-sizing: border-box;
|
|
24
24
|
border-bottom: 1px solid var(--border-light);
|
|
25
25
|
font-size: 0.8125rem;
|
|
26
|
+
/* The header compacts when it is narrow (sidebars); see the query below. */
|
|
27
|
+
container-type: inline-size;
|
|
26
28
|
}
|
|
27
29
|
|
|
28
30
|
.mint-sample-selector__title {
|
|
31
|
+
flex-shrink: 0;
|
|
32
|
+
white-space: nowrap;
|
|
29
33
|
font-weight: 600;
|
|
30
34
|
color: var(--text-primary);
|
|
31
35
|
}
|
|
32
36
|
|
|
33
37
|
.mint-sample-selector__selected {
|
|
38
|
+
/* Without the query (or with a long count) the count gives way, never the row. */
|
|
39
|
+
min-width: 0;
|
|
40
|
+
overflow: hidden;
|
|
41
|
+
text-overflow: ellipsis;
|
|
42
|
+
white-space: nowrap;
|
|
34
43
|
font-size: 0.75rem;
|
|
35
44
|
font-weight: 500;
|
|
36
45
|
color: var(--text-muted);
|
|
37
46
|
}
|
|
38
47
|
|
|
39
48
|
.mint-sample-selector__header-actions {
|
|
49
|
+
flex-shrink: 0;
|
|
40
50
|
display: flex;
|
|
41
51
|
align-items: center;
|
|
42
52
|
gap: 0.125rem;
|
|
43
53
|
margin-left: auto;
|
|
44
54
|
}
|
|
45
55
|
|
|
56
|
+
.mint-sample-selector__selected-short {
|
|
57
|
+
display: none;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* Narrow selector: the header stays one row and keeps its height. The grouping
|
|
61
|
+
button shows only its icon (the label stays its accessible name and tooltip)
|
|
62
|
+
and the count shortens to "N sel." (screen readers keep "N selected"). */
|
|
63
|
+
/* Measured: the full row (title, "N selected", Smart group, Clear groups) needs
|
|
64
|
+
about 17.55rem of header content width with Fira Sans. */
|
|
65
|
+
@container (max-width: 17.625rem) {
|
|
66
|
+
.mint-sample-selector__group-btn .mint-button__label,
|
|
67
|
+
.mint-sample-selector__selected-full {
|
|
68
|
+
position: absolute;
|
|
69
|
+
width: 1px;
|
|
70
|
+
height: 1px;
|
|
71
|
+
margin: -1px;
|
|
72
|
+
padding: 0;
|
|
73
|
+
overflow: hidden;
|
|
74
|
+
clip: rect(0, 0, 0, 0);
|
|
75
|
+
white-space: nowrap;
|
|
76
|
+
border: 0;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.mint-sample-selector__selected-short {
|
|
80
|
+
display: inline;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.mint-sample-selector__group-btn {
|
|
84
|
+
min-width: var(--form-height-sm);
|
|
85
|
+
padding-inline: 0.25rem;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
46
89
|
.mint-sample-selector__grouped,
|
|
47
90
|
.mint-sample-selector__flat,
|
|
48
91
|
.mint-sample-selector__state {
|
|
@@ -6,6 +6,11 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
.mint-section-card {
|
|
9
|
+
/* The left grid that the header and the rows share: header icon (or row
|
|
10
|
+
lead) width, then this gap. Set --mint-section-card-gap on the card to
|
|
11
|
+
change both. */
|
|
12
|
+
--mint-section-card-lead-width: 1rem;
|
|
13
|
+
--mint-section-card-gap: 0.625rem;
|
|
9
14
|
display: flex;
|
|
10
15
|
flex-direction: column;
|
|
11
16
|
border-radius: var(--radius-lg);
|
|
@@ -31,7 +36,7 @@
|
|
|
31
36
|
.mint-section-card__header {
|
|
32
37
|
display: flex;
|
|
33
38
|
align-items: center;
|
|
34
|
-
gap:
|
|
39
|
+
gap: var(--mint-section-card-gap);
|
|
35
40
|
box-sizing: border-box;
|
|
36
41
|
min-height: 2.5rem;
|
|
37
42
|
/* 4px block padding: a 28px header control plus padding plus the 1px rule
|
|
@@ -51,8 +56,8 @@
|
|
|
51
56
|
align-items: center;
|
|
52
57
|
justify-content: center;
|
|
53
58
|
flex-shrink: 0;
|
|
54
|
-
width:
|
|
55
|
-
height:
|
|
59
|
+
width: var(--mint-section-card-lead-width);
|
|
60
|
+
height: var(--mint-section-card-lead-width);
|
|
56
61
|
color: var(--text-muted);
|
|
57
62
|
}
|
|
58
63
|
|
|
@@ -112,12 +117,27 @@
|
|
|
112
117
|
.mint-section-card__row {
|
|
113
118
|
display: flex;
|
|
114
119
|
align-items: center;
|
|
115
|
-
gap:
|
|
120
|
+
gap: var(--mint-section-card-gap);
|
|
116
121
|
padding: 0.375rem 0.75rem;
|
|
117
122
|
background: var(--bg-secondary);
|
|
118
123
|
transition: background-color var(--mint-transition);
|
|
119
124
|
}
|
|
120
125
|
|
|
126
|
+
/* Leading glyph slot of a row: as wide as the header icon, so the glyph
|
|
127
|
+
* centres under it and the row text starts at the header title. Leave it
|
|
128
|
+
* empty to keep the text on the grid. It is one title line high (1lh at the
|
|
129
|
+
* title size), so a two-line row keeps its glyph on the first line. */
|
|
130
|
+
.mint-section-card__row-lead {
|
|
131
|
+
display: inline-flex;
|
|
132
|
+
align-items: center;
|
|
133
|
+
justify-content: center;
|
|
134
|
+
flex-shrink: 0;
|
|
135
|
+
align-self: flex-start;
|
|
136
|
+
width: var(--mint-section-card-lead-width);
|
|
137
|
+
height: 1lh;
|
|
138
|
+
font-size: 0.8125rem;
|
|
139
|
+
}
|
|
140
|
+
|
|
121
141
|
a.mint-section-card__row,
|
|
122
142
|
button.mint-section-card__row {
|
|
123
143
|
cursor: pointer;
|
|
@@ -139,4 +159,6 @@ button.mint-section-card__row:hover {
|
|
|
139
159
|
[data-density="comfortable"] .mint-section-card__row {
|
|
140
160
|
padding-top: 0.5rem;
|
|
141
161
|
padding-bottom: 0.5rem;
|
|
162
|
+
/* Same left inset as the header, so row content lines up under the header. */
|
|
163
|
+
padding-left: 0.875rem;
|
|
142
164
|
}
|