@brightspace-ui/core 3.155.6 → 3.155.8

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 (8) 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/object-property-list/object-property-list-item.js +1 -0
  6. package/components/scroll-wrapper/scroll-wrapper.js +12 -22
  7. package/components/skeleton/skeleton-mixin.js +8 -11
  8. package/package.json +2 -2
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/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/scroll-wrapper/scroll-wrapper.js CHANGED
@@ -5,7 +5,6 @@ import { classMap } from 'lit/directives/class-map.js';
5
5
  import { getFlag } from '../../helpers/flags.js';
6
6
  import { getFocusRingStyles } from '../../helpers/focus.js';
7
7
  import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
8
- import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
9
8
 
10
9
  export const printMediaQueryOnlyFlag = getFlag('GAUD-8263-scroll-wrapper-media-print', false);
11
10
 
@@ -44,7 +43,7 @@ function getStyleSheetInsertionPoint(elem) {
44
43
  * Wraps content which may overflow its horizontal boundaries, providing left/right scroll buttons.
45
44
  * @slot - User provided content to wrap
46
45
  */
47
- class ScrollWrapper extends RtlMixin(LitElement) {
46
+ class ScrollWrapper extends LitElement {
48
47
 
49
48
  static get properties() {
50
49
  return {
@@ -97,32 +96,23 @@ class ScrollWrapper extends RtlMixin(LitElement) {
97
96
  overflow-y: var(--d2l-scroll-wrapper-overflow-y, visible);
98
97
  }
99
98
  :host([h-scrollbar]) .d2l-scroll-wrapper-container {
100
- border-left: 1px dashed var(--d2l-color-mica);
101
- border-right: 1px dashed var(--d2l-color-mica);
99
+ border-inline: 1px dashed var(--d2l-color-mica);
102
100
  }
103
101
  :host([h-scrollbar][hide-actions]) .d2l-scroll-wrapper-container {
104
- border-left: none;
105
- border-right: none;
102
+ border-inline: none;
106
103
  }
107
- :host([dir="rtl"][scrollbar-right]) .d2l-scroll-wrapper-container,
108
- :host(:not([dir="rtl"])[scrollbar-left]) .d2l-scroll-wrapper-container {
109
- border-left: none;
104
+ :host([scrollbar-left]) .d2l-scroll-wrapper-container {
105
+ border-inline-start: none;
110
106
  }
111
- :host([dir="rtl"][scrollbar-left]) .d2l-scroll-wrapper-container,
112
- :host(:not([dir="rtl"])[scrollbar-right]) .d2l-scroll-wrapper-container {
113
- border-right: none;
107
+ :host([scrollbar-right]) .d2l-scroll-wrapper-container {
108
+ border-inline-end: none;
114
109
  }
115
110
 
116
- :host([dir="rtl"]) .d2l-scroll-wrapper-button-left,
117
- .d2l-scroll-wrapper-button-right {
118
- left: auto;
119
- right: -10px;
120
- }
121
-
122
- :host([dir="rtl"]) .d2l-scroll-wrapper-button-right,
123
111
  .d2l-scroll-wrapper-button-left {
124
- left: -10px;
125
- right: auto;
112
+ inset-inline-start: -10px;
113
+ }
114
+ .d2l-scroll-wrapper-button-right {
115
+ inset-inline-end: -10px;
126
116
  }
127
117
 
128
118
  .d2l-scroll-wrapper-actions {
@@ -270,7 +260,7 @@ class ScrollWrapper extends RtlMixin(LitElement) {
270
260
 
271
261
  scrollDistance(distance, smooth) {
272
262
  if (!this._container) return;
273
- if (this.dir === 'rtl') distance = distance * RTL_MULTIPLIER;
263
+ if (document.documentElement.getAttribute('dir') === 'rtl') distance = distance * RTL_MULTIPLIER;
274
264
  if (this._container.scrollBy) {
275
265
  this._container.scrollBy({ left: distance, behavior: smooth ? 'smooth' : 'auto' });
276
266
  } else {
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.6",
3
+ "version": "3.155.8",
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",
@@ -54,7 +54,7 @@
54
54
  "chalk": "^5",
55
55
  "eslint": "^9",
56
56
  "eslint-config-brightspace": "^2.0.0",
57
- "eslint-plugin-unicorn": "^59",
57
+ "eslint-plugin-unicorn": "^60",
58
58
  "glob-all": "^3",
59
59
  "messageformat-validator": "^3.0.0-beta",
60
60
  "rollup": "^4",