@momentum-design/components 0.129.21 → 0.129.23

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 (34) hide show
  1. package/dist/browser/index.js +49 -46
  2. package/dist/browser/index.js.map +2 -2
  3. package/dist/components/buttonsimple/buttonsimple.component.d.ts +1 -1
  4. package/dist/components/card/card.component.d.ts +13 -23
  5. package/dist/components/card/card.component.js +13 -23
  6. package/dist/components/cardbutton/cardbutton.component.d.ts +13 -9
  7. package/dist/components/cardbutton/cardbutton.component.js +13 -9
  8. package/dist/components/cardcheckbox/cardcheckbox.component.d.ts +21 -15
  9. package/dist/components/cardcheckbox/cardcheckbox.component.js +21 -15
  10. package/dist/components/cardradio/cardradio.component.d.ts +21 -15
  11. package/dist/components/cardradio/cardradio.component.js +21 -15
  12. package/dist/components/formfieldwrapper/formfieldwrapper.component.d.ts +5 -3
  13. package/dist/components/formfieldwrapper/formfieldwrapper.component.js +4 -2
  14. package/dist/components/statictoggle/statictoggle.component.d.ts +24 -23
  15. package/dist/components/statictoggle/statictoggle.component.js +24 -23
  16. package/dist/components/statictoggle/statictoggle.styles.js +37 -37
  17. package/dist/components/toggle/toggle.component.d.ts +30 -19
  18. package/dist/components/toggle/toggle.component.js +30 -19
  19. package/dist/components/toggle/toggle.styles.js +12 -9
  20. package/dist/custom-elements.json +272 -356
  21. package/dist/react/card/index.d.ts +13 -23
  22. package/dist/react/card/index.js +13 -23
  23. package/dist/react/cardbutton/index.d.ts +13 -9
  24. package/dist/react/cardbutton/index.js +13 -9
  25. package/dist/react/cardcheckbox/index.d.ts +18 -14
  26. package/dist/react/cardcheckbox/index.js +18 -14
  27. package/dist/react/cardradio/index.d.ts +19 -14
  28. package/dist/react/cardradio/index.js +19 -14
  29. package/dist/react/statictoggle/index.d.ts +13 -15
  30. package/dist/react/statictoggle/index.js +13 -15
  31. package/dist/react/toggle/index.d.ts +18 -15
  32. package/dist/react/toggle/index.js +18 -15
  33. package/dist/utils/mixins/CardComponentMixin.js +7 -2
  34. package/package.json +1 -1
package/dist/browser/index.js CHANGED
@@ -4061,23 +4061,23 @@
4061
4061
  ${this.arrowPosition===yh.LEADING?_`<mdc-icon name="${o}" length-unit="rem" part="leading-arrow"></mdc-icon>`:j}
4062
4062
  `}};Xi.styles=[...gi.styles,...Hv],p([u({type:String,reflect:!0,attribute:"arrow-position"})],Xi.prototype,"arrowPosition",2),p([u({type:String,reflect:!0,attribute:"arrow-direction"})],Xi.prototype,"arrowDirection",2),p([u({type:String,reflect:!0})],Xi.prototype,"name",2),p([u({type:String,reflect:!0})],Xi.prototype,"value",2);var ur=Xi;ur.register(Za);var kx=ur;var Gv=z.constructTagName("statictoggle"),wx={DEFAULT:"default",COMPACT:"compact"},Eh={CHECKED:"check-bold",UNCHECKED:"cancel-bold"},Yv={compact:.75,default:1.25},Wv={SIZE:wx.DEFAULT};var Nx=[U`
