@spaethtech/svelte-ui 0.6.1-dev.30.f9127d0 → 0.6.1-dev.33.c371f46

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.
@@ -41,10 +41,14 @@
41
41
  * Not CSS `gap` — a real cell, so the base line stays continuous through it. Excludes the grow
42
42
  * filler and the leading/trailing cells (those are `pad`). */
43
43
  gap?: number;
44
- /** Leading + trailing bordered spacer cells (before the first tab, after the last), in `rem`, AND
45
- * a `padding-top` of the same size on the strip (default `0`). Cells (not padding) horizontally
46
- * so the base line runs through them; real padding at the top (no line there). */
44
+ /** Leading + trailing bordered spacer cells (before the first tab, after the last), in `rem`
45
+ * (default `0`). Cells, not CSS padding, so the base line runs through them. For vertical room,
46
+ * set `height` (the tabs bottom-align to the base line). */
47
47
  pad?: number;
48
+ /** Total strip height, in `rem` (applied as `min-height`, so it never clips a taller tab). The tab
49
+ * row bottom-aligns to the base line and the extra space breathes ABOVE it. `size` still sets the
50
+ * tab height; `height` sets the whole bar. Unset → the strip hugs the tab row. */
51
+ height?: number;
48
52
  onselect?: (index: number) => void;
49
53
  right?: Snippet;
50
54
  /** Optional aria-label for the strip when it renders as a navigation landmark
@@ -62,6 +66,7 @@
62
66
  borderless = false,
63
67
  gap = 0,
64
68
  pad = 0,
69
+ height,
65
70
  onselect,
66
71
  right,
67
72
  "aria-label": ariaLabel,
@@ -340,8 +345,8 @@
340
345
  role={semanticMode === "tablist" ? "tablist" : "navigation"}
341
346
  aria-orientation={semanticMode === "tablist" ? "horizontal" : undefined}
342
347
  aria-label={semanticMode === "navigation" ? ariaLabel : undefined}
343
- class={`ui-accent flex items-stretch overflow-x-auto list-none m-0 p-0 ${cls}`}
344
- style={`${accentVar} padding-top:${pad}rem; ${styleProp ?? ""}`}
348
+ class={`ui-accent flex items-end overflow-x-auto list-none m-0 p-0 ${cls}`}
349
+ style={`${accentVar}${height != null ? ` min-height:${height}rem;` : ""} ${styleProp ?? ""}`}
345
350
  {...restProps}
346
351
  >
347
352
  <!-- Leading pad cell (before the first left tab). -->
@@ -34,10 +34,14 @@ interface Props extends Omit<HTMLAttributes<HTMLUListElement>, "onselect"> {
34
34
  * Not CSS `gap` — a real cell, so the base line stays continuous through it. Excludes the grow
35
35
  * filler and the leading/trailing cells (those are `pad`). */
36
36
  gap?: number;
37
- /** Leading + trailing bordered spacer cells (before the first tab, after the last), in `rem`, AND
38
- * a `padding-top` of the same size on the strip (default `0`). Cells (not padding) horizontally
39
- * so the base line runs through them; real padding at the top (no line there). */
37
+ /** Leading + trailing bordered spacer cells (before the first tab, after the last), in `rem`
38
+ * (default `0`). Cells, not CSS padding, so the base line runs through them. For vertical room,
39
+ * set `height` (the tabs bottom-align to the base line). */
40
40
  pad?: number;
41
+ /** Total strip height, in `rem` (applied as `min-height`, so it never clips a taller tab). The tab
42
+ * row bottom-aligns to the base line and the extra space breathes ABOVE it. `size` still sets the
43
+ * tab height; `height` sets the whole bar. Unset → the strip hugs the tab row. */
44
+ height?: number;
41
45
  onselect?: (index: number) => void;
42
46
  right?: Snippet;
43
47
  /** Optional aria-label for the strip when it renders as a navigation landmark
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spaethtech/svelte-ui",
3
- "version": "0.6.1-dev.30.f9127d0",
3
+ "version": "0.6.1-dev.33.c371f46",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/spaethtech/svelte-ui.git"