@brightspace-ui/core 3.155.8 → 3.155.10

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/components/inputs/input-date-range.js +1 -2
  2. package/components/inputs/input-date-time-range.js +1 -2
  3. package/components/inputs/input-date-time.js +4 -10
  4. package/components/inputs/input-percent.js +1 -2
  5. package/components/inputs/input-radio-spacer.js +2 -7
  6. package/components/inputs/input-search.js +2 -4
  7. package/components/inputs/input-styles.js +2 -10
  8. package/components/inputs/input-textarea.js +3 -9
  9. package/components/inputs/input-time-range.js +1 -2
  10. package/components/inputs/input-time.js +1 -2
  11. package/components/table/table-wrapper.js +27 -56
  12. package/package.json +1 -1
package/components/inputs/input-date-range.js CHANGED
@@ -10,7 +10,6 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
10
10
  import { ifDefined } from 'lit/directives/if-defined.js';
11
11
  import { InteractiveMixin } from '../../mixins/interactive/interactive-mixin.js';
12
12
  import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
13
- import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
14
13
  import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
15
14
 
16
15
  export function getShiftedEndDate(startValue, endValue, prevStartValue, inclusive) {
@@ -33,7 +32,7 @@ export function getShiftedEndDate(startValue, endValue, prevStartValue, inclusiv
33
32
  * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
34
33
  * @fires change - Dispatched when there is a change to selected start date or selected end date. `start-value` and `end-value` correspond to the selected values and are formatted in ISO 8601 calendar date format (`YYYY-MM-DD`).
35
34
  */
36
- class InputDateRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCoreElement(LitElement)))))) {
35
+ class InputDateRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitElement))))) {
37
36
 
38
37
  static get properties() {
39
38
  return {
package/components/inputs/input-date-time-range.js CHANGED
@@ -11,7 +11,6 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
11
11
  import { ifDefined } from 'lit/directives/if-defined.js';
12
12
  import { InteractiveMixin } from '../../mixins/interactive/interactive-mixin.js';
13
13
  import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
14
- import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
15
14
  import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
16
15
 
17
16
  function _isSameDate(date1, date2) {
@@ -66,7 +65,7 @@ export function getShiftedEndDateTime(startValue, endValue, prevStartValue, incl
66
65
  * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
67
66
  * @fires change - Dispatched when there is a change to selected start date-time or selected end date-time. `start-value` and `end-value` correspond to the selected values and are formatted in ISO 8601 combined date and time format (`YYYY-MM-DDTHH:mm:ss.sssZ`).
68
67
  */
69
- class InputDateTimeRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCoreElement(LitElement)))))) {
68
+ class InputDateTimeRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitElement))))) {
70
69
 
71
70
  static get properties() {
72
71
  return {
package/components/inputs/input-date-time.js CHANGED
@@ -21,7 +21,6 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
21
21
  import { ifDefined } from 'lit/directives/if-defined.js';
22
22
  import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
23
23
  import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
24
- import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
25
24
  import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
26
25
  import { styleMap } from 'lit/directives/style-map.js';
27
26
 
@@ -42,7 +41,7 @@ function _getFormattedDefaultTime(defaultValue) {
42
41
  * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
43
42
  * @fires change - Dispatched when there is a change to selected date or selected time. `value` corresponds to the selected value and is formatted in ISO 8601 combined date and time format (`YYYY-MM-DDTHH:mm:ss.sssZ`).
44
43
  */
45
- class InputDateTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(RtlMixin(LitElement)))))) {
44
+ class InputDateTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitElement))))) {
46
45
 
47
46
  static get properties() {
48
47
  return {
@@ -219,14 +218,9 @@ class InputDateTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMi
219
218
 
220
219
  const dateStyle = {};
221
220
  if (timeHidden) {
222
- dateStyle.paddingLeft = '0';
223
- dateStyle.paddingRight = '0';
224
- } else if (!timeHidden && this.dir === 'rtl') {
225
- dateStyle.paddingLeft = '0.3rem';
226
- dateStyle.paddingRight = '0';
227
- } else if (!timeHidden) {
228
- dateStyle.paddingLeft = '0';
229
- dateStyle.paddingRight = '0.3rem';
221
+ dateStyle.paddingInline = '0';
222
+ } else {
223
+ dateStyle.paddingInline = '0 0.3rem';
230
224
  }
231
225
 
232
226
  const dateOpened = this.opened && !this._timeOpened && !this.disabled && !this.skeleton;
package/components/inputs/input-percent.js CHANGED
@@ -5,7 +5,6 @@ import { FormElementMixin } from '../form/form-element-mixin.js';
5
5
  import { ifDefined } from 'lit/directives/if-defined.js';
6
6
  import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
7
7
  import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
8
- import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
9
8
  import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
10
9
 
11
10
  /**
@@ -14,7 +13,7 @@ import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
14
13
  * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
15
14
  * @fires change - Dispatched when an alteration to the value is committed (typically after focus is lost) by the user. The `value` attribute reflects a JavaScript Number which is parsed from the formatted input value.
16
15
  */
17
- class InputPercent extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(RtlMixin(LitElement)))))) {
16
+ class InputPercent extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitElement))))) {
18
17
 
19
18
  static get properties() {
20
19
  return {
package/components/inputs/input-radio-spacer.js CHANGED
@@ -1,11 +1,10 @@
1
1
  import { css, html, LitElement } from 'lit';
2
- import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
3
2
 
4
3
  /**
5
4
  * Used to align related content below radio buttons
6
5
  * @slot - Additional related content
7
6
  */
8
- class InputRadioSpacer extends RtlMixin(LitElement) {
7
+ class InputRadioSpacer extends LitElement {
9
8
 
10
9
  static get styles() {
11
10
  return css`
@@ -13,11 +12,7 @@ class InputRadioSpacer extends RtlMixin(LitElement) {
13
12
  box-sizing: border-box;
14
13
  display: block;
15
14
  margin-bottom: 0.9rem;
16
- padding-left: 1.7rem;
17
- }
18
- :host([dir="rtl"]) {
19
- padding-left: 0;
20
- padding-right: 1.7rem;
15
+ padding-inline-start: 1.7rem;
21
16
  }
22
17
  :host(.d2l-input-inline-help) {
23
18
  margin-bottom: 0.9rem !important;
package/components/inputs/input-search.js CHANGED
@@ -6,7 +6,6 @@ import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
6
6
  import { ifDefined } from 'lit/directives/if-defined.js';
7
7
  import { inputStyles } from './input-styles.js';
8
8
  import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
9
- import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
10
9
 
11
10
  export const INPUT_TIMEOUT_MS = 400;
12
11
  export const SUPPRESS_ENTER_TIMEOUT_MS = 1000;
@@ -16,7 +15,7 @@ export const SUPPRESS_ENTER_TIMEOUT_MS = 1000;
16
15
  * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
17
16
  * @fires d2l-input-search-searched - Dispatched when a search is performed. When the input is cleared, this will be fired with an empty value.
18
17
  */
19
- class InputSearch extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
18
+ class InputSearch extends FocusMixin(LocalizeCoreElement(LitElement)) {
20
19
 
21
20
  static get properties() {
22
21
  return {
@@ -81,8 +80,7 @@ class InputSearch extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement)))
81
80
  --d2l-button-icon-min-width: 1.5rem;
82
81
  --d2l-button-icon-border-radius: 4px;
83
82
  --d2l-focus-ring-offset: 1px;
84
- margin-left: 0.3rem;
85
- margin-right: 0.3rem;
83
+ margin-inline: 0.3rem;
86
84
  }
87
85
  `
88
86
  ];
package/components/inputs/input-styles.js CHANGED
@@ -92,7 +92,7 @@ export const inputStyles = css`
92
92
  }
93
93
  textarea.d2l-input[aria-invalid="true"] {
94
94
  background-image: ${invalidIcon};
95
- background-position: top 12px right 18px;
95
+ background-position: top 12px var(--d2l-inline-end, right) 18px;
96
96
  background-repeat: no-repeat;
97
97
  background-size: 0.8rem 0.8rem;
98
98
  padding-inline-end: calc(18px + 0.8rem);
@@ -100,17 +100,9 @@ export const inputStyles = css`
100
100
  textarea.d2l-input-focus[aria-invalid="true"],
101
101
  textarea.d2l-input[aria-invalid="true"]:hover,
102
102
  textarea.d2l-input[aria-invalid="true"]:${focusClass} {
103
- background-position: top calc(12px - 1px) right calc(18px - 1px);
103
+ background-position: top calc(12px - 1px) var(--d2l-inline-end, right) calc(18px - 1px);
104
104
  padding-inline-end: calc(18px + 0.8rem - 1px);
105
105
  }
106
- :host([dir="rtl"]) textarea.d2l-input[aria-invalid="true"] {
107
- background-position: top 12px left 18px;
108
- }
109
- :host([dir="rtl"]) textarea.d2l-input-focus[aria-invalid="true"],
110
- :host([dir="rtl"]) textarea.d2l-input[aria-invalid="true"]:${focusClass},
111
- :host([dir="rtl"]) textarea.d2l-input[aria-invalid="true"]:hover {
112
- background-position: top calc(12px - 1px) left calc(18px - 1px);
113
- }
114
106
  textarea[aria-invalid="true"].d2l-input:disabled {
115
107
  background-image: none;
116
108
  }
package/components/inputs/input-textarea.js CHANGED
@@ -11,7 +11,6 @@ import { inputLabelStyles } from './input-label-styles.js';
11
11
  import { inputStyles } from './input-styles.js';
12
12
  import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
13
13
  import { offscreenStyles } from '../offscreen/offscreen.js';
14
- import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
15
14
  import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
16
15
  import { styleMap } from 'lit/directives/style-map.js';
17
16
 
@@ -21,7 +20,7 @@ import { styleMap } from 'lit/directives/style-map.js';
21
20
  * @fires change - Dispatched when an alteration to the value is committed (typically after focus is lost) by the user
22
21
  * @fires input - Dispatched immediately after changes by the user
23
22
  */
24
- class InputTextArea extends InputInlineHelpMixin(FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixin(LitElement)))))) {
23
+ class InputTextArea extends InputInlineHelpMixin(FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(LitElement))))) {
25
24
 
26
25
  static get properties() {
27
26
  return {
@@ -132,8 +131,7 @@ class InputTextArea extends InputInlineHelpMixin(FocusMixin(LabelledMixin(FormEl
132
131
  visibility: hidden;
133
132
  }
134
133
  :host([no-padding]) .d2l-input {
135
- padding-left: 0;
136
- padding-right: 0;
134
+ padding-inline: 0;
137
135
  }
138
136
  :host([no-border][no-padding]) textarea.d2l-input:hover,
139
137
  :host([no-border][no-padding]) textarea.d2l-input:focus {
@@ -141,11 +139,7 @@ class InputTextArea extends InputInlineHelpMixin(FocusMixin(LabelledMixin(FormEl
141
139
  border-right-width: 1px;
142
140
  }
143
141
  .d2l-input-textarea-mirror[aria-invalid="true"] {
144
- padding-right: calc(18px + 0.8rem);
145
- }
146
- :host([dir="rtl"]) .d2l-input-textarea-mirror[aria-invalid="true"] {
147
- padding-left: calc(18px + 0.8rem);
148
- padding-right: 0.75rem;
142
+ padding-inline-end: calc(18px + 0.8rem);
149
143
  }
150
144
  `];
151
145
  }
package/components/inputs/input-time-range.js CHANGED
@@ -9,7 +9,6 @@ import { FormElementMixin } from '../form/form-element-mixin.js';
9
9
  import { getUniqueId } from '../../helpers/uniqueId.js';
10
10
  import { ifDefined } from 'lit/directives/if-defined.js';
11
11
  import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
12
- import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
13
12
  import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
14
13
 
15
14
  export function getShiftedEndTime(startValue, endValue, prevStartValue, inclusive) {
@@ -40,7 +39,7 @@ function getValidISOTimeAtInterval(val, timeInterval) {
40
39
  * @fires change - Dispatched when there is a change to selected start time or selected end time. `start-value` and `end-value` correspond to the selected values and are formatted in ISO 8601 calendar time format (`hh:mm:ss`).
41
40
  */
42
41
 
43
- class InputTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(LocalizeCoreElement(LitElement))))) {
42
+ class InputTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(LocalizeCoreElement(LitElement)))) {
44
43
 
45
44
  static get properties() {
46
45
  return {
package/components/inputs/input-time.js CHANGED
@@ -17,7 +17,6 @@ import { inputStyles } from './input-styles.js';
17
17
  import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
18
18
  import { offscreenStyles } from '../offscreen/offscreen.js';
19
19
  import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
20
- import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
21
20
  import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
22
21
 
23
22
  const MIDNIGHT = new Date(2020, 0, 1, 0, 0, 0);
@@ -120,7 +119,7 @@ function initIntervals(size, enforceTimeIntervals) {
120
119
  * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
121
120
  * @fires change - Dispatched when there is a change to selected time. `value` corresponds to the selected value and is formatted in ISO 8601 time format (`hh:mm:ss`).
122
121
  */
123
- class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(RtlMixin(LitElement)))))) {
122
+ class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(LitElement))))) {
124
123
 
125
124
  static get properties() {
126
125
  return {
package/components/table/table-wrapper.js CHANGED
@@ -6,7 +6,6 @@ import { getComposedParent } from '../../helpers/dom.js';
6
6
  import { getFlag } from '../../helpers/flags.js';
7
7
  import { PageableMixin } from '../paging/pageable-mixin.js';
8
8
  import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
9
- import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
10
9
  import { SelectionMixin } from '../selection/selection-mixin.js';
11
10
 
12
11
  const colSyncFix = getFlag('GAUD-8228-8186-improved-table-col-sync', true);
@@ -31,12 +30,9 @@ export const tableStyles = css`
31
30
  font-weight: inherit;
32
31
  height: var(--d2l-table-cell-height);
33
32
  padding: var(--d2l-table-cell-padding);
34
- text-align: left;
33
+ text-align: start;
35
34
  vertical-align: middle;
36
35
  }
37
- d2l-table-wrapper[dir="rtl"] .d2l-table > * > tr > * {
38
- text-align: right;
39
- }
40
36
  d2l-table-wrapper d2l-button-icon {
41
37
  --d2l-button-icon-min-height: calc(var(--d2l-table-cell-overall-height) - 2 * var(--d2l-table-cell-col-sort-button-size-offset));
42
38
  --d2l-button-icon-min-width: calc(var(--d2l-table-cell-overall-height) - 2 * var(--d2l-table-cell-col-sort-button-size-offset));
@@ -75,13 +71,11 @@ export const tableStyles = css`
75
71
  }
76
72
 
77
73
  /* default cells */
78
- d2l-table-wrapper[type="default"]:not([dir="rtl"]) .d2l-table > * > tr > *,
79
- d2l-table-wrapper[type="default"][dir="rtl"] .d2l-table > * > tr > .d2l-table-cell-first {
80
- border-right: var(--d2l-table-border);
74
+ d2l-table-wrapper[type="default"] .d2l-table > * > tr > * {
75
+ border-inline-end: var(--d2l-table-border);
81
76
  }
82
- d2l-table-wrapper[type="default"][dir="rtl"] .d2l-table > * > tr > *,
83
- d2l-table-wrapper[type="default"]:not([dir="rtl"]) .d2l-table > * > tr > .d2l-table-cell-first {
84
- border-left: var(--d2l-table-border);
77
+ d2l-table-wrapper[type="default"] .d2l-table > * > tr > .d2l-table-cell-first {
78
+ border-inline-start: var(--d2l-table-border);
85
79
  }
86
80
  d2l-table-wrapper[type="default"] .d2l-table-row-first > * {
87
81
  border-top: var(--d2l-table-border); /* add top border to default first row */
@@ -139,34 +133,28 @@ export const tableStyles = css`
139
133
  }
140
134
 
141
135
  /* border radiuses */
142
- d2l-table-wrapper[type="default"]:not([dir="rtl"]) .d2l-table-row-first > .d2l-table-cell-first,
143
- d2l-table-wrapper[type="default"][dir="rtl"] .d2l-table-row-first > .d2l-table-cell-last {
144
- border-top-left-radius: var(--d2l-table-border-radius);
136
+ d2l-table-wrapper[type="default"] .d2l-table-row-first > .d2l-table-cell-first {
137
+ border-start-start-radius: var(--d2l-table-border-radius);
145
138
  }
146
- d2l-table-wrapper[type="default"]:not([dir="rtl"]) .d2l-table-row-first > .d2l-table-cell-last,
147
- d2l-table-wrapper[type="default"][dir="rtl"] .d2l-table-row-first > .d2l-table-cell-first {
148
- border-top-right-radius: var(--d2l-table-border-radius);
139
+ d2l-table-wrapper[type="default"] .d2l-table-row-first > .d2l-table-cell-last {
140
+ border-start-end-radius: var(--d2l-table-border-radius);
149
141
  }
150
- d2l-table-wrapper[type="default"]:not([dir="rtl"]) .d2l-table-row-last > .d2l-table-cell-first,
151
- d2l-table-wrapper[type="default"][dir="rtl"] .d2l-table-row-last > .d2l-table-cell-last {
152
- border-bottom-left-radius: var(--d2l-table-border-radius);
142
+ d2l-table-wrapper[type="default"] .d2l-table-row-last > .d2l-table-cell-first {
143
+ border-end-start-radius: var(--d2l-table-border-radius);
153
144
  }
154
- d2l-table-wrapper[type="default"]:not([dir="rtl"]) .d2l-table-row-last > .d2l-table-cell-last,
155
- d2l-table-wrapper[type="default"][dir="rtl"] .d2l-table-row-last > .d2l-table-cell-first {
156
- border-bottom-right-radius: var(--d2l-table-border-radius);
145
+ d2l-table-wrapper[type="default"] .d2l-table-row-last > .d2l-table-cell-last {
146
+ border-end-end-radius: var(--d2l-table-border-radius);
157
147
  }
158
148
 
159
149
  /* selected rows */
160
150
  .d2l-table > tbody > tr[selected] {
161
151
  background-color: var(--d2l-table-row-background-color-selected);
162
152
  }
163
- d2l-table-wrapper[type="default"]:not([dir="rtl"]) .d2l-table > tbody > tr[selected] > .d2l-table-cell-last,
164
- d2l-table-wrapper[type="default"][dir="rtl"] .d2l-table > tbody > tr[selected] > .d2l-table-cell-first {
165
- border-right-color: var(--d2l-table-row-border-color-selected);
153
+ d2l-table-wrapper[type="default"] .d2l-table > tbody > tr[selected] > .d2l-table-cell-last {
154
+ border-inline-end-color: var(--d2l-table-row-border-color-selected);
166
155
  }
167
- d2l-table-wrapper[type="default"]:not([dir="rtl"]) .d2l-table > tbody > tr[selected] > .d2l-table-cell-first,
168
- d2l-table-wrapper[type="default"][dir="rtl"] .d2l-table > tbody > tr[selected] > .d2l-table-cell-last {
169
- border-left-color: var(--d2l-table-row-border-color-selected);
156
+ d2l-table-wrapper[type="default"] .d2l-table > tbody > tr[selected] > .d2l-table-cell-first {
157
+ border-inline-start-color: var(--d2l-table-row-border-color-selected);
170
158
  }
171
159
  .d2l-table > tbody > tr[selected] > *,
172
160
  .d2l-table > * > tr.d2l-table-selected-previous > * {
@@ -178,17 +166,11 @@ export const tableStyles = css`
178
166
  }
179
167
 
180
168
  /* no-column-border */
181
- d2l-table-wrapper[type="default"][no-column-border]:not([dir="rtl"]) .d2l-table > tbody > tr > *:not(.d2l-table-cell-last),
182
- d2l-table-wrapper[type="default"]:not([dir="rtl"]) .d2l-table[no-column-border] > tbody > tr > *:not(.d2l-table-cell-last),
183
- d2l-table-wrapper[type="default"][no-column-border]:not([dir="rtl"]) .d2l-table > thead > tr > *:not(.d2l-table-cell-last),
184
- d2l-table-wrapper[type="default"]:not([dir="rtl"]) .d2l-table[no-column-border] > thead > tr > *:not(.d2l-table-cell-last) {
185
- border-right: none;
186
- }
187
- d2l-table-wrapper[type="default"][no-column-border][dir="rtl"] .d2l-table > tbody > tr > *:not(.d2l-table-cell-last),
188
- d2l-table-wrapper[type="default"][dir="rtl"] .d2l-table[no-column-border] > tbody > tr > *:not(.d2l-table-cell-last),
189
- d2l-table-wrapper[type="default"][no-column-border][dir="rtl"] .d2l-table > thead > tr > *:not(.d2l-table-cell-last),
190
- d2l-table-wrapper[type="default"][dir="rtl"] .d2l-table[no-column-border] > thead > tr > *:not(.d2l-table-cell-last) {
191
- border-left: none;
169
+ d2l-table-wrapper[type="default"][no-column-border] .d2l-table > tbody > tr > *:not(.d2l-table-cell-last),
170
+ d2l-table-wrapper[type="default"] .d2l-table[no-column-border] > tbody > tr > *:not(.d2l-table-cell-last),
171
+ d2l-table-wrapper[type="default"][no-column-border] .d2l-table > thead > tr > *:not(.d2l-table-cell-last),
172
+ d2l-table-wrapper[type="default"] .d2l-table[no-column-border] > thead > tr > *:not(.d2l-table-cell-last) {
173
+ border-inline-end: none;
192
174
  }
193
175
 
194
176
  /* sticky-headers */
@@ -196,18 +178,11 @@ export const tableStyles = css`
196
178
  /* all sticky cells */
197
179
  d2l-table-wrapper[sticky-headers] .d2l-table > * > tr > .d2l-table-sticky-cell,
198
180
  d2l-table-wrapper[sticky-headers] .d2l-table > * > tr > [sticky] {
181
+ inset-inline-start: 0;
199
182
  position: -webkit-sticky;
200
183
  position: sticky;
201
184
  z-index: 1;
202
185
  }
203
- d2l-table-wrapper:not([dir="rtl"])[sticky-headers] .d2l-table > * > tr > .d2l-table-sticky-cell,
204
- d2l-table-wrapper:not([dir="rtl"])[sticky-headers] .d2l-table > * > tr > [sticky] {
205
- left: 0;
206
- }
207
- d2l-table-wrapper[dir="rtl"][sticky-headers] .d2l-table > * > tr > .d2l-table-sticky-cell,
208
- d2l-table-wrapper[dir="rtl"][sticky-headers] .d2l-table > * > tr > [sticky] {
209
- right: 0;
210
- }
211
186
 
212
187
  /* non-header sticky cells */
213
188
  d2l-table-wrapper[sticky-headers] .d2l-table > * > tr:not([selected]) {
@@ -241,13 +216,9 @@ export const tableStyles = css`
241
216
  }
242
217
 
243
218
  /* first column that's sticky: offset by size of border-radius so top/bottom border doesn't show through (default style only) */
244
- d2l-table-wrapper[sticky-headers][type="default"]:not([dir="rtl"]) .d2l-table > * > tr > .d2l-table-sticky-cell.d2l-table-cell-first,
245
- d2l-table-wrapper[sticky-headers][type="default"]:not([dir="rtl"]) .d2l-table > * > tr > [sticky].d2l-table-cell-first {
246
- left: var(--d2l-table-border-radius-sticky-offset, 0);
247
- }
248
- d2l-table-wrapper[sticky-headers][type="default"][dir="rtl"] .d2l-table > * > tr > .d2l-table-sticky-cell.d2l-table-cell-first,
249
- d2l-table-wrapper[sticky-headers][type="default"][dir="rtl"] .d2l-table > * > tr > [sticky].d2l-table-cell-first {
250
- right: var(--d2l-table-border-radius-sticky-offset, 0);
219
+ d2l-table-wrapper[sticky-headers][type="default"] .d2l-table > * > tr > .d2l-table-sticky-cell.d2l-table-cell-first,
220
+ d2l-table-wrapper[sticky-headers][type="default"] .d2l-table > * > tr > [sticky].d2l-table-cell-first {
221
+ inset-inline-start: var(--d2l-table-border-radius-sticky-offset, 0);
251
222
  }
252
223
 
253
224
  /* sticky + scroll-wrapper */
@@ -296,7 +267,7 @@ const SELECTORS = {
296
267
  * @slot controls - Slot for `d2l-table-controls` to be rendered above the table
297
268
  * @slot pager - Slot for `d2l-pager-load-more` to be rendered below the table
298
269
  */
299
- export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitElement))) {
270
+ export class TableWrapper extends PageableMixin(SelectionMixin(LitElement)) {
300
271
 
301
272
  static get properties() {
302
273
  return {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.155.8",
3
+ "version": "3.155.10",
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",