@brightspace-ui/core 3.183.0 → 3.184.0

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 (10) hide show
  1. package/components/list/README.md +1 -0
  2. package/components/list/demo/demo-list-nested.js +4 -1
  3. package/components/list/demo/list-drag-and-drop.html +8 -0
  4. package/components/list/demo/list-layout.html +67 -0
  5. package/components/list/list-item-drag-drop-mixin.js +42 -35
  6. package/components/list/list-item-generic-layout.js +41 -1
  7. package/components/list/list-item-mixin.js +30 -1
  8. package/components/list/list.js +34 -0
  9. package/custom-elements.json +33 -0
  10. package/package.json +1 -1
package/components/list/README.md CHANGED
@@ -145,6 +145,7 @@ The `d2l-list` is the container to create a styled list of items using `d2l-list
145
145
  |---|---|---|
146
146
  | `breakpoints` | Array | Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used. |
147
147
  | `drag-multiple` | Boolean | Whether the user can drag multiple items |
148
+ | `drop-nested-only` | Boolean | Whether draggable items can only be dropped as nested items within other items. Disables keyboard drag and drop on all items. |
148
149
  | `grid` | Boolean | Enables keyboard grid for supported list items. See [Accessibility](#accessibility). |
149
150
  | `label` | String | Sets an accessible label. For use when the list context is unclear. This property is only valid on top-level lists and will have no effect on nested lists. |
150
151
  | `selection-single` | Boolean | Whether to render with single selection behaviour. If `selection-single` is specified, the list-items will render with radios instead of checkboxes, and the list component will maintain a single selected item. |
package/components/list/demo/demo-list-nested.js CHANGED
@@ -25,6 +25,7 @@ class ListDemoNested extends LitElement {
25
25
  selectable: { type: Boolean },
26
26
  keyboardDragDisabled: { type: Boolean, attribute: 'keyboard-drag-disabled' },
27
27
  disableExpandFeature: { type: Boolean, attribute: 'disable-expand-feature' },
28
+ dropNestedOnly: { type: Boolean, attribute: 'drop-nested-only' },
28
29
  expanded: { type: Boolean },
29
30
  includeSecondaryActions: { type: Boolean, attribute: 'include-secondary-actions' },
30
31
  includeListControls: { type: Boolean, attribute: 'include-list-controls' },
@@ -174,7 +175,9 @@ class ListDemoNested extends LitElement {
174
175
  return html`
175
176
  <d2l-list
176
177
  ?grid="${!this.disableListGrid}"
177
- drag-multiple slot="${ifDefined(nested ? 'nested' : undefined)}"
178
+ drag-multiple
179
+ ?drop-nested-only="${this.dropNestedOnly}"
180
+ slot="${ifDefined(nested ? 'nested' : undefined)}"
178
181
  item-count="${this._items.length}"
179
182
  ?add-button="${this.addButton}">
180
183
  ${ includeControls ? this._renderListControls() : nothing }
package/components/list/demo/list-drag-and-drop.html CHANGED
@@ -46,6 +46,14 @@
46
46
  </template>
47
47
  </d2l-demo-snippet>
48
48
 
49
+ <h2>Drop Nested Only</h2>
50
+
51
+ <d2l-demo-snippet>
52
+ <template>
53
+ <d2l-demo-list-nested drop-nested-only demo-item-key="imgPrimaryAndSupporting" is-draggable selectable></d2l-demo-list-nested>
54
+ </template>
55
+ </d2l-demo-snippet>
56
+
49
57
  <h2>Disable Keyboard Drag</h2>
50
58
 
51
59
  <d2l-demo-snippet>
