@brightspace-ui/core 1.180.2 → 1.182.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 (122) hide show
  1. package/components/alert/demo/alert-toast.html +0 -2
  2. package/components/alert/demo/alert.html +0 -2
  3. package/components/backdrop/demo/backdrop.html +0 -2
  4. package/components/breadcrumbs/demo/breadcrumbs.html +0 -2
  5. package/components/button/demo/button-icon.html +0 -2
  6. package/components/button/demo/button-subtle.html +0 -2
  7. package/components/button/demo/button.html +0 -2
  8. package/components/button/demo/floating-buttons-in-frame.html +0 -2
  9. package/components/button/demo/floating-buttons-in-tabs.html +0 -2
  10. package/components/button/demo/floating-buttons-page.html +0 -2
  11. package/components/button/demo/floating-buttons.html +0 -2
  12. package/components/calendar/demo/calendar.html +0 -2
  13. package/components/card/demo/card.html +0 -2
  14. package/components/colors/demo/colors.html +0 -2
  15. package/components/count-badge/count-badge.js +4 -2
  16. package/components/count-badge/demo/count-badge.html +0 -2
  17. package/components/demo/demo/demo-snippet.html +0 -2
  18. package/components/dialog/demo/dialog-confirm.html +0 -2
  19. package/components/dialog/demo/dialog-fullscreen.html +0 -2
  20. package/components/dialog/demo/dialog-nested.html +0 -2
  21. package/components/dialog/demo/dialog.html +0 -2
  22. package/components/dropdown/demo/dropdown-button.html +0 -2
  23. package/components/dropdown/demo/dropdown-context-menu.html +0 -2
  24. package/components/dropdown/demo/dropdown-menu.html +0 -2
  25. package/components/dropdown/demo/dropdown-more.html +0 -2
  26. package/components/dropdown/demo/dropdown-tabs.html +0 -2
  27. package/components/dropdown/demo/dropdown.html +0 -2
  28. package/components/expand-collapse/demo/expand-collapse-content.html +0 -2
  29. package/components/filter/README.md +6 -3
  30. package/components/filter/demo/filter-search-demo.js +13 -10
  31. package/components/filter/demo/filter.html +17 -13
  32. package/components/filter/filter.js +57 -9
  33. package/components/focus-trap/demo/focus-trap.html +0 -2
  34. package/components/form/demo/form-native.html +0 -2
  35. package/components/form/demo/form.html +0 -2
  36. package/components/hierarchical-view/demo/hierarchical-view.html +0 -2
  37. package/components/html-block/README.md +116 -21
  38. package/components/html-block/demo/html-block.html +0 -2
  39. package/components/html-block/html-block.js +1 -0
  40. package/components/icons/demo/icon-custom.html +0 -2
  41. package/components/icons/demo/icon.html +0 -2
  42. package/components/inputs/demo/input-checkbox.html +0 -2
  43. package/components/inputs/demo/input-date-range.html +0 -2
  44. package/components/inputs/demo/input-date-time-range.html +0 -2
  45. package/components/inputs/demo/input-date-time.html +0 -2
  46. package/components/inputs/demo/input-date.html +0 -2
  47. package/components/inputs/demo/input-number.html +0 -2
  48. package/components/inputs/demo/input-percent.html +0 -2
  49. package/components/inputs/demo/input-radio.html +0 -2
  50. package/components/inputs/demo/input-search.html +0 -2
  51. package/components/inputs/demo/input-select.html +0 -2
  52. package/components/inputs/demo/input-text.html +0 -2
  53. package/components/inputs/demo/input-textarea.html +0 -2
  54. package/components/inputs/demo/input-time-range.html +0 -2
  55. package/components/inputs/demo/input-time.html +0 -2
  56. package/components/link/demo/link.html +0 -2
  57. package/components/list/README.md +359 -177
  58. package/components/list/demo/list-drag-and-drop.html +0 -2
  59. package/components/list/demo/list-item-actions.html +0 -2
  60. package/components/list/demo/list-item-layouts.html +0 -2
  61. package/components/list/demo/list.html +0 -2
  62. package/components/list/list-header.js +2 -1
  63. package/components/list/list-item-button.js +2 -1
  64. package/components/list/list-item-checkbox-mixin.js +12 -4
  65. package/components/list/list-item-drag-drop-mixin.js +17 -1
  66. package/components/list/list-item-drag-handle.js +18 -1
  67. package/components/list/list-item-generic-layout.js +1 -0
  68. package/components/list/list-item-link-mixin.js +1 -0
  69. package/components/list/list-item-mixin.js +2 -0
  70. package/components/list/list-item.js +3 -0
  71. package/components/list/list.js +2 -2
  72. package/components/loading-spinner/demo/loading-spinner.html +0 -2
  73. package/components/menu/demo/checkbox-menu.html +0 -2
  74. package/components/menu/demo/menu.html +0 -2
  75. package/components/menu/demo/radio-menu.html +0 -2
  76. package/components/meter/demo/meter.html +0 -2
  77. package/components/more-less/demo/more-less.html +0 -2
  78. package/components/offscreen/demo/offscreen.html +0 -2
  79. package/components/overflow-group/demo/overflow-group.html +0 -2
  80. package/components/scroll-wrapper/README.md +27 -9
  81. package/components/scroll-wrapper/demo/scroll-wrapper.html +0 -2
  82. package/components/scroll-wrapper/scroll-wrapper.js +2 -1
  83. package/components/selection/demo/selection.html +0 -2
  84. package/components/skeleton/demo/skeleton-mixin.html +0 -2
  85. package/components/status-indicator/demo/status-indicator.html +0 -2
  86. package/components/switch/demo/switch.html +0 -2
  87. package/components/table/demo/table.html +0 -2
  88. package/components/tabs/demo/tabs.html +0 -2
  89. package/components/tooltip/demo/tooltip.html +0 -2
  90. package/components/typography/demo/typography.html +0 -2
  91. package/custom-elements.json +70 -60
  92. package/directives/animate/demo/index.html +0 -2
  93. package/helpers/demo/announce.html +0 -2
  94. package/helpers/demo/dismissible.html +0 -2
  95. package/helpers/demo/gestures.html +0 -2
  96. package/helpers/framed.js +41 -0
  97. package/lang/ar.js +6 -0
  98. package/lang/cy.js +6 -0
  99. package/lang/da.js +6 -0
  100. package/lang/de.js +6 -0
  101. package/lang/en.js +6 -0
  102. package/lang/es-es.js +6 -0
  103. package/lang/es.js +6 -0
  104. package/lang/fr-fr.js +6 -0
  105. package/lang/fr.js +6 -0
  106. package/lang/ja.js +6 -0
  107. package/lang/ko.js +6 -0
  108. package/lang/nl.js +6 -0
  109. package/lang/pt.js +6 -0
  110. package/lang/sv.js +6 -0
  111. package/lang/tr.js +6 -0
  112. package/lang/zh-tw.js +6 -0
  113. package/lang/zh.js +6 -0
  114. package/mixins/async-container/demo/async-container.html +0 -2
  115. package/mixins/demo/arrow-keys-mixin.html +0 -2
  116. package/mixins/demo/labelled-mixin.html +0 -2
  117. package/mixins/demo/localize-mixin.html +0 -2
  118. package/mixins/labelled-mixin.js +8 -0
  119. package/package.json +1 -2
  120. package/templates/primary-secondary/demo/index.html +0 -2
  121. package/templates/primary-secondary/demo/overflow-hidden.html +0 -2
  122. package/templates/primary-secondary/demo/width-type-normal.html +0 -2
