@brightspace-ui/core 3.280.3 → 3.281.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 (4) hide show
  1. package/components/form/form.js +5 -2
  2. package/components/page/page-divider-internal.js +3 -3
  3. package/custom-elements.json +1 -1
  4. package/package.json +2 -2
package/components/form/form.js CHANGED
@@ -80,7 +80,6 @@ class Form extends LocalizeCoreElement(LitElement) {
80
80
 
81
81
  connectedCallback() {
82
82
  super.connectedCallback();
83
- window.addEventListener('beforeunload', this.#onUnload);
84
83
  /** @ignore */
85
84
  this._isSubForm = !this.dispatchEvent(new CustomEvent('d2l-form-connect', { bubbles: true, composed: true, cancelable: true }));
86
85
  }
@@ -286,7 +285,10 @@ class Form extends LocalizeCoreElement(LitElement) {
286
285
  const ele = e.target;
287
286
 
288
287
  if ((isNativeFormElement(ele) || isCustomFormElement(ele)) && e.type !== 'focusout') {
289
- this._dirty = true;
288
+ if (!this._dirty) {
289
+ window.addEventListener('beforeunload', this.#onUnload);
290
+ this._dirty = true;
291
+ }
290
292
  /** Dispatched whenever any form element fires an `input` or `change` event. Can be used to track whether the form is dirty or not. */
291
293
  this.dispatchEvent(new CustomEvent('d2l-form-dirty'));
292
294
  }
@@ -312,6 +314,7 @@ class Form extends LocalizeCoreElement(LitElement) {
312
314
  }
313
315
 
314
316
  async _submitData(submitter) {
317
+ window.removeEventListener('beforeunload', this.#onUnload);
315
318
  this._dirty = false;
316
319
 
317
320
  let formData = {};
package/components/page/page-divider-internal.js CHANGED
@@ -127,12 +127,12 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
127
127
  width: ${DIVIDER_HANDLE_SIZE}px;
128
128
  }
129
129
  .divider-handle:hover {
130
- background-color: var(--d2l-color-sylvite);
130
+ background-color: var(--d2l-color-gypsum);
131
131
  border-color: var(--d2l-color-celestine);
132
132
  }
133
133
  .slider:focus .divider-handle {
134
- background-color: var(--d2l-color-celestine);
135
- border-color: var(--d2l-color-celestine);
134
+ background-color: var(--d2l-color-celestine-minus-1);
135
+ border-color: var(--d2l-color-celestine-minus-1);
136
136
  }
137
137
  .slider:focus .divider-handle .handle-icon {
138
138
  color: white;
package/custom-elements.json CHANGED
@@ -13202,7 +13202,7 @@
13202
13202
  "properties": [
13203
13203
  {
13204
13204
  "name": "styles",
13205
- "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\\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-sylvite);\\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);\\n\\t\\t\\tborder-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t.slider:focus .divider-handle .handle-icon {\\n\\t\\t\\tcolor: white;\\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`\""
13205
+ "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\\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: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`\""
13206
13206
  },
13207
13207
  {
13208
13208
  "name": "focusElementSelector",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.280.3",
3
+ "version": "3.281.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",
@@ -57,7 +57,7 @@
57
57
  "@rollup/plugin-replace": "^6",
58
58
  "@stylistic/eslint-plugin": "^5",
59
59
  "@web/dev-server": "^1.0",
60
- "chalk": "^5",
60
+ "chalk": "^6",
61
61
  "eslint": "^9",
62
62
  "eslint-config-brightspace": "^4",
63
63
  "eslint-plugin-unicorn": "^65",