package/components/list/demo/list-layout.html ADDED
@@ -0,0 +1,67 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
+ <meta charset="UTF-8">
6
+ <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
7
+ <script type="module">
8
+ import '../../demo/demo-page.js';
9
+ import '../../button/button-subtle.js';
10
+ import '../../button/button-toggle.js';
11
+ import '../list-item-content.js';
12
+ import '../list-item.js';
13
+ import '../list.js';
14
+ </script>
15
+ <style>
16
+ d2l-button-toggle {
17
+ margin-block-end: 0.9rem;
18
+ }
19
+ </style>
20
+ </head>
21
+ <body unresolved>
22
+ <d2l-demo-page page-title="d2l-list">
23
+
24
+ <h2>Layout</h2>
25
+
26
+ <d2l-demo-snippet>
27
+ <template>
28
+ <d2l-button-toggle pressed>
29
+ <d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
30
+ <d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
31
+ </d2l-button-toggle>
32
+ <d2l-list layout="tiles">
33
+ <d2l-list-item label="item 1">
34
+ <d2l-list-item-content>
35
+ <div>Identify categories of physical activities</div>
36
+ <div slot="secondary">Secondary Information</div>
37
+ <div slot="supporting-info">Specific Expectation A1.2</div>
38
+ </d2l-list-item-content>
39
+ </d2l-list-item>
40
+ <d2l-list-item label="item 2">
41
+ <d2l-list-item-content>
42
+ <div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
43
+ <div slot="secondary">Secondary Information</div>
44
+ <div slot="supporting-info">Specific Expectation B2.1</div>
45
+ </d2l-list-item-content>
46
+ </d2l-list-item>
47
+ <d2l-list-item label="item 3">
48
+ <d2l-list-item-content>
49
+ <div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
50
+ <div slot="secondary">Secondary Information</div>
51
+ <div slot="supporting-info">Specific Expectation B2.2</div>
52
+ </d2l-list-item-content>
53
+ </d2l-list-item>
54
+ </d2l-list>
55
+ <script data-demo-hide>
56
+ (demo => {
57
+ demo.querySelector('d2l-button-toggle').addEventListener('d2l-button-toggle-change', e => {
58
+ demo.querySelector('d2l-list').layout = (e.target.pressed ? 'tiles' : 'list');
59
+ });
60
+ })(document.currentScript.parentNode);
61
+ </script>
62
+ </template>
63
+ </d2l-demo-snippet>
64
+
65
+ </d2l-demo-page>
66
+ </body>
67
+ </html>
package/components/list/list-item-drag-drop-mixin.js CHANGED
@@ -372,7 +372,9 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
372
372
  if (!this.key) {
373
373
  this.draggable = false;
374
374
  }
375
- this._dragMultiple = this.getRootList()?.hasAttribute('drag-multiple');
375
+ const list = this.getRootList();
376
+ this._dragMultiple = list?.hasAttribute('drag-multiple');
377
+ this._dropNestedOnly = list?.hasAttribute('drop-nested-only');
376
378
  }
377
379
 
378
380
  firstUpdated(changedProperties) {
@@ -380,10 +382,21 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
380
382
  super.firstUpdated(changedProperties);
381
383
  }
382
384
 
385
+ willUpdate(changedProperties) {
386
+ super.willUpdate(changedProperties);
387
+ if (this._dropNestedOnly) {
388
+ this.keyboardDragDisabled = true;
389
+ }
390
+ }
391
+
383
392
  activateDragHandle() {
384
393
  if (this.shadowRoot) this.shadowRoot.querySelector(`#${this._itemDragId}`).activateKeyboardMode();
385
394
  }
386
395
 
