@brightspace-ui/core 3.155.5 → 3.155.7

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/components/dialog/dialog-fullscreen.js +2 -5
  2. package/components/dialog/dialog-mixin.js +1 -2
  3. package/components/dialog/dialog-styles.js +4 -12
  4. package/components/dialog/dialog.js +2 -6
  5. package/components/meter/meter-circle.js +1 -2
  6. package/components/meter/meter-linear.js +2 -3
  7. package/components/meter/meter-radial.js +1 -2
  8. package/components/meter/meter-styles.js +1 -1
  9. package/components/object-property-list/object-property-list-item.js +1 -0
  10. package/components/skeleton/skeleton-mixin.js +8 -11
  11. package/package.json +1 -1
package/components/dialog/dialog-fullscreen.js CHANGED
@@ -93,11 +93,8 @@ class DialogFullscreen extends PropertyRequiredMixin(LocalizeCoreElement(AsyncCo
93
93
 
94
94
  .d2l-dialog-header > div > d2l-button-icon {
95
95
  flex: none;
96
- margin: -2px -12px 0 0;
97
- }
98
-
99
- :host([dir="rtl"]) .d2l-dialog-header > div > d2l-button-icon {
100
- margin: -2px 0 0 -12px;
96
+ margin-block: -2px 0;
97
+ margin-inline: 0 -12px;
101
98
  }
102
99
 
103
100
  dialog.d2l-dialog-outer,
package/components/dialog/dialog-mixin.js CHANGED
@@ -8,7 +8,6 @@ import { classMap } from 'lit/directives/class-map.js';
8
8
  import { getUniqueId } from '../../helpers/uniqueId.js';
9
9
  import { html } from 'lit';
10
10
  import { ifDefined } from 'lit/directives/if-defined.js';
11
- import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
12
11
  import { styleMap } from 'lit/directives/style-map.js';
13
12
  import { tryGetIfrauBackdropService } from '../../helpers/ifrauBackdropService.js';
14
13
  import { waitForElem } from '../../helpers/internal/waitForElem.js';
@@ -29,7 +28,7 @@ const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
29
28
  const abortAction = 'abort';
30
29
  const defaultMargin = { top: 75, right: 30, bottom: 30, left: 30 };
31
30
 
32
- export const DialogMixin = superclass => class extends RtlMixin(superclass) {
31
+ export const DialogMixin = superclass => class extends superclass {
33
32
 
34
33
  static get properties() {
35
34
  return {
package/components/dialog/dialog-styles.js CHANGED
@@ -158,13 +158,8 @@ export const dialogStyles = css`
158
158
  }
159
159
 
160
160
  .d2l-dialog-footer ::slotted(*) {
161
- margin-bottom: 18px;
162
- margin-right: 18px;
163
- }
164
-
165
- :host([dir="rtl"]) .d2l-dialog-footer ::slotted(*) {
166
- margin-left: 18px;
167
- margin-right: 0;
161
+ margin-block-end: 18px;
162
+ margin-inline-end: 18px;
168
163
  }
169
164
 
170
165
  dialog.d2l-dialog-outer.d2l-dialog-fullscreen-within,
@@ -185,11 +180,8 @@ export const dialogStyles = css`
185
180
  padding: 14px 20px 16px 20px;
186
181
  }
187
182
  .d2l-dialog-fullscreen-mobile .d2l-dialog-header > div > d2l-button-icon {
188
- margin: -8px -13px 0 15px;
189
- }
190
- :host([dir="rtl"]) .d2l-dialog-fullscreen-mobile .d2l-dialog-header > div > d2l-button-icon {
191
- margin-left: -13px;
192
- margin-right: 15px;
183
+ margin-block: -8px 0;
184
+ margin-inline: 15px -13px;
193
185
  }
194
186
  .d2l-dialog-content {
195
187
  --d2l-list-controls-padding: 20px;
package/components/dialog/dialog.js CHANGED
@@ -67,12 +67,8 @@ class Dialog extends PropertyRequiredMixin(LocalizeCoreElement(AsyncContainerMix
67
67
 
68
68
  .d2l-dialog-header > div > d2l-button-icon {
69
69
  flex: none;
70
- margin: -4px -15px 0 15px;
71
- }
72
-
73
- :host([dir="rtl"]) .d2l-dialog-header > div > d2l-button-icon {
74
- margin-left: -15px;
75
- margin-right: 15px;
70
+ margin-block: -4px 0;
71
+ margin-inline: 15px -15px;
76
72
  }
77
73
 
78
74
  .d2l-dialog-content > div {
package/components/meter/meter-circle.js CHANGED
@@ -4,12 +4,11 @@ import { css, html, LitElement, nothing } from 'lit';
4
4
  import { classMap } from 'lit/directives/class-map.js';
5
5
  import { MeterMixin } from './meter-mixin.js';
6
6
  import { meterStyles } from './meter-styles.js';
7
- import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
8
7
 
9
8
  /**
10
9
  * A circular progress indicator.
11
10
  */
12
- class MeterCircle extends MeterMixin(RtlMixin(LitElement)) {
11
+ class MeterCircle extends MeterMixin(LitElement) {
13
12
  static get styles() {
14
13
  return [ bodySmallStyles, bodyStandardStyles, meterStyles, css`
15
14
  :host {
package/components/meter/meter-linear.js CHANGED
@@ -2,12 +2,11 @@ import { css, html, LitElement, nothing } from 'lit';
2
2
  import { bodySmallStyles } from '../typography/styles.js';
3
3
  import { classMap } from 'lit/directives/class-map.js';
4
4
  import { MeterMixin } from './meter-mixin.js';
5
- import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
6
5
 
7
6
  /**
8
7
  * A horizontal progress bar.
9
8
  */
10
- class MeterLinear extends MeterMixin(RtlMixin(LitElement)) {
9
+ class MeterLinear extends MeterMixin(LitElement) {
11
10
  static get properties() {
12
11
  return {
13
12
  /**
@@ -86,7 +85,7 @@ class MeterLinear extends MeterMixin(RtlMixin(LitElement)) {
86
85
  align-self: flex-end;
87
86
  }
88
87
 
89
- :host([dir="rtl"]) .d2l-meter-linear-primary-ltr {
88
+ .d2l-meter-linear-primary-ltr {
90
89
  direction: ltr;
91
90
  }
92
91
  `];
package/components/meter/meter-radial.js CHANGED
@@ -4,12 +4,11 @@ import { css, html, LitElement, nothing } from 'lit';
4
4
  import { classMap } from 'lit/directives/class-map.js';
5
5
  import { MeterMixin } from './meter-mixin.js';
6
6
  import { meterStyles } from './meter-styles.js';
7
- import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
8
7
 
9
8
  /**
10
9
  * A half-circle progress indicator.
11
10
  */
12
- class MeterRadial extends MeterMixin(RtlMixin(LitElement)) {
11
+ class MeterRadial extends MeterMixin(LitElement) {
13
12
  static get styles() {
14
13
  return [ heading4Styles, bodySmallStyles, meterStyles, css`
15
14
  :host {
package/components/meter/meter-styles.js CHANGED
@@ -34,7 +34,7 @@ export const meterStyles = css`
34
34
  color: white;
35
35
  fill: white;
36
36
  }
37
- :host([dir="rtl"]) .d2l-meter-text-ltr {
37
+ .d2l-meter-text-ltr {
38
38
  direction: ltr;
39
39
  }
40
40
  `;
package/components/object-property-list/object-property-list-item.js CHANGED
@@ -33,6 +33,7 @@ export class ObjectPropertyListItem extends SkeletonMixin(LitElement) {
33
33
  static get styles() {
34
34
  return [super.styles, css`
35
35
  :host {
36
+ unicode-bidi: isolate;
36
37
  vertical-align: middle;
37
38
  }
38
39
  :host([hidden]) {
package/components/skeleton/skeleton-mixin.js CHANGED
@@ -2,7 +2,6 @@ import '../colors/colors.js';
2
2
  import { css } from 'lit';
3
3
  import { dedupeMixin } from '@open-wc/dedupe-mixin';
4
4
  import { EventSubscriberController } from '../../controllers/subscriber/subscriberControllers.js';
5
- import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
6
5
 
7
6
  // DE50056: starting in Safari 16, the pulsing animation causes FACE
8
7
  // (and possibly elsewhere) to render a blank page
@@ -44,9 +43,15 @@ export const skeletonStyles = css`
44
43
  color: transparent;
45
44
  position: relative;
46
45
  }
46
+ :host([skeleton]) .d2l-skeletize-paragraph-2,
47
+ :host([skeleton]) .d2l-skeletize-paragraph-3,
48
+ :host([skeleton]) .d2l-skeletize-paragraph-5 {
49
+ color: transparent;
50
+ transform: var(--d2l-mirror-transform, ${document.dir === 'rtl' ? css`scale(-1, 1)` : css`none`}); /* stylelint-disable-line @stylistic/string-quotes, @stylistic/function-whitespace-after */
51
+ transform-origin: center;
52
+ }
47
53
  :host([skeleton]) .d2l-skeletize-paragraph-2 {
48
54
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cstyle%3E%0A%20%20%20%20%40keyframes%20loadingPulse%7B0%25%2C75%25%7Bfill%3A%23f1f5fb%7D50%25%7Bfill%3A%23f9fbff%7D%7D.skeleton%7Banimation%3AloadingPulse%201.8s%20linear%20infinite%3Bfill%3A%23f1f5fb%7D%0A%20%20%3C%2Fstyle%3E%0A%20%20%3Crect%20y%3D%2211%25%22%20width%3D%22100%25%22%20height%3D%2227%25%22%20rx%3D%224%22%20class%3D%22skeleton%22%2F%3E%0A%20%20%3Crect%20y%3D%2261%25%22%20width%3D%2290%25%22%20height%3D%2227%25%22%20rx%3D%224%22%20class%3D%22skeleton%22%2F%3E%0A%3C%2Fsvg%3E');
49
- color: transparent;
50
55
  }
51
56
  @media (prefers-reduced-motion: reduce) {
52
57
  :host([skeleton]) .d2l-skeletize-paragraph-2 {
@@ -59,7 +64,6 @@ export const skeletonStyles = css`
59
64
  }
60
65
  :host([skeleton]) .d2l-skeletize-paragraph-3 {
61
66
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cstyle%3E%0A%20%20%20%20%40keyframes%20loadingPulse%7B0%25%2C75%25%7Bfill%3A%23f1f5fb%7D50%25%7Bfill%3A%23f9fbff%7D%7D.skeleton%7Banimation%3AloadingPulse%201.8s%20linear%20infinite%3Bfill%3A%23f1f5fb%7D%0A%20%20%3C%2Fstyle%3E%0A%20%20%3Crect%20y%3D%227%25%22%20width%3D%22100%25%22%20height%3D%2218%25%22%20rx%3D%224%22%20class%3D%22skeleton%22%2F%3E%0A%20%20%3Crect%20y%3D%2240%25%22%20width%3D%22100%25%22%20height%3D%2218%25%22%20rx%3D%224%22%20class%3D%22skeleton%22%2F%3E%0A%20%20%3Crect%20y%3D%2274%25%22%20width%3D%2290%25%22%20height%3D%2218%25%22%20rx%3D%224%22%20class%3D%22skeleton%22%2F%3E%0A%3C%2Fsvg%3E');
62
- color: transparent;
63
67
  }
64
68
  @media (prefers-reduced-motion: reduce) {
65
69
  :host([skeleton]) .d2l-skeletize-paragraph-3 {
@@ -72,7 +76,6 @@ export const skeletonStyles = css`
72
76
  }
73
77
  :host([skeleton]) .d2l-skeletize-paragraph-5 {
74
78
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cstyle%3E%0A%20%20%20%20%40keyframes%20loadingPulse%7B0%25%2C75%25%7Bfill%3A%23f1f5fb%7D50%25%7Bfill%3A%23f9fbff%7D%7D.skeleton%7Banimation%3AloadingPulse%201.8s%20linear%20infinite%3Bfill%3A%23f1f5fb%7D%0A%20%20%3C%2Fstyle%3E%0A%20%20%3Crect%20y%3D%224%25%22%20width%3D%22100%25%22%20height%3D%2211%25%22%20rx%3D%224%22%20class%3D%22skeleton%22%2F%3E%0A%20%20%3Crect%20y%3D%2224%25%22%20width%3D%22100%25%22%20height%3D%2211%25%22%20rx%3D%224%22%20class%3D%22skeleton%22%2F%3E%0A%20%20%3Crect%20y%3D%2244%25%22%20width%3D%22100%25%22%20height%3D%2211%25%22%20rx%3D%224%22%20class%3D%22skeleton%22%2F%3E%0A%20%20%3Crect%20y%3D%2264%25%22%20width%3D%22100%25%22%20height%3D%2211%25%22%20rx%3D%224%22%20class%3D%22skeleton%22%2F%3E%0A%20%20%3Crect%20y%3D%2284%25%22%20width%3D%2290%25%22%20height%3D%2211%25%22%20rx%3D%224%22%20class%3D%22skeleton%22%2F%3E%0A%3C%2Fsvg%3E');
75
- color: transparent;
76
79
  }
77
80
  @media (prefers-reduced-motion: reduce) {
78
81
  :host([skeleton]) .d2l-skeletize-paragraph-5 {
@@ -83,12 +86,6 @@ export const skeletonStyles = css`
83
86
  content: '\\A \\A \\A \\A';
84
87
  white-space: pre;
85
88
  }
86
- :host([skeleton][dir="rtl"]) .d2l-skeletize-paragraph-2,
87
- :host([skeleton][dir="rtl"]) .d2l-skeletize-paragraph-3,
88
- :host([skeleton][dir="rtl"]) .d2l-skeletize-paragraph-5 {
89
- transform: scale(-1, 1);
90
- transform-origin: center;
91
- }
92
89
  :host([skeleton]) .d2l-skeletize-95::before {
93
90
  width: 95%;
94
91
  }
@@ -148,7 +145,7 @@ export const skeletonStyles = css`
148
145
  }
149
146
  `;
150
147
 
151
- export const SkeletonMixin = dedupeMixin(superclass => class extends RtlMixin(superclass) {
148
+ export const SkeletonMixin = dedupeMixin(superclass => class extends superclass {
152
149
 
153
150
  static get properties() {
154
151
  return {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.155.5",
3
+ "version": "3.155.7",
4
4
  "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
5
5
  "type": "module",
6
6
  "repository": "https://github.com/BrightspaceUI/core.git",