@momentum-design/components 0.106.1 → 0.106.2

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 (7) hide show
  1. package/dist/browser/index.js +49 -30
  2. package/dist/browser/index.js.map +2 -2
  3. package/dist/components/buttongroup/buttongroup.styles.js +49 -30
  4. package/dist/custom-elements.json +1565 -1565
  5. package/dist/react/index.d.ts +4 -4
  6. package/dist/react/index.js +4 -4
  7. package/package.json +1 -1
package/dist/components/buttongroup/buttongroup.styles.js CHANGED
@@ -5,65 +5,84 @@ const styles = css `
5
5
  --mdc-buttongroup-border-radius: 1.25rem;
6
6
  --mdc-buttongroup-border-color: var(--mds-color-theme-outline-button-normal);
7
7
  --mdc-buttongroup-divider-color: var(--mds-color-theme-outline-secondary-normal);
8
+ --mdc-buttongroup-border-width: 1px;
8
9
  }
9
10
 
10
11
  :host::part(container) {
11
12
  display: flex;
12
13
  border-radius: var(--mdc-buttongroup-border-radius);
13
- border: 1px solid var(--mdc-buttongroup-border-color);
14
14
  }
15
15
 
16
16
  :host([variant='primary'])::part(container) {
17
+ gap: 1px;
17
18
  border: none;
18
19
  background-color: var(--mds-color-theme-outline-primary-normal);
19
- gap: 1px;
20
20
  }
21
21
 
22
22
  ::slotted(mdc-button) {
23
23
  width: inherit;
24
24
  border-radius: 0;
25
25
  border: none;
26
- box-sizing: content-box;
26
+ box-sizing: border-box;
27
+ position: relative;
27
28
  }
28
-
29
- :host([orientation='vertical'])::part(container) {
30
- flex-direction: column;
29
+ :host([orientation='horizontal'][variant='secondary']) ::slotted(mdc-button) {
30
+ border-block-start: var(--mdc-buttongroup-border-width) solid var(--mdc-buttongroup-border-color);
31
+ border-block-end: var(--mdc-buttongroup-border-width) solid var(--mdc-buttongroup-border-color);
32
+ }
33
+ :host([orientation='horizontal'][variant='secondary']) ::slotted(mdc-button:first-of-type) {
34
+ border-inline-start: var(--mdc-buttongroup-border-width) solid var(--mdc-buttongroup-border-color);
35
+ }
36
+ :host([orientation='horizontal'][variant='secondary']) ::slotted(mdc-button:last-of-type) {
37
+ border-inline-end: var(--mdc-buttongroup-border-width) solid var(--mdc-buttongroup-border-color);
31
38
  }
32
39
 
33
- :host([orientation='horizontal'][variant='secondary']:dir(ltr)) ::slotted(mdc-button:not(:last-child)) {
34
- border-right: 1px solid var(--mdc-buttongroup-divider-color);
40
+ :host([orientation='vertical'][variant='secondary']) ::slotted(mdc-button) {
41
+ border-inline-start: var(--mdc-buttongroup-border-width) solid var(--mdc-buttongroup-border-color);
42
+ border-inline-end: var(--mdc-buttongroup-border-width) solid var(--mdc-buttongroup-border-color);
35
43
  }
36
- :host([orientation='horizontal'][variant='secondary']:dir(rtl)) ::slotted(mdc-button:not(:last-child)) {
37
- border-left: 1px solid var(--mdc-buttongroup-divider-color);
44
+ :host([orientation='vertical'][variant='secondary']) ::slotted(mdc-button:first-of-type) {
45
+ border-block-start: var(--mdc-buttongroup-border-width) solid var(--mdc-buttongroup-border-color);
38
46
  }
39
- :host([orientation='vertical'][variant='secondary']) ::slotted(mdc-button:not(:last-child)) {
40
- border-bottom: 1px solid var(--mdc-buttongroup-divider-color);
47
+ :host([orientation='vertical'][variant='secondary']) ::slotted(mdc-button:last-of-type) {
48
+ border-block-end: var(--mdc-buttongroup-border-width) solid var(--mdc-buttongroup-border-color);
41
49
  }
42
50
 
43
- :host([orientation='vertical']) ::slotted(mdc-button:first-child) {
44
- border-top-left-radius: var(--mdc-buttongroup-border-radius);
45
- border-top-right-radius: var(--mdc-buttongroup-border-radius);
51
+ :host([orientation='vertical'])::part(container) {
52
+ flex-direction: column;
46
53
  }
47
- :host([orientation='vertical']) ::slotted(mdc-button:last-child) {
48
- border-bottom-left-radius: var(--mdc-buttongroup-border-radius);
49
- border-bottom-right-radius: var(--mdc-buttongroup-border-radius);
54
+
55
+ :host([variant='secondary'][orientation='horizontal']) ::slotted(mdc-button:not(:last-of-type))::after {
56
+ content: '';
57
+ position: absolute;
58
+ height: 100%;
59
+ border-inline-end: var(--mdc-buttongroup-border-width) solid var(--mdc-buttongroup-divider-color);
60
+ inset-inline-end: calc(var(--mdc-buttongroup-border-width) / 2);
61
+ }
62
+ :host([variant='secondary'][orientation='vertical']) ::slotted(mdc-button:not(:last-of-type))::after {
63
+ content: '';
64
+ position: absolute;
65
+ width: 100%;
66
+ border-block-end: var(--mdc-buttongroup-border-width) solid var(--mdc-buttongroup-divider-color);
67
+ inset-block-end: calc(var(--mdc-buttongroup-border-width) / 2);
50
68
  }
51
69
 
52
- :host([orientation='horizontal']:dir(ltr)) ::slotted(mdc-button:first-child) {
53
- border-top-left-radius: var(--mdc-buttongroup-border-radius);
54
- border-bottom-left-radius: var(--mdc-buttongroup-border-radius);
70
+ :host([orientation='vertical']) ::slotted(mdc-button:first-of-type) {
71
+ border-start-start-radius: var(--mdc-buttongroup-border-radius);
72
+ border-start-end-radius: var(--mdc-buttongroup-border-radius);
55
73
  }
56
- :host([orientation='horizontal']:dir(rtl)) ::slotted(mdc-button:first-child) {
57
- border-top-right-radius: var(--mdc-buttongroup-border-radius);
58
- border-bottom-right-radius: var(--mdc-buttongroup-border-radius);
74
+ :host([orientation='vertical']) ::slotted(mdc-button:last-of-type) {
75
+ border-end-start-radius: var(--mdc-buttongroup-border-radius);
76
+ border-end-end-radius: var(--mdc-buttongroup-border-radius);
59
77
  }
60
- :host([orientation='horizontal']:dir(ltr)) ::slotted(mdc-button:last-child) {
61
- border-top-right-radius: var(--mdc-buttongroup-border-radius);
62
- border-bottom-right-radius: var(--mdc-buttongroup-border-radius);
78
+
79
+ :host([orientation='horizontal']) ::slotted(mdc-button:first-of-type) {
80
+ border-start-start-radius: var(--mdc-buttongroup-border-radius);
81
+ border-end-start-radius: var(--mdc-buttongroup-border-radius);
63
82
  }
64
- :host([orientation='horizontal']:dir(rtl)) ::slotted(mdc-button:last-child) {
65
- border-top-left-radius: var(--mdc-buttongroup-border-radius);
66
- border-bottom-left-radius: var(--mdc-buttongroup-border-radius);
83
+ :host([orientation='horizontal']) ::slotted(mdc-button:last-of-type) {
84
+ border-start-end-radius: var(--mdc-buttongroup-border-radius);
85
+ border-end-end-radius: var(--mdc-buttongroup-border-radius);
67
86
  }
68
87
 
69
88
  :host([compact][orientation='horizontal']) ::slotted(mdc-button) {