@bspk/ui 1.4.1 → 1.4.3

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 (36) hide show
  1. package/dist/components/Dialog/dialog.css +5 -2
  2. package/dist/components/Dialog/dialog.css.js +5 -2
  3. package/dist/components/InputNumber/input-number.css +2 -0
  4. package/dist/components/InputNumber/input-number.css.js +2 -0
  5. package/dist/components/ListItem/list-item.css +1 -0
  6. package/dist/components/ListItem/list-item.css.js +1 -0
  7. package/dist/components/OTPInput/otp-input.css +1 -0
  8. package/dist/components/OTPInput/otp-input.css.js +1 -0
  9. package/dist/components/Rating/rating.css +3 -0
  10. package/dist/components/Rating/rating.css.js +3 -0
  11. package/dist/components/SegmentedControl/segmented-control.css +2 -0
  12. package/dist/components/SegmentedControl/segmented-control.css.js +2 -0
  13. package/dist/components/Select/select.css +1 -0
  14. package/dist/components/Select/select.css.js +1 -0
  15. package/dist/components/Snackbar/snackbar.css +3 -3
  16. package/dist/components/Snackbar/snackbar.css.js +3 -3
  17. package/dist/components/TabList/tab-list.css +2 -2
  18. package/dist/components/TabList/tab-list.css.js +2 -2
  19. package/dist/components/Textarea/textarea.css +1 -0
  20. package/dist/components/Textarea/textarea.css.js +1 -0
  21. package/dist/styles/base.css +4 -4
  22. package/dist/styles/base.css.js +4 -4
  23. package/package.json +1 -1
  24. package/src/components/AvatarGroup/avatar-group.scss +0 -2
  25. package/src/components/Dialog/dialog.scss +3 -3
  26. package/src/components/Divider/divider.scss +1 -1
  27. package/src/components/InputNumber/input-number.scss +2 -2
  28. package/src/components/ListItem/list-item.scss +2 -2
  29. package/src/components/OTPInput/otp-input.scss +1 -1
  30. package/src/components/Rating/rating.scss +1 -1
  31. package/src/components/SegmentedControl/segmented-control.scss +2 -2
  32. package/src/components/Select/select.scss +1 -1
  33. package/src/components/Snackbar/snackbar.scss +3 -3
  34. package/src/components/TabList/tab-list.scss +2 -2
  35. package/src/components/Textarea/textarea.scss +1 -1
  36. package/src/styles/base.scss +2 -5
package/dist/components/Dialog/dialog.css CHANGED
@@ -3,12 +3,12 @@
3
3
  inset: 0;
4
4
  z-index: var(--z-index-dialog);
5
5
  display: flex;
6
- pointer-events: none;
6
+ pointer-events: none; /* makes scrim clickable */
7
7
  --height: 100vh;
8
8
  --width: 100vw;
9
9
  }