package/components/list/demo/list-drag-and-drop.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../demo/demo-page.js';
11
9
  import './list-demo-drag-and-drop-usage.js';
package/components/list/demo/list-item-actions.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../button/button-icon.js';
11
9
  import '../../demo/demo-page.js';
package/components/list/demo/list-item-layouts.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../button/button-icon.js';
11
9
  import '../../demo/demo-page.js';
package/components/list/demo/list.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../button/button-icon.js';
11
9
  import '../../demo/demo-page.js';
package/components/list/list-header.js CHANGED
@@ -13,7 +13,8 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
13
13
  static get properties() {
14
14
  return {
15
15
  /**
16
- * Whether to render a header with reduced whitespace.
16
+ * Whether to render a header with reduced whitespace
17
+ * @type {boolean}
17
18
  */
18
19
  slim: { reflect: true, type: Boolean }
19
20
  };
package/components/list/list-item-button.js CHANGED
@@ -6,7 +6,8 @@ import { LitElement } from 'lit-element/lit-element.js';
6
6
  * @slot - Default content placed inside of the component
7
7
  * @slot illustration - Image associated with the list item located at the left of the item
8
8
  * @slot actions - Actions (e.g., button icons) associated with the listen item located at the right of the item
9
- * @fires d2l-list-item-button-click - Dispatched when the component item is clicked
9
+ * @fires d2l-list-item-button-click - Dispatched when the item's primary button action is clicked
10
+ * @fires d2l-list-item-position-change - 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).
10
11
  * @fires d2l-list-item-selected - Dispatched when the component item is selected
