@brightspace-ui/core 3.267.1 → 3.268.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 (113) hide show
  1. package/components/alert/alert-toast.js +98 -102
  2. package/components/alert/alert.js +109 -113
  3. package/components/backdrop/backdrop-dirty-overlay.js +13 -17
  4. package/components/backdrop/backdrop-loading.js +105 -109
  5. package/components/backdrop/backdrop.js +50 -54
  6. package/components/breadcrumbs/breadcrumb-current-page.js +19 -23
  7. package/components/breadcrumbs/breadcrumb.js +50 -54
  8. package/components/breadcrumbs/breadcrumbs.js +34 -38
  9. package/components/button/button-add.js +156 -164
  10. package/components/button/button-copy-mixin.js +9 -11
  11. package/components/button/button-copy.js +15 -19
  12. package/components/button/button-icon.js +110 -114
  13. package/components/button/button-move.js +153 -157
  14. package/components/button/button-split-item.js +16 -20
  15. package/components/button/button-split.js +70 -74
  16. package/components/button/button-subtle-copy.js +17 -19
  17. package/components/button/button-subtle.js +145 -149
  18. package/components/button/button-toggle.js +25 -29
  19. package/components/button/button.js +70 -74
  20. package/components/button/floating-buttons.js +63 -67
  21. package/components/calendar/calendar.js +244 -248
  22. package/components/card/card-content-meta.js +13 -15
  23. package/components/card/card-content-title.js +9 -11
  24. package/components/card/card-footer-link.js +76 -80
  25. package/components/card/card-loading-shimmer.js +35 -39
  26. package/components/card/card.js +188 -192
  27. package/components/collapsible-panel/collapsible-panel-group.js +17 -21
  28. package/components/collapsible-panel/collapsible-panel-summary-item.js +27 -31
  29. package/components/collapsible-panel/collapsible-panel.js +258 -262
  30. package/components/count-badge/count-badge-icon.js +12 -16
  31. package/components/count-badge/count-badge-mixin.js +124 -128
  32. package/components/count-badge/count-badge.js +2 -4
  33. package/components/description-list/description-list-wrapper.js +27 -31
  34. package/components/dialog/dialog-confirm.js +55 -59
  35. package/components/dialog/dialog-fullscreen.js +128 -132
  36. package/components/dialog/dialog-mixin.js +39 -41
  37. package/components/dialog/dialog.js +61 -65
  38. package/components/dropdown/dropdown-button-subtle.js +21 -25
  39. package/components/dropdown/dropdown-button.js +31 -35
  40. package/components/dropdown/dropdown-context-menu.js +28 -31
  41. package/components/dropdown/dropdown-menu.js +27 -31
  42. package/components/dropdown/dropdown-more.js +23 -26
  43. package/components/dropdown/dropdown-opener-mixin.js +44 -46
  44. package/components/dropdown/dropdown-popover-mixin.js +155 -159
  45. package/components/dropdown/dropdown-tabs.js +5 -7
  46. package/components/dropdown/dropdown.js +1 -3
  47. package/components/empty-state/empty-state-action-button.js +18 -22
  48. package/components/empty-state/empty-state-action-link.js +14 -18
  49. package/components/empty-state/empty-state-illustrated.js +21 -25
  50. package/components/empty-state/empty-state-simple.js +8 -12
  51. package/components/expand-collapse/expand-collapse-content.js +48 -52
  52. package/components/filter/filter-dimension-set-date-text-value.js +34 -36
  53. package/components/filter/filter-dimension-set-date-time-range-value.js +45 -47
  54. package/components/filter/filter-dimension-set-empty-state.js +17 -19
  55. package/components/filter/filter-dimension-set-value.js +27 -29
  56. package/components/filter/filter-dimension-set.js +65 -67
  57. package/components/filter/filter-overflow-group.js +15 -19
  58. package/components/filter/filter-tags.js +16 -19
  59. package/components/filter/filter.js +115 -119
  60. package/components/focus-trap/focus-trap.js +17 -21
  61. package/components/form/form-element-mixin.js +33 -35
  62. package/components/form/form-error-summary.js +37 -42
  63. package/components/form/form.js +33 -37
  64. package/components/hierarchical-view/hierarchical-view-mixin.js +76 -80
  65. package/components/hierarchical-view/hierarchical-view.js +5 -7
  66. package/components/html-block/html-block.js +45 -49
  67. package/components/icons/icon-custom.js +20 -24
  68. package/components/icons/icon.js +20 -24
  69. package/components/icons/slotted-icon-mixin.js +16 -18
  70. package/components/inputs/input-checkbox-group.js +34 -38
  71. package/components/inputs/input-checkbox.js +106 -110
  72. package/components/inputs/input-color.js +142 -148
  73. package/components/inputs/input-date-range.js +90 -94
  74. package/components/inputs/input-date-time-range-to.js +70 -74
  75. package/components/inputs/input-date-time-range.js +110 -115
  76. package/components/inputs/input-date-time.js +75 -79
  77. package/components/inputs/input-date.js +101 -105
  78. package/components/inputs/input-fieldset.js +37 -43
  79. package/components/inputs/input-group.js +10 -12
  80. package/components/inputs/input-inline-help.js +4 -6
  81. package/components/inputs/input-number.js +112 -118
  82. package/components/inputs/input-percent.js +52 -58
  83. package/components/inputs/input-radio-group.js +45 -49
  84. package/components/inputs/input-radio-spacer.js +11 -13
  85. package/components/inputs/input-radio.js +62 -66
  86. package/components/inputs/input-search.js +63 -68
  87. package/components/inputs/input-select-styles.js +30 -25
  88. package/components/inputs/input-text.js +245 -251
  89. package/components/inputs/input-textarea.js +128 -132
  90. package/components/inputs/input-time-range.js +100 -104
  91. package/components/inputs/input-time.js +107 -113
  92. package/components/link/link-mixin.js +37 -41
  93. package/components/link/link.js +113 -119
  94. package/components/list/list-controls.js +25 -29
  95. package/components/list/list-item-button-mixin.js +10 -12
  96. package/components/list/list-item-checkbox-mixin.js +35 -37
  97. package/components/list/list-item-content.js +33 -35
  98. package/components/list/list-item-drag-drop-mixin.js +45 -47
  99. package/components/list/list-item-drag-handle.js +80 -84
  100. package/components/list/list-item-drag-image.js +77 -81
  101. package/components/list/list-item-expand-collapse-mixin.js +17 -19
  102. package/components/list/list-item-generic-layout.js +222 -226
  103. package/components/list/list-item-link-mixin.js +10 -12
  104. package/components/list/list-item-mixin.js +68 -70
  105. package/components/list/list-item-nav-mixin.js +17 -19
  106. package/components/list/list-item-placement-marker.js +65 -67
  107. package/components/list/list-item-role-mixin.js +9 -11
  108. package/components/list/list-item.js +7 -9
  109. package/components/list/list.js +121 -125
  110. package/components/loading-spinner/loading-spinner.js +93 -97
  111. package/custom-elements.json +1920 -6694
  112. package/helpers/focus.js +5 -1
  113. package/package.json +3 -2
