@brightspace-ui/core 3.308.0 → 3.308.2

package/components/list/README.md

@@ -382,7 +382,7 @@ Load-More paging functionality can be implemented in lists by placing a `d2l-pag
 
 ## Drag & Drop Lists
 
-The `d2l-list` supports drag & drop.
+The `d2l-list` supports drag & drop, in both `list` and `tiles` layout.
 
 The `d2l-list` is simply a rendering component, so there is some light work involved in hooking up this behaviour. In order for items to be draggable, they must have their `draggable` and `key` attributes set. Optionally, the `drop-nested` attribute can be applied to items to indicate whether other items can be dropped as nested children on the item.
 
@@ -394,7 +394,7 @@ If an item is draggable, the `drag-handle-text` attribute should be used to prov
 
 ### Example
 
-<!-- docs: demo code display:block autoSize:false size:medium sandboxTitle:'List - Drag & Drop'-->
+<!-- docs: demo code display:block sandboxTitle:'List - Drag & Drop'-->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/list/list.js';
@@ -404,11 +404,13 @@ If an item is draggable, the `drag-handle-text` attribute should be used to prov
 
   class ListDemoDragAndDropUsage extends LitElement {
     static properties = {
+      layout: { type: String },
       list: { type: Array }
     };
 
     constructor() {
       super();
+      this.layout = 'list';
       this.list = [
         { key: '1', content: 'Initially first list item' },
         { key: '2', content: 'Initially second list item' },
@@ -429,7 +431,7 @@ If an item is draggable, the `drag-handle-text` attribute should be used to prov
       });
 
       return html`
-        <d2l-list @d2l-list-item-position-change="${this._moveItems}">
+        <d2l-list layout="${this.layout}" @d2l-list-item-position-change="${this._moveItems}">
           ${listItems}
         </d2l-list>
       `;
@@ -443,6 +445,7 @@ If an item is draggable, the `drag-handle-text` attribute should be used to prov
   customElements.define('d2l-my-drag-drop-elem', ListDemoDragAndDropUsage);
 </script>
 <d2l-my-drag-drop-elem></d2l-my-drag-drop-elem>
+<d2l-my-drag-drop-elem layout="tiles" style="display: flex; justify-content: center; margin-top: 1.5rem;"></d2l-my-drag-drop-elem>
 ```
 
 #### Draggable lists with interactive content
@@ -801,7 +804,7 @@ The example below also includes expand/collapse behavior in order to expand or c
 
 The `d2l-list` component supports displaying items in a tile layout. The built-in rendering will take care of laying out the illustration, selection, secondary actions, and color indicators for each item in either the `list` (default) or `tiles` layout. To display items in a tile layout, set the `d2l-list`'s `layout` property to `tiles`.
 
