From 6440387432df627349279f084bc9ff0879a8ac12 Mon Sep 17 00:00:00 2001 From: cyantree Date: Tue, 20 Feb 2024 18:49:53 +0100 Subject: [PATCH 01/40] fix `sl-rating` sometimes not resetting correctly when using `precision` and leaving with the mouse (#1877) Co-authored-by: cyantree --- src/components/rating/rating.component.ts | 2 -- src/components/rating/rating.styles.ts | 1 + 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/rating/rating.component.ts b/src/components/rating/rating.component.ts index a00c2870..4279cdd5 100644 --- a/src/components/rating/rating.component.ts +++ b/src/components/rating/rating.component.ts @@ -264,7 +264,6 @@ export default class SlRating extends ShoelaceElement { 'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1 })} role="presentation" - @mouseenter=${this.handleMouseEnter} >
= index + 1 })} role="presentation" - @mouseenter=${this.handleMouseEnter} > ${unsafeHTML(this.getSymbol(index + 1))} diff --git a/src/components/rating/rating.styles.ts b/src/components/rating/rating.styles.ts index ed57fd84..6a1e1222 100644 --- a/src/components/rating/rating.styles.ts +++ b/src/components/rating/rating.styles.ts @@ -57,6 +57,7 @@ export default css` .rating__symbol { transition: var(--sl-transition-fast) scale; + pointer-events: none; } .rating__symbol--hover { From 9b19c4c782c662b143fc8a84455499c63980cc61 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Tue, 20 Feb 2024 12:51:59 -0500 Subject: [PATCH 02/40] update changelog --- docs/pages/resources/changelog.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index 42aec6e5..532b2873 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -12,6 +12,10 @@ Components with the Experimental bad New versions of Shoelace are released as-needed and generally occur when a critical mass of changes have accumulated. At any time, you can see what's coming in the next release by visiting [next.shoelace.style](https://next.shoelace.style). +## Next + +- Fixed a bug in `` that caused the rating to not reset in some circumstances [#1877] + ## 2.14.0 - Added the Arabic translation [#1852] From 6e288a80a3ec684fdf97b8c10bf54647ca781de9 Mon Sep 17 00:00:00 2001 From: stefanholzapfel Date: Tue, 20 Feb 2024 19:44:53 +0100 Subject: [PATCH 03/40] feat(sl-popup): Add contextElement property to VirtualElement interface (#1874) --- docs/pages/components/popup.md | 12 ++++++++++++ src/components/popup/popup.component.ts | 3 ++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/docs/pages/components/popup.md b/docs/pages/components/popup.md index 8903918f..5aed6a2e 100644 --- a/docs/pages/components/popup.md +++ b/docs/pages/components/popup.md @@ -1839,3 +1839,15 @@ const App = () => { ); }; ``` + +Sometimes the `getBoundingClientRects` might be derived from a real element. In this case provide the anchor element as context to ensure clipping and position updates for the popup work well. + +```ts +const virtualElement = { + getBoundingClientRect() { + // ... + return { width, height, x, y, top, left, right, bottom }; + }, + contextElement: anchorElement +}; +``` diff --git a/src/components/popup/popup.component.ts b/src/components/popup/popup.component.ts index dd7e524c..d724fa1c 100644 --- a/src/components/popup/popup.component.ts +++ b/src/components/popup/popup.component.ts @@ -10,10 +10,11 @@ import type { CSSResultGroup } from 'lit'; export interface VirtualElement { getBoundingClientRect: () => DOMRect; + contextElement?: Element; } function isVirtualElement(e: unknown): e is VirtualElement { - return e !== null && typeof e === 'object' && 'getBoundingClientRect' in e; + return e !== null && typeof e === 'object' && 'getBoundingClientRect' in e && ('contextElement' in e ? e instanceof Element : true); } /** From 23f09dfa79bd06426b476bd22a47763e2c1225f8 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Tue, 20 Feb 2024 13:46:09 -0500 Subject: [PATCH 04/40] update changelog --- docs/pages/resources/changelog.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index 532b2873..9390e637 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -14,6 +14,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti ## Next +- Added support for `contextElement` to `VirtualElements` in `` [#1874] - Fixed a bug in `` that caused the rating to not reset in some circumstances [#1877] ## 2.14.0 From f2a42565e29c04d953928969ca7ba9b2cbb0fa56 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Tue, 20 Feb 2024 13:48:47 -0500 Subject: [PATCH 05/40] prettier --- src/components/popup/popup.component.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/popup/popup.component.ts b/src/components/popup/popup.component.ts index d724fa1c..f5955807 100644 --- a/src/components/popup/popup.component.ts +++ b/src/components/popup/popup.component.ts @@ -14,7 +14,12 @@ export interface VirtualElement { } function isVirtualElement(e: unknown): e is VirtualElement { - return e !== null && typeof e === 'object' && 'getBoundingClientRect' in e && ('contextElement' in e ? e instanceof Element : true); + return ( + e !== null && + typeof e === 'object' && + 'getBoundingClientRect' in e && + ('contextElement' in e ? e instanceof Element : true) + ); } /** From e9405d33a8ca6a9c8fca5e8a097ff11bf987632d Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Tue, 20 Feb 2024 13:55:50 -0500 Subject: [PATCH 06/40] Fix close behavior when select is in a shadow root; fixes #1859 (#1878) * fix close behavior when select is in a shadow root * add pr --- docs/pages/resources/changelog.md | 1 + src/components/select/select.component.ts | 24 +++++++++++++++-------- 2 files changed, 17 insertions(+), 8 deletions(-) diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index 9390e637..e56e9602 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -16,6 +16,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti - Added support for `contextElement` to `VirtualElements` in `` [#1874] - Fixed a bug in `` that caused the rating to not reset in some circumstances [#1877] +- Fixed a bug in `` that caused the menu to not close when rendered in a shadow root [#1878] ## 2.14.0 diff --git a/src/components/select/select.component.ts b/src/components/select/select.component.ts index 44f18cac..a0ea2f53 100644 --- a/src/components/select/select.component.ts +++ b/src/components/select/select.component.ts @@ -224,7 +224,6 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon // // https://github.com/shoelace-style/shoelace/issues/1763 // - const root = this.getRootNode(); if ('CloseWatcher' in window) { this.closeWatcher?.destroy(); this.closeWatcher = new CloseWatcher(); @@ -235,16 +234,25 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon } }; } - root.addEventListener('focusin', this.handleDocumentFocusIn); - root.addEventListener('keydown', this.handleDocumentKeyDown); - root.addEventListener('mousedown', this.handleDocumentMouseDown); + document.addEventListener('focusin', this.handleDocumentFocusIn); + document.addEventListener('keydown', this.handleDocumentKeyDown); + document.addEventListener('mousedown', this.handleDocumentMouseDown); + + // If the component is rendered in a shadow root, we need to attach the focusin listener there too + if (this.getRootNode() !== document) { + this.getRootNode().addEventListener('focusin', this.handleDocumentFocusIn); + } } private removeOpenListeners() { - const root = this.getRootNode(); - root.removeEventListener('focusin', this.handleDocumentFocusIn); - root.removeEventListener('keydown', this.handleDocumentKeyDown); - root.removeEventListener('mousedown', this.handleDocumentMouseDown); + document.removeEventListener('focusin', this.handleDocumentFocusIn); + document.removeEventListener('keydown', this.handleDocumentKeyDown); + document.removeEventListener('mousedown', this.handleDocumentMouseDown); + + if (this.getRootNode() !== document) { + this.getRootNode().removeEventListener('focusin', this.handleDocumentFocusIn); + } + this.closeWatcher?.destroy(); } From 07b13d489a9eef9cb3059a4b0f752dda493102a8 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Tue, 20 Feb 2024 14:07:28 -0500 Subject: [PATCH 07/40] reorder --- src/components/select/select.component.ts | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/select/select.component.ts b/src/components/select/select.component.ts index a0ea2f53..bffebfe5 100644 --- a/src/components/select/select.component.ts +++ b/src/components/select/select.component.ts @@ -224,6 +224,15 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon // // https://github.com/shoelace-style/shoelace/issues/1763 // + document.addEventListener('focusin', this.handleDocumentFocusIn); + document.addEventListener('keydown', this.handleDocumentKeyDown); + document.addEventListener('mousedown', this.handleDocumentMouseDown); + + // If the component is rendered in a shadow root, we need to attach the focusin listener there too + if (this.getRootNode() !== document) { + this.getRootNode().addEventListener('focusin', this.handleDocumentFocusIn); + } + if ('CloseWatcher' in window) { this.closeWatcher?.destroy(); this.closeWatcher = new CloseWatcher(); @@ -234,14 +243,6 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon } }; } - document.addEventListener('focusin', this.handleDocumentFocusIn); - document.addEventListener('keydown', this.handleDocumentKeyDown); - document.addEventListener('mousedown', this.handleDocumentMouseDown); - - // If the component is rendered in a shadow root, we need to attach the focusin listener there too - if (this.getRootNode() !== document) { - this.getRootNode().addEventListener('focusin', this.handleDocumentFocusIn); - } } private removeOpenListeners() { From b589938443f35a9f41a49d02c52bf2908a45fcb9 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Tue, 20 Feb 2024 14:18:05 -0500 Subject: [PATCH 08/40] fixes #1709 (#1879) --- docs/pages/resources/changelog.md | 1 + src/components/tree/tree.styles.ts | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index e56e9602..a0b0a8bf 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -17,6 +17,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti - Added support for `contextElement` to `VirtualElements` in `` [#1874] - Fixed a bug in `` that caused the rating to not reset in some circumstances [#1877] - Fixed a bug in `` that caused the menu to not close when rendered in a shadow root [#1878] +- Fixed a bug in `` that caused a new stacking context resulting in tooltips being clipped [#1709] ## 2.14.0 diff --git a/src/components/tree/tree.styles.ts b/src/components/tree/tree.styles.ts index c3364f71..7b803c4e 100644 --- a/src/components/tree/tree.styles.ts +++ b/src/components/tree/tree.styles.ts @@ -13,7 +13,6 @@ export default css` --indent-size: var(--sl-spacing-large); display: block; - isolation: isolate; /* * Tree item indentation uses the "em" unit to increment its width on each level, so setting the font size to zero From e1102ba9cfb66020062261685464b39d7c01832e Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Tue, 20 Feb 2024 14:58:11 -0500 Subject: [PATCH 09/40] prevent tab group safari twitch; fixes #1839 --- docs/pages/resources/changelog.md | 1 + src/components/tab-group/tab-group.component.ts | 7 ++++++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index a0b0a8bf..95bb6a87 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -18,6 +18,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti - Fixed a bug in `` that caused the rating to not reset in some circumstances [#1877] - Fixed a bug in `` that caused the menu to not close when rendered in a shadow root [#1878] - Fixed a bug in `` that caused a new stacking context resulting in tooltips being clipped [#1709] +- Fixed a bug in `` that caused the scroll controls to toggle indefinitely when zoomed in Safari [#1839] ## 2.14.0 diff --git a/src/components/tab-group/tab-group.component.ts b/src/components/tab-group/tab-group.component.ts index 5b592044..28607628 100644 --- a/src/components/tab-group/tab-group.component.ts +++ b/src/components/tab-group/tab-group.component.ts @@ -338,8 +338,13 @@ export default class SlTabGroup extends ShoelaceElement { if (this.noScrollControls) { this.hasScrollControls = false; } else { + // In most cases, we can compare scrollWidth to clientWidth to determine if scroll controls should show. However, + // Safari appears to calculate this incorrectly when zoomed at 110%, causing the controls to toggle indefinitely. + // Adding a single pixel to the comparison seems to resolve it. + // + // See https://github.com/shoelace-style/shoelace/issues/1839 this.hasScrollControls = - ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth; + ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth + 1; } } From 298892b10a1cc42536d2e6f2b08e5912c029833e Mon Sep 17 00:00:00 2001 From: cyantree Date: Wed, 21 Feb 2024 00:27:32 +0100 Subject: [PATCH 10/40] fix race condition in `submenu-controller` (#1815) --- src/components/menu-item/submenu-controller.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/menu-item/submenu-controller.ts b/src/components/menu-item/submenu-controller.ts index 67b0ee35..3d03b07d 100644 --- a/src/components/menu-item/submenu-controller.ts +++ b/src/components/menu-item/submenu-controller.ts @@ -229,6 +229,7 @@ export class SubmenuController implements ReactiveController { // newly opened menu. private enableSubmenu(delay = true) { if (delay) { + window.clearTimeout(this.enableSubmenuTimer); this.enableSubmenuTimer = window.setTimeout(() => { this.setSubmenuState(true); }, this.submenuOpenDelay); @@ -238,7 +239,7 @@ export class SubmenuController implements ReactiveController { } private disableSubmenu() { - clearTimeout(this.enableSubmenuTimer); + window.clearTimeout(this.enableSubmenuTimer); this.setSubmenuState(false); } From 033fec94712d94b0f7d9ce36711545083c9d62b6 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Wed, 21 Feb 2024 13:29:40 -0500 Subject: [PATCH 11/40] update changelog --- docs/pages/resources/changelog.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index 95bb6a87..8c82725e 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -19,6 +19,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti - Fixed a bug in `` that caused the menu to not close when rendered in a shadow root [#1878] - Fixed a bug in `` that caused a new stacking context resulting in tooltips being clipped [#1709] - Fixed a bug in `` that caused the scroll controls to toggle indefinitely when zoomed in Safari [#1839] +- Fixed a bug in the submenu controller that allowed two submenus to be open at the same time [#1880] ## 2.14.0 From 1a2969a74b4de08a9171e2bf21e3e6c719c18c94 Mon Sep 17 00:00:00 2001 From: RoyDust <50167909+RoyDust@users.noreply.github.com> Date: Sat, 24 Feb 2024 00:42:49 +0800 Subject: [PATCH 12/40] fix:fix multi-select tag not changing with size (#1886) Co-authored-by: xiongwei --- src/components/select/select.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/select/select.component.ts b/src/components/select/select.component.ts index bffebfe5..d33460d3 100644 --- a/src/components/select/select.component.ts +++ b/src/components/select/select.component.ts @@ -617,7 +617,7 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
`; } else if (index === this.maxOptionsVisible) { // Hit tag limit - return html`+${this.selectedOptions.length - index}`; + return html`+${this.selectedOptions.length - index}`; } return html``; }); From 12ce0217e5a521c52abdc91653979b382d41e836 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 23 Feb 2024 11:43:38 -0500 Subject: [PATCH 13/40] update changelog --- docs/pages/resources/changelog.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index 8c82725e..d2f74034 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -20,6 +20,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti - Fixed a bug in `` that caused a new stacking context resulting in tooltips being clipped [#1709] - Fixed a bug in `` that caused the scroll controls to toggle indefinitely when zoomed in Safari [#1839] - Fixed a bug in the submenu controller that allowed two submenus to be open at the same time [#1880] +- Fixed a bug in `` where the tag size wouldn't update with the control's size [#1886] ## 2.14.0 From 2128e6210959ffb468e7fb799dab365b3664367c Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 23 Feb 2024 11:47:41 -0500 Subject: [PATCH 14/40] fix required content color; closes #1882 (#1889) --- docs/pages/resources/changelog.md | 1 + src/components/checkbox/checkbox.styles.ts | 1 + src/components/switch/switch.styles.ts | 1 + 3 files changed, 3 insertions(+) diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index d2f74034..a8bbaa20 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -21,6 +21,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti - Fixed a bug in `` that caused the scroll controls to toggle indefinitely when zoomed in Safari [#1839] - Fixed a bug in the submenu controller that allowed two submenus to be open at the same time [#1880] - Fixed a bug in `` where the tag size wouldn't update with the control's size [#1886] +- Fixed a bug in `` and `` where the color of the required content wasn't applying correctly ## 2.14.0 diff --git a/src/components/checkbox/checkbox.styles.ts b/src/components/checkbox/checkbox.styles.ts index 7dc0eceb..db09e7cf 100644 --- a/src/components/checkbox/checkbox.styles.ts +++ b/src/components/checkbox/checkbox.styles.ts @@ -115,6 +115,7 @@ export default css` :host([required]) .checkbox__label::after { content: var(--sl-input-required-content); + color: var(--sl-input-required-content-color); margin-inline-start: var(--sl-input-required-content-offset); } `; diff --git a/src/components/switch/switch.styles.ts b/src/components/switch/switch.styles.ts index 5ef6f636..4cf61202 100644 --- a/src/components/switch/switch.styles.ts +++ b/src/components/switch/switch.styles.ts @@ -155,6 +155,7 @@ export default css` :host([required]) .switch__label::after { content: var(--sl-input-required-content); + color: var(--sl-input-required-content-color); margin-inline-start: var(--sl-input-required-content-offset); } From 9cbb0b8a959d954d942b54a8ef0270965e946d79 Mon Sep 17 00:00:00 2001 From: Susanne Kirchner Date: Thu, 29 Feb 2024 17:14:58 +0100 Subject: [PATCH 15/40] Add missing form-control styles import (#1897) --- src/components/checkbox/checkbox.component.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/checkbox/checkbox.component.ts b/src/components/checkbox/checkbox.component.ts index 903d13f0..603dd4e6 100644 --- a/src/components/checkbox/checkbox.component.ts +++ b/src/components/checkbox/checkbox.component.ts @@ -8,6 +8,7 @@ import { live } from 'lit/directives/live.js'; import { property, query, state } from 'lit/decorators.js'; import { watch } from '../../internal/watch.js'; import componentStyles from '../../styles/component.styles.js'; +import formControlStyles from '../../styles/form-control.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import SlIcon from '../icon/icon.component.js'; import styles from './checkbox.styles.js'; @@ -41,7 +42,7 @@ import type { ShoelaceFormControl } from '../../internal/shoelace-element.js'; * @csspart form-control-help-text - The help text's wrapper. */ export default class SlCheckbox extends ShoelaceElement implements ShoelaceFormControl { - static styles: CSSResultGroup = [componentStyles, styles]; + static styles: CSSResultGroup = [componentStyles, formControlStyles, styles]; static dependencies = { 'sl-icon': SlIcon }; private readonly formControlController = new FormControlController(this, { From e2bce65c023048ca88e217800fcbd85918e1890c Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 29 Feb 2024 11:17:40 -0500 Subject: [PATCH 16/40] update changelog --- docs/pages/resources/changelog.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index a8bbaa20..cbcc8a8c 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -22,6 +22,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti - Fixed a bug in the submenu controller that allowed two submenus to be open at the same time [#1880] - Fixed a bug in `` where the tag size wouldn't update with the control's size [#1886] - Fixed a bug in `` and `` where the color of the required content wasn't applying correctly +- Fixed a bug in `` where help text was incorrectly styled [#1897] ## 2.14.0 From c88b38f194da32c8a416a60a622134936228f413 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Amadej=20Glasen=C4=8Dnik?= <39464103+aglasencnik@users.noreply.github.com> Date: Thu, 29 Feb 2024 17:32:38 +0100 Subject: [PATCH 17/40] Add Slovenian translation (#1893) --- src/translations/sl.ts | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 src/translations/sl.ts diff --git a/src/translations/sl.ts b/src/translations/sl.ts new file mode 100644 index 00000000..a76b5d86 --- /dev/null +++ b/src/translations/sl.ts @@ -0,0 +1,41 @@ +import { registerTranslation } from '@shoelace-style/localize'; +import type { Translation } from '../utilities/localize.js'; + +const translation: Translation = { + $code: 'sl', + $name: 'Slovenski', + $dir: 'ltr', + + carousel: 'Vrtiljak', + clearEntry: 'Počisti vnos', + close: 'Zapri', + copied: 'Kopirano', + copy: 'Kopiraj', + currentValue: 'Trenutna vrednost', + error: 'Napaka', + goToSlide: (slide, count) => `Pojdi na diapozitiv ${slide} od ${count}`, + hidePassword: 'Skrij geslo', + loading: 'Nalaganje', + nextSlide: 'Naslednji diapozitiv', + numOptionsSelected: num => { + if (num === 0) return 'Nobena možnost ni izbrana'; + if (num === 1) return '1 možnost izbrana'; + if (num === 2) return '2 možnosti izbrani'; + if (num === 3 || num === 4) return `${num} možnosti izbrane`; + return `${num} možnosti izbranih`; + }, + previousSlide: 'Prejšnji diapozitiv', + progress: 'Napredek', + remove: 'Odstrani', + resize: 'Spremeni velikost', + scrollToEnd: 'Pomakni se na konec', + scrollToStart: 'Pomakni se na začetek', + selectAColorFromTheScreen: 'Izberite barvo z zaslona', + showPassword: 'Prikaži geslo', + slideNum: slide => `Diapozitiv ${slide}`, + toggleColorFormat: 'Preklopi format barve' +}; + +registerTranslation(translation); + +export default translation; From 7f87887477d7710e66d9c018722fed2e4a2ed002 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 29 Feb 2024 11:33:09 -0500 Subject: [PATCH 18/40] update changelog --- docs/pages/resources/changelog.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index cbcc8a8c..8ece4d0e 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -14,6 +14,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti ## Next +- Added the Slovenian translation [#1893] - Added support for `contextElement` to `VirtualElements` in `` [#1874] - Fixed a bug in `` that caused the rating to not reset in some circumstances [#1877] - Fixed a bug in `` that caused the menu to not close when rendered in a shadow root [#1878] From 3bc8495874c2f48d8c348fcab0b859a2dc44f995 Mon Sep 17 00:00:00 2001 From: Konnor Rogers Date: Wed, 6 Mar 2024 09:07:14 -0500 Subject: [PATCH 19/40] Fixes scroll lock layout shift (#1895) * fix scroll lock layout shift * changelog entry * changelog entry * prettier * add notes about browser support --- docs/pages/resources/changelog.md | 1 + src/internal/scroll.ts | 26 ++++++++++++++++++++------ src/themes/_utility.css | 3 ++- 3 files changed, 23 insertions(+), 7 deletions(-) diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index 8ece4d0e..902e9a35 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -16,6 +16,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti - Added the Slovenian translation [#1893] - Added support for `contextElement` to `VirtualElements` in `` [#1874] +- Fixed a bug in `.sl-scroll-lock` causing layout shifts. [#1895] - Fixed a bug in `` that caused the rating to not reset in some circumstances [#1877] - Fixed a bug in `` that caused the menu to not close when rendered in a shadow root [#1878] - Fixed a bug in `` that caused a new stacking context resulting in tooltips being clipped [#1709] diff --git a/src/internal/scroll.ts b/src/internal/scroll.ts index 81460e2e..85939ed5 100644 --- a/src/internal/scroll.ts +++ b/src/internal/scroll.ts @@ -8,6 +8,19 @@ function getScrollbarWidth() { return Math.abs(window.innerWidth - documentWidth); } +/** + * Used in conjunction with `scrollbarWidth` to set proper body padding in case the user has padding already on the `` element. + */ +function getExistingBodyPadding() { + const padding = Number(getComputedStyle(document.body).paddingRight.replace(/px/, '')); + + if (isNaN(padding) || !padding) { + return 0; + } + + return padding; +} + /** * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible * without premature unlocking. @@ -17,10 +30,11 @@ export function lockBodyScrolling(lockingEl: HTMLElement) { // When the first lock is created, set the scroll lock size to match the scrollbar's width to prevent content from // shifting. We only do this on the first lock because the scrollbar width will measure zero after overflow is hidden. - if (!document.body.classList.contains('sl-scroll-lock')) { - const scrollbarWidth = getScrollbarWidth(); // must be measured before the `sl-scroll-lock` class is applied - document.body.classList.add('sl-scroll-lock'); - document.body.style.setProperty('--sl-scroll-lock-size', `${scrollbarWidth}px`); + if (!document.documentElement.classList.contains('sl-scroll-lock')) { + /** Scrollbar width + body padding calculation can go away once Safari has scrollbar-gutter support. */ + const scrollbarWidth = getScrollbarWidth() + getExistingBodyPadding(); // must be measured before the `sl-scroll-lock` class is applied + document.documentElement.classList.add('sl-scroll-lock'); + document.documentElement.style.setProperty('--sl-scroll-lock-size', `${scrollbarWidth}px`); } } @@ -31,8 +45,8 @@ export function unlockBodyScrolling(lockingEl: HTMLElement) { locks.delete(lockingEl); if (locks.size === 0) { - document.body.classList.remove('sl-scroll-lock'); - document.body.style.removeProperty('--sl-scroll-lock-size'); + document.documentElement.classList.remove('sl-scroll-lock'); + document.documentElement.style.removeProperty('--sl-scroll-lock-size'); } } diff --git a/src/themes/_utility.css b/src/themes/_utility.css index 4d383d3d..f0e2eefc 100644 --- a/src/themes/_utility.css +++ b/src/themes/_utility.css @@ -11,8 +11,9 @@ } } +/** This can go away once Safari has scrollbar-gutter support. */ @supports not (scrollbar-gutter: stable) { - .sl-scroll-lock { + .sl-scroll-lock body { padding-right: var(--sl-scroll-lock-size) !important; overflow: hidden !important; } From 2a4b3ee2e94e0f154307255a19cab2b4dc8f5dc1 Mon Sep 17 00:00:00 2001 From: cyantree Date: Wed, 6 Mar 2024 16:34:59 +0100 Subject: [PATCH 20/40] fix form selection when element is detached (#1806) (#1881) Co-authored-by: cyantree --- src/internal/form.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/internal/form.ts b/src/internal/form.ts index 46c5a44a..5cef2636 100644 --- a/src/internal/form.ts +++ b/src/internal/form.ts @@ -72,9 +72,8 @@ export class FormControlController implements ReactiveController { const formId = input.form; if (formId) { - const root = input.getRootNode() as Document | ShadowRoot; - - const form = root.getElementById(formId); + const root = input.getRootNode() as Document | ShadowRoot | HTMLElement; + const form = root.querySelector(`#${formId}`); if (form) { return form as HTMLFormElement; From 3451ec753c57b0af1964867ff78d7004b33fff5e Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 22 Mar 2024 11:44:22 -0400 Subject: [PATCH 21/40] add ks banner --- docs/_includes/default.njk | 17 +++++++ docs/assets/styles/docs.css | 92 +++++++++++++++++++++++++++++++++++++ 2 files changed, 109 insertions(+) diff --git a/docs/_includes/default.njk b/docs/_includes/default.njk index e8c883ba..315d11e6 100644 --- a/docs/_includes/default.njk +++ b/docs/_includes/default.njk @@ -95,6 +95,23 @@ + + + + + + + Get ready for more awesome! + Web Awesome, the next iteration of Shoelace, is on Kickstarter. + + + Read Our Story + +