Merge branch 'next' of https://github.com/shoelace-style/shoelace into konnorrogers/add-more-resilient-lazy-loading-to-select

docs/pages/resources/changelog.md

@@ -14,7 +14,11 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 
 ## Next
 
+- Added Finnish translations [#2211]
+- Fixed a bug with certain bundlers when using dynamic imports [#2210]
+- Fixed a bug in `<sl-textarea>` causing scroll jumping when using `resize="auto"` [#2182]
 - Fixed a bug in `<sl-relative-time>` where the title attribute would show with redundant info [#2184]
+- Fixed a bug in `<sl-select>` that caused multi-selects without placeholders to have the wrong padding [#2194]
 
 ## 2.17.1
 

package.json

@@ -18,11 +18,15 @@
     "./dist/custom-elements.json": "./dist/custom-elements.json",
     "./dist/shoelace.js": "./dist/shoelace.js",
     "./dist/shoelace-autoloader.js": "./dist/shoelace-autoloader.js",
+    "./dist/themes": "./dist/themes",
     "./dist/themes/*": "./dist/themes/*",
+    "./dist/components": "./dist/components",
     "./dist/components/*": "./dist/components/*",
+    "./dist/utilities": "./dist/utilities",
     "./dist/utilities/*": "./dist/utilities/*",
     "./dist/react": "./dist/react/index.js",
     "./dist/react/*": "./dist/react/*",
+    "./dist/translations": "./dist/translations",
     "./dist/translations/*": "./dist/translations/*"
   },
   "files": [

src/components/select/select.styles.ts

@@ -209,7 +209,7 @@ export default css`
     margin-inline-start: var(--sl-input-spacing-medium);
   }
 
-  .select--medium.select--multiple:not(.select--placeholder-visible) .select__combobox {
+  .select--medium.select--multiple .select__combobox {
     padding-inline-start: 0;
     padding-block: 3px;
   }
@@ -238,7 +238,7 @@ export default css`
     margin-inline-start: var(--sl-input-spacing-large);
   }
 
-  .select--large.select--multiple:not(.select--placeholder-visible) .select__combobox {
+  .select--large.select--multiple .select__combobox {
     padding-inline-start: 0;
     padding-block: 4px;
   }

src/components/textarea/textarea.component.ts

@@ -46,6 +46,7 @@ export default class SlTextarea extends ShoelaceElement implements ShoelaceFormC
   private resizeObserver: ResizeObserver;
 
   @query('.textarea__control') input: HTMLTextAreaElement;
+  @query('.textarea__size-adjuster') sizeAdjuster: HTMLTextAreaElement;
 
   @state() private hasFocus = false;
   @property() title = ''; // make reactive to pass through
@@ -196,6 +197,8 @@ export default class SlTextarea extends ShoelaceElement implements ShoelaceFormC
 
   private setTextareaHeight() {
     if (this.resize === 'auto') {
+      // This prevents layout shifts. We use `clientHeight` instead of `scrollHeight` to account for if the `<textarea>` has a max-height set on it. In my tests, this has worked fine. Im not aware of any edge cases. [Konnor]
+      this.sizeAdjuster.style.height = `${this.input.clientHeight}px`;
       this.input.style.height = 'auto';
       this.input.style.height = `${this.input.scrollHeight}px`;
     } else {
@@ -370,6 +373,8 @@ export default class SlTextarea extends ShoelaceElement implements ShoelaceFormC
               @focus=${this.handleFocus}
               @blur=${this.handleBlur}
             ></textarea>
+            <!-- This "adjuster" exists to prevent layout shifting. https://github.com/shoelace-style/shoelace/issues/2180 -->
+            <div part="textarea-adjuster" class="textarea__size-adjuster" ?hidden=${this.resize !== 'auto'}></div>
           </div>
         </div>
 

src/components/textarea/textarea.styles.ts

@@ -6,7 +6,7 @@ export default css`
   }
 
   .textarea {
-    display: flex;
+    display: grid;
     align-items: center;
     position: relative;
     width: 100%;
@@ -55,6 +55,17 @@ export default css`
     cursor: not-allowed;
   }
 
+  .textarea__control,
+  .textarea__size-adjuster {
+    grid-area: 1 / 1 / 2 / 2;
+  }
+
+  .textarea__size-adjuster {
+    visibility: hidden;
+    pointer-events: none;
+    opacity: 0;
+  }
+
   .textarea--standard.textarea--disabled .textarea__control {
     color: var(--sl-input-color-disabled);
   }
@@ -87,7 +98,6 @@ export default css`
   }
 
   .textarea__control {
-    flex: 1 1 auto;
     font-family: inherit;
     font-size: inherit;
     font-weight: inherit;

src/translations/fi.ts

@@ -0,0 +1,39 @@
+import { registerTranslation } from '@shoelace-style/localize';
+import type { Translation } from '../utilities/localize.js';
+
+const translation: Translation = {
+  $code: 'fi',
+  $name: 'Suomi',
+  $dir: 'ltr',
+
+  carousel: 'Karuselli',
+  clearEntry: 'Poista merkintä',
+  close: 'Sulje',
+  copied: 'Kopioitu',
+  copy: 'Kopioi',
+  currentValue: 'Nykyinen arvo',
+  error: 'Virhe',
+  goToSlide: (slide, count) => `Siirry diaan ${slide} / ${count}`,
+  hidePassword: 'Piilota salasana',
+  loading: 'Ladataan',
+  nextSlide: 'Seuraava dia',
+  numOptionsSelected: num => {
+    if (num === 0) return 'Ei valittuja vaihtoehtoja';
+    if (num === 1) return 'Yksi vaihtoehto valittu';
+    return `${num} vaihtoehtoa valittu`;
+  },
+  previousSlide: 'Edellinen dia',
+  progress: 'Edistyminen',
+  remove: 'Poista',
+  resize: 'Muuta kokoa',
+  scrollToEnd: 'Vieritä loppuun',
+  scrollToStart: 'Vieritä alkuun',
+  selectAColorFromTheScreen: 'Valitse väri näytöltä',
+  showPassword: 'Näytä salasana',
+  slideNum: slide => `Dia ${slide}`,
+  toggleColorFormat: 'Vaihda väriformaattia'
+};
+
+registerTranslation(translation);
+
+export default translation;