@snack-uikit/segmented-control 0.6.8 → 0.6.9-preview-05f26bf6.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 (5) hide show
  1. package/dist/cjs/components/styles.module.css +8 -8
  2. package/dist/cjs/helperComponents/Segment/styles.module.css +20 -20
  3. package/dist/esm/components/styles.module.css +8 -8
  4. package/dist/esm/helperComponents/Segment/styles.module.css +20 -20
  5. package/package.json +4 -4
package/dist/cjs/components/styles.module.css CHANGED
@@ -30,19 +30,19 @@
30
30
  }
31
31
  .container[data-size=xs]::before{
32
32
  border-width:var(--border-width-segmented-control-single, 1px);
33
- border-radius:var(--radius-segmented-control-container-xs, 8px);
33
+ border-radius:var(--radius-segmented-control-container-xs, 4px);
34
34
  }
35
35
  .container[data-size=s]::before{
36
36
  border-width:var(--border-width-segmented-control-single, 1px);
37
- border-radius:var(--radius-segmented-control-container-s, 12px);
37
+ border-radius:var(--radius-segmented-control-container-s, 4px);
38
38
  }
39
39
  .container[data-size=m]::before{
40
40
  border-width:var(--border-width-segmented-control-single, 1px);
41
- border-radius:var(--radius-segmented-control-container-m, 14px);
41
+ border-radius:var(--radius-segmented-control-container-m, 4px);
42
42
  }
43
43
  .container[data-size=l]::before{
44
44
  border-width:var(--border-width-segmented-control-single, 1px);
45
- border-radius:var(--radius-segmented-control-container-l, 16px);
45
+ border-radius:var(--radius-segmented-control-container-l, 4px);
46
46
  }
47
47
 
48
48
  .segmentHolder{
@@ -64,28 +64,28 @@
64
64
  transition:left 0.15s ease-in-out, width 0.15s ease-in-out;
65
65
  }
66
66
  .selection[data-size=xs]{
67
- border-radius:var(--radius-segmented-control-segment-s, 10px);
67
+ border-radius:var(--radius-segmented-control-segment-s, 2px);
68
68
  padding-left:var(--space-segmented-control-segment-s-icon-only, 2px);
69
69
  padding-right:var(--space-segmented-control-segment-s-icon-only, 2px);
70
70
  gap:var(--space-segmented-control-segment-s-gap, 4px);
71
71
  height:var(--size-segmented-control-segment-s, 28px);
72
72
  }
73
73
  .selection[data-size=s]{
74
- border-radius:var(--radius-segmented-control-segment-s, 10px);
74
+ border-radius:var(--radius-segmented-control-segment-s, 2px);
75
75
  padding-left:var(--space-segmented-control-segment-s-icon-only, 2px);
76
76
  padding-right:var(--space-segmented-control-segment-s-icon-only, 2px);
77
77
  gap:var(--space-segmented-control-segment-s-gap, 4px);
78
78
  height:var(--size-segmented-control-segment-s, 28px);
79
79
  }
80
80
  .selection[data-size=m]{
81
- border-radius:var(--radius-segmented-control-segment-m, 12px);
81
+ border-radius:var(--radius-segmented-control-segment-m, 2px);
82
82
  padding-left:var(--space-segmented-control-segment-m-icon-only, 6px);
83
83
  padding-right:var(--space-segmented-control-segment-m-icon-only, 6px);
84
84
  gap:var(--space-segmented-control-segment-m-gap, 4px);
85
85
  height:var(--size-segmented-control-segment-m, 36px);
86
86
  }