396
+ get #disabledDrop() {
397
+ return this._dropNestedOnly && !this.dropNested;
398
+ }
399
+
387
400
  _annoucePositionChange(dragTargetKey, dropTargetKey, dropLocation) {
388
401
  /** Dispatched when a draggable list item's position changes in the list. See [Event Details: d2l-list-item-position-change](#event-details%3A-d2l-list-item-position-change). */
389
402
  this.dispatchEvent(new CustomEvent('d2l-list-item-position-change', {
@@ -538,7 +551,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
538
551
  this.dragging = false;
539
552
 
540
553
  // check the dropEffect in case the user cancelled by Escape while dragging ('none' set by browser)
541
- if (e.dataTransfer.dropEffect !== 'none' && dragState.shouldDrop(e.timeStamp)) {
554
+ if (!this.#disabledDrop && e.dataTransfer.dropEffect !== 'none' && dragState.shouldDrop(e.timeStamp)) {
542
555
 
543
556
  const dropTargetList = findComposedAncestor(dragState.dropTarget, node => node.tagName === 'D2L-LIST');
544
557
  const shouldDispatchPositionChange = !dragState.dragTargets.find(dragTarget => {
@@ -602,7 +615,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
602
615
  }
603
616
 
604
617
  _onDragOver(e) {
605
- if (!this.key) return;
618
+ if (!this.key || this.#disabledDrop) return;
606
619
  const dragState = getDragState();
607
620
  dragState.updateTime(e.timeStamp);
608
621
  e.preventDefault();
@@ -700,47 +713,19 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
700
713
  }
701
714
 
702
715
  _onDropTargetBottomDragEnter(e) {
703
- e.dataTransfer.dropEffect = 'move';
704
- const dragState = getDragState();
705
- dragState.setActiveDropTarget(this, dropLocation.below);
706
- this._inBottomArea = true;
716
+ this.#onDropEnterHelper(e, false, false);
707
717
  }
708
718
 
709
719
  _onDropTargetLowerDragEnter(e) {
710
- e.dataTransfer.dropEffect = 'move';
711
- if (this.dropNested) {
712
- this._inBottomArea = false;
713
- const dragState = getDragState();
714
- dragState.setActiveDropTarget(this, moveLocations.nest);
715
- } else {
716
- if (this._inBottomArea) {
717
- const dragState = getDragState();
718
- dragState.setActiveDropTarget(this, dropLocation.above);
719
- this._inBottomArea = false;
720
- }
721
- }
720
+ this.#onDropEnterHelper(e, false, true);
722
721
  }
723
722
 
724
723
  _onDropTargetTopDragEnter(e) {
725
- e.dataTransfer.dropEffect = 'move';
726
- const dragState = getDragState();
727
- dragState.setActiveDropTarget(this, dropLocation.above);
728
- this._inTopArea = true;
724
+ this.#onDropEnterHelper(e, true, false);
729
725
  }
730
726
 
731
727
  _onDropTargetUpperDragEnter(e) {
732
- e.dataTransfer.dropEffect = 'move';
733
- if (this.dropNested) {
734
- this._inTopArea = false;
735
- const dragState = getDragState();
736
- dragState.setActiveDropTarget(this, moveLocations.nest);
737
- } else {
738
- if (this._inTopArea) {
739
- const dragState = getDragState();
740
- dragState.setActiveDropTarget(this, dropLocation.below);
741
- this._inTopArea = false;
742
- }
743
- }
728
+ this.#onDropEnterHelper(e, true, true);
744
729
  }
745
730
 
746
731
  _onFocusinDragHandle() {
@@ -916,4 +901,26 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
916
901
  _renderTopPlacementMarker(renderTemplate) {
917
902
  return this._dropLocation === dropLocation.above ? html`<div class="d2l-list-item-drag-top-marker">${renderTemplate}</div>` : null;
918
903
  }
904
+
905
+ #onDropEnterHelper(e, isTopHalf, isMiddle) {
906
+ if (this.#disabledDrop) return;
907
+ e.dataTransfer.dropEffect = 'move';
908
+
909
+ let location;
910
+ if (this._dropNestedOnly || (isMiddle && this.dropNested)) {
911
+ location = moveLocations.nest;
912
+ } else if (!isMiddle) {
913
+ location = isTopHalf ? dropLocation.above : dropLocation.below;
914
+ this._inTopArea = isTopHalf;
915
+ this._inBottomArea = !isTopHalf;
916
+ } else if (isTopHalf) {
917
+ location = this._inTopArea ? moveLocations.below : moveLocations.above;
918
+ this._inTopArea = false;
919
+ } else {
920
+ location = this._inBottomArea ? moveLocations.above : moveLocations.below;
921
+ this._inBottomArea = false;
922
+ }
923
+ const dragState = getDragState();
924
+ dragState.setActiveDropTarget(this, location);
925
+ }
919
926
  };
package/components/list/list-item-generic-layout.js CHANGED
@@ -64,7 +64,12 @@ class ListItemGenericLayout extends LitElement {
64
64
  * Inline start padding (in px) to apply to list item(s) in the nested slot. When used, nested list items will not use the grid start calcuations and will only use this number to determine indentation.
65
65
  * @type {number}
66
66
  */
67
- indentation: { type: Number, reflect: true }
67
+ indentation: { type: Number, reflect: true },
68
+ /**
69
+ * @ignore
70
+ */
71
+ layout: { type: String, reflect: true }
72
+
68
73
  };
69
74
  }
70
75
 
@@ -211,6 +216,41 @@ class ListItemGenericLayout extends LitElement {
211
216
  ::slotted([slot="add"]) {
212
217
  grid-column: color-start / end;
213
218
  }
219
+
220
+ :host([layout="tile"]) {
221
+ grid-template-columns:
222
+ [start] minmax(0, auto)
223
+ [end];
224
+ grid-template-rows:
225
+ [start] auto
226
+ [end];
227
+ height: 100%;
228
+ }
229
+ :host([layout="tile"]) ::slotted([slot="content"]) {
230
+ grid-column: start / end;
231
+ grid-row: start / end;
232
+ }
233
+ :host([layout="tile"]) ::slotted([slot="outside-control-container"]) {
234
+ grid-column: start / end;
235
+ grid-row: start / end;
236
+ }
237
+
238
+ :host([layout="tile"]) slot[name="add-top"],
239
+ :host([layout="tile"]) slot[name="control-container"],
240
+ :host([layout="tile"]) slot[name="before-content"],
241
+ :host([layout="tile"]) slot[name="content-action"],
242
+ :host([layout="tile"]) slot[name="outside-control"],
243
+ :host([layout="tile"]) slot[name="outside-control-action"],
244
+ :host([layout="tile"]) slot[name="color-indicator"],
245
+ :host([layout="tile"]) slot[name="expand-collapse"],
246
+ :host([layout="tile"]) slot[name="control-action"],
247
+ :host([layout="tile"]) slot[name="control"],
248
+ :host([layout="tile"]) slot[name="actions"],
249
+ :host([layout="tile"]) slot[name="drop-target"],
250
+ :host([layout="tile"]) slot[name="nested"],
251
+ :host([layout="tile"]) slot[name="add"] {
252
+ display: none;
253
+ }
214
254
  `;
215
255
  }
216
256
 
package/components/list/list-item-mixin.js CHANGED
@@ -88,6 +88,10 @@ export const ListItemMixin = superclass => class extends composeMixins(
88
88
  * @ignore
89
89
  */
90
90
  last: { type: Boolean, reflect: true },
91
+ /**
92
+ * @ignore
93
+ */
94
+ layout: { type: String, reflect: true },
91
95
  /**
92
96
  * Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.
93
97
  * @type {boolean}
@@ -123,6 +127,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
123
127
  display: block;
124
128
  position: relative;
125
129
  }
130
+ :host([layout="tile"]) {
131
+ display: inline-block;
132
+ flex: none;
133
+ width: 14rem;
134
+ }
126
135
  :host[hidden] {
127
136
  display: none;
128
137
  }
@@ -310,7 +319,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
310
319
  border-radius: 6px;
311
320
  margin: 0 -12px;
312
321
  }
313
- .d2l-list-item-content-extend-separators [slot="outside-control-container"] {
322
+ :host(:not([layout="tile"])) .d2l-list-item-content-extend-separators [slot="outside-control-container"] {
314
323
  border-left: none !important;
315
324
  border-radius: 0 !important;
316
325
  border-right: none !important;
@@ -430,6 +439,24 @@ export const ListItemMixin = superclass => class extends composeMixins(
430
439
  .dragging [slot="add"] {
431
440
  display: none;
432
441
  }
442
+
443
+ :host([layout="tile"]) .d2l-list-item-content {
444
+ flex-direction: column;
445
+ height: 100%;
446
+ padding: 0.6rem;
447
+ }
448
+
449
+ :host([layout="tile"]:not([selection-disabled]):not([skeleton])[padding-type="none"]) [slot="outside-control-container"],
450
+ :host([layout="tile"]) [slot="outside-control-container"] {
451
+ border-color: var(--d2l-color-mica);
452
+ margin: 0;
453
+ }
454
+ :host([layout="tile"]:not([draggable])[_has-color-slot]) [slot="outside-control-container"] {
455
+ margin-inline-start: 0;
456
+ }
457
+ :host([layout="tile"]:not([_has-color-slot])) .d2l-list-item-content-extend-separators [slot="content"] {
458
+ padding-inline: 0.6rem;
459
+ }
433
460
  `];
434
461
 
435
462
  super.styles && styles.unshift(super.styles);
@@ -473,6 +500,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
473
500
  }
474
501
 
475
502
  willUpdate(changedProperties) {
503
+ super.willUpdate(changedProperties);
476
504
  if (changedProperties.has('_siblingHasColor') || changedProperties.has('color')) {
477
505
  this._hasColorSlot = this.color || this._siblingHasColor;
478
506
  }
@@ -728,6 +756,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
728
756
  data-separators="${ifDefined(this._separators)}"
729
757
  indentation="${ifDefined(this.indentation)}"
730
758
  ?grid-active="${this.role === 'row'}"
759
+ layout="${this.layout}"
731
760
  ?no-primary-action="${this.noPrimaryAction}">
732
761
  ${this._showAddButton && this.first ? html`
733
762
  <div slot="add-top">
package/components/list/list.js CHANGED
@@ -11,6 +11,12 @@ const keyCodes = {
11
11
  };
12
12
 
13
13
  export const listSelectionStates = SelectionInfo.states;
14
+
15
+ export const listLayouts = Object.freeze({
16
+ list: 'list',
17
+ tiles: 'tiles'
18
+ });
19
+
14
20
  const DEFAULT_BREAKPOINTS = [842, 636, 580, 0];
15
21
  const SLIM_COLOR_BREAKPOINT = 400;
16
22
 
@@ -52,6 +58,11 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
52
58
  * @type {boolean}
53
59
  */
54
60
  dragMultiple: { type: Boolean, reflect: true, attribute: 'drag-multiple' },
61
+ /**
62
+ * Disable ability to drop items above or below this item
63
+ * @type {boolean}
64
+ */
65
+ dropNestedOnly: { type: Boolean, attribute: 'drop-nested-only' },
55
66
  /**
56
67
  * Whether to extend the separators beyond the content's edge
57
68
  * @type {boolean}
@@ -67,6 +78,12 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
67
78
  * @type {string}
68
79
  */
69
80
  label: { type: String },
81
+ /**
82
+ * The type of layout for the list items. Valid values are "list" (default) and "tiles". The tile layout is only valid for single level (non-nested) lists.
83
+ * @type {'list'|'tiles'}
84
+ * @default "list"
85
+ */
86
+ layout: { type: String, reflect: true },
70
87
  /**
71
88
  * Display separators. Valid values are "all" (default), "between", "none"
72
89
  * @type {'all'|'between'|'none'}
@@ -88,6 +105,12 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
88
105
  --d2l-list-item-illustration-max-width: 4.5rem;
89
106
  display: block;
90
107
  }
108
+ :host([layout="tiles"]) > .d2l-list-content {
109
+ display: flex;
110
+ flex-wrap: wrap;
111
+ gap: 0.9rem;
112
+ justify-content: normal;
113
+ }
91
114
  :host(:not([slot="nested"])) > .d2l-list-content {
92
115
  padding-bottom: 1px;
93
116
  }
@@ -133,6 +156,7 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
133
156
  this.dragMultiple = false;
134
157
  this.extendSeparators = false;
135
158
  this.grid = false;
159
+ this.layout = listLayouts.list;
136
160
  this._listItemChanges = [];
137
161
  this._childHasColor = false;
138
162
  this._childHasExpandCollapseToggle = false;
@@ -228,6 +252,9 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
228
252
  if (changedProperties.has('grid') && this.grid) {
229
253
  this.selectionNoInputArrowKeyBehaviour = true;
230
254
  }
255
+ if (changedProperties.has('layout') && changedProperties.get('layout') !== undefined && this.layout) {
256
+ this._updateItemLayouts();
257
+ }
231
258
  }
232
259
 
233
260
  getItems(slot) {
@@ -463,6 +490,8 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
463
490
  }
464
491
  });
465
492
 
493
+ this._updateItemLayouts(items);
494
+
466
495
  /** @ignore */
467
496
  this.dispatchEvent(new CustomEvent('d2l-list-item-showing-count-change', {
468
497
  bubbles: true,
@@ -484,6 +513,11 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
484
513
  });
485
514
  }
486
515
 
516
+ _updateItemLayouts(items) {
517
+ if (!items) items = this.getItems();
518
+ items.forEach(item => item.layout = (this.layout === listLayouts.tiles ? 'tile' : 'normal'));
519
+ }
520
+
487
521
  }
488
522
 
489
523
  customElements.define('d2l-list', List);
package/custom-elements.json CHANGED
@@ -8685,6 +8685,10 @@
8685
8685
  "name": "disable-expand-feature",
8686
8686
  "type": "boolean"
8687
8687
  },
8688
+ {
8689
+ "name": "drop-nested-only",
8690
+ "type": "boolean"
8691
+ },
8688
8692
  {
8689
8693
  "name": "expanded",
8690
8694
  "type": "boolean"
@@ -8749,6 +8753,11 @@
8749
8753
  "attribute": "disable-expand-feature",
8750
8754
  "type": "boolean"
8751
8755
  },
8756
+ {
8757
+ "name": "dropNestedOnly",
8758
+ "attribute": "drop-nested-only",
8759
+ "type": "boolean"
8760
+ },
8752
8761
  {
8753
8762
  "name": "expanded",
8754
8763
  "attribute": "expanded",
@@ -10405,6 +10414,11 @@
10405
10414
  "description": "Text to show in label tooltip on inline add button. Defaults to \"Add Item\".",
10406
10415
  "type": "string"
10407
10416
  },
10417
+ {
10418
+ "name": "drop-nested-only",
10419
+ "description": "Disable ability to drop items above or below this item",
10420
+ "type": "boolean"
10421
+ },
10408
10422
  {
10409
10423
  "name": "label",
10410
10424
  "description": "Sets an accessible label. For use when the list context is unclear. This property is only valid on top-level lists and will have no effect on nested lists.",
@@ -10446,6 +10460,12 @@
10446
10460
  "type": "boolean",
10447
10461
  "default": "false"
10448
10462
  },
10463
+ {
10464
+ "name": "layout",
10465
+ "description": "The type of layout for the list items. Valid values are \"list\" (default) and \"tiles\". The tile layout is only valid for single level (non-nested) lists.",
10466
+ "type": "'list'|'tiles'",
10467
+ "default": "\"\\\"list\\\"\""
10468
+ },
10449
10469
  {
10450
10470
  "name": "item-count",
10451
10471
  "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
@@ -10465,6 +10485,12 @@
10465
10485
  "description": "Text to show in label tooltip on inline add button. Defaults to \"Add Item\".",
10466
10486
  "type": "string"
10467
10487
  },
10488
+ {
10489
+ "name": "dropNestedOnly",
10490
+ "attribute": "drop-nested-only",
10491
+ "description": "Disable ability to drop items above or below this item",
10492
+ "type": "boolean"
10493
+ },
10468
10494
  {
10469
10495
  "name": "label",
10470
10496
  "attribute": "label",
@@ -10513,6 +10539,13 @@
10513
10539
  "type": "boolean",
10514
10540
  "default": "false"
10515
10541
  },
10542
+ {
10543
+ "name": "layout",
10544
+ "attribute": "layout",
10545
+ "description": "The type of layout for the list items. Valid values are \"list\" (default) and \"tiles\". The tile layout is only valid for single level (non-nested) lists.",
10546
+ "type": "'list'|'tiles'",
10547
+ "default": "\"\\\"list\\\"\""
10548
+ },
10516
10549
  {
10517
10550
  "name": "itemCount",
10518
10551
  "attribute": "item-count",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.183.0",
3
+ "version": "3.184.0",
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",