10
10
  [data-bspk=dialog] [data-dialog-box] {
11
- pointer-events: all;
11
+ pointer-events: all; /* allow pointer events on the dialog box */
12
12
  text-align: start;
13
13
  position: absolute;
14
14
  box-shadow: var(--drop-shadow-float);
@@ -29,6 +29,9 @@
29
29
  [data-bspk=dialog] [data-dialog-box] > :last-child {
30
30
  margin-bottom: 0;
31
31
  }
32
+ [data-bspk=dialog] [data-dialog-box] {
33
+ /* we make the width responsive to the viewport */
34
+ }
32
35
  @media (width >= 640px) {
33
36
  [data-bspk=dialog] [data-dialog-box] {
34
37
  width: 90%;
package/dist/components/Dialog/dialog.css.js CHANGED
@@ -6,12 +6,12 @@ style.appendChild(document.createTextNode(`[data-bspk=dialog] {
6
6
  inset: 0;
7
7
  z-index: var(--z-index-dialog);
8
8
  display: flex;
9
- pointer-events: none;
9
+ pointer-events: none; /* makes scrim clickable */
10
10
  --height: 100vh;
11
11
  --width: 100vw;
12
12
  }
13
13
  [data-bspk=dialog] [data-dialog-box] {
14
- pointer-events: all;
14
+ pointer-events: all; /* allow pointer events on the dialog box */
15
15
  text-align: start;
16
16
  position: absolute;
17
17
  box-shadow: var(--drop-shadow-float);
@@ -32,6 +32,9 @@ style.appendChild(document.createTextNode(`[data-bspk=dialog] {
32
32
  [data-bspk=dialog] [data-dialog-box] > :last-child {
33
33
  margin-bottom: 0;
34
34
  }
35
+ [data-bspk=dialog] [data-dialog-box] {
36
+ /* we make the width responsive to the viewport */
37
+ }
35
38
  @media (width >= 640px) {
36
39
  [data-bspk=dialog] [data-dialog-box] {
37
40
  width: 90%;
package/dist/components/InputNumber/input-number.css CHANGED
@@ -1,4 +1,5 @@
1
1
  [data-bspk=input-number] {
2
+ /* medium is the default size */
2
3
  --font: var(--body-base);
3
4
  --height: var(--spacing-sizing-10);
4
5
  --svg-width: var(--spacing-sizing-05);
@@ -20,6 +21,7 @@
20
21
  width: 1px;
21
22
  background: var(--stroke-neutral-base);
22
23
  margin: 3px 0;
24
+ /* account for border - 3(margin) * 2 + 2(border) */
23
25
  height: calc(var(--height) - 8px);
24
26
  }
25
27
  [data-bspk=input-number] button {
package/dist/components/InputNumber/input-number.css.js CHANGED
@@ -2,6 +2,7 @@
2
2
  * Do not edit this file directly. */
3
3
  const style = document.createElement('style');
4
4
  style.appendChild(document.createTextNode(`[data-bspk=input-number] {
5
+ /* medium is the default size */
5
6
  --font: var(--body-base);
6
7
  --height: var(--spacing-sizing-10);
7
8
  --svg-width: var(--spacing-sizing-05);
@@ -23,6 +24,7 @@ style.appendChild(document.createTextNode(`[data-bspk=input-number] {
23
24
  width: 1px;
24
25
  background: var(--stroke-neutral-base);
25
26
  margin: 3px 0;
27
+ /* account for border - 3(margin) * 2 + 2(border) */
26
28
  height: calc(var(--height) - 8px);
27
29
  }
28
30
  [data-bspk=input-number] button {
package/dist/components/ListItem/list-item.css CHANGED
@@ -10,6 +10,7 @@
10
10
  gap: var(--spacing-sizing-03);
11
11
  padding: var(--spacing-sizing-02);
12
12
  justify-items: stretch;
13
+ /* prevent inherited styles from affecting layout when the as prop is leveraged */
13
14
  border: unset;
14
15
  border-radius: var(--radius-sm);
15
16
  margin: unset;
package/dist/components/ListItem/list-item.css.js CHANGED
@@ -13,6 +13,7 @@ style.appendChild(document.createTextNode(`[data-bspk=list-item] {
13
13
  gap: var(--spacing-sizing-03);
14
14
  padding: var(--spacing-sizing-02);
15
15
  justify-items: stretch;
16
+ /* prevent inherited styles from affecting layout when the as prop is leveraged */
16
17
  border: unset;
17
18
  border-radius: var(--radius-sm);
18
19
  margin: unset;
package/dist/components/OTPInput/otp-input.css CHANGED
@@ -38,6 +38,7 @@
38
38
  isolation: isolate;
39
39
  }
40
40
  [data-bspk=otp-input] input[inputMode]:focus + [data-digits] [data-digit][data-active]:empty::before {
41
+ /* caret */
41
42
  content: "";
42
43
  width: 2px;
43
44
  height: calc(var(--caret-height) - 8px);
package/dist/components/OTPInput/otp-input.css.js CHANGED
@@ -41,6 +41,7 @@ style.appendChild(document.createTextNode(`[data-bspk=otp-input] {
41
41
  isolation: isolate;
42
42
  }
43
43
  [data-bspk=otp-input] input[inputMode]:focus + [data-digits] [data-digit][data-active]:empty::before {
44
+ /* caret */
44
45
  content: "";
45
46
  width: 2px;
46
47
  height: calc(var(--caret-height) - 8px);
package/dist/components/Rating/rating.css CHANGED
@@ -53,6 +53,9 @@
53
53
  [data-bspk=rating] [data-star][data-fill=full] {
54
54
  color: var(--status-warning);
55
55
  }
56
+ [data-bspk=rating] [data-star] {
57
+ /* half star fill */
58
+ }
56
59
  [data-bspk=rating] [data-star] [data-fill-half] {
57
60
  position: absolute;
58
61
  inset: 0 50% 0 0;
package/dist/components/Rating/rating.css.js CHANGED
@@ -56,6 +56,9 @@ style.appendChild(document.createTextNode(`[data-bspk=rating] {
56
56
  [data-bspk=rating] [data-star][data-fill=full] {
57
57
  color: var(--status-warning);
58
58
  }
59
+ [data-bspk=rating] [data-star] {
60
+ /* half star fill */
61
+ }
59
62
  [data-bspk=rating] [data-star] [data-fill-half] {
60
63
  position: absolute;
61
64
  inset: 0 50% 0 0;
package/dist/components/SegmentedControl/segmented-control.css CHANGED
@@ -27,6 +27,7 @@ ul[data-bspk=segmented-control] li {
27
27
  border-radius: var(--radius-sm);
28
28
  }
29
29
  ul[data-bspk=segmented-control] li:has([data-icon]) {
30
+ /* smaller padding for icon-only items */
30
31
  padding: 0 calc(var(--padding) - var(--spacing-sizing-01));
31
32
  }
32
33
  ul[data-bspk=segmented-control] li:has([data-icon]):has([data-label]) {
@@ -43,3 +44,4 @@ ul[data-bspk=segmented-control] li[aria-disabled] {
43
44
  color: var(--foreground-neutral-disabled-on-surface);
44
45
  cursor: not-allowed;
45
46
  }
47
+ /** Copyright 2026 Anywhere Real Estate - CC BY 4.0 */
package/dist/components/SegmentedControl/segmented-control.css.js CHANGED
@@ -30,6 +30,7 @@ ul[data-bspk=segmented-control] li {
30
30
  border-radius: var(--radius-sm);
31
31
  }
32
32
  ul[data-bspk=segmented-control] li:has([data-icon]) {
33
+ /* smaller padding for icon-only items */
33
34
  padding: 0 calc(var(--padding) - var(--spacing-sizing-01));
34
35
  }
35
36
  ul[data-bspk=segmented-control] li:has([data-icon]):has([data-label]) {
@@ -46,5 +47,6 @@ ul[data-bspk=segmented-control] li[aria-disabled] {
46
47
  color: var(--foreground-neutral-disabled-on-surface);
47
48
  cursor: not-allowed;
48
49
  }
50
+ /** Copyright 2026 Anywhere Real Estate - CC BY 4.0 */
49
51
  `));
50
52
  document.head.appendChild(style);
package/dist/components/Select/select.css CHANGED
@@ -1,4 +1,5 @@
1
1
  [data-bspk=select] {
2
+ /* default -- size medium not disabled or readonly */
2
3
  --select-background: var(--surface-neutral-t1-base);
3
4
  --select-border-color: var(--stroke-neutral-base);
4
5
  --select-text-color: var(--foreground-neutral-on-surface);
package/dist/components/Select/select.css.js CHANGED
@@ -2,6 +2,7 @@
2
2
  * Do not edit this file directly. */
3
3
  const style = document.createElement('style');
4
4
  style.appendChild(document.createTextNode(`[data-bspk=select] {
5
+ /* default -- size medium not disabled or readonly */
5
6
  --select-background: var(--surface-neutral-t1-base);
6
7
  --select-border-color: var(--stroke-neutral-base);
7
8
  --select-text-color: var(--foreground-neutral-on-surface);
package/dist/components/Snackbar/snackbar.css CHANGED
@@ -27,8 +27,8 @@
27
27
  height: var(--spacing-sizing-14);
28
28
  }
29
29
  [data-bspk=snackbar] [data-snackbar-content] [data-snackbar-icon-text] {
30
- flex: 1 1 0;
31
- min-width: 0;
30
+ flex: 1 1 0; /* allow to grow and shrink, but not overflow */
31
+ min-width: 0; /* Prevent overflow from long content */
32
32
  max-width: 100%;
33
33
  overflow: hidden;
34
34
  display: flex;
@@ -43,6 +43,6 @@
43
43
  height: var(--spacing-sizing-05);
44
44
  }
45
45
  [data-bspk=snackbar] [data-snackbar-content] [data-bspk=button][data-variant=tertiary] {
46
- flex: 0 0 auto;
46
+ flex: 0 0 auto; /* prevent button from shrinking */
47
47
  color: inherit;
48
48
  }
package/dist/components/Snackbar/snackbar.css.js CHANGED
@@ -30,8 +30,8 @@ style.appendChild(document.createTextNode(`[data-bspk=snackbar] {
30
30
  height: var(--spacing-sizing-14);
31
31
  }
32
32
  [data-bspk=snackbar] [data-snackbar-content] [data-snackbar-icon-text] {
33
- flex: 1 1 0;
34
- min-width: 0;
33
+ flex: 1 1 0; /* allow to grow and shrink, but not overflow */
34
+ min-width: 0; /* Prevent overflow from long content */
35
35
  max-width: 100%;
36
36
  overflow: hidden;
37
37
  display: flex;
@@ -46,7 +46,7 @@ style.appendChild(document.createTextNode(`[data-bspk=snackbar] {
46
46
  height: var(--spacing-sizing-05);
47
47
  }
48
48
  [data-bspk=snackbar] [data-snackbar-content] [data-bspk=button][data-variant=tertiary] {
49
- flex: 0 0 auto;
49
+ flex: 0 0 auto; /* prevent button from shrinking */
50
50
  color: inherit;
51
51
  }
52
52
  `));
package/dist/components/TabList/tab-list.css CHANGED
@@ -5,7 +5,7 @@ ul[data-bspk-utility=tab-list] {
5
5
  list-style: none;
6
6
  height: var(--height);
7
7
  font: var(--font);
8
- width: fit-content;
8
+ width: fit-content; /* default to hug content */
9
9
  }
10
10
  ul[data-bspk-utility=tab-list][data-width=fill] {
11
11
  align-items: stretch;
@@ -44,7 +44,7 @@ ul[data-bspk-utility=tab-list] li {
44
44
  flex-direction: row;
45
45
  align-items: center;
46
46
  gap: var(--spacing-sizing-02);
47
- min-width: 0;
47
+ min-width: 0; /* Prevent overflow from long content */
48
48
  }
49
49
  ul[data-bspk-utility=tab-list] li[aria-disabled] {
50
50
  cursor: not-allowed;
package/dist/components/TabList/tab-list.css.js CHANGED
@@ -8,7 +8,7 @@ style.appendChild(document.createTextNode(`ul[data-bspk-utility=tab-list] {
8
8
  list-style: none;
9
9
  height: var(--height);
10
10
  font: var(--font);
11
- width: fit-content;
11
+ width: fit-content; /* default to hug content */
12
12
  }
13
13
  ul[data-bspk-utility=tab-list][data-width=fill] {
14
14
  align-items: stretch;
@@ -47,7 +47,7 @@ ul[data-bspk-utility=tab-list] li {
47
47
  flex-direction: row;
48
48
  align-items: center;
49
49
  gap: var(--spacing-sizing-02);
50
- min-width: 0;
50
+ min-width: 0; /* Prevent overflow from long content */
51
51
  }
52
52
  ul[data-bspk-utility=tab-list] li[aria-disabled] {
53
53
  cursor: not-allowed;
package/dist/components/Textarea/textarea.css CHANGED
@@ -11,6 +11,7 @@
11
11
  color: var(--foreground-neutral-on-surface);
12
12
  background-color: var(--surface-neutral-t1-base);
13
13
  --border-color: var(--stroke-neutral-base);
14
+ /* &[data-size='medium'] */
14
15
  --font: var(--body-base);
15
16
  --line-height: 20px;
16
17
  --padding: var(--spacing-sizing-03);
package/dist/components/Textarea/textarea.css.js CHANGED
@@ -14,6 +14,7 @@ style.appendChild(document.createTextNode(`[data-bspk=textarea] {
14
14
  color: var(--foreground-neutral-on-surface);
15
15
  background-color: var(--surface-neutral-t1-base);
16
16
  --border-color: var(--stroke-neutral-base);
17
+ /* &[data-size='medium'] */
17
18
  --font: var(--body-base);
18
19
  --line-height: 20px;
19
20
  --padding: var(--spacing-sizing-03);
package/dist/styles/base.css CHANGED
@@ -217,6 +217,9 @@ body[data-bspk] {
217
217
  border-radius: var(--radius-sm);
218
218
  height: var(--text-height);
219
219
  }
220
+ [data-bspk=skeleton-text] {
221
+ /* if there are 2 lines or more, make the last line 80% width */
222
+ }
220
223
  [data-bspk=skeleton-text]:has([data-line]:nth-child(2)) [data-line]:last-child {
221
224
  width: 80%;
222
225
  }
@@ -256,13 +259,10 @@ body[data-bspk] {
256
259
  }
257
260
 
258
261
  [data-attachment-wrapper] {
259
- display: inline-flex;
260
- align-items: center;
261
- justify-content: center;
262
+ display: block;
262
263
  position: relative;
263
264
  width: fit-content;
264
265
  height: fit-content;
265
- flex-shrink: 0;
266
266
  }
267
267
  [data-attachment-wrapper] [data-attachment] {
268
268
  position: absolute;
package/dist/styles/base.css.js CHANGED
@@ -220,6 +220,9 @@ body[data-bspk] {
220
220
  border-radius: var(--radius-sm);
221
221
  height: var(--text-height);
222
222
  }
223
+ [data-bspk=skeleton-text] {
224
+ /* if there are 2 lines or more, make the last line 80% width */
225
+ }
223
226
  [data-bspk=skeleton-text]:has([data-line]:nth-child(2)) [data-line]:last-child {
224
227
  width: 80%;
225
228
  }
@@ -259,13 +262,10 @@ body[data-bspk] {
259
262
  }
260
263
 
261
264
  [data-attachment-wrapper] {
262
- display: inline-flex;
263
- align-items: center;
264
- justify-content: center;
265
+ display: block;
265
266
  position: relative;
266
267
  width: fit-content;
267
268
  height: fit-content;
268
- flex-shrink: 0;
269
269
  }
270
270
  [data-attachment-wrapper] [data-attachment] {
271
271
  position: absolute;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bspk/ui",
3
- "version": "1.4.1",
3
+ "version": "1.4.3",
4
4
  "license": "CC-BY-4.0",
5
5
  "type": "module",
6
6
  "files": [
package/src/components/AvatarGroup/avatar-group.scss CHANGED
@@ -14,8 +14,6 @@
14
14
  justify-content: center;
15
15
  }
16
16
 
17
- // data-gap={variant === 'spread' ? (small ? '01' : '02') : undefined}
18
-
19
17
  [data-bspk='avatar'] {
20
18
  z-index: 1;
21
19
 
package/src/components/Dialog/dialog.scss CHANGED
@@ -3,13 +3,13 @@
3
3
  inset: 0;
4
4
  z-index: var(--z-index-dialog);
5
5
  display: flex;
6
- pointer-events: none; // makes scrim clickable
6
+ pointer-events: none; /* makes scrim clickable */
7
7
 
8
8
  --height: 100vh;
9
9
  --width: 100vw;
10
10
 
11
11
  [data-dialog-box] {
12
- pointer-events: all; // allow pointer events on the dialog box
12
+ pointer-events: all; /* allow pointer events on the dialog box */
13
13
  text-align: start;
14
14
  position: absolute;
15
15
  box-shadow: var(--drop-shadow-float);
@@ -32,7 +32,7 @@
32
32
  margin-bottom: 0;
33
33
  }
34
34
 
35
- // we make the width responsive to the viewport
35
+ /* we make the width responsive to the viewport */
36
36
  @media (width >= 640px) {
37
37
  width: 90%;
38
38
  }
package/src/components/Divider/divider.scss CHANGED
@@ -24,7 +24,7 @@
24
24
  border-radius: var(--radius-full);
25
25
  }
26
26
 
27
- &, // default
27
+ &, /* default */
28
28
  &[data-orientation='horizontal'] {
29
29
  min-height: var(--line-thickness);
30
30
  min-width: var(--length);
package/src/components/InputNumber/input-number.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  [data-bspk='input-number'] {
2
- // medium is the default size
2
+ /* medium is the default size */
3
3
  --font: var(--body-base);
4
4
  --height: var(--spacing-sizing-10);
5
5
  --svg-width: var(--spacing-sizing-05);
@@ -24,7 +24,7 @@
24
24
  background: var(--stroke-neutral-base);
25
25
  margin: 3px 0;
26
26
 
27
- // account for border - 3(margin) * 2 + 2(border)
27
+ /* account for border - 3(margin) * 2 + 2(border) */
28
28
  height: calc(var(--height) - 8px);
29
29
  }
30
30
 
package/src/components/ListItem/list-item.scss CHANGED
@@ -11,7 +11,7 @@
11
11
  padding: var(--spacing-sizing-02);
12
12
  justify-items: stretch;
13
13
 
14
- // prevent inherited styles from affecting layout when the as prop is leveraged
14
+ /* prevent inherited styles from affecting layout when the as prop is leveraged */
15
15
  border: unset;
16
16
  border-radius: var(--radius-sm);
17
17
  margin: unset;
@@ -44,7 +44,7 @@
44
44
  }
45
45
 
46
46
  [data-pseudo='active'] &,
47
- // pressed state
47
+ /* pressed state */
48
48
  &:active {
49
49
  background-color: var(--interactions-neutral-press-opacity);
50
50
  }
package/src/components/OTPInput/otp-input.scss CHANGED
@@ -43,7 +43,7 @@
43
43
  isolation: isolate;
44
44
 
45
45
  &:empty::before {
46
- // caret
46
+ /* caret */
47
47
  content: '';
48
48
  width: 2px;
49
49
  height: calc(var(--caret-height) - 8px);
package/src/components/Rating/rating.scss CHANGED
@@ -69,7 +69,7 @@
69
69
  color: var(--status-warning);
70
70
  }
71
71
 
72
- // half star fill
72
+ /* half star fill */
73
73
  [data-fill-half] {
74
74
  position: absolute;
75
75
  inset: 0 50% 0 0;
package/src/components/SegmentedControl/segmented-control.scss CHANGED
@@ -33,7 +33,7 @@ ul[data-bspk='segmented-control'] {
33
33
  border-radius: var(--radius-sm);
34
34
 
35
35
  &:has([data-icon]) {
36
- // smaller padding for icon-only items
36
+ /* smaller padding for icon-only items */
37
37
  padding: 0 calc(var(--padding) - var(--spacing-sizing-01));
38
38
 
39
39
  &:has([data-label]) {
@@ -71,4 +71,4 @@ ul[data-bspk='segmented-control'] {
71
71
  }
72
72
  }
73
73
 
74
- // /** Copyright 2026 Anywhere Real Estate - CC BY 4.0 */
74
+ /** Copyright 2026 Anywhere Real Estate - CC BY 4.0 */
package/src/components/Select/select.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  [data-bspk='select'] {
2
- // default -- size medium not disabled or readonly
2
+ /* default -- size medium not disabled or readonly */
3
3
 
4
4
  --select-background: var(--surface-neutral-t1-base);
5
5
  --select-border-color: var(--stroke-neutral-base);
package/src/components/Snackbar/snackbar.scss CHANGED
@@ -29,8 +29,8 @@
29
29
  height: var(--spacing-sizing-14);
30
30
 
31
31
  [data-snackbar-icon-text] {
32
- flex: 1 1 0; // allow to grow and shrink, but not overflow
33
- min-width: 0; // Prevent overflow from long content
32
+ flex: 1 1 0; /* allow to grow and shrink, but not overflow */
33
+ min-width: 0; /* Prevent overflow from long content */
34
34
  max-width: 100%;
35
35
  overflow: hidden;
36
36
  display: flex;
@@ -47,7 +47,7 @@
47
47
  }
48
48
 
49
49
  [data-bspk='button'][data-variant='tertiary'] {
50
- flex: 0 0 auto; // prevent button from shrinking
50
+ flex: 0 0 auto; /* prevent button from shrinking */
51
51
  color: inherit;
52
52
  }
53
53
  }
package/src/components/TabList/tab-list.scss CHANGED
@@ -6,7 +6,7 @@ ul[data-bspk-utility='tab-list'] {
6
6
  list-style: none;
7
7
  height: var(--height);
8
8
  font: var(--font);
9
- width: fit-content; // default to hug content
9
+ width: fit-content; /* default to hug content */
10
10
 
11
11
  &[data-width='fill'] {
12
12
  align-items: stretch;
@@ -49,7 +49,7 @@ ul[data-bspk-utility='tab-list'] {
49
49
  flex-direction: row;
50
50
  align-items: center;
51
51
  gap: var(--spacing-sizing-02);
52
- min-width: 0; // Prevent overflow from long content
52
+ min-width: 0; /* Prevent overflow from long content */
53
53
 
54
54
  &[aria-disabled] {
55
55
  cursor: not-allowed;
package/src/components/Textarea/textarea.scss CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  --border-color: var(--stroke-neutral-base);
16
16
 
17
- // &[data-size='medium']
17
+ /* &[data-size='medium'] */
18
18
  --font: var(--body-base);
19
19
  --line-height: 20px;
20
20
  --padding: var(--spacing-sizing-03);
package/src/styles/base.scss CHANGED
@@ -157,7 +157,7 @@ body[data-bspk] {
157
157
  height: var(--text-height);
158
158
  }
159
159
 
160
- // if there are 2 lines or more, make the last line 80% width
160
+ /* if there are 2 lines or more, make the last line 80% width */
161
161
  &:has([data-line]:nth-child(2)) {
162
162
  [data-line]:last-child {
163
163
  width: 80%;
@@ -207,13 +207,10 @@ body[data-bspk] {
207
207
  }
208
208
 
209
209
  [data-attachment-wrapper] {
210
- display: inline-flex;
211
- align-items: center;
212
- justify-content: center;
210
+ display: block;
213
211
  position: relative;
214
212
  width: fit-content;
215
213
  height: fit-content;
216
- flex-shrink: 0;
217
214
 
218
215
  [data-attachment] {
219
216
  position: absolute;