@brightspace-ui/core 3.271.1 → 3.271.2

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 (4) hide show
  1. package/components/page/page-divider-internal.js +37 -16
  2. package/components/page/page.js +8 -2
  3. package/custom-elements.json +7 -2
  4. package/package.json +1 -2
package/components/page/page-divider-internal.js CHANGED
@@ -1,19 +1,20 @@
1
1
  import '../colors/colors.js';
2
2
  import { css, html, LitElement } from 'lit';
3
+ import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
3
4
  import { formatPercent } from '@brightspace-ui/intl';
4
5
  import { ifDefined } from 'lit/directives/if-defined.js';
5
6
  import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
6
7
 
7
8
  export const DIVIDER_WIDTH = 4;
8
- const KEYBOARD_STEP = 20; // TO DO: Confirm
9
- const KEYBOARD_STEP_LARGE = 80; // TO DO: Confirm
9
+ export const KEYBOARD_STEP = 20; // TO DO: Confirm
10
+ export const KEYBOARD_STEP_LARGE = 80; // TO DO: Confirm
10
11
 
11
12
  const clampedSize = (size, min, max) => Math.max(min, Math.min(size, max));
12
13
 
13
14
  /**
14
15
  * Internal divider used by d2l-page to resize its side-nav and supporting panels.
15
16
  */
