@brightspace-ui/core 3.142.0 → 3.142.1

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.
@@ -45,6 +45,8 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
45
45
  --d2l-button-add-animation-duration: 200ms;
46
46
  --d2l-button-add-hover-focus-color: var(--d2l-color-celestine-minus-1);
47
47
  --d2l-button-add-line-color: var(--d2l-color-mica);
48
+ --d2l-button-add-line-height: 1px;
49
+ --d2l-button-add-hover-focus-line-height: 2px;
48
50
  }
49
51
  :host([mode="icon-when-interacted"]) {
50
52
  --d2l-button-add-animation-delay: 50ms;
@@ -74,7 +76,7 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
74
76
 
75
77
  .line {
76
78
  background: var(--d2l-button-add-line-color);
77
- height: 1px;
79
+ height: var(--d2l-button-add-line-height);
78
80
  margin: 5px 0;
79
81
  width: 100%;
80
82
  }
@@ -82,7 +84,7 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
82
84
  button:hover .line,
83
85
  button:focus .line {
84
86
  background: var(--d2l-button-add-hover-focus-color);
85
- height: 2px;
87
+ height: var(--d2l-button-add-hover-focus-line-height);
86
88
  }
87
89
  button:hover d2l-button-add-icon-text,
88
90
  button:focus d2l-button-add-icon-text {
@@ -139,21 +141,21 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
139
141
 
140
142
  @keyframes line-start-animation {
141
143
  0% {
142
- background: linear-gradient(to right, var(--d2l-color-mica) 0%, var(--d2l-color-mica) 11%, var(--d2l-button-add-hover-focus-color) 11%) left center / 113%;
144
+ background: linear-gradient(to right, var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) left center / 113%;
143
145
  opacity: 10%;
144
146
  }
145
147
  100% {
146
- background: linear-gradient(to right, var(--d2l-color-mica) 0%, var(--d2l-color-mica) 11%, var(--d2l-button-add-hover-focus-color) 11%) left center / 113%; /* safari */
148
+ background: linear-gradient(to right, var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) left center / 113%; /* safari */
147
149
  background-position: right;
148
150
  }
149
151
  }
150
152
  @keyframes line-end-animation {
151
153
  0% {
152
- background: linear-gradient(to left, var(--d2l-color-mica) 0%, var(--d2l-color-mica) 11%, var(--d2l-button-add-hover-focus-color) 11%) right center / 113%;
154
+ background: linear-gradient(to left, var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) right center / 113%;
153
155
  opacity: 10%;
154
156
  }
155
157
  100% {
156
- background: linear-gradient(to left, var(--d2l-color-mica) 0%, var(--d2l-color-mica) 11%, var(--d2l-button-add-hover-focus-color) 11%) right center / 113%; /* safari */
158
+ background: linear-gradient(to left, var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) right center / 113%; /* safari */
157
159
  background-position: left;
158
160
  }
159
161
  }
@@ -84,6 +84,10 @@ export const ListItemMixin = superclass => class extends composeMixins(
84
84
  * @type {boolean}
85
85
  */
86
86
  dragTargetHandleOnly: { type: Boolean, attribute: 'drag-target-handle-only' },
87
+ /**
88
+ * @ignore
89
+ */
90
+ last: { type: Boolean, reflect: true },
87
91
  /**
88
92
  * Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.
89
93
  * @type {boolean}
@@ -18,6 +18,8 @@ export const ListItemNavMixin = superclass => class extends ListItemLinkMixin(su
18
18
  preventNavigation: { type: Boolean, attribute: 'prevent-navigation' },
19
19
  _childCurrent: { type: Boolean, reflect: true, attribute: '_child-current' },
20
20
  _focusingElem: { type: Boolean, reflect: true, attribute: '_focusing-elem' },
21
+ _hasCurrentParent: { type: Boolean, reflect: true, attribute: '_has-current-parent' },
22
+ _nextSiblingCurrent: { type: Boolean, reflect: true, attribute: '_next-sibling-current' },
21
23
  };
22
24
  }
23
25
 
@@ -44,6 +46,26 @@ export const ListItemNavMixin = superclass => class extends ListItemLinkMixin(su
44
46
  --d2l-list-item-content-text-color: var(--d2l-color-ferrite);
45
47
  --d2l-list-item-content-text-decoration: none;
46
48
  }
49
+ :host([current]) d2l-button-add,
50
+ :host([_has-current-parent]) [slot="add-top"] d2l-button-add,
51
+ :host([_next-sibling-current]) [slot="add"] d2l-button-add {
52
+ --d2l-button-add-hover-focus-line-height: 3px;
53
+ --d2l-button-add-line-color: var(--d2l-color-celestine);
54
+ --d2l-button-add-line-height: 3px;
55
+ }
56
+ :host([current]) [slot="add"],
57
+ :host([_has-current-parent]) [slot="add-top"] {
58
+ margin-bottom: -14.5px;
59
+ margin-top: -13.5px;
60
+ }
61
+ :host([current]) [slot="add-top"],
62
+ :host([_next-sibling-current]) [slot="add"] {
63
+ margin-bottom: -13.5px;
64
+ margin-top: -10.5px;
65
+ }
66
+ :host([current]) .d2l-list-item-color-outer {
67
+ padding-block: 3px;
68
+ }
47
69
 
48
70
  /* clean up with GAUD-7495-list-item-new-styles flag */
49
71
  @supports selector(:has(a, b)) {
@@ -70,6 +92,8 @@ export const ListItemNavMixin = superclass => class extends ListItemLinkMixin(su
70
92
  this.current = false;
71
93
  this._childCurrent = false;
72
94
  this._focusingElem = false;
95
+ this._hasCurrentParent = false;
96
+ this._nextSiblingCurrent = false;
73
97
  }
74
98
 
75
99
  connectedCallback() {
@@ -120,6 +144,24 @@ export const ListItemNavMixin = superclass => class extends ListItemLinkMixin(su
120
144
  dispatchSetChildCurrentEvent(val) {
121
145
  /** @ignore */
122
146
  this.dispatchEvent(new CustomEvent('d2l-list-item-nav-set-child-current', { bubbles: true, composed: true, detail: { value: val } }));
147
+
148
+ if (!val) return;
149
+ requestAnimationFrame(() => {
150
+ if (this._hasNestedListAddButton) {
151
+ const firstChild = this.querySelector('[first]');
152
+ if (firstChild) firstChild._hasCurrentParent = true;
153
+ }
154
+
155
+ const prevSibling = this._getPreviousListItemSibling();
156
+ if (prevSibling) {
157
+ if (prevSibling._showAddButton) prevSibling._nextSiblingCurrent = true;
158
+
159
+ if (prevSibling._hasNestedListAddButton) {
160
+ const lastChild = prevSibling.querySelector('[last]');
161
+ if (lastChild) lastChild._nextSiblingCurrent = true;
162
+ }
163
+ }
164
+ });
123
165
  }
124
166
 
125
167
  _handleLinkClick(e) {
@@ -416,6 +416,15 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
416
416
  target.dispatchSetChildCurrentEvent(true);
417
417
  }, { once: true });
418
418
  prevCurrent.current = false;
419
+ const firstChild = this.querySelector('[_has-current-parent]');
420
+ if (firstChild) firstChild._hasCurrentParent = false;
421
+
422
+ const prevSiblings = this.querySelectorAll('[_next-sibling-current]');
423
+ if (prevSiblings.length > 0) {
424
+ prevSiblings.forEach(sibling => {
425
+ sibling._nextSiblingCurrent = false;
426
+ });
427
+ }
419
428
  } else {
420
429
  target.dispatchSetChildCurrentEvent(true);
421
430
  }
@@ -437,9 +446,21 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
437
446
 
438
447
  _handleSlotChange() {
439
448
  this._updateItemShowingCount();
440
- this.getItems().forEach((item, i) => {
441
- if (i === 0) item.first = true;
442
- else item.first = false;
449
+ const items = this.getItems();
450
+ items.forEach((item, i) => {
451
+ if (items.length === 1) {
452
+ item.first = true;
453
+ item.last = true;
454
+ } else if (i === 0) {
455
+ item.first = true;
456
+ item.last = false;
457
+ } else if (i === items.length - 1) {
458
+ item.first = false;
459
+ item.last = true;
460
+ } else {
461
+ item.first = false;
462
+ item.last = false;
463
+ }
443
464
  });
444
465
 
445
466
  /** @ignore */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.142.0",
3
+ "version": "3.142.1",
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",