@dorsk/tsumikit 0.39.0 → 0.40.1
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/components/atoms/Icon.svelte +3 -0
- package/dist/components/atoms/Icon.svelte.d.ts +3 -0
- package/dist/components/layouts/AutoGrid.svelte +5 -1
- package/dist/components/molecules/Drawer.svelte +9 -6
- package/dist/components/molecules/FontScalePicker.svelte +8 -1
- package/dist/components/molecules/Popover.svelte +16 -8
- package/package.json +1 -1
|
@@ -65,6 +65,9 @@
|
|
|
65
65
|
unlink: '<path d="m18.84 12.25 1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.71" /><path d="m5.17 11.75-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71" /><line x1="8" x2="8" y1="2" y2="5" /><line x1="2" x2="5" y1="8" y2="8" /><line x1="16" x2="16" y1="19" y2="22" /><line x1="19" x2="22" y1="16" y2="16" />',
|
|
66
66
|
'text-cursor': '<path d="M17 22h-1a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4h1" /><path d="M7 22h1a4 4 0 0 0 4-4" /><path d="M7 2h1a4 4 0 0 1 4 4" />',
|
|
67
67
|
tag: '<path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z" /><circle cx="7.5" cy="7.5" r=".5" fill="currentColor" />',
|
|
68
|
+
pin: '<path d="M12 17v5" /><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" />',
|
|
69
|
+
'pin-off': '<path d="M12 17v5" /><path d="M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89" /><path d="m2 2 20 20" /><path d="M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11" />',
|
|
70
|
+
'life-buoy': '<circle cx="12" cy="12" r="10" /><path d="m4.93 4.93 4.24 4.24" /><path d="m14.83 9.17 4.24-4.24" /><path d="m14.83 14.83 4.24 4.24" /><path d="m9.17 14.83-4.24 4.24" /><circle cx="12" cy="12" r="4" />',
|
|
68
71
|
bookmark: '<path d="M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z" />',
|
|
69
72
|
star: '<path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" />',
|
|
70
73
|
heart: '<path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" />',
|
|
@@ -48,6 +48,9 @@ declare const ICONS: {
|
|
|
48
48
|
readonly unlink: "<path d=\"m18.84 12.25 1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.71\" /><path d=\"m5.17 11.75-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71\" /><line x1=\"8\" x2=\"8\" y1=\"2\" y2=\"5\" /><line x1=\"2\" x2=\"5\" y1=\"8\" y2=\"8\" /><line x1=\"16\" x2=\"16\" y1=\"19\" y2=\"22\" /><line x1=\"19\" x2=\"22\" y1=\"16\" y2=\"16\" />";
|
|
49
49
|
readonly 'text-cursor': "<path d=\"M17 22h-1a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4h1\" /><path d=\"M7 22h1a4 4 0 0 0 4-4\" /><path d=\"M7 2h1a4 4 0 0 1 4 4\" />";
|
|
50
50
|
readonly tag: "<path d=\"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z\" /><circle cx=\"7.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\" />";
|
|
51
|
+
readonly pin: "<path d=\"M12 17v5\" /><path d=\"M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z\" />";
|
|
52
|
+
readonly 'pin-off': "<path d=\"M12 17v5\" /><path d=\"M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89\" /><path d=\"m2 2 20 20\" /><path d=\"M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11\" />";
|
|
53
|
+
readonly 'life-buoy': "<circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"m4.93 4.93 4.24 4.24\" /><path d=\"m14.83 9.17 4.24-4.24\" /><path d=\"m14.83 14.83 4.24 4.24\" /><path d=\"m9.17 14.83-4.24 4.24\" /><circle cx=\"12\" cy=\"12\" r=\"4\" />";
|
|
51
54
|
readonly bookmark: "<path d=\"M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z\" />";
|
|
52
55
|
readonly star: "<path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\" />";
|
|
53
56
|
readonly heart: "<path d=\"M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5\" />";
|
|
@@ -73,7 +73,11 @@
|
|
|
73
73
|
`--ag-mode: ${mode}`,
|
|
74
74
|
maxCols != null ? `--ag-gap: ${gap}` : null,
|
|
75
75
|
maxCols != null ? `--ag-cols: ${maxCols}` : null,
|
|
76
|
-
template
|
|
76
|
+
template
|
|
77
|
+
? `grid-template-columns: ${template}`
|
|
78
|
+
: max != null && maxCols == null
|
|
79
|
+
? `grid-template-columns: repeat(auto-fill, minmax(min(100%, ${min}), ${max}))`
|
|
80
|
+
: null,
|
|
77
81
|
`gap: ${gap}`,
|
|
78
82
|
`align-items: ${align}`,
|
|
79
83
|
justifyValue ? `justify-content: ${justifyValue}` : null
|
|
@@ -141,14 +141,16 @@
|
|
|
141
141
|
|
|
142
142
|
<style>
|
|
143
143
|
.drawer {
|
|
144
|
+
position: fixed;
|
|
145
|
+
inset: 0;
|
|
144
146
|
margin: 0;
|
|
145
147
|
padding: 0;
|
|
146
148
|
border: 0;
|
|
147
149
|
background: none;
|
|
148
|
-
max-width:
|
|
149
|
-
max-height:
|
|
150
|
-
width:
|
|
151
|
-
height:
|
|
150
|
+
max-width: none;
|
|
151
|
+
max-height: none;
|
|
152
|
+
width: auto;
|
|
153
|
+
height: auto;
|
|
152
154
|
color: var(--text);
|
|
153
155
|
display: flex;
|
|
154
156
|
justify-content: flex-end;
|
|
@@ -178,9 +180,10 @@
|
|
|
178
180
|
'nav'
|
|
179
181
|
'body'
|
|
180
182
|
'foot';
|
|
181
|
-
width:
|
|
182
|
-
height:
|
|
183
|
+
width: 100%;
|
|
184
|
+
height: 100%;
|
|
183
185
|
background: var(--bg-elevated);
|
|
186
|
+
will-change: transform;
|
|
184
187
|
padding-top: var(--safe-top);
|
|
185
188
|
padding-bottom: var(--safe-bottom);
|
|
186
189
|
animation: drawer-slide-right 0.2s var(--ease);
|
|
@@ -43,7 +43,9 @@
|
|
|
43
43
|
line-height: 1;
|
|
44
44
|
}
|
|
45
45
|
.panel {
|
|
46
|
-
width: 15rem;
|
|
46
|
+
width: min(15rem, calc(100vw - var(--sp-6)));
|
|
47
|
+
box-sizing: border-box;
|
|
48
|
+
overflow: hidden;
|
|
47
49
|
font-size: 0.875rem;
|
|
48
50
|
line-height: 1.4;
|
|
49
51
|
padding: var(--sp-2) var(--sp-3);
|
|
@@ -52,6 +54,11 @@
|
|
|
52
54
|
display: flex;
|
|
53
55
|
align-items: center;
|
|
54
56
|
gap: var(--sp-2);
|
|
57
|
+
min-width: 0;
|
|
58
|
+
}
|
|
59
|
+
.row > :global(.slider) {
|
|
60
|
+
flex: 1 1 0;
|
|
61
|
+
min-width: 0;
|
|
55
62
|
}
|
|
56
63
|
.end {
|
|
57
64
|
flex: none;
|
|
@@ -178,10 +178,6 @@
|
|
|
178
178
|
display: inline-flex;
|
|
179
179
|
align-items: center;
|
|
180
180
|
justify-content: center;
|
|
181
|
-
min-height: var(--box-md);
|
|
182
|
-
min-width: var(--box-md);
|
|
183
|
-
padding: var(--sp-2);
|
|
184
|
-
border: 1px solid transparent;
|
|
185
181
|
border-radius: var(--r-md);
|
|
186
182
|
background: transparent;
|
|
187
183
|
color: var(--text);
|
|
@@ -189,6 +185,14 @@
|
|
|
189
185
|
background 0.12s var(--ease),
|
|
190
186
|
border-color 0.12s var(--ease);
|
|
191
187
|
}
|
|
188
|
+
/* Box sizing stays off `bare` triggers so an inline trigger (e.g. a
|
|
189
|
+
Timestamp <time>) keeps its text's line box. */
|
|
190
|
+
.pop-trigger:not(.bare) {
|
|
191
|
+
min-height: var(--box-md);
|
|
192
|
+
min-width: var(--box-md);
|
|
193
|
+
padding: var(--sp-2);
|
|
194
|
+
border: 1px solid transparent;
|
|
195
|
+
}
|
|
192
196
|
.pop-trigger:hover:not(:disabled) {
|
|
193
197
|
background: var(--bg-elevated-2);
|
|
194
198
|
}
|
|
@@ -267,10 +271,10 @@
|
|
|
267
271
|
/* Coarse pointers: icon-only triggers extend their hit area to --touch-target
|
|
268
272
|
via an invisible slab; layout does not move. */
|
|
269
273
|
@media (pointer: coarse) {
|
|
270
|
-
.pop-trigger:not(.canonical, .
|
|
274
|
+
.pop-trigger:not(.canonical, .hit-compact) {
|
|
271
275
|
position: relative;
|
|
272
276
|
}
|
|
273
|
-
.pop-trigger:not(.canonical, .
|
|
277
|
+
.pop-trigger:not(.canonical, .hit-compact)::after {
|
|
274
278
|
content: '';
|
|
275
279
|
position: absolute;
|
|
276
280
|
inset: min(0px, calc((100% - var(--touch-target)) / 2));
|
|
@@ -322,7 +326,8 @@
|
|
|
322
326
|
cursor: not-allowed;
|
|
323
327
|
}
|
|
324
328
|
/* `bare`: strip the chrome down to a plain button the consumer styles. */
|
|
325
|
-
.pop-trigger.bare {
|
|
329
|
+
:where(.pop-trigger.bare) {
|
|
330
|
+
display: inline;
|
|
326
331
|
height: auto;
|
|
327
332
|
min-height: 0;
|
|
328
333
|
min-width: 0;
|
|
@@ -330,8 +335,11 @@
|
|
|
330
335
|
padding: 0;
|
|
331
336
|
border: 0;
|
|
332
337
|
background: none;
|
|
338
|
+
font: inherit;
|
|
339
|
+
line-height: inherit;
|
|
340
|
+
vertical-align: baseline;
|
|
333
341
|
}
|
|
334
|
-
.pop-trigger.bare:hover:not(:disabled) {
|
|
342
|
+
:where(.pop-trigger.bare:hover:not(:disabled)) {
|
|
335
343
|
background: none;
|
|
336
344
|
}
|
|
337
345
|
.pop-panel {
|
package/package.json
CHANGED