@dorsk/tsumikit 0.60.2 → 0.61.0

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 (6) hide show
  1. package/README.md +5 -2
  2. package/dist/components/atoms/Icon.svelte +2 -0
  3. package/dist/components/atoms/Icon.svelte.d.ts +2 -0
  4. package/dist/components/atoms/Textarea.svelte +8 -1
  5. package/dist/components/molecules/InputGroup.svelte +2 -2
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -516,12 +516,15 @@ page. Adornment widths are measured with a `ResizeObserver` into
516
516
  The adornments sit flush inside the field's padding as ghost/primary controls,
517
517
  no dividers: pick a control one step below the group (`size="sm"`/`box="sm"` in
518
518
  an `md` group, `box="xs"` in `sm`, `box="lg"` in `lg`). `align="end"` (default)
519
- pins them to the bottom edge as a textarea grows; `align="center"` is for a
519
+ pins them to the bottom edge as a textarea grows. A square control (`box`,
520
+ `iconOnly`) drops its fixed box and stretches square to the slot height, so its
521
+ glyph centres on the field; `align="center"` is for a
520
522
  single-line `Input`. `size` sm/md/lg, `disabled` and `error` flow to the field
521
523
  through context (a `size`/`invalid`/`disabled` set on the field still wins).
522
524
  `Textarea` keeps `autoresize`, `maxHeight` and `resize="top"` (the grip is
523
525
  clipped to the space between the adornments). Once a `Textarea` needs more
524
- than one row (content, `rows`, or a dragged floor) the adornments move into a
526
+ than one row (content, `rows`, or a dragged floor; a wrapping placeholder does
527
+ not count, it stays on one clipped line) the adornments move into a
525
528
  bar under the text: every line then runs the full width with the normal
526
529
  padding, the textarea's box (and its scrollbar) ends above the controls, and
527
530
  the bar continues the field's border, the controls still flush against its
package/dist/components/atoms/Icon.svelte CHANGED
@@ -37,6 +37,7 @@
37
37
  share: '<circle cx="18" cy="5" r="3" /><circle cx="6" cy="12" r="3" /><circle cx="18" cy="19" r="3" /><line x1="8.59" x2="15.42" y1="13.51" y2="17.49" /><line x1="15.41" x2="8.59" y1="6.51" y2="10.49" />',
38
38
  retry: '<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" /><path d="M21 3v5h-5" /><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" /><path d="M8 16H3v5" />',
39
39
  settings: '<path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" /><circle cx="12" cy="12" r="3" />',
40
+ recycle: '<path d="M7 19H4.815a1.83 1.83 0 0 1-1.57-.881 1.785 1.785 0 0 1-.004-1.784L7.196 9.5" /><path d="M11 19h8.203a1.83 1.83 0 0 0 1.556-.89 1.784 1.784 0 0 0 0-1.775l-1.226-2.12" /><path d="m14 16-3 3 3 3" /><path d="M8.293 13.596 7.196 9.5 3.1 10.598" /><path d="m9.344 5.811 1.093-1.892A1.83 1.83 0 0 1 11.985 3a1.784 1.784 0 0 1 1.546.888l3.943 6.843" /><path d="m13.378 9.633 4.096 1.098 1.097-4.096" />',
40
41
 
41
42
  // — media playback —
42
43
  play: '<path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" />',
@@ -93,6 +94,7 @@
93
94
  users: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><path d="M16 3.128a4 4 0 0 1 0 7.744" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><circle cx="9" cy="7" r="4" />',
94
95
  sun: '<circle cx="12" cy="12" r="4" /><path d="M12 2v2" /><path d="M12 20v2" /><path d="m4.93 4.93 1.41 1.41" /><path d="m17.66 17.66 1.41 1.41" /><path d="M2 12h2" /><path d="M20 12h2" /><path d="m6.34 17.66-1.41 1.41" /><path d="m19.07 4.93-1.41 1.41" />',
95
96
  moon: '<path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" />',
97
+ flame: '<path d="M12 3q1 4 4 6.5t3 5.5a1 1 0 0 1-14 0 5 5 0 0 1 1-3 1 1 0 0 0 5 0c0-2-1.5-3-1.5-5q0-2 2.5-4" />',
96
98
  loader: '<path d="M21 12a9 9 0 1 1-6.219-8.56" />',
97
99
 
98
100
  // — circled status —