-**Note:** Nested lists, separators, and drag & drop are not supported in the tile layout.
+**Note:** Nested lists and separators are not supported in the tile layout.
 
 <!-- docs: demo code display:block autoSize:true sandboxTitle:'List - Tile Layout'-->
 ```html

package/components/page/page-divider-internal.js

@@ -109,6 +109,7 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 			cursor: ew-resize;
 			height: 100%;
 			position: relative;
+			touch-action: none;
 			width: ${DIVIDER_WIDTH}px;
 		}
 		.divider:hover {

package/custom-elements.json

@@ -13402,7 +13402,7 @@
       "properties": [
         {
           "name": "styles",
-          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t\\tflex: none;\\n\\t\\t}\\n\\t\\t.divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-mica);\\n\\t\\t\\tcursor: ew-resize;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\twidth: ${DIVIDER_WIDTH}px;\\n\\t\\t}\\n\\t\\t.divider:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-corundum);\\n\\t\\t}\\n\\t\\t.divider:focus-within {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t:host([panel-position=\\\"start\\\"]) .divider.collapsed,\\n\\t\\t:host([panel-position=\\\"end\\\"]) .divider.maxed {\\n\\t\\t\\tcursor: var(--d2l-cursor-resize-inline-end, e-resize);\\n\\t\\t}\\n\\t\\t:host([panel-position=\\\"start\\\"]) .divider.maxed,\\n\\t\\t:host([panel-position=\\\"end\\\"]) .divider.collapsed {\\n\\t\\t\\tcursor: var(--d2l-cursor-resize-inline-start, w-resize);\\n\\t\\t}\\n\\n\\t\\t.slider {\\n\\t\\t\\tinset-inline-start: -${DIVIDER_HANDLE_SIZE / 2 - DIVIDER_WIDTH / 2}px;\\n\\t\\t\\toutline: none;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 55px;\\n\\t\\t}\\n\\n\\t\\t.divider-handle {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tborder: 1px solid var(--d2l-color-mica);\\n\\t\\t\\tborder-radius: 50%;\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tcursor: pointer;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: ${DIVIDER_HANDLE_SIZE}px;\\n\\t\\t\\tjustify-content: center;\\n\\t\\t\\twidth: ${DIVIDER_HANDLE_SIZE}px;\\n\\t\\t}\\n\\t\\t.divider-handle:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tborder-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t.slider:focus .divider-handle {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t\\tborder-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t}\\n\\t\\t.slider:focus .divider-handle .handle-icon {\\n\\t\\t\\tcolor: white;\\n\\t\\t}\\n\\n\\t\\t.divider-arrow {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tbackground-color: rgba(255, 255, 255, 0.5);\\n\\t\\t\\tcursor: pointer;\\n\\t\\t\\tdisplay: none;\\n\\t\\t\\theight: 24px;\\n\\t\\t\\tinset-block-start: max(50%, 97px); /* Do not hide behind slider on short screens */\\n\\t\\t\\tjustify-content: center;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttransform: translateY(-50%);\\n\\t\\t\\twidth: 24px;\\n\\t\\t}\\n\\t\\t.divider-arrow d2l-icon-custom {\\n\\t\\t\\tcolor: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t.divider:focus-within .divider-arrow:not([hidden]) {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t}\\n\\t\\t.divider-arrow:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t}\\n\\t\\t.divider-arrow:hover d2l-icon-custom {\\n\\t\\t\\tcolor: var(--d2l-color-celestine-minus-1);\\n\\t\\t}\\n\\t\\t.divider-arrow.start {\\n\\t\\t\\tborder-end-start-radius: 6px;\\n\\t\\t\\tborder-start-start-radius: 6px;\\n\\t\\t\\tinset-inline-end: 100%;\\n\\t\\t}\\n\\t\\t.divider-arrow.end {\\n\\t\\t\\tborder-end-end-radius: 6px;\\n\\t\\t\\tborder-start-end-radius: 6px;\\n\\t\\t\\tinset-inline-start: 100%;\\n\\t\\t}\\n\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t\\tcursor: ns-resize;\\n\\t\\t\\theight: ${DIVIDER_WIDTH}px;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .divider.collapsed {\\n\\t\\t\\tcursor: n-resize;\\n\\t\\t}\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .divider.maxed {\\n\\t\\t\\tcursor: s-resize;\\n\\t\\t}\\n\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .slider {\\n\\t\\t\\tinset-inline-end: 18px;\\n\\t\\t\\ttop: auto;\\n\\t\\t}\\n\\n\\t\\t/* TO DO: Lots more drawer styling to come */\\n\\n\\t`\""
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t\\tflex: none;\\n\\t\\t}\\n\\t\\t.divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-mica);\\n\\t\\t\\tcursor: ew-resize;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\ttouch-action: none;\\n\\t\\t\\twidth: ${DIVIDER_WIDTH}px;\\n\\t\\t}\\n\\t\\t.divider:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-corundum);\\n\\t\\t}\\n\\t\\t.divider:focus-within {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t:host([panel-position=\\\"start\\\"]) .divider.collapsed,\\n\\t\\t:host([panel-position=\\\"end\\\"]) .divider.maxed {\\n\\t\\t\\tcursor: var(--d2l-cursor-resize-inline-end, e-resize);\\n\\t\\t}\\n\\t\\t:host([panel-position=\\\"start\\\"]) .divider.maxed,\\n\\t\\t:host([panel-position=\\\"end\\\"]) .divider.collapsed {\\n\\t\\t\\tcursor: var(--d2l-cursor-resize-inline-start, w-resize);\\n\\t\\t}\\n\\n\\t\\t.slider {\\n\\t\\t\\tinset-inline-start: -${DIVIDER_HANDLE_SIZE / 2 - DIVIDER_WIDTH / 2}px;\\n\\t\\t\\toutline: none;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 55px;\\n\\t\\t}\\n\\n\\t\\t.divider-handle {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tborder: 1px solid var(--d2l-color-mica);\\n\\t\\t\\tborder-radius: 50%;\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tcursor: pointer;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: ${DIVIDER_HANDLE_SIZE}px;\\n\\t\\t\\tjustify-content: center;\\n\\t\\t\\twidth: ${DIVIDER_HANDLE_SIZE}px;\\n\\t\\t}\\n\\t\\t.divider-handle:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tborder-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t.slider:focus .divider-handle {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t\\tborder-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t}\\n\\t\\t.slider:focus .divider-handle .handle-icon {\\n\\t\\t\\tcolor: white;\\n\\t\\t}\\n\\n\\t\\t.divider-arrow {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tbackground-color: rgba(255, 255, 255, 0.5);\\n\\t\\t\\tcursor: pointer;\\n\\t\\t\\tdisplay: none;\\n\\t\\t\\theight: 24px;\\n\\t\\t\\tinset-block-start: max(50%, 97px); /* Do not hide behind slider on short screens */\\n\\t\\t\\tjustify-content: center;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttransform: translateY(-50%);\\n\\t\\t\\twidth: 24px;\\n\\t\\t}\\n\\t\\t.divider-arrow d2l-icon-custom {\\n\\t\\t\\tcolor: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t.divider:focus-within .divider-arrow:not([hidden]) {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t}\\n\\t\\t.divider-arrow:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t}\\n\\t\\t.divider-arrow:hover d2l-icon-custom {\\n\\t\\t\\tcolor: var(--d2l-color-celestine-minus-1);\\n\\t\\t}\\n\\t\\t.divider-arrow.start {\\n\\t\\t\\tborder-end-start-radius: 6px;\\n\\t\\t\\tborder-start-start-radius: 6px;\\n\\t\\t\\tinset-inline-end: 100%;\\n\\t\\t}\\n\\t\\t.divider-arrow.end {\\n\\t\\t\\tborder-end-end-radius: 6px;\\n\\t\\t\\tborder-start-end-radius: 6px;\\n\\t\\t\\tinset-inline-start: 100%;\\n\\t\\t}\\n\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t\\tcursor: ns-resize;\\n\\t\\t\\theight: ${DIVIDER_WIDTH}px;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .divider.collapsed {\\n\\t\\t\\tcursor: n-resize;\\n\\t\\t}\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .divider.maxed {\\n\\t\\t\\tcursor: s-resize;\\n\\t\\t}\\n\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .slider {\\n\\t\\t\\tinset-inline-end: 18px;\\n\\t\\t\\ttop: auto;\\n\\t\\t}\\n\\n\\t\\t/* TO DO: Lots more drawer styling to come */\\n\\n\\t`\""
         },
         {
           "name": "focusElementSelector",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.308.0",
+  "version": "3.308.2",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",