package/components/button/floating-buttons.js CHANGED
@@ -16,84 +16,80 @@ const MINIMUM_TARGET_SIZE = 24;
16
16
  */
17
17
  class FloatingButtons extends LoadingCompleteMixin(LitElement) {
18
18
 
19
- static get properties() {
20
- return {
21
- /**
22
- * Indicates to display buttons as always floating
23
- * @type {boolean}
24
- */
25
- alwaysFloat: { type: Boolean, attribute: 'always-float', reflect: true },
26
- _containerMarginLeft: { attribute: false, type: String },
27
- _containerMarginRight: { attribute: false, type: String },
28
- _floating: { type: Boolean, reflect: true },
29
- _innerContainerLeft: { attribute: false, type: String }
30
- };
31
- }
32
-
33
- static get styles() {
34
- return css`
35
- :host {
36
- box-sizing: border-box;
37
- display: block;
38
- }
19
+ static properties = {
20
+ /**
21
+ * Indicates to display buttons as always floating
22
+ * @type {boolean}
23
+ */
24
+ alwaysFloat: { type: Boolean, attribute: 'always-float', reflect: true },
25
+ _containerMarginLeft: { attribute: false, type: String },
26
+ _containerMarginRight: { attribute: false, type: String },
27
+ _floating: { type: Boolean, reflect: true },
28
+ _innerContainerLeft: { attribute: false, type: String }
29
+ };
30
+
31
+ static styles = css`
32
+ :host {
33
+ box-sizing: border-box;
34
+ display: block;
35
+ }
39
36
 
40
- :host([_floating]) {
41
- bottom: -10px;
42
- left: 0;
43
- position: -webkit-sticky;
44
- position: sticky;
45
- right: 0;
46
- z-index: 997;
47
- }
37
+ :host([_floating]) {
38
+ bottom: -10px;
39
+ left: 0;
40
+ position: -webkit-sticky;
41
+ position: sticky;
42
+ right: 0;
43
+ z-index: 997;
44
+ }
48
45
 
49
- :host([_floating][always-float]) {
50
- bottom: 0;
51
- }
46
+ :host([_floating][always-float]) {
47
+ bottom: 0;
48
+ }
52
49
 
53
- :host([hidden]) {
54
- display: none;
55
- }
50
+ :host([hidden]) {
51
+ display: none;
52
+ }
56
53
 
57
- .d2l-floating-buttons-container {
58
- border-top: 1px solid transparent;
59
- display: block;
60
- }
54
+ .d2l-floating-buttons-container {
55
+ border-top: 1px solid transparent;
56
+ display: block;
57
+ }
61
58
 
62
- :host([_floating]) .d2l-floating-buttons-container {
63
- background-color: #ffffff;
64
- background-color: rgba(255, 255, 255, 0.88);
65
- border-top-color: var(--d2l-color-mica);
66
- box-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */
67
- }
59
+ :host([_floating]) .d2l-floating-buttons-container {
60
+ background-color: #ffffff;
61
+ background-color: rgba(255, 255, 255, 0.88);
62
+ border-top-color: var(--d2l-color-mica);
63
+ box-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */
64
+ }
68
65
 
69
- :host([_floating]:not([always-float])) .d2l-floating-buttons-container {
70
- transform: translate(0, -10px);
71
- transition: transform 500ms, border-top-color 500ms, background-color 500ms;
72
- }
66
+ :host([_floating]:not([always-float])) .d2l-floating-buttons-container {
67
+ transform: translate(0, -10px);
68
+ transition: transform 500ms, border-top-color 500ms, background-color 500ms;
69
+ }
73
70
 
74
- .d2l-floating-buttons-inner-container {
75
- padding: 0.75rem 0 0 0;
76
- position: relative;
77
- }
71
+ .d2l-floating-buttons-inner-container {
72
+ padding: 0.75rem 0 0 0;
73
+ position: relative;
74
+ }
78
75
 
79
- .d2l-floating-buttons-inner-container ::slotted(d2l-button),
80
- .d2l-floating-buttons-inner-container ::slotted(button),
81
- .d2l-floating-buttons-inner-container ::slotted(.d2l-button) {
82
- margin-inline-end: 0.75rem !important;
83
- margin-bottom: 0.75rem !important;
84
- }
76
+ .d2l-floating-buttons-inner-container ::slotted(d2l-button),
77
+ .d2l-floating-buttons-inner-container ::slotted(button),
78
+ .d2l-floating-buttons-inner-container ::slotted(.d2l-button) {
79
+ margin-inline-end: 0.75rem !important;
80
+ margin-bottom: 0.75rem !important;
81
+ }
85
82
 
86
- .d2l-floating-buttons-inner-container ::slotted(d2l-overflow-group) {
87
- padding-bottom: 0.75rem !important;
88
- }
83
+ .d2l-floating-buttons-inner-container ::slotted(d2l-overflow-group) {
84
+ padding-bottom: 0.75rem !important;
85
+ }
89
86
 
90
- @media (prefers-reduced-motion: reduce) {
91
- :host([_floating]:not([always-float])) .d2l-floating-buttons-container {
92
- transition: none;
93
- }
87
+ @media (prefers-reduced-motion: reduce) {
88
+ :host([_floating]:not([always-float])) .d2l-floating-buttons-container {
89
+ transition: none;
94
90
  }
95
- `;
96
- }
91
+ }
92
+ `;
97
93
 
98
94
  constructor() {
99
95
  super();