4063
4063
  :host {
4064
- --mdc-toggle-width: 3rem;
4065
- --mdc-toggle-height: 1.5rem;
4066
- --mdc-toggle-border-radius: 0.75rem;
4067
- --mdc-toggle-border-color: var(--mds-color-theme-outline-input-normal);
4068
- --mdc-toggle-background-color: var(--mds-color-theme-control-inactive-normal);
4069
- --mdc-toggle-icon-color: var(--mds-color-theme-common-inverted-text-primary-normal);
4070
- --mdc-toggle-icon-background-color: var(--mds-color-theme-common-text-primary-normal);
4064
+ --mdc-statictoggle-width: 3rem;
4065
+ --mdc-statictoggle-height: 1.5rem;
4066
+ --mdc-statictoggle-border-radius: 0.75rem;
4067
+ --mdc-statictoggle-border-color: var(--mds-color-theme-outline-input-normal);
4068
+ --mdc-statictoggle-background-color: var(--mds-color-theme-control-inactive-normal);
4069
+ --mdc-statictoggle-icon-color: var(--mds-color-theme-common-inverted-text-primary-normal);
4070
+ --mdc-statictoggle-icon-background-color: var(--mds-color-theme-common-text-primary-normal);
4071
4071
 
4072
- border-radius: var(--mdc-toggle-border-radius);
4072
+ border-radius: var(--mdc-statictoggle-border-radius);
4073
4073
  }
4074
4074
 
