Merge branch 'next' into current

Author: claviska

docs/pages/components/details.md

@@ -123,7 +123,9 @@ Details are designed to function independently, but you can simulate a group or
 
   // Close all other details when one is shown
   container.addEventListener('sl-show', event => {
-    [...container.querySelectorAll('sl-details')].map(details => (details.open = event.target === details));
+    if (event.target.localName === 'sl-details') {
+      [...container.querySelectorAll('sl-details')].map(details => (details.open = event.target === details));
+    }
   });
 </script>
 

docs/pages/frameworks/angular.md

@@ -10,16 +10,40 @@ Angular [plays nice](https://custom-elements-everywhere.com/#angular) with custo
 
 ## Installation
 
+### Download the npm package
+
 To add Shoelace to your Angular app, install the package from npm.
 
 ```bash
 npm install @shoelace-style/shoelace
 ```
 
-Next, [include a theme](/getting-started/themes) and set the [base path](/getting-started/installation#setting-the-base-path) for icons and other assets. In this example, we'll import the light theme and use the CDN as a base path.
+### Update the Angular Configuration
+
+Next, [include a theme](/getting-started/themes). In this example, we'll import the light theme.
+Its also important to load the components, by using a <script> tag into the index.html file. However, the Angular way to do it is by adding a script configurations into your angular.json file as follows:
+
+```
+"architect": {
+  "build": {
+    ...
+    "options": {
+      ...
+      "styles": [
+        "src/styles.scss",
+        "@shoelace-style/shoelace/dist/themes/light.css"
+       ],
+      "scripts": [
+        "@shoelace-style/shoelace/dist/shoelace.js"
+      ]
+      ...
+```
+
+### Setting up the base path
+
+Next, set the [base path](/getting-started/installation#setting-the-base-path) for icons and other assets in the `main.ts`. In this example, we'll use the CDN as a base path.
 
 ```jsx
-import '@shoelace-style/shoelace/%NPMDIR%/themes/light.css';
 import { setBasePath } from '@shoelace-style/shoelace/%NPMDIR%/utilities/base-path';
 
 setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/');

docs/pages/resources/changelog.md

@@ -12,6 +12,13 @@ Components with the <sl-badge variant="warning" pill>Experimental</sl-badge> 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).
 
+## 2.11.0
+
+- Added the Croatian translation [#1656]
+- Fixed a bug that caused the [[Escape]] key to stop propagating when tooltips are disabled [#1607]
+- Fixed a bug that made it impossible to style placeholders in `<sl-select>` [#1667]
+- Fixed a bug that caused `dist/react/index.js` to be blank [#1659]
+
 ## 2.10.0
 
 - Added the Simplified Chinese translation [#1604]

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@shoelace-style/shoelace",
   "description": "A forward-thinking library of web components.",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "homepage": "https://github.com/shoelace-style/shoelace",
   "author": "Cory LaViska",
   "license": "MIT",

package.json

@@ -19,7 +19,7 @@ const metadata = JSON.parse(fs.readFileSync(path.join(outdir, 'custom-elements.j
 const components = getAllComponents(metadata);
 const index = [];
 
-components.forEach(async component => {
+for await (const component of components) {
   const tagWithoutPrefix = component.tagName.replace(/^sl-/, '');
   const componentDir = path.join(reactDir, tagWithoutPrefix);
   const componentFile = path.join(componentDir, 'index.ts');
@@ -73,7 +73,7 @@ components.forEach(async component => {
   index.push(`export { default as ${component.name} } from './${tagWithoutPrefix}/index.js';`);
 
   fs.writeFileSync(componentFile, source, 'utf8');
-});
+}
 
 // Generate the index file
 fs.writeFileSync(path.join(reactDir, 'index.ts'), index.join('\n'), 'utf8');

scripts/make-react.js

@@ -67,6 +67,10 @@ export default css`
     -webkit-appearance: none;
   }
 
+  .select__display-input::placeholder {
+    color: var(--sl-input-placeholder-color);
+  }
+
   .select:not(.select--disabled):hover .select__display-input {
     color: var(--sl-input-color-hover);
   }

src/components/select/select.styles.ts

@@ -145,7 +145,7 @@ export default class SlTooltip extends ShoelaceElement {
 
   private handleKeyDown = (event: KeyboardEvent) => {
     // Pressing escape when the target element has focus should dismiss the tooltip
-    if (this.open && event.key === 'Escape') {
+    if (this.open && !this.disabled && event.key === 'Escape') {
       event.stopPropagation();
       this.hide();
     }

src/components/tooltip/tooltip.component.ts

@@ -0,0 +1,39 @@
+import { registerTranslation } from '@shoelace-style/localize';
+import type { Translation } from '../utilities/localize.js';
+
+const translation: Translation = {
+  $code: 'hr',
+  $name: 'Hrvatski',
+  $dir: 'ltr',
+
+  carousel: 'Vrtuljak',
+  clearEntry: 'Očisti unos',
+  close: 'Zatvori',
+  copied: 'Kopirano',
+  copy: 'Kopiraj',
+  currentValue: 'Trenutna vrijednost',
+  error: 'Greška',
+  goToSlide: (slide, count) => `Idi na slajd ${slide} od ${count}`,
+  hidePassword: 'Sakrij lozinku',
+  loading: 'Učitavanje',
+  nextSlide: 'Sljedeći slajd',
+  numOptionsSelected: num => {
+    if (num === 0) return 'Nije odabrana nijedna opcija';
+    if (num === 1) return '1 opcija je odabrana';
+    return `${num} odabranih opcija`;
+  },
+  previousSlide: 'Prethodni slajd',
+  progress: 'Napredak',
+  remove: 'Makni',
+  resize: 'Promijeni veličinu',
+  scrollToEnd: 'Skrolaj do kraja',
+  scrollToStart: 'Skrolaj na početak',
+  selectAColorFromTheScreen: 'Odaberi boju sa ekrana',
+  showPassword: 'Pokaži lozinku',
+  slideNum: slide => `Slajd ${slide}`,
+  toggleColorFormat: 'Zamijeni format boje'
+};
+
+registerTranslation(translation);
+
+export default translation;