@momentum-design/components 0.106.1 → 0.106.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 (12) hide show
  1. package/dist/browser/index.js +98 -79
  2. package/dist/browser/index.js.map +2 -2
  3. package/dist/components/buttongroup/buttongroup.styles.js +49 -30
  4. package/dist/components/text/text.component.d.ts +1 -1
  5. package/dist/components/text/text.component.js +1 -1
  6. package/dist/components/text/text.constants.d.ts +1 -1
  7. package/dist/components/text/text.constants.js +1 -1
  8. package/dist/components/typewriter/typewriter.constants.d.ts +1 -1
  9. package/dist/custom-elements.json +881 -881
  10. package/dist/react/index.d.ts +2 -2
  11. package/dist/react/index.js +2 -2
  12. 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) {
package/dist/components/text/text.component.d.ts CHANGED
@@ -54,7 +54,7 @@ declare class Text extends Component {
54
54
  * - 'heading-xlarge-bold'
55
55
  * - 'headline-small-light'
56
56
  * - 'headline-small-regular'
57
- * @default body-large-regular
57
+ * @default body-midsize-medium
58
58
  */
59
59
  type: TextType;
60
60
  /**
package/dist/components/text/text.component.js CHANGED
@@ -67,7 +67,7 @@ class Text extends Component {
67
67
  * - 'heading-xlarge-bold'
68
68
  * - 'headline-small-light'
69
69
  * - 'headline-small-regular'
70
- * @default body-large-regular
70
+ * @default body-midsize-medium
71
71
  */
72
72
  this.type = DEFAULTS.TYPE;
73
73
  /**
package/dist/components/text/text.constants.d.ts CHANGED
@@ -43,7 +43,7 @@ declare const VALID_TEXT_TAGS: {
43
43
  readonly DIV: "div";
44
44
  };
45
45
  declare const DEFAULTS: {
46
- readonly TYPE: "body-large-regular";
46
+ readonly TYPE: "body-midsize-medium";
47
47
  readonly TEXT_ELEMENT_TAGNAME: "p";
48
48
  readonly CSS_PART_TEXT: "text";
49
49
  readonly CHILDREN: "The quick brown fox jumps over the lazy dog";
package/dist/components/text/text.constants.js CHANGED
@@ -44,7 +44,7 @@ const VALID_TEXT_TAGS = {
44
44
  DIV: 'div',
45
45
  };
46
46
  const DEFAULTS = {
47
- TYPE: TYPE.BODY_LARGE_REGULAR,
47
+ TYPE: TYPE.BODY_MIDSIZE_MEDIUM,
48
48
  TEXT_ELEMENT_TAGNAME: VALID_TEXT_TAGS.P,
49
49
  CSS_PART_TEXT: 'text',
50
50
  CHILDREN: 'The quick brown fox jumps over the lazy dog',
package/dist/components/typewriter/typewriter.constants.d.ts CHANGED
@@ -7,7 +7,7 @@ declare const SPEED: {
7
7
  readonly VERY_FAST: 1;
8
8
  };
9
9
  declare const DEFAULTS: {
10
- readonly TYPE: "body-large-regular";
10
+ readonly TYPE: "body-midsize-medium";
11
11
  readonly TEXT_ELEMENT_TAGNAME: "p";
12
12
  readonly CSS_PART_TEXT: "text";
13
13
  readonly CSS_PART_CONTAINER: "container";