4075
4075
  :host::part(slider) {
4076
- width: var(--mdc-toggle-width);
4077
- height: var(--mdc-toggle-height);
4078
- background-color: var(--mdc-toggle-background-color);
4079
- border: 1px solid var(--mdc-toggle-border-color);
4080
- border-radius: var(--mdc-toggle-border-radius);
4076
+ width: var(--mdc-statictoggle-width);
4077
+ height: var(--mdc-statictoggle-height);
4078
+ background-color: var(--mdc-statictoggle-background-color);
4079
+ border: 1px solid var(--mdc-statictoggle-border-color);
4080
+ border-radius: var(--mdc-statictoggle-border-radius);
4081
4081
  display: flex;
4082
4082
  align-items: center;
4083
4083
  justify-content: flex-start;
@@ -4088,15 +4088,15 @@
4088
4088
 
4089
4089
  :host::part(toggle-icon) {
4090
4090
  padding: 0.25rem;
4091
- --mdc-icon-fill-color: var(--mdc-toggle-icon-color);
4092
- background-color: var(--mdc-toggle-icon-background-color);
4091
+ --mdc-icon-fill-color: var(--mdc-statictoggle-icon-color);
4092
+ background-color: var(--mdc-statictoggle-icon-background-color);
4093
4093
  border-radius: 50%;
4094
4094
  }
4095
4095
 
4096
4096
  :host([size='compact'])::part(slider) {
4097
- --mdc-toggle-width: 2rem;
4098
- --mdc-toggle-height: 1rem;
4099
- --mdc-toggle-border-radius: 0.5rem;
4097
+ --mdc-statictoggle-width: 2rem;
4098
+ --mdc-statictoggle-height: 1rem;
4099
+ --mdc-statictoggle-border-radius: 0.5rem;
4100
4100
  }
4101
4101
 
4102
4102
  :host([size='compact'])::part(toggle-icon) {
@@ -4104,52 +4104,52 @@
4104
4104
  }
4105
4105
 
4106
4106
  :host([checked]) {
4107
- --mdc-toggle-border-color: transparent;
4108
- --mdc-toggle-background-color: var(--mds-color-theme-control-active-normal);
4107
+ --mdc-statictoggle-border-color: transparent;
4108
+ --mdc-statictoggle-background-color: var(--mds-color-theme-control-active-normal);
4109
4109
  }
4110
4110
  :host([checked])::part(slider) {
4111
4111
  justify-content: flex-end;
4112
4112
  }
4113
4113
 
4114
4114
  :host([readonly]) {
4115
- --mdc-toggle-icon-background-color: var(--mds-color-theme-common-text-primary-normal);
4116
- --mdc-toggle-border-color: var(--mds-color-theme-outline-primary-disabled);
4117
- --mdc-toggle-background-color: var(--mds-color-theme-control-inactive-disabled);
4115
+ --mdc-statictoggle-icon-background-color: var(--mds-color-theme-common-text-primary-normal);
4116
+ --mdc-statictoggle-border-color: var(--mds-color-theme-outline-primary-disabled);
4117
+ --mdc-statictoggle-background-color: var(--mds-color-theme-control-inactive-disabled);
4118
4118
  }
4119
4119
 
4120
4120
  :host([disabled]),
4121
4121
  :host([soft-disabled]) {
4122
- --mdc-toggle-icon-color: var(--mds-color-theme-common-inverted-text-primary-disabled);
4123
- --mdc-toggle-icon-background-color: var(--mds-color-theme-common-text-primary-disabled);
4124
- --mdc-toggle-border-color: var(--mds-color-theme-outline-primary-disabled);
4125
- --mdc-toggle-background-color: var(--mds-color-theme-control-inactive-disabled);
4122
+ --mdc-statictoggle-icon-color: var(--mds-color-theme-common-inverted-text-primary-disabled);
4123
+ --mdc-statictoggle-icon-background-color: var(--mds-color-theme-common-text-primary-disabled);
4124
+ --mdc-statictoggle-border-color: var(--mds-color-theme-outline-primary-disabled);
4125
+ --mdc-statictoggle-background-color: var(--mds-color-theme-control-inactive-disabled);
4126
4126
  cursor: default;
4127
4127
  }
4128
4128
 
4129
4129
  :host([checked][disabled]),
4130
4130
  :host([checked][soft-disabled]) {
4131
- --mdc-toggle-icon-color: var(--mds-color-theme-common-inverted-text-primary-disabled);
4132
- --mdc-toggle-icon-background-color: var(--mds-color-theme-common-text-primary-disabled);
4133
- --mdc-toggle-border-color: transparent;
4134
- --mdc-toggle-background-color: var(--mds-color-theme-control-active-disabled);
4131
+ --mdc-statictoggle-icon-color: var(--mds-color-theme-common-inverted-text-primary-disabled);
4132
+ --mdc-statictoggle-icon-background-color: var(--mds-color-theme-common-text-primary-disabled);
4133
+ --mdc-statictoggle-border-color: transparent;
4134
+ --mdc-statictoggle-background-color: var(--mds-color-theme-control-active-disabled);
4135
4135
  }
4136
4136
 
4137
4137
  /* High Contrast Mode */
4138
4138
  @media (forced-colors: active) {
4139
4139
  :host::part(toggle-icon) {
4140
- --mdc-toggle-icon-color: CanvasText;
4141
- border: 1px solid var(--mdc-toggle-border-color);
4140
+ --mdc-statictoggle-icon-color: CanvasText;
4141
+ border: 1px solid var(--mdc-statictoggle-border-color);
4142
4142
  }
4143
4143
 
4144
4144
  :host([checked]) {
4145
- --mdc-toggle-icon-color: SelectedItemText;
4146
- --mdc-toggle-border-color: SelectedItem;
4147
- --mdc-toggle-background-color: SelectedItem;
4145
+ --mdc-statictoggle-icon-color: SelectedItemText;
4146
+ --mdc-statictoggle-border-color: SelectedItem;
4147
+ --mdc-statictoggle-background-color: SelectedItem;
4148
4148
  }
4149
4149
 
4150
4150
  :host([disabled])::part(toggle-icon),
4151
4151
  :host([soft-disabled])::part(toggle-icon) {
4152
- --mdc-toggle-icon-color: GrayText;
4152
+ --mdc-statictoggle-icon-color: GrayText;
4153
4153
  border: 1px solid GrayText;
4154
4154
  }
4155
4155
  }
@@ -6378,6 +6378,12 @@
6378
6378
  </div>
6379
6379
  ${this.renderFooter()}
6380
6380
  `}};Oe.styles=[...q.styles,...Jg],p([u({type:String,reflect:!0})],Oe.prototype,"variant",2),p([u({type:String,attribute:"close-button-aria-label"})],Oe.prototype,"closeButtonAriaLabel",2),p([u({type:String,reflect:!0,attribute:"header-text"})],Oe.prototype,"headerText",2),p([u({type:String,reflect:!0,attribute:"header-tag-name"})],Oe.prototype,"headerTagName",2),p([u({type:String,reflect:!0,attribute:"aria-label"})],Oe.prototype,"ariaLabel",2),p([u({type:String,reflect:!0,attribute:"show-more-text"})],Oe.prototype,"showMoreText",2),p([u({type:String,reflect:!0,attribute:"show-less-text"})],Oe.prototype,"showLessText",2),p([ut()],Oe.prototype,"isDetailVisible",2),p([ut()],Oe.prototype,"hasDetailedSlot",2),p([Pt({slot:"toast-body-detailed",flatten:!0})],Oe.prototype,"detailedElements",2),p([ut()],Oe.prototype,"hasFooterButtons",2);var hp=Oe;hp.register(Zg);var FA=hp;var $A=[yt,U`
6381
+ :host {
6382
+ --mdc-label-font-size: var(--mds-font-apps-body-midsize-regular-font-size);
6383
+ --mdc-label-font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
6384
+ --mdc-label-line-height: var(--mds-font-apps-body-midsize-regular-line-height);
6385
+ }
6386
+
6381
6387
  /* Grid layout for labeled toggles */
6382
6388
  :host([label]),
6383
6389
  :host([help-text]) {
@@ -6406,16 +6412,13 @@
6406
6412
  opacity: 0.1%;
6407
6413
  overflow: visible;
6408
6414
  z-index: 1;
6409
- width: var(--mdc-toggle-width);
6410
- height: var(--mdc-toggle-height);
6415
+ width: var(--mdc-statictoggle-width);
6416
+ height: var(--mdc-statictoggle-height);
6411
6417
  }
6412
6418
 
6413
6419
  :host::part(label) {
6414
6420
  word-break: break-word;
6415
6421
  white-space: normal;
6416
- --mdc-label-font-size: var(--mds-font-apps-body-midsize-regular-font-size);
6417
- --mdc-label-font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
6418
- --mdc-label-line-height: var(--mds-font-apps-body-midsize-regular-line-height);
6419
6422
  }
6420
6423
 
6421
6424
  /* Default interactive states */
@@ -6425,19 +6428,19 @@
6425
6428
  }