package/dist/components/atoms/Icon.svelte.d.ts CHANGED
@@ -28,6 +28,7 @@ declare const ICONS: {
28
28
  readonly share: "<circle cx=\"18\" cy=\"5\" r=\"3\" /><circle cx=\"6\" cy=\"12\" r=\"3\" /><circle cx=\"18\" cy=\"19\" r=\"3\" /><line x1=\"8.59\" x2=\"15.42\" y1=\"13.51\" y2=\"17.49\" /><line x1=\"15.41\" x2=\"8.59\" y1=\"6.51\" y2=\"10.49\" />";
29
29
  readonly retry: "<path d=\"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8\" /><path d=\"M21 3v5h-5\" /><path d=\"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16\" /><path d=\"M8 16H3v5\" />";
30
30
  readonly settings: "<path d=\"M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915\" /><circle cx=\"12\" cy=\"12\" r=\"3\" />";
31
+ readonly recycle: "<path d=\"M7 19H4.815a1.83 1.83 0 0 1-1.57-.881 1.785 1.785 0 0 1-.004-1.784L7.196 9.5\" /><path d=\"M11 19h8.203a1.83 1.83 0 0 0 1.556-.89 1.784 1.784 0 0 0 0-1.775l-1.226-2.12\" /><path d=\"m14 16-3 3 3 3\" /><path d=\"M8.293 13.596 7.196 9.5 3.1 10.598\" /><path d=\"m9.344 5.811 1.093-1.892A1.83 1.83 0 0 1 11.985 3a1.784 1.784 0 0 1 1.546.888l3.943 6.843\" /><path d=\"m13.378 9.633 4.096 1.098 1.097-4.096\" />";
31
32
  readonly play: "<path d=\"M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z\" />";
32
33
  readonly pause: "<rect x=\"14\" y=\"3\" width=\"5\" height=\"18\" rx=\"1\" /><rect x=\"5\" y=\"3\" width=\"5\" height=\"18\" rx=\"1\" />";
33
34
  readonly stop: "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" />";
@@ -76,6 +77,7 @@ declare const ICONS: {
76
77
  readonly users: "<path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\" /><path d=\"M16 3.128a4 4 0 0 1 0 7.744\" /><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\" /><circle cx=\"9\" cy=\"7\" r=\"4\" />";
77
78
  readonly sun: "<circle cx=\"12\" cy=\"12\" r=\"4\" /><path d=\"M12 2v2\" /><path d=\"M12 20v2\" /><path d=\"m4.93 4.93 1.41 1.41\" /><path d=\"m17.66 17.66 1.41 1.41\" /><path d=\"M2 12h2\" /><path d=\"M20 12h2\" /><path d=\"m6.34 17.66-1.41 1.41\" /><path d=\"m19.07 4.93-1.41 1.41\" />";
78
79
  readonly moon: "<path d=\"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\" />";
80
+ readonly flame: "<path d=\"M12 3q1 4 4 6.5t3 5.5a1 1 0 0 1-14 0 5 5 0 0 1 1-3 1 1 0 0 0 5 0c0-2-1.5-3-1.5-5q0-2 2.5-4\" />";
79
81
  readonly loader: "<path d=\"M21 12a9 9 0 1 1-6.219-8.56\" />";
80
82
  readonly info: "<circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"M12 16v-4\" /><path d=\"M12 8h.01\" />";
81
83
  readonly warning: "<path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" /><path d=\"M12 9v4\" /><path d=\"M12 17h.01\" />";
package/dist/components/atoms/Textarea.svelte CHANGED
@@ -87,6 +87,7 @@
87
87
  // Grouped: report whether the content needs more than one row when laid out
88
88
  // with the single-line padding (measured in that layout so the bar cannot
89
89
  // flip back and forth), which moves the adornments into a bar under the text.
90
+ // An empty field has no content height: its scrollHeight counts the placeholder.
90
91
  function probeBar() {
91
92
  if (!el || !group) return;
92
93
  const node = el;
@@ -98,7 +99,8 @@
98
99
  node.style.minHeight = '';
99
100
  const cs = getComputedStyle(node);
100
101
  const borders = (parseFloat(cs.borderTopWidth) || 0) + (parseFloat(cs.borderBottomWidth) || 0);
101
- const height = Math.max(node.scrollHeight + borders, floor, rowsFloor(node));
102
+ const content = node.value === '' ? 0 : node.scrollHeight + borders;
103
+ const height = Math.max(content, floor, rowsFloor(node));
102
104
  const oneRow = Math.max(rowsHeight(node, 1), parseFloat(cs.minHeight) || 0);
103
105
  node.style.height = prevHeight;
104
106
  if (floor) node.style.minHeight = `${floor}px`;
@@ -323,6 +325,11 @@
323
325
  padding-inline: max(var(--ig-pad-x), var(--ig-leading-w, 0px) + var(--ig-gap))
324
326
  max(var(--ig-pad-x), var(--ig-trailing-w, 0px) + var(--ig-gap));
325
327
  }
328
+ .textarea.grouped:not(.bar)::placeholder {
329
+ white-space: nowrap;
330
+ overflow: hidden;
331
+ text-overflow: ellipsis;
332
+ }
326
333
  .textarea.grouped:focus-visible {
327
334
  outline: none;
328
335
  }
package/dist/components/molecules/InputGroup.svelte CHANGED
@@ -162,8 +162,8 @@
162
162
  --pop-trigger-radius: 0;
163
163
  border-radius: 0;
164
164
  }
165
- /* `.ig` outranks an adornment's own fixed box (e.g. FileButton `box`). */
166
- .ig .ig-adorn > :global(*) {
165
+ /* The doubled class outranks an adornment's own fixed box (e.g. FileButton `box`). */
166
+ .ig.ig .ig-adorn > :global(*) {
167
167
  height: auto;
168
168
  min-height: 0;
169
169
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dorsk/tsumikit",
3
- "version": "0.60.2",
3
+ "version": "0.61.0",
4
4
  "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
5
5
  "type": "module",
6
6
  "license": "MIT",