@streamscloud/kit 0.9.19 → 0.10.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.
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
<script lang="ts">const { variant = 'neutral', size = 'md', style = 'soft', children } = $props();
|
|
1
|
+
<script lang="ts">const { variant = 'neutral', size = 'md', style = 'soft', fullWidth = false, children } = $props();
|
|
2
2
|
export {};
|
|
3
3
|
</script>
|
|
4
4
|
|
|
5
|
-
<span class="badge badge--{size} badge--{variant}-{style}">
|
|
6
|
-
{@render children()}
|
|
5
|
+
<span class="badge badge--{size} badge--{variant}-{style}" class:badge--full={fullWidth}>
|
|
6
|
+
<span class="badge__content">{@render children()}</span>
|
|
7
7
|
</span>
|
|
8
8
|
|
|
9
9
|
<!--
|
|
@@ -39,10 +39,18 @@ Pill-shaped status indicator. Use `solid` for stronger emphasis, `soft` (default
|
|
|
39
39
|
font-size: var(--_badge--font-size);
|
|
40
40
|
font-weight: var(--_badge--font-weight);
|
|
41
41
|
line-height: 1.4;
|
|
42
|
-
|
|
42
|
+
max-width: 100%;
|
|
43
|
+
}
|
|
44
|
+
.badge__content {
|
|
45
|
+
min-width: 0;
|
|
43
46
|
overflow: hidden;
|
|
44
47
|
text-overflow: ellipsis;
|
|
45
|
-
|
|
48
|
+
white-space: nowrap;
|
|
49
|
+
}
|
|
50
|
+
.badge--full {
|
|
51
|
+
display: flex;
|
|
52
|
+
width: 100%;
|
|
53
|
+
justify-content: center;
|
|
46
54
|
}
|
|
47
55
|
.badge--sm {
|
|
48
56
|
--_badge--padding-block: var(--sc-kit--badge--padding-block, 0.25rem);
|
|
@@ -7,6 +7,8 @@ type Props = {
|
|
|
7
7
|
size?: 'sm' | 'md';
|
|
8
8
|
/** Filled chip vs soft-tinted fill @default 'soft' */
|
|
9
9
|
style?: 'soft' | 'solid';
|
|
10
|
+
/** Stretch to fill the parent's inline axis, centering the content. @default false */
|
|
11
|
+
fullWidth?: boolean;
|
|
10
12
|
children: Snippet;
|
|
11
13
|
};
|
|
12
14
|
/**
|
|
@@ -104,7 +104,7 @@ Pass `type="anchor"` to render as `<a>` with `href`. Otherwise `type` is the nat
|
|
|
104
104
|
| `--sc-kit--button--font-size` | Label font size | per size |
|
|
105
105
|
| `--sc-kit--button--gap` | Gap between icon and label | per size |
|
|
106
106
|
| `--sc-kit--button--border-radius` | Corner rounding | `var(--sc-kit--radius--md)` |
|
|
107
|
-
| `--sc-kit--button--font-weight` | Font weight | `var(--sc-kit--font-weight--
|
|
107
|
+
| `--sc-kit--button--font-weight` | Font weight | `var(--sc-kit--font-weight--regular)` |
|
|
108
108
|
| `--sc-kit--button--width` | Explicit width | `fit-content` |
|
|
109
109
|
| `--sc-kit--button--min-width` | Minimum width | `0` |
|
|
110
110
|
| `--sc-kit--button--max-width` | Maximum width | `100%` |
|
|
@@ -126,7 +126,7 @@ Pass `type="anchor"` to render as `<a>` with `href`. Otherwise `type` is the nat
|
|
|
126
126
|
--_btn--min-width: var(--sc-kit--button--min-width, 0);
|
|
127
127
|
--_btn--max-width: var(--sc-kit--button--max-width, 100%);
|
|
128
128
|
--_btn--border-radius: var(--sc-kit--button--border-radius, var(--sc-kit--radius--md));
|
|
129
|
-
--_btn--font-weight: var(--sc-kit--button--font-weight, var(--sc-kit--font-weight--
|
|
129
|
+
--_btn--font-weight: var(--sc-kit--button--font-weight, var(--sc-kit--font-weight--regular));
|
|
130
130
|
box-sizing: border-box;
|
|
131
131
|
display: flex;
|
|
132
132
|
align-items: center;
|
|
@@ -62,7 +62,7 @@ type Props = ButtonModeProps | AnchorModeProps;
|
|
|
62
62
|
* | `--sc-kit--button--font-size` | Label font size | per size |
|
|
63
63
|
* | `--sc-kit--button--gap` | Gap between icon and label | per size |
|
|
64
64
|
* | `--sc-kit--button--border-radius` | Corner rounding | `var(--sc-kit--radius--md)` |
|
|
65
|
-
* | `--sc-kit--button--font-weight` | Font weight | `var(--sc-kit--font-weight--
|
|
65
|
+
* | `--sc-kit--button--font-weight` | Font weight | `var(--sc-kit--font-weight--regular)` |
|
|
66
66
|
* | `--sc-kit--button--width` | Explicit width | `fit-content` |
|
|
67
67
|
* | `--sc-kit--button--min-width` | Minimum width | `0` |
|
|
68
68
|
* | `--sc-kit--button--max-width` | Maximum width | `100%` |
|