6426
6429
 
6427
6430
  :host(:hover)::part(static-toggle) {
6428
- --mdc-toggle-background-color: var(--mds-color-theme-control-inactive-hover);
6431
+ --mdc-statictoggle-background-color: var(--mds-color-theme-control-inactive-hover);
6429
6432
  }
6430
6433
 
6431
6434
  :host(:active)::part(static-toggle) {
6432
- --mdc-toggle-background-color: var(--mds-color-theme-control-inactive-pressed);
6435
+ --mdc-statictoggle-background-color: var(--mds-color-theme-control-inactive-pressed);
6433
6436
  }
6434
6437
 
6435
6438
  :host([checked]:hover)::part(static-toggle) {
6436
- --mdc-toggle-background-color: var(--mds-color-theme-control-active-hover);
6439
+ --mdc-statictoggle-background-color: var(--mds-color-theme-control-active-hover);
6437
6440
  }
6438
6441
 
6439
6442
  :host([checked]:active)::part(static-toggle) {
6440
- --mdc-toggle-background-color: var(--mds-color-theme-control-active-pressed);
6443
+ --mdc-statictoggle-background-color: var(--mds-color-theme-control-active-pressed);
6441
6444
  }
6442
6445
 
6443
6446
  /* Readonly state - disables pointer events */