11
12
  */
12
13
  class ListItemButton extends ListItemButtonMixin(LitElement) {
package/components/list/list-item-checkbox-mixin.js CHANGED
@@ -7,28 +7,36 @@ import { nothing } from 'lit-html';
7
7
  import { SelectionInfo } from '../selection/selection-mixin.js';
8
8
  import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
9
9
 
10
+ /**
11
+ * @property label - The hidden label for the checkbox if selectable
12
+ */
10
13
  export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(LabelledMixin(superclass)) {
11
14
 
12
15
  static get properties() {
13
16
  return {
14
17
  /**
15
- * Disables the input
18
+ * **Selection:** Disables the input
19
+ * @type {boolean}
16
20
  */
17
21
  disabled: { type: Boolean },
18
22
  /**
19
- * Value to identify item if selectable
23
+ * **Selection:** Value to identify item if selectable
24
+ * @type {string}
20
25
  */
21
26
  key: { type: String, reflect: true },
22
27
  /**
23
- * Indicates a input should be rendered for selecting the item
28
+ * **Selection:** Indicates a input should be rendered for selecting the item
29
+ * @type {boolean}
24
30
  */
25
31
  selectable: { type: Boolean },
26
32
  /**
27
- * Whether the item is selected
33
+ * **Selection:** Whether the item is selected
34
+ * @type {boolean}
28
35
  */
29
36
  selected: { type: Boolean, reflect: true },
30
37
  /**
31
38
  * Private. The selection info (set by the selection component).
39
+ * @ignore
32
40
  */
33
41
  selectionInfo: { type: Object, attribute: false }
34
42
  };
package/components/list/list-item-drag-drop-mixin.js CHANGED
@@ -250,12 +250,27 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
250
250
  static get properties() {
251
251
  return {
252
252
  /**
253
- * Whether the item is draggable
253
+ * **Drag & drop:** Whether the item is draggable
254
+ * @type {boolean}
254
255
  */
255
256
  draggable: { type: Boolean, reflect: true },
257
+ /**
258
+ * @ignore
259
+ */
256
260
  dragging: { type: Boolean, reflect: true },
261
+ /**
262
+ * **Drag & drop:** The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode.
263
+ * @type {string}
264
+ */
257
265
  dragHandleText: { type: String, attribute: 'drag-handle-text' },
266
+ /**
267
+ * **Drag & drop:** Text to drag and drop
268
+ */
258
269
  dropText: { type: String, attribute: 'drop-text' },
270
+ /**
271
+ * Value to identify item if selectable
272
+ * @type {string}
273
+ */
259
274
  key: { type: String, reflect: true },
260
275
  _draggingOver: { type: Boolean },
261
276
  _dropLocation: { type: Number },
@@ -319,6 +334,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
319
334
  constructor() {
320
335
  super();
321
336
  this._itemDragId = getUniqueId();
337
+ /** @ignore */
322
338
  this.dragging = false;
323
339
  }
324
340
 
package/components/list/list-item-drag-handle.js CHANGED
@@ -32,12 +32,27 @@ export const dragActions = Object.freeze({
32
32
  up: 'up'
33
33
  });
34
34
 
35
+ /**
36
+ * @fires d2l-list-item-drag-handle-action - Dispatched when an action performed on the drag handle
37
+ */
35
38
  class ListItemDragHandle extends LocalizeCoreElement(LitElement) {
36
39
 
37
40
  static get properties() {
38
41
  return {
42
+ /**
43
+ * Disables the handle
44
+ * @type {boolean}
45
+ */
39
46
  disabled: { type: Boolean, reflect: true },
47
+ /**
48
+ * Additional context information for accessibility
49
+ * @type {object}
50
+ */
40
51
  keyboardTextInfo: { type: Object, attribute: 'keyboard-text-info' },
52
+ /**
53
+ * The drag-handle label for assistive technology
54
+ * @type {string}
55
+ */
41
56
  text: { type: String },
42
57
  _keyboardActive: { type: Boolean }
43
58
  };
@@ -95,8 +110,10 @@ class ListItemDragHandle extends LocalizeCoreElement(LitElement) {
95
110
 
96
111
  constructor() {
97
112
  super();
98
- this._keyboardActive = false;
113
+
99
114
  this.disabled = false;
115
+
116
+ this._keyboardActive = false;
100
117
  this._movingElement = false;
101
118
  }
102
119
 
package/components/list/list-item-generic-layout.js CHANGED
@@ -42,6 +42,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
42
42
  role: { type: String, reflect: true },
43
43
  /**
44
44
  * Specifies whether the grid is active or not
45
+ * @type {boolean}
45
46
  */
46
47
  gridActive: { type: Boolean, attribute: 'grid-active' }
47
48
  };
package/components/list/list-item-link-mixin.js CHANGED
@@ -8,6 +8,7 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
8
8
  return {
9
9
  /**
10
10
  * Address of item link if navigable
11
+ * @type {string}
11
12
  */
12
13
  actionHref: { type: String, attribute: 'action-href', reflect: true }
13
14
  };
package/components/list/list-item-mixin.js CHANGED
@@ -30,10 +30,12 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
30
30
  return {
31
31
  /**
32
32
  * Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used.
33
+ * @type {array}
33
34
  */
34
35
  breakpoints: { type: Array },
35
36
  /**
36
37
  * Whether to render the list-item with reduced whitespace.
38
+ * @type {boolean}
37
39
  */
38
40
  slim: { type: Boolean },
39
41
  _breakpoint: { type: Number },
package/components/list/list-item.js CHANGED
@@ -6,6 +6,8 @@ import { LitElement } from 'lit-element/lit-element.js';
6
6
  * @slot - Default content placed inside of the component
7
7
  * @slot illustration - Image associated with the list item located at the left of the item
8
8
  * @slot actions - Actions (e.g., button icons) associated with the listen item located at the right of the item
9
+ * @fires d2l-list-item-link-click - Dispatched when the item's primary link action is clicked
10
+ * @fires d2l-list-item-position-change - 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).
9
11
  * @fires d2l-list-item-selected - Dispatched when the component item is selected
10
12
  */
11
13
  class ListItem extends ListItemLinkMixin(LitElement) {
@@ -14,6 +16,7 @@ class ListItem extends ListItemLinkMixin(LitElement) {
14
16
  return {
15
17
  /**
16
18
  * Address of item link if navigable
19
+ * @type {string}
17
20
  */
18
21
  href: { type: String }
19
22
  };
package/components/list/list.js CHANGED
@@ -5,7 +5,7 @@ export const listSelectionStates = SelectionInfo.states;
5
5
 
6
6
  /**
7
7
  * A container for a styled list of items ("d2l-list-item"). It provides the appropriate "list" semantics as well as options for displaying separators, etc.
8
- * @slot - List content (e.g., "listitem"s)
8
+ * @slot - List content (e.g., `listitem`s)
9
9
  * @fires d2l-list-selection-change - Dispatched when the selection state changes
10
10
  */
11
11
  class List extends SelectionMixin(LitElement) {
@@ -17,7 +17,7 @@ class List extends SelectionMixin(LitElement) {
17
17
  */
18
18
  extendSeparators: { type: Boolean, reflect: true, attribute: 'extend-separators' },
19
19
  /**
20
- * Use grid to manage focus with arrow keys
20
+ * Use grid to manage focus with arrow keys. See [Accessibility](#accessibility).
21
21
  */
22
22
  grid: { type: Boolean },
23
23
  /**
package/components/loading-spinner/demo/loading-spinner.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../demo/demo-page.js';
11
9
  import '../loading-spinner.js';
package/components/menu/demo/checkbox-menu.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../demo/demo-page.js';
11
9
  import '../menu.js';
package/components/menu/demo/menu.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../demo/demo-page.js';
11
9
  import './custom-menu-item.js';
package/components/menu/demo/radio-menu.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../demo/demo-page.js';
11
9
  import '../menu.js';
package/components/meter/demo/meter.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../demo/demo-page.js';
11
9
  import '../meter-linear.js';
package/components/more-less/demo/more-less.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../demo/demo-page.js';
11
9
  import '../more-less.js';
package/components/offscreen/demo/offscreen.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../demo/demo-page.js';
11
9
  import '../offscreen.js';
package/components/overflow-group/demo/overflow-group.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../demo/demo-page.js';
11
9
  import '../overflow-group.js';
package/components/scroll-wrapper/README.md CHANGED
@@ -1,22 +1,40 @@
1
- # Scroll Wrapper
1
+ # Scroll Containers
2
+ Scroll containers can be used to control how content acts when overflowing its container.
3
+
4
+ ## Horizontal Scroll Wrapper [d2l-scroll-wrapper]
2
5
 
3
6
  The `d2l-scroll-wrapper` element can be used to wrap content which may overflow its horizontal boundaries, providing left/right scroll buttons.
4
7
 
8
+ <!-- docs: start hidden content -->
5
9
  ![scroll wrapper](./screenshots/scroll-wrapper.gif?raw=true)
10
+ <!-- docs: end hidden content -->
6
11
 
12
+ <!-- docs: demo live name:d2l-scroll-wrapper -->
7
13
  ```html
8
14
  <script type="module">
9
15
  import '@brightspace-ui/core/components/scroll-wrapper/scroll-wrapper.js';
10
16
  </script>
11
- <d2l-scroll-wrapper>
12
- <!-- content which may overflow horizontally -->
13
- </d2l-scroll-wrapper>
17
+ <!-- docs: start hidden content -->
18
+ <style>
19
+ div {
20
+ max-width: 100%;
21
+ }
22
+ p {
23
+ user-select: none;
24
+ white-space: nowrap;
25
+ }
26
+ </style>
27
+ <!-- docs: end hidden content -->
28
+ <div>
29
+ <d2l-scroll-wrapper>
30
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci repellat cum totam! Enim, sunt. Numquam voluptate, velit quisquam ipsa molestias laudantium odit reiciendis nisi corporis voluptatibus, voluptatum sunt natus, accusantium magnam consequatur fugit officiis minima voluptatem consequuntur nam, earum necessitatibus! Cupiditate ullam repellendus, eius iure voluptas at commodi consectetur, quia, adipisci possimus, ex mollitia. Labore harum error consectetur officiis aut optio, temporibus iste nobis ducimus cumque laudantium rem pariatur. Ut repudiandae id, consequuntur quasi quis pariatur autem corporis perferendis facilis eius similique voluptatibus iusto deleniti odio officia numquam tenetur excepturi, aspernatur sunt minima aut fugiat ipsam.</p>
31
+ </d2l-scroll-wrapper>
32
+ </div>
14
33
  ```
15
34
 
16
- **Properties:**
17
-
35
+ <!-- docs: start hidden content -->
36
+ ### Properties
18
37
  | Property | Type | Description |
19
- |--|--|--|
38
+ |---|---|---|
20
39
  | `hide-actions` | Boolean, default: `false` | Whether to hide left/right scroll buttons |
21
-
22
- Looking for an enhancement not listed here? Create a GitHub issue!
40
+ <!-- docs: end hidden content -->
package/components/scroll-wrapper/demo/scroll-wrapper.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../demo/demo-page.js';
11
9
  import './scroll-wrapper-test.js';
package/components/scroll-wrapper/scroll-wrapper.js CHANGED
@@ -13,7 +13,7 @@ const SCROLL_AMOUNT = 0.8;
13
13
  *
14
14
  * Wraps content which may overflow its horizontal boundaries, providing left/right scroll buttons.
15
15
  *
16
- * @slot - Content to wrap
16
+ * @slot - User provided content to wrap
17
17
  */
18
18
  class ScrollWrapper extends FocusVisiblePolyfillMixin(RtlMixin(LitElement)) {
19
19
 
@@ -21,6 +21,7 @@ class ScrollWrapper extends FocusVisiblePolyfillMixin(RtlMixin(LitElement)) {
21
21
  return {
22
22
  /**
23
23
  * Whether to hide left/right scroll buttons
24
+ * @type {boolean}
24
25
  */
25
26
  hideActions: {
26
27
  attribute: 'hide-actions',
package/components/selection/demo/selection.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../demo/demo-page.js';
11
9
  import '../selection-action.js';
package/components/skeleton/demo/skeleton-mixin.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../demo/demo-page.js';
11
9
  import './skeleton-test-box.js';
package/components/status-indicator/demo/status-indicator.html CHANGED
@@ -3,10 +3,8 @@
3
3
 
4
4
  <head>
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
6
  <meta charset="UTF-8">
8
7
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
9
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
10
8
  <script type="module">
11
9
  import '../../demo/demo-page.js';
12
10
  import '../status-indicator.js';
package/components/switch/demo/switch.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../demo/demo-page.js';
11
9
  import '../switch.js';
package/components/table/demo/table.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../demo/demo-page.js';
11
9
  import './table-test.js';
package/components/tabs/demo/tabs.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../demo/demo-page.js';
11
9
  import '../../button/button-subtle.js';
package/components/tooltip/demo/tooltip.html CHANGED
@@ -3,10 +3,8 @@
3
3
 
4
4
  <head>
5
5
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
6
  <meta charset="UTF-8">
8
7
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
9
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
10
8
  <script type="module">
11
9
  import '../../button/button.js';
12
10
  import '../../colors/colors.js';
package/components/typography/demo/typography.html CHANGED
@@ -2,10 +2,8 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
5
  <meta charset="UTF-8">
7
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9
7
  <script type="module">
10
8
  import '../../demo/demo-page.js';
11
9
  </script>