update from upstream fork

README.md

@@ -9,7 +9,7 @@ A forward-thinking library of web components.
 - Built with accessibility in mind ♿️
 - Open source 😸
 
-Designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska).
+Designed in New Hampshire by [Cory LaViska](https://twitter.com/cory_laviska).
 
 ---
 
@@ -77,6 +77,6 @@ Shoelace is an open source project and contributions are encouraged! If you're i
 
 ## License
 
-Shoelace was created by [Cory LaViska](https://twitter.com/claviska) and is available under the terms of the MIT license.
+Shoelace was created by [Cory LaViska](https://twitter.com/cory_laviska) and is available under the terms of the MIT license.
 
 Whether you're building Shoelace or building something _with_ Shoelace — have fun creating! 🥾

cspell.json

@@ -14,6 +14,7 @@
     "autoloading",
     "autoplay",
     "bezier",
+    "Bokmål",
     "boxicons",
     "CACHEABLE",
     "callout",

docs/_includes/component.njk

@@ -283,7 +283,7 @@
       </tbody>
     </table>
 
-    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#custom-properties') }}">customizing CSS custom properties</a>.</em></p>
+    <p><em>Learn more about <a href="{{ rootUrl('/getting-started/customizing#custom-properties') }}">customizing CSS custom properties</a>.</em></p>
   {% endif %}
 
   {# CSS Parts #}

docs/pages/components/tag.md

@@ -31,7 +31,7 @@ const App = () => (
 
 ### Sizes
 
-Use the `size` attribute to change a tab's size.
+Use the `size` attribute to change a tag's size.
 
 ```html:preview
 <sl-tag size="small">Small</sl-tag>
@@ -53,7 +53,7 @@ const App = () => (
 
 ### Pill
 
-Use the `pill` attribute to give tabs rounded edges.
+Use the `pill` attribute to give tags rounded edges.
 
 ```html:preview
 <sl-tag size="small" pill>Small</sl-tag>

docs/pages/index.md

@@ -106,7 +106,7 @@ If you need to support IE11 or pre-Chromium Edge, this library isn't for you. Al
 
 ## License
 
-Shoelace was created in New Hampshire by [Cory LaViska](https://twitter.com/claviska). It's available under the terms of the [MIT license](https://github.com/shoelace-style/shoelace/blob/next/LICENSE.md).
+Shoelace was created in New Hampshire by [Cory LaViska](https://twitter.com/cory_laviska). It's available under the terms of the [MIT license](https://github.com/shoelace-style/shoelace/blob/next/LICENSE.md).
 
 ## Attribution
 

docs/pages/resources/changelog.md

@@ -14,10 +14,15 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 
 ## Next
 
+- Added Norwegian translations for Bokmål and Nynorsk [#2268]
+- Added Ukrainian translation [#2270]
 - Added support for <kbd>Enter</kbd> to `<sl-split-panel>` to align with ARIA APG's [window splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/) [#2234]
 - Fixed a bug in `<sl-carousel>` that caused the navigation icons to be reversed
 - Fixed a bug in `<sl-select>` that prevented label changes in `<sl-option>` from updating the controller [#1971]
 - Fixed a bug in `<sl-textarea>` that caused a console warning in Firefox when typing [#2107]
+- Fixed a bug in `<sl-carousel>` that caused interactive elements to be activated when dragging [#2196]
+- Fixed a bug in `<sl-carousel>` that caused out of order slides when used inside a resize observer [#2260]
+- Fixed a bug in `<sl-rating>` that allowed tabbing into the rating when readonly [#2271]
 - Improved performance of `<sl-range>` by skipping positioning logic when tooltip isn't shown [#2064]
 
 ## 2.18.0

docs/pages/resources/community.md

@@ -49,7 +49,7 @@ You can post questions on Stack Overflow using [the "shoelace" tag](https://stac
 
 ## Twitter
 
-Follow [@shoelace_style](https://twitter.com/shoelace_style) on Twitter for general updates and announcements about Shoelace. This is a great place to say "hi" or to share something you're working on. You're also welcome to follow [@claviska](https://twitter.com/claviska), the creator, for tweets about web components, web development, and life.
+Follow [@shoelace_style](https://twitter.com/shoelace_style) on Twitter for general updates and announcements about Shoelace. This is a great place to say "hi" or to share something you're working on. You're also welcome to follow [@cory_laviska](https://twitter.com/cory_laviska), the creator, for tweets about web components, web development, and life.
 
 **Please avoid using Twitter for support questions.** The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) is a much better place to share code snippets, screenshots, and other troubleshooting info. You'll have much better luck there, as more users will have a chance to help you.
 

src/components/carousel/carousel.component.ts

@@ -92,6 +92,7 @@ export default class SlCarousel extends ShoelaceElement {
   @state() dragging = false;
 
   private autoplayController = new AutoplayController(this, () => this.next());
+  private dragStartPosition: [number, number] = [-1, -1];
   private readonly localize = new LocalizeController(this);
   private mutationObserver: MutationObserver;
   private pendingSlideChange = false;
@@ -151,6 +152,20 @@ export default class SlCarousel extends ShoelaceElement {
     ) as SlCarouselItem[];
   }
 
+  private handleClick(event: MouseEvent) {
+    if (this.dragging && this.dragStartPosition[0] > 0 && this.dragStartPosition[1] > 0) {
+      const deltaX = Math.abs(this.dragStartPosition[0] - event.clientX);
+      const deltaY = Math.abs(this.dragStartPosition[1] - event.clientY);
+      const delta = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+      // Prevents clicks on interactive elements while dragging if the click is within a small range. This prevents
+      // accidental drags from interfering with intentional clicks.
+      if (delta >= 10) {
+        event.preventDefault();
+      }
+    }
+  }
+
   private handleKeyDown(event: KeyboardEvent) {
     if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
       const target = event.target as HTMLElement;
@@ -208,6 +223,7 @@ export default class SlCarousel extends ShoelaceElement {
       // Start dragging if it hasn't yet
       this.scrollContainer.style.setProperty('scroll-snap-type', 'none');
       this.dragging = true;
+      this.dragStartPosition = [event.clientX, event.clientY];
     }
 
     this.scrollContainer.scrollBy({
@@ -255,6 +271,7 @@ export default class SlCarousel extends ShoelaceElement {
       scrollContainer.style.removeProperty('scroll-snap-type');
 
       this.dragging = false;
+      this.dragStartPosition = [-1, -1];
       this.handleScrollEnd();
     });
   };
@@ -364,10 +381,10 @@ export default class SlCarousel extends ShoelaceElement {
       this.createClones();
     }
 
-    this.synchronizeSlides();
-
     // Because the DOM may be changed, restore the scroll position to the active slide
     this.goToSlide(this.activeSlide, 'auto');
+
+    this.synchronizeSlides();
   }
 
   private createClones() {
@@ -533,6 +550,7 @@ export default class SlCarousel extends ShoelaceElement {
           @mousedown="${this.handleMouseDragStart}"
           @scroll="${this.handleScroll}"
           @scrollend=${this.handleScrollEnd}
+          @click=${this.handleClick}
         >
           <slot></slot>
         </div>

src/components/dialog/dialog.component.ts

@@ -114,7 +114,7 @@ export default class SlDialog extends ShoelaceElement {
     super.disconnectedCallback();
     this.modal.deactivate();
     unlockBodyScrolling(this);
-    this.closeWatcher?.destroy();
+    this.removeOpenListeners();
   }
 
   private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {

src/components/drawer/drawer.component.ts

@@ -131,7 +131,7 @@ export default class SlDrawer extends ShoelaceElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     unlockBodyScrolling(this);
-    this.closeWatcher?.destroy();
+    this.removeOpenListeners();
   }
 
   private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {

src/components/rating/rating.component.ts

@@ -240,7 +240,7 @@ export default class SlRating extends ShoelaceElement {
         aria-valuenow=${this.value}
         aria-valuemin=${0}
         aria-valuemax=${this.max}
-        tabindex=${this.disabled ? '-1' : '0'}
+        tabindex=${this.disabled || this.readonly ? '-1' : '0'}
         @click=${this.handleClick}
         @keydown=${this.handleKeyDown}
         @mouseenter=${this.handleMouseEnter}

src/components/select/select.test.ts

@@ -507,7 +507,7 @@ describe('<sl-select>', () => {
 
     option.textContent = 'updated';
 
-    await aTimeout(0);
+    await aTimeout(250);
     await option.updateComplete;
     await el.updateComplete;
 

src/translations/nb.ts

@@ -0,0 +1,39 @@
+import { registerTranslation } from '../utilities/localize.js';
+import type { Translation } from '../utilities/localize.js';
+
+const translation: Translation = {
+  $code: 'nb',
+  $name: 'Norwegian Bokmål',
+  $dir: 'ltr',
+
+  carousel: 'Karusell',
+  clearEntry: 'Tøm felt',
+  close: 'Lukk',
+  copied: 'Kopiert',
+  copy: 'Kopier',
+  currentValue: 'Nåværende verdi',
+  error: 'Feil',
+  goToSlide: (slide, count) => `Gå til visning ${slide} av ${count}`,
+  hidePassword: 'Skjul passord',
+  loading: 'Laster',
+  nextSlide: 'Neste visning',
+  numOptionsSelected: num => {
+    if (num === 0) return 'Ingen alternativer valgt';
+    if (num === 1) return 'Ett alternativ valgt';
+    return `${num} alternativer valgt`;
+  },
+  previousSlide: 'Forrige visning',
+  progress: 'Fremdrift',
+  remove: 'Fjern',
+  resize: 'Endre størrelse',
+  scrollToEnd: 'Rull til slutten',
+  scrollToStart: 'Rull til starten',
+  selectAColorFromTheScreen: 'Velg en farge fra skjermen',
+  showPassword: 'Vis passord',
+  slideNum: slide => `Visning ${slide}`,
+  toggleColorFormat: 'Bytt fargeformat'
+};
+
+registerTranslation(translation);
+
+export default translation;

src/translations/nn.ts

@@ -0,0 +1,39 @@
+import { registerTranslation } from '../utilities/localize.js';
+import type { Translation } from '../utilities/localize.js';
+
+const translation: Translation = {
+  $code: 'nn',
+  $name: 'Norwegian Nynorsk',
+  $dir: 'ltr',
+
+  carousel: 'Karusell',
+  clearEntry: 'Tøm felt',
+  close: 'Lukk',
+  copied: 'Kopiert',
+  copy: 'Kopier',
+  currentValue: 'Nåverande verdi',
+  error: 'Feil',
+  goToSlide: (slide, count) => `Gå til visning ${slide} av ${count}`,
+  hidePassword: 'Gøym passord',
+  loading: 'Lastar',
+  nextSlide: 'Neste visning',
+  numOptionsSelected: num => {
+    if (num === 0) return 'Ingen alternativ valt';
+    if (num === 1) return 'Eitt alternativ valt';
+    return `${num} alternativ valt`;
+  },
+  previousSlide: 'Førre visning',
+  progress: 'Framdrift',
+  remove: 'Fjern',
+  resize: 'Endre storleik',
+  scrollToEnd: 'Rull til slutten',
+  scrollToStart: 'Rull til starten',
+  selectAColorFromTheScreen: 'Vel ein farge frå skjermen',
+  showPassword: 'Vis passord',
+  slideNum: slide => `Visning ${slide}`,
+  toggleColorFormat: 'Byt fargeformat'
+};
+
+registerTranslation(translation);
+
+export default translation;

src/translations/uk.ts

@@ -0,0 +1,41 @@
+import { registerTranslation } from '../utilities/localize.js';
+import type { Translation } from '../utilities/localize.js';
+
+const translation: Translation = {
+  $code: 'uk',
+  $name: 'Українська',
+  $dir: 'ltr',
+
+  carousel: 'Карусель',
+  clearEntry: 'Очистити поле',
+  close: 'Закрити',
+  copied: 'Скопійовано',
+  copy: 'Скопіювати',
+  currentValue: 'Поточне значення',
+  error: 'Збій',
+  goToSlide: (slide, count) => `Перейти до слайда №${slide} з ${count}`,
+  hidePassword: 'Приховати пароль',
+  loading: 'Завантаження',
+  nextSlide: 'Наступний слайд',
+  numOptionsSelected: num => {
+    const n = num % 10;
+    if (n === 0) return 'не вибрано варіантів';
+    if (n === 1) return 'вибрано 1 варіант';
+    if (n === 2 || n === 3 || n === 4) return `вибрано ${num} варіанти`;
+    return `вибрано ${num} варіантів`;
+  },
+  previousSlide: 'Попередній слайд',
+  progress: 'Поступ',
+  remove: 'Видалити',
+  resize: 'Змінити розмір',
+  scrollToEnd: 'Прокрутити в кінець',
+  scrollToStart: 'Прокрутити на початок',
+  selectAColorFromTheScreen: 'Виберіть колір на екрані',
+  showPassword: 'Показати пароль',
+  slideNum: slide => `Слайд ${slide}`,
+  toggleColorFormat: 'Переключити кольорову модель'
+};
+
+registerTranslation(translation);
+
+export default translation;