16
- class PageDivider extends PropertyRequiredMixin(LitElement) {
17
+ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
17
18
 
18
19
  static properties = {
19
20
  /**
@@ -56,16 +57,22 @@ class PageDivider extends PropertyRequiredMixin(LitElement) {
56
57
  background-color: var(--d2l-color-gypsum);
57
58
  cursor: ew-resize;
58
59
  height: 100%;
59
- outline: none;
60
+ position: relative;
60
61
  width: ${DIVIDER_WIDTH}px;
61
62
  }
62
63
  .divider:hover {
63
64
  background-color: var(--d2l-color-mica);
64
65
  }
65
- .divider:focus {
66
+ .divider:focus-within {
66
67
  background-color: var(--d2l-color-celestine);
67
68
  }
68
69
 
70
+ .slider {
71
+ outline: none;
72
+ position: absolute;
73
+ top: 55px;
74
+ }
75
+
69
76
  :host([panel-type="drawer"]) .divider {
70
77
  background-color: var(--d2l-color-celestine);
71
78
  cursor: ns-resize;
@@ -73,10 +80,17 @@ class PageDivider extends PropertyRequiredMixin(LitElement) {
73
80
  width: 100%;
74
81
  }
75
82
 
83
+ :host([panel-type="drawer"]) .slider {
84
+ inset-inline-end: 18px;
85
+ top: auto;
86
+ }
87
+
76
88
  /* TO DO: Lots more divider styling to come */
77
89
 
78
90
  `;
79
91
 
92
+ static focusElementSelector = '.slider';
93
+
80
94
  constructor() {
81
95
  super();
82
96
 
@@ -95,17 +109,19 @@ class PageDivider extends PropertyRequiredMixin(LitElement) {
95
109
  }
96
110
 
97
111
  return html`
98
- <div
99
- class="divider"
100
- role="slider"
101
- tabindex="0"
102
- aria-label="${this.label}"
103
- aria-orientation="${this.panelType === 'panel' ? 'horizontal' : 'vertical'}"
104
- aria-valuemax="${ifDefined(ariaValues.max)}"
105
- aria-valuemin="${ifDefined(ariaValues.min)}"
106
- aria-valuenow="${ifDefined(ariaValues.now)}"
107
- aria-valuetext="${ifDefined(ariaValues.text)}"
108
- @keydown="${this.#handleKeyDown}">
112
+ <div class="divider" @pointerdown="${this.#handlePointerDown}">
113
+ <div
114
+ class="slider"
115
+ role="slider"
116
+ tabindex="0"
117
+ aria-label="${this.label}"
118
+ aria-orientation="${this.panelType === 'panel' ? 'horizontal' : 'vertical'}"
119
+ aria-valuemax="${ifDefined(ariaValues.max)}"
120
+ aria-valuemin="${ifDefined(ariaValues.min)}"
121
+ aria-valuenow="${ifDefined(ariaValues.now)}"
122
+ aria-valuetext="${ifDefined(ariaValues.text)}"
123
+ @keydown="${this.#handleKeyDown}">
124
+ </div>
109
125
  </div>
110
126
  `;
111
127
  }
@@ -145,6 +161,11 @@ class PageDivider extends PropertyRequiredMixin(LitElement) {
145
161
  this.#sendResizeEvent(requestedSize);
146
162
  }
147
163
 
164
+ #handlePointerDown(e) {
165
+ e.preventDefault();
166
+ this.focus();
167
+ }
168
+
148
169
  #sendResizeEvent(requestedSize) {
149
170
  const clampedRequestedSize = clampedSize(requestedSize, this.minSize, this.maxSize);
150
171
  /** @ignore */
package/components/page/page.js CHANGED
@@ -132,13 +132,18 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
132
132
  }
133
133
 
134
134
  .side-nav-panel,
135
- .supporting-panel {
135
+ .supporting-panel,
136
+ .divider {
136
137
  max-height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));
137
- overflow: clip auto;
138
138
  position: sticky;
139
139
  top: var(--d2l-page-header-height, 0);
140
140
  }
141
141
 
142
+ .side-nav-panel,
143
+ .supporting-panel {
144
+ overflow: clip auto;
145
+ }
146
+
142
147
  .footer:not([hidden]),
143
148
  .floating-buttons-container {
144
149
  display: inline;
@@ -294,6 +299,7 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
294
299
  #renderDivider(panelKey, label, panelPosition) {
295
300
  return html`
296
301
  <d2l-page-divider-internal
302
+ class="divider"
297
303
  data-panel-key="${panelKey}"
298
304
  label="${label}"
299
305
  current-size="${this._panelState.getSize(panelKey)}"
package/custom-elements.json CHANGED
@@ -6216,7 +6216,12 @@
6216
6216
  {
6217
6217
  "name": "styles",
6218
6218
  "type": "CSSResult",
6219
- "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tflex: none;\\n\\t\\t}\\n\\t\\t.divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tcursor: ew-resize;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\toutline: none;\\n\\t\\t\\twidth: ${DIVIDER_WIDTH}px;\\n\\t\\t}\\n\\t\\t.divider:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-mica);\\n\\t\\t}\\n\\t\\t.divider:focus {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\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\\n\\t\\t/* TO DO: Lots more divider styling to come */\\n\\n\\t`\""
6219
+ "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tflex: none;\\n\\t\\t}\\n\\t\\t.divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\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-mica);\\n\\t\\t}\\n\\t\\t.divider:focus-within {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\n\\t\\t.slider {\\n\\t\\t\\toutline: none;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 55px;\\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\\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 divider styling to come */\\n\\n\\t`\""
6220
+ },
6221
+ {
6222
+ "name": "focusElementSelector",
6223
+ "type": "string",
6224
+ "default": "\".slider\""
6220
6225
  },
6221
6226
  {
6222
6227
  "name": "currentSize",
@@ -6489,7 +6494,7 @@
6489
6494
  {
6490
6495
  "name": "styles",
6491
6496
  "type": "CSSResult",
6492
- "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-page-header-max-width: 1230px;\\n\\t\\t\\t--d2l-page-content-max-width: 1230px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1230px;\\n\\t\\t\\t--d2l-page-margin-inline: auto;\\n\\t\\t\\t--d2l-page-padding: 30px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"wide\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 1440px;\\n\\t\\t\\t--d2l-page-content-max-width: 1440px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1440px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"fullscreen\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 100%;\\n\\t\\t\\t--d2l-page-content-max-width: 100%;\\n\\t\\t\\t--d2l-page-footer-max-width: 100%;\\n\\t\\t}\\n\\n\\t\\t@media (max-width: 929px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 24px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t@media (max-width: 767px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 18px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.header {\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\n\\t\\t.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t.content {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-content-max-width, 100%);\\n\\t\\t\\tpadding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */\\n\\t\\t}\\n\\t\\t.content.has-panels {\\n\\t\\t\\tmin-height: calc(100vh - var(--d2l-page-header-height-measured, 0px));\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(${MAIN_MIN_WIDTH}px, 100%);\\n\\t\\t}\\n\\n\\t\\t.side-nav,\\n\\t\\t.supporting {\\n\\t\\t\\tdisplay: contents;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\tmax-height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.footer:not([hidden]),\\n\\t\\t.floating-buttons-container {\\n\\t\\t\\tdisplay: inline;\\n\\t\\t}\\n\\t\\t.fixed-footer {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tinset: auto 0 0;\\n\\t\\t\\tpadding-block-start: 0.75rem;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 10; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\t\\t.footer-contents {\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-footer-max-width, 100%);\\n\\t\\t}\\n\\t`\""
6497
+ "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-page-header-max-width: 1230px;\\n\\t\\t\\t--d2l-page-content-max-width: 1230px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1230px;\\n\\t\\t\\t--d2l-page-margin-inline: auto;\\n\\t\\t\\t--d2l-page-padding: 30px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"wide\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 1440px;\\n\\t\\t\\t--d2l-page-content-max-width: 1440px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1440px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"fullscreen\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 100%;\\n\\t\\t\\t--d2l-page-content-max-width: 100%;\\n\\t\\t\\t--d2l-page-footer-max-width: 100%;\\n\\t\\t}\\n\\n\\t\\t@media (max-width: 929px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 24px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t@media (max-width: 767px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 18px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.header {\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\n\\t\\t.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t.content {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-content-max-width, 100%);\\n\\t\\t\\tpadding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */\\n\\t\\t}\\n\\t\\t.content.has-panels {\\n\\t\\t\\tmin-height: calc(100vh - var(--d2l-page-header-height-measured, 0px));\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(${MAIN_MIN_WIDTH}px, 100%);\\n\\t\\t}\\n\\n\\t\\t.side-nav,\\n\\t\\t.supporting {\\n\\t\\t\\tdisplay: contents;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel,\\n\\t\\t.divider {\\n\\t\\t\\tmax-height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t}\\n\\n\\t\\t.footer:not([hidden]),\\n\\t\\t.floating-buttons-container {\\n\\t\\t\\tdisplay: inline;\\n\\t\\t}\\n\\t\\t.fixed-footer {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tinset: auto 0 0;\\n\\t\\t\\tpadding-block-start: 0.75rem;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 10; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\t\\t.footer-contents {\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-footer-max-width, 100%);\\n\\t\\t}\\n\\t`\""
6493
6498
  },
6494
6499
  {
6495
6500
  "name": "widthType",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.271.1",
3
+ "version": "3.271.2",
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",
@@ -61,7 +61,6 @@
61
61
  "eslint": "^9",
62
62
  "eslint-config-brightspace": "^4",
63
63
  "eslint-plugin-unicorn": "^65",
64
- "glob-all": "^3",
65
64
  "messageformat-validator": "^3.0.0-beta",
66
65
  "mocha": "^11",
67
66
  "rollup": "^4",