87
87
  .selection[data-size=l]{
88
- border-radius:var(--radius-segmented-control-segment-l, 14px);
88
+ border-radius:var(--radius-segmented-control-segment-l, 2px);
89
89
  padding-left:var(--space-segmented-control-segment-l-icon-only, 10px);
90
90
  padding-right:var(--space-segmented-control-segment-l-icon-only, 10px);
91
91
  gap:var(--space-segmented-control-segment-l-gap, 4px);
package/dist/cjs/helperComponents/Segment/styles.module.css CHANGED
@@ -30,84 +30,84 @@
30
30
  outline-color:var(--sys-available-complementary, #1c1c24);
31
31
  }
32
32
  .segment[data-size=xs][data-layout=label-only]{
33
- border-radius:var(--radius-segmented-control-segment-xs, 6px);
33
+ border-radius:var(--radius-segmented-control-segment-xs, 2px);
34
34
  padding-left:var(--space-segmented-control-segment-xs-from-label, 8px);
35
35
  padding-right:var(--space-segmented-control-segment-xs-from-label, 8px);
36
36
  gap:var(--space-segmented-control-segment-xs-gap, 2px);
37
37
  height:var(--size-segmented-control-segment-xs, 20px);
38
38
  }
39
39
  .segment[data-size=xs][data-layout=icon-before]{
40
- border-radius:var(--radius-segmented-control-segment-s, 10px);
40
+ border-radius:var(--radius-segmented-control-segment-s, 2px);
41
41
  padding-left:var(--space-segmented-control-segment-s-from-icon, 8px);
42
42
  padding-right:var(--space-segmented-control-segment-s-from-label, 16px);
43
43
  gap:var(--space-segmented-control-segment-s-gap, 4px);
44
44
  height:var(--size-segmented-control-segment-s, 28px);
45
45
  }
46
46
  .segment[data-size=xs][data-layout=icon-only]{
47
- border-radius:var(--radius-segmented-control-segment-s, 10px);
47
+ border-radius:var(--radius-segmented-control-segment-s, 2px);
48
48
  padding-left:var(--space-segmented-control-segment-s-icon-only, 2px);
49
49
  padding-right:var(--space-segmented-control-segment-s-icon-only, 2px);
50
50
  gap:var(--space-segmented-control-segment-s-gap, 4px);
51
51
  height:var(--size-segmented-control-segment-s, 28px);
52
52
  }
53
53
  .segment[data-size=s][data-layout=label-only]{
54
- border-radius:var(--radius-segmented-control-segment-s, 10px);
54
+ border-radius:var(--radius-segmented-control-segment-s, 2px);
55
55
  padding-left:var(--space-segmented-control-segment-s-from-label, 16px);
56
56
  padding-right:var(--space-segmented-control-segment-s-from-label, 16px);
57
57
  gap:var(--space-segmented-control-segment-s-gap, 4px);
58
58
  height:var(--size-segmented-control-segment-s, 28px);
59
59
  }
60
60
  .segment[data-size=s][data-layout=icon-before]{
61
- border-radius:var(--radius-segmented-control-segment-s, 10px);
61
+ border-radius:var(--radius-segmented-control-segment-s, 2px);
62
62
  padding-left:var(--space-segmented-control-segment-s-from-icon, 8px);
63
63
  padding-right:var(--space-segmented-control-segment-s-from-label, 16px);
64
64
  gap:var(--space-segmented-control-segment-s-gap, 4px);
65
65
  height:var(--size-segmented-control-segment-s, 28px);
66
66
  }
67
67
  .segment[data-size=s][data-layout=icon-only]{
68
- border-radius:var(--radius-segmented-control-segment-s, 10px);
68
+ border-radius:var(--radius-segmented-control-segment-s, 2px);
69
69
  padding-left:var(--space-segmented-control-segment-s-icon-only, 2px);
70
70
  padding-right:var(--space-segmented-control-segment-s-icon-only, 2px);
71
71
  gap:var(--space-segmented-control-segment-s-gap, 4px);
72
72
  height:var(--size-segmented-control-segment-s, 28px);
73
73
  }
74
74
  .segment[data-size=m][data-layout=label-only]{
75
- border-radius:var(--radius-segmented-control-segment-m, 12px);
76
- padding-left:var(--space-segmented-control-segment-m-from-label, 24px);
77
- padding-right:var(--space-segmented-control-segment-m-from-label, 24px);
75
+ border-radius:var(--radius-segmented-control-segment-m, 2px);
76
+ padding-left:var(--space-segmented-control-segment-m-from-label, 16px);
77
+ padding-right:var(--space-segmented-control-segment-m-from-label, 16px);
78
78
  gap:var(--space-segmented-control-segment-m-gap, 4px);
79
79
  height:var(--size-segmented-control-segment-m, 36px);
80
80
  }
81
81
  .segment[data-size=m][data-layout=icon-before]{
82
- border-radius:var(--radius-segmented-control-segment-m, 12px);
83
- padding-left:var(--space-segmented-control-segment-m-from-icon, 16px);
84
- padding-right:var(--space-segmented-control-segment-m-from-label, 24px);
82
+ border-radius:var(--radius-segmented-control-segment-m, 2px);
83
+ padding-left:var(--space-segmented-control-segment-m-from-icon, 8px);
84
+ padding-right:var(--space-segmented-control-segment-m-from-label, 16px);
85
85
  gap:var(--space-segmented-control-segment-m-gap, 4px);
86
86
  height:var(--size-segmented-control-segment-m, 36px);
87
87
  }
88
88
  .segment[data-size=m][data-layout=icon-only]{
89
- border-radius:var(--radius-segmented-control-segment-m, 12px);
89
+ border-radius:var(--radius-segmented-control-segment-m, 2px);
90
90
  padding-left:var(--space-segmented-control-segment-m-icon-only, 6px);
91
91
  padding-right:var(--space-segmented-control-segment-m-icon-only, 6px);
92
92
  gap:var(--space-segmented-control-segment-m-gap, 4px);
93
93
  height:var(--size-segmented-control-segment-m, 36px);
94
94
  }
95
95
  .segment[data-size=l][data-layout=label-only]{
96
- border-radius:var(--radius-segmented-control-segment-l, 14px);
97
- padding-left:var(--space-segmented-control-segment-l-from-label, 32px);
98
- padding-right:var(--space-segmented-control-segment-l-from-label, 32px);
96
+ border-radius:var(--radius-segmented-control-segment-l, 2px);
97
+ padding-left:var(--space-segmented-control-segment-l-from-label, 24px);
98
+ padding-right:var(--space-segmented-control-segment-l-from-label, 24px);
99
99
  gap:var(--space-segmented-control-segment-l-gap, 4px);
100
100
  height:var(--size-segmented-control-segment-l, 44px);
101
101
  }
102
102
  .segment[data-size=l][data-layout=icon-before]{
103
- border-radius:var(--radius-segmented-control-segment-l, 14px);
104
- padding-left:var(--space-segmented-control-segment-l-from-icon, 24px);
105
- padding-right:var(--space-segmented-control-segment-l-from-label, 32px);
103
+ border-radius:var(--radius-segmented-control-segment-l, 2px);
104
+ padding-left:var(--space-segmented-control-segment-l-from-icon, 16px);
105
+ padding-right:var(--space-segmented-control-segment-l-from-label, 24px);
106
106
  gap:var(--space-segmented-control-segment-l-gap, 4px);
107
107
  height:var(--size-segmented-control-segment-l, 44px);
108
108
  }
109
109
  .segment[data-size=l][data-layout=icon-only]{
110
- border-radius:var(--radius-segmented-control-segment-l, 14px);
110
+ border-radius:var(--radius-segmented-control-segment-l, 2px);
111
111
  padding-left:var(--space-segmented-control-segment-l-icon-only, 10px);
112
112
  padding-right:var(--space-segmented-control-segment-l-icon-only, 10px);
113
113
  gap:var(--space-segmented-control-segment-l-gap, 4px);
package/dist/esm/components/styles.module.css CHANGED
@@ -30,19 +30,19 @@
30
30
  }
31
31
  .container[data-size=xs]::before{
32
32
  border-width:var(--border-width-segmented-control-single, 1px);
33
- border-radius:var(--radius-segmented-control-container-xs, 8px);
33
+ border-radius:var(--radius-segmented-control-container-xs, 4px);
34
34
  }
35
35
  .container[data-size=s]::before{
36
36
  border-width:var(--border-width-segmented-control-single, 1px);
37
- border-radius:var(--radius-segmented-control-container-s, 12px);
37
+ border-radius:var(--radius-segmented-control-container-s, 4px);
38
38
  }
39
39
  .container[data-size=m]::before{
40
40
  border-width:var(--border-width-segmented-control-single, 1px);
41
- border-radius:var(--radius-segmented-control-container-m, 14px);
41
+ border-radius:var(--radius-segmented-control-container-m, 4px);
42
42
  }
43
43
  .container[data-size=l]::before{
44
44
  border-width:var(--border-width-segmented-control-single, 1px);
45
- border-radius:var(--radius-segmented-control-container-l, 16px);
45
+ border-radius:var(--radius-segmented-control-container-l, 4px);
46
46
  }
47
47
 
48
48
  .segmentHolder{
@@ -64,28 +64,28 @@
64
64
  transition:left 0.15s ease-in-out, width 0.15s ease-in-out;
65
65
  }
66
66
  .selection[data-size=xs]{
67
- border-radius:var(--radius-segmented-control-segment-s, 10px);
67
+ border-radius:var(--radius-segmented-control-segment-s, 2px);
68
68
  padding-left:var(--space-segmented-control-segment-s-icon-only, 2px);
69
69
  padding-right:var(--space-segmented-control-segment-s-icon-only, 2px);
70
70
  gap:var(--space-segmented-control-segment-s-gap, 4px);
71
71
  height:var(--size-segmented-control-segment-s, 28px);
72
72
  }
73
73
  .selection[data-size=s]{
74
- border-radius:var(--radius-segmented-control-segment-s, 10px);
74
+ border-radius:var(--radius-segmented-control-segment-s, 2px);
75
75
  padding-left:var(--space-segmented-control-segment-s-icon-only, 2px);
76
76
  padding-right:var(--space-segmented-control-segment-s-icon-only, 2px);
77
77
  gap:var(--space-segmented-control-segment-s-gap, 4px);
78
78
  height:var(--size-segmented-control-segment-s, 28px);
79
79
  }
80
80
  .selection[data-size=m]{
81
- border-radius:var(--radius-segmented-control-segment-m, 12px);
81
+ border-radius:var(--radius-segmented-control-segment-m, 2px);
82
82
  padding-left:var(--space-segmented-control-segment-m-icon-only, 6px);
83
83
  padding-right:var(--space-segmented-control-segment-m-icon-only, 6px);
84
84
  gap:var(--space-segmented-control-segment-m-gap, 4px);
85
85
  height:var(--size-segmented-control-segment-m, 36px);
86
86
  }
87
87
  .selection[data-size=l]{
88
- border-radius:var(--radius-segmented-control-segment-l, 14px);
88
+ border-radius:var(--radius-segmented-control-segment-l, 2px);
89
89
  padding-left:var(--space-segmented-control-segment-l-icon-only, 10px);
90
90
  padding-right:var(--space-segmented-control-segment-l-icon-only, 10px);
91
91
  gap:var(--space-segmented-control-segment-l-gap, 4px);
package/dist/esm/helperComponents/Segment/styles.module.css CHANGED
@@ -30,84 +30,84 @@
30
30
  outline-color:var(--sys-available-complementary, #1c1c24);
31
31
  }
32
32
  .segment[data-size=xs][data-layout=label-only]{
33
- border-radius:var(--radius-segmented-control-segment-xs, 6px);
33
+ border-radius:var(--radius-segmented-control-segment-xs, 2px);
34
34
  padding-left:var(--space-segmented-control-segment-xs-from-label, 8px);
35
35
  padding-right:var(--space-segmented-control-segment-xs-from-label, 8px);
36
36
  gap:var(--space-segmented-control-segment-xs-gap, 2px);
37
37
  height:var(--size-segmented-control-segment-xs, 20px);
38
38
  }
39
39
  .segment[data-size=xs][data-layout=icon-before]{
40
- border-radius:var(--radius-segmented-control-segment-s, 10px);
40
+ border-radius:var(--radius-segmented-control-segment-s, 2px);
41
41
  padding-left:var(--space-segmented-control-segment-s-from-icon, 8px);
42
42
  padding-right:var(--space-segmented-control-segment-s-from-label, 16px);
43
43
  gap:var(--space-segmented-control-segment-s-gap, 4px);
44
44
  height:var(--size-segmented-control-segment-s, 28px);
45
45
  }
46
46
  .segment[data-size=xs][data-layout=icon-only]{
47
- border-radius:var(--radius-segmented-control-segment-s, 10px);
47
+ border-radius:var(--radius-segmented-control-segment-s, 2px);
48
48
  padding-left:var(--space-segmented-control-segment-s-icon-only, 2px);
49
49
  padding-right:var(--space-segmented-control-segment-s-icon-only, 2px);
50
50
  gap:var(--space-segmented-control-segment-s-gap, 4px);
51
51
  height:var(--size-segmented-control-segment-s, 28px);
52
52
  }
53
53
  .segment[data-size=s][data-layout=label-only]{
54
- border-radius:var(--radius-segmented-control-segment-s, 10px);
54
+ border-radius:var(--radius-segmented-control-segment-s, 2px);
55
55
  padding-left:var(--space-segmented-control-segment-s-from-label, 16px);
56
56
  padding-right:var(--space-segmented-control-segment-s-from-label, 16px);
57
57
  gap:var(--space-segmented-control-segment-s-gap, 4px);
58
58
  height:var(--size-segmented-control-segment-s, 28px);
59
59
  }
60
60
  .segment[data-size=s][data-layout=icon-before]{
61
- border-radius:var(--radius-segmented-control-segment-s, 10px);
61
+ border-radius:var(--radius-segmented-control-segment-s, 2px);
62
62
  padding-left:var(--space-segmented-control-segment-s-from-icon, 8px);
63
63
  padding-right:var(--space-segmented-control-segment-s-from-label, 16px);
64
64
  gap:var(--space-segmented-control-segment-s-gap, 4px);
65
65
  height:var(--size-segmented-control-segment-s, 28px);
66
66
  }
67
67
  .segment[data-size=s][data-layout=icon-only]{
68
- border-radius:var(--radius-segmented-control-segment-s, 10px);
68
+ border-radius:var(--radius-segmented-control-segment-s, 2px);
69
69
  padding-left:var(--space-segmented-control-segment-s-icon-only, 2px);
70
70
  padding-right:var(--space-segmented-control-segment-s-icon-only, 2px);
71
71
  gap:var(--space-segmented-control-segment-s-gap, 4px);
72
72
  height:var(--size-segmented-control-segment-s, 28px);
73
73
  }
74
74
  .segment[data-size=m][data-layout=label-only]{
75
- border-radius:var(--radius-segmented-control-segment-m, 12px);
76
- padding-left:var(--space-segmented-control-segment-m-from-label, 24px);
77
- padding-right:var(--space-segmented-control-segment-m-from-label, 24px);
75
+ border-radius:var(--radius-segmented-control-segment-m, 2px);
76
+ padding-left:var(--space-segmented-control-segment-m-from-label, 16px);
77
+ padding-right:var(--space-segmented-control-segment-m-from-label, 16px);
78
78
  gap:var(--space-segmented-control-segment-m-gap, 4px);
79
79
  height:var(--size-segmented-control-segment-m, 36px);
80
80
  }
81
81
  .segment[data-size=m][data-layout=icon-before]{
82
- border-radius:var(--radius-segmented-control-segment-m, 12px);
83
- padding-left:var(--space-segmented-control-segment-m-from-icon, 16px);
84
- padding-right:var(--space-segmented-control-segment-m-from-label, 24px);
82
+ border-radius:var(--radius-segmented-control-segment-m, 2px);
83
+ padding-left:var(--space-segmented-control-segment-m-from-icon, 8px);
84
+ padding-right:var(--space-segmented-control-segment-m-from-label, 16px);
85
85
  gap:var(--space-segmented-control-segment-m-gap, 4px);
86
86
  height:var(--size-segmented-control-segment-m, 36px);
87
87
  }
88
88
  .segment[data-size=m][data-layout=icon-only]{
89
- border-radius:var(--radius-segmented-control-segment-m, 12px);
89
+ border-radius:var(--radius-segmented-control-segment-m, 2px);
90
90
  padding-left:var(--space-segmented-control-segment-m-icon-only, 6px);
91
91
  padding-right:var(--space-segmented-control-segment-m-icon-only, 6px);
92
92
  gap:var(--space-segmented-control-segment-m-gap, 4px);
93
93
  height:var(--size-segmented-control-segment-m, 36px);
94
94
  }
95
95
  .segment[data-size=l][data-layout=label-only]{
96
- border-radius:var(--radius-segmented-control-segment-l, 14px);
97
- padding-left:var(--space-segmented-control-segment-l-from-label, 32px);
98
- padding-right:var(--space-segmented-control-segment-l-from-label, 32px);
96
+ border-radius:var(--radius-segmented-control-segment-l, 2px);
97
+ padding-left:var(--space-segmented-control-segment-l-from-label, 24px);
98
+ padding-right:var(--space-segmented-control-segment-l-from-label, 24px);
99
99
  gap:var(--space-segmented-control-segment-l-gap, 4px);
100
100
  height:var(--size-segmented-control-segment-l, 44px);
101
101
  }
102
102
  .segment[data-size=l][data-layout=icon-before]{
103
- border-radius:var(--radius-segmented-control-segment-l, 14px);
104
- padding-left:var(--space-segmented-control-segment-l-from-icon, 24px);
105
- padding-right:var(--space-segmented-control-segment-l-from-label, 32px);
103
+ border-radius:var(--radius-segmented-control-segment-l, 2px);
104
+ padding-left:var(--space-segmented-control-segment-l-from-icon, 16px);
105
+ padding-right:var(--space-segmented-control-segment-l-from-label, 24px);
106
106
  gap:var(--space-segmented-control-segment-l-gap, 4px);
107
107
  height:var(--size-segmented-control-segment-l, 44px);
108
108
  }
109
109
  .segment[data-size=l][data-layout=icon-only]{
110
- border-radius:var(--radius-segmented-control-segment-l, 14px);
110
+ border-radius:var(--radius-segmented-control-segment-l, 2px);
111
111
  padding-left:var(--space-segmented-control-segment-l-icon-only, 10px);
112
112
  padding-right:var(--space-segmented-control-segment-l-icon-only, 10px);
113
113
  gap:var(--space-segmented-control-segment-l-gap, 4px);
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Segmented Control",
7
- "version": "0.6.8",
7
+ "version": "0.6.9-preview-05f26bf6.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -36,10 +36,10 @@
36
36
  "license": "Apache-2.0",
37
37
  "scripts": {},
38
38
  "dependencies": {
39
- "@snack-uikit/truncate-string": "0.7.0",
40
- "@snack-uikit/utils": "3.10.1",
39
+ "@snack-uikit/truncate-string": "0.7.1-preview-05f26bf6.0",
40
+ "@snack-uikit/utils": "3.10.2-preview-05f26bf6.0",
41
41
  "classnames": "2.5.1",
42
42
  "uncontrollable": "8.0.4"
43
43
  },
44
- "gitHead": "fe6df3a62f59d9957bd8ff3d6a2afa781dddb24c"
44
+ "gitHead": "6fee645f4608f0384f0e44df312a82b4120739ac"
45
45
  }