+ ${this.multiple
+ ? html`
+
+ ${this.selectedOptions.map((option, index) => {
+ if (index < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {
+ return html`
+ {
+ event.stopPropagation();
+ if (!this.disabled) {
+ this.toggleOptionSelection(option, false);
+ }
+ }}
+ >
+ ${option.getTextLabel()}
+
+ `;
+ } else if (index === this.maxOptionsVisible) {
+ return html` +${this.selectedOptions.length - index} `;
+ } else {
+ return null;
+ }
+ })}
+
+ `
+ : ''}
+
this.focus()}
@@ -683,7 +754,7 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
id="listbox"
role="listbox"
aria-expanded=${this.open ? 'true' : 'false'}
- aria-multiselectable="false"
+ aria-multiselectable=${this.multiple ? 'true' : 'false'}
aria-labelledby="label"
part="listbox"
class="select__listbox"
diff --git a/src/components/tag/tag.styles.ts b/src/components/tag/tag.styles.ts
index 969c5c7bc..0b55c1ffe 100644
--- a/src/components/tag/tag.styles.ts
+++ b/src/components/tag/tag.styles.ts
@@ -15,7 +15,6 @@ export default css`
line-height: 1;
white-space: nowrap;
user-select: none;
- cursor: default;
}
.tag__remove::part(base) {
@@ -33,30 +32,50 @@ export default css`
color: var(--sl-color-primary-800);
}
+ .tag--primary:active > sl-icon-button {
+ color: var(--sl-color-primary-600);
+ }
+
.tag--success {
background-color: var(--sl-color-success-50);
border-color: var(--sl-color-success-200);
color: var(--sl-color-success-800);
}
+ .tag--success:active > sl-icon-button {
+ color: var(--sl-color-success-600);
+ }
+
.tag--neutral {
background-color: var(--sl-color-neutral-50);
border-color: var(--sl-color-neutral-200);
color: var(--sl-color-neutral-800);
}
+ .tag--neutral:active > sl-icon-button {
+ color: var(--sl-color-neutral-600);
+ }
+
.tag--warning {
background-color: var(--sl-color-warning-50);
border-color: var(--sl-color-warning-200);
color: var(--sl-color-warning-800);
}
+ .tag--warning:active > sl-icon-button {
+ color: var(--sl-color-warning-600);
+ }
+
.tag--danger {
background-color: var(--sl-color-danger-50);
border-color: var(--sl-color-danger-200);
color: var(--sl-color-danger-800);
}
+ .tag--danger:active > sl-icon-button {
+ color: var(--sl-color-danger-600);
+ }
+
/*
* Size modifiers
*/
diff --git a/src/components/tag/tag.ts b/src/components/tag/tag.ts
index 7a457db51..0847e661f 100644
--- a/src/components/tag/tag.ts
+++ b/src/components/tag/tag.ts
@@ -82,6 +82,7 @@ export default class SlTag extends ShoelaceElement {
label=${this.localize.term('remove')}
class="tag__remove"
@click=${this.handleRemoveClick}
+ tabindex="-1"
>
`
: ''}
diff --git a/src/translations/da.ts b/src/translations/da.ts
index e319ce8b1..a85d46f6a 100644
--- a/src/translations/da.ts
+++ b/src/translations/da.ts
@@ -3,12 +3,17 @@ import type { Translation } from '../utilities/localize';
const translation: Translation = {
$code: 'da',
- $name: 'Danish',
+ $name: 'Dansk',
$dir: 'ltr',
clearEntry: 'Ryd indtastning',
close: 'Luk',
copy: 'Kopier',
+ numOptionsSelected: (num: number) => {
+ if (num === 0) return 'Geen opties geselecteerd';
+ if (num === 1) return '1 optie geselecteerd';
+ return `${num} opties geselecteerd`;
+ },
currentValue: 'Nuværende regerer',
hidePassword: 'Skjul adgangskode',
loading: 'Indlæser',
diff --git a/src/translations/de-at.ts b/src/translations/de-at.ts
index 5ba5daf2f..6049bd863 100644
--- a/src/translations/de-at.ts
+++ b/src/translations/de-at.ts
@@ -9,6 +9,11 @@ const translation: Translation = {
clearEntry: 'Eingabe löschen',
close: 'Schließen',
copy: 'Kopieren',
+ numOptionsSelected: (num: number) => {
+ if (num === 0) return 'Keine Optionen ausgewählt';
+ if (num === 1) return '1 Option ausgewählt';
+ return `${num} optionen ausgewählt`;
+ },
currentValue: 'Aktueller Wert',
hidePassword: 'Passwort verbergen',
loading: 'Wird geladen',
diff --git a/src/translations/de-ch.ts b/src/translations/de-ch.ts
index 5b2cb1c89..15191c60b 100644
--- a/src/translations/de-ch.ts
+++ b/src/translations/de-ch.ts
@@ -9,6 +9,11 @@ const translation: Translation = {
clearEntry: 'Eingabe löschen',
close: 'Schliessen',
copy: 'Kopieren',
+ numOptionsSelected: (num: number) => {
+ if (num === 0) return 'Keine Optionen ausgewählt';
+ if (num === 1) return '1 Option ausgewählt';
+ return `${num} optionen ausgewählt`;
+ },
currentValue: 'Aktueller Wert',
hidePassword: 'Passwort verbergen',
loading: 'Wird geladen',
diff --git a/src/translations/de.ts b/src/translations/de.ts
index 509d21cc7..fe31063f0 100644
--- a/src/translations/de.ts
+++ b/src/translations/de.ts
@@ -9,6 +9,11 @@ const translation: Translation = {
clearEntry: 'Eingabe löschen',
close: 'Schließen',
copy: 'Kopieren',
+ numOptionsSelected: (num: number) => {
+ if (num === 0) return 'Keine Optionen ausgewählt';
+ if (num === 1) return '1 Option ausgewählt';
+ return `${num} optionen ausgewählt`;
+ },
currentValue: 'Aktueller Wert',
hidePassword: 'Passwort verbergen',
loading: 'Wird geladen',
diff --git a/src/translations/en-gb.ts b/src/translations/en-gb.ts
index a839e7575..0202cf4b9 100644
--- a/src/translations/en-gb.ts
+++ b/src/translations/en-gb.ts
@@ -9,6 +9,11 @@ const translation: Translation = {
clearEntry: 'Clear entry',
close: 'Close',
copy: 'Copy',
+ numOptionsSelected: (num: number) => {
+ if (num === 0) return 'No options selected';
+ if (num === 1) return '1 option selected';
+ return `${num} options selected`;
+ },
currentValue: 'Current value',
hidePassword: 'Hide password',
loading: 'Loading',
diff --git a/src/translations/en.ts b/src/translations/en.ts
index 52a99423d..2938b4085 100644
--- a/src/translations/en.ts
+++ b/src/translations/en.ts
@@ -9,6 +9,11 @@ const translation: Translation = {
clearEntry: 'Clear entry',
close: 'Close',
copy: 'Copy',
+ numOptionsSelected: (num: number) => {
+ if (num === 0) return 'No options selected';
+ if (num === 1) return '1 option selected';
+ return `${num} options selected`;
+ },
currentValue: 'Current value',
hidePassword: 'Hide password',
loading: 'Loading',
diff --git a/src/translations/es.ts b/src/translations/es.ts
index 5a734b2e8..dcfd816c1 100644
--- a/src/translations/es.ts
+++ b/src/translations/es.ts
@@ -9,6 +9,11 @@ const translation: Translation = {
clearEntry: 'Borrar entrada',
close: 'Cerrar',
copy: 'Copiar',
+ numOptionsSelected: (num: number) => {
+ if (num === 0) return 'No hay opciones seleccionadas';
+ if (num === 1) return '1 opción seleccionada';
+ return `${num} opción seleccionada`;
+ },
currentValue: 'Valor actual',
hidePassword: 'Ocultar contraseña',
loading: 'Cargando',
diff --git a/src/translations/fa.ts b/src/translations/fa.ts
index 01293fddd..c42b47a6d 100644
--- a/src/translations/fa.ts
+++ b/src/translations/fa.ts
@@ -9,6 +9,11 @@ const translation: Translation = {
clearEntry: 'پاک کردن ورودی',
close: 'بستن',
copy: 'رونوشت',
+ numOptionsSelected: (num: number) => {
+ if (num === 0) return 'هیچ گزینه ای انتخاب نشده است';
+ if (num === 1) return '1 گزینه انتخاب شده است';
+ return `${num} گزینه انتخاب شده است`;
+ },
currentValue: 'مقدار فعلی',
hidePassword: 'پنهان کردن رمز',
loading: 'بارگذاری',
diff --git a/src/translations/fr.ts b/src/translations/fr.ts
index fcb0b5052..42df2dd7c 100644
--- a/src/translations/fr.ts
+++ b/src/translations/fr.ts
@@ -9,6 +9,11 @@ const translation: Translation = {
clearEntry: `Effacer l'entrée`,
close: 'Fermer',
copy: 'Copier',
+ numOptionsSelected: (num: number) => {
+ if (num === 0) return 'Aucune option sélectionnée';
+ if (num === 1) return '1 option sélectionnée';
+ return `${num} options sélectionnées`;
+ },
currentValue: 'Valeur actuelle',
hidePassword: 'Masquer le mot de passe',
loading: 'Chargement',
diff --git a/src/translations/he.ts b/src/translations/he.ts
index 7238b3363..0187b80cb 100644
--- a/src/translations/he.ts
+++ b/src/translations/he.ts
@@ -9,6 +9,11 @@ const translation: Translation = {
clearEntry: 'נקה קלט',
close: 'סגור',
copy: 'העתק',
+ numOptionsSelected: (num: number) => {
+ if (num === 0) return 'לא נבחרו אפשרויות';
+ if (num === 1) return 'נבחרה אפשרות אחת';
+ return `נבחרו ${num} אפשרויות`;
+ },
currentValue: 'ערך נוכחי',
hidePassword: 'הסתר סיסמא',
loading: 'טוען',
diff --git a/src/translations/hu.ts b/src/translations/hu.ts
index 382423ab3..5e298c9a8 100644
--- a/src/translations/hu.ts
+++ b/src/translations/hu.ts
@@ -9,6 +9,11 @@ const translation: Translation = {
clearEntry: 'Bejegyzés törlése',
close: 'Bezárás',
copy: 'Másolás',
+ numOptionsSelected: (num: number) => {
+ if (num === 0) return 'Nincsenek kiválasztva opciók';
+ if (num === 1) return '1 lehetőség kiválasztva';
+ return `${num} lehetőség kiválasztva`;
+ },
currentValue: 'Aktuális érték',
hidePassword: 'Jelszó elrejtése',
loading: 'Betöltés',
diff --git a/src/translations/ja.ts b/src/translations/ja.ts
index 731f453a1..72d0a6aa0 100644
--- a/src/translations/ja.ts
+++ b/src/translations/ja.ts
@@ -9,6 +9,11 @@ const translation: Translation = {
clearEntry: 'クリアエントリ',
close: '閉じる',
copy: 'コピー',
+ numOptionsSelected: (num: number) => {
+ if (num === 0) return 'オプションが選択されていません';
+ if (num === 1) return '1 つのオプションが選択されました';
+ return `${num} つのオプションが選択されました`;
+ },
currentValue: '現在の価値',
hidePassword: 'パスワードを隠す',
loading: '読み込み中',
diff --git a/src/translations/nl.ts b/src/translations/nl.ts
index dc020846f..baac06a8e 100644
--- a/src/translations/nl.ts
+++ b/src/translations/nl.ts
@@ -3,12 +3,17 @@ import type { Translation } from '../utilities/localize';
const translation: Translation = {
$code: 'nl',
- $name: 'Dutch',
+ $name: 'Nederlands',
$dir: 'ltr',
clearEntry: 'Invoer wissen',
close: 'Sluiten',
copy: 'Kopiëren',
+ numOptionsSelected: (num: number) => {
+ if (num === 0) return 'Geen optie geselecteerd';
+ if (num === 1) return '1 optie geselecteerd';
+ return `${num} opties geselecteerd`;
+ },
currentValue: 'Huidige waarde',
hidePassword: 'Verberg wachtwoord',
loading: 'Bezig met laden',
diff --git a/src/translations/pl.ts b/src/translations/pl.ts
index 793024e9d..2d60a314f 100644
--- a/src/translations/pl.ts
+++ b/src/translations/pl.ts
@@ -9,6 +9,11 @@ const translation: Translation = {
clearEntry: 'Wyczyść wpis',
close: 'Zamknij',
copy: 'Kopiuj',
+ numOptionsSelected: (num: number) => {
+ if (num === 0) return 'Nie wybrano opcji';
+ if (num === 1) return 'Wybrano 1 opcję';
+ return `Wybrano ${num} opcje`;
+ },
currentValue: 'Aktualna wartość',
hidePassword: 'Ukryj hasło',
loading: 'Ładowanie',
diff --git a/src/translations/pt.ts b/src/translations/pt.ts
index 1b77ef66f..0ac85a245 100644
--- a/src/translations/pt.ts
+++ b/src/translations/pt.ts
@@ -9,6 +9,11 @@ const translation: Translation = {
clearEntry: 'Limpar entrada',
close: 'Fechar',
copy: 'Copiar',
+ numOptionsSelected: (num: number) => {
+ if (num === 0) return 'Nenhuma opção selecionada';
+ if (num === 1) return '1 opção selecionada';
+ return `${num} opções selecionadas`;
+ },
currentValue: 'Valor atual',
hidePassword: 'Esconder a senha',
loading: 'Carregando',
diff --git a/src/translations/ru.ts b/src/translations/ru.ts
index 0b5935071..2c5ced6c8 100644
--- a/src/translations/ru.ts
+++ b/src/translations/ru.ts
@@ -9,6 +9,11 @@ const translation: Translation = {
clearEntry: 'Очистить запись',
close: 'Закрыть',
copy: 'Скопировать',
+ numOptionsSelected: (num: number) => {
+ if (num === 0) return 'выбрано 0 вариантов';
+ if (num === 1) return 'Выбран 1 вариант';
+ return `выбрано ${num} варианта`;
+ },
currentValue: 'Текущее значение',
hidePassword: 'Скрыть пароль',
loading: 'Загрузка',
diff --git a/src/translations/sv.ts b/src/translations/sv.ts
index 0974127c5..a38cf5320 100644
--- a/src/translations/sv.ts
+++ b/src/translations/sv.ts
@@ -9,6 +9,11 @@ const translation: Translation = {
clearEntry: 'Återställ val',
close: 'Stäng',
copy: 'Kopiera',
+ numOptionsSelected: (num: number) => {
+ if (num === 0) return 'Inga alternativ har valts';
+ if (num === 1) return '1 alternativ valt';
+ return `${num} alternativ valda`;
+ },
currentValue: 'Nuvarande värde',
hidePassword: 'Dölj lösenord',
loading: 'Läser in',
diff --git a/src/translations/tr.ts b/src/translations/tr.ts
index cb7d21d9d..a5771b3d4 100644
--- a/src/translations/tr.ts
+++ b/src/translations/tr.ts
@@ -9,6 +9,11 @@ const translation: Translation = {
clearEntry: 'Girişi sil',
close: 'Kapat',
copy: 'Kopya',
+ numOptionsSelected: (num: number) => {
+ if (num === 0) return 'Hiçbir seçenek seçilmedi';
+ if (num === 1) return '1 seçenek seçildi';
+ return `${num} seçenek seçildi`;
+ },
currentValue: 'Mevcut değer',
hidePassword: 'Şifreyi sakla',
loading: 'Yükleme',
diff --git a/src/utilities/localize.ts b/src/utilities/localize.ts
index f9de14f59..88662b5d9 100644
--- a/src/utilities/localize.ts
+++ b/src/utilities/localize.ts
@@ -16,6 +16,7 @@ export interface Translation extends DefaultTranslation {
clearEntry: string;
close: string;
copy: string;
+ numOptionsSelected: (num: number) => string;
currentValue: string;
hidePassword: string;
loading: string;