@momentum-design/components 0.106.0 → 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 (11) 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/buttonsimple/buttonsimple.component.d.ts +10 -0
  5. package/dist/components/buttonsimple/buttonsimple.component.js +8 -0
  6. package/dist/components/menuitem/menuitem.component.d.ts +2 -2
  7. package/dist/components/menuitem/menuitem.component.js +2 -11
  8. package/dist/custom-elements.json +2040 -1604
  9. package/dist/react/index.d.ts +4 -4
  10. package/dist/react/index.js +4 -4
  11. 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/buttonsimple/buttonsimple.component.d.ts CHANGED
@@ -72,6 +72,16 @@ declare class Buttonsimple extends Buttonsimple_base {
72
72
  * @default button
73
73
  */
74
74
  type: ButtonType;
75
+ /**
76
+ * The name of the button, submitted as a pair with the button's value as part of the form data,
77
+ * when that button is used to submit the form.
78
+ */
79
+ name?: string;
80
+ /**
81
+ * Defines the value associated with the button's name when it's submitted with the form data.
82
+ * This value is passed to the server in params when the form is submitted using this button.
83
+ */
84
+ value?: string;
75
85
  /**
76
86
  * @internal
77
87
  */
package/dist/components/buttonsimple/buttonsimple.component.js CHANGED
@@ -240,4 +240,12 @@ __decorate([
240
240
  property({ reflect: true }),
241
241
  __metadata("design:type", String)
242
242
  ], Buttonsimple.prototype, "type", void 0);
243
+ __decorate([
244
+ property({ type: String, reflect: true }),
245
+ __metadata("design:type", String)
246
+ ], Buttonsimple.prototype, "name", void 0);
247
+ __decorate([
248
+ property({ type: String, reflect: true }),
249
+ __metadata("design:type", String)
250
+ ], Buttonsimple.prototype, "value", void 0);
243
251
  export default Buttonsimple;
package/dist/components/menuitem/menuitem.component.d.ts CHANGED
@@ -54,12 +54,12 @@ declare class MenuItem extends ListItem {
54
54
  /**
55
55
  * The name attribute is used to identify the menu item when it is selected.
56
56
  */
57
- name?: undefined | string;
57
+ name?: string;
58
58
  /**
59
59
  * The value attribute is used to represent a value when the menu item is selected.
60
60
  * It is typically used with checkbox and radio menu items, but can be handy for any menu item.
61
61
  */
62
- value?: undefined | string;
62
+ value?: string;
63
63
  constructor();
64
64
  /**
65
65
  * Handles the keydown event for the menu item.
package/dist/components/menuitem/menuitem.component.js CHANGED
@@ -53,15 +53,6 @@ import styles from './menuitem.styles';
53
53
  class MenuItem extends ListItem {
54
54
  constructor() {
55
55
  super();
56
- /**
57
- * The name attribute is used to identify the menu item when it is selected.
58
- */
59
- this.name = undefined;
60
- /**
61
- * The value attribute is used to represent a value when the menu item is selected.
62
- * It is typically used with checkbox and radio menu items, but can be handy for any menu item.
63
- */
64
- this.value = undefined;
65
56
  this.addEventListener('keyup', this.handleKeyUp.bind(this));
66
57
  }
67
58
  /**
@@ -153,10 +144,10 @@ __decorate([
153
144
  ], MenuItem.prototype, "arrowDirection", void 0);
154
145
  __decorate([
155
146
  property({ type: String, reflect: true }),
156
- __metadata("design:type", Object)
147
+ __metadata("design:type", String)
157
148
  ], MenuItem.prototype, "name", void 0);
158
149
  __decorate([
159
150
  property({ type: String, reflect: true }),
160
- __metadata("design:type", Object)
151
+ __metadata("design:type", String)
161
152
  ], MenuItem.prototype, "value", void 0);
162
153
  export default MenuItem;