@kubex/zinc 1.1.120 → 1.1.121

package/docs/pages/components/translation-group.md

@@ -62,8 +62,8 @@ select's accessible name — it is not shown, since the caption names the sectio
 ### Pre-filled Values
 
 Set initial translations on each child. A language every child has a value for is marked `Translated`; one only some
-children have is `Partial`; one no child has falls back to English. English itself is the source, so it is neither
-counted nor marked as a translation.
+children have is `Partial`; one no child has falls back to English. English itself is marked `Empty` rather than
+falling back, having nothing to fall back to, and counts towards the total like any other language.
 
 ```html:preview
 <zn-translation-group

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.120",
+  "version": "1.1.121",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/translation-group/translation-group.component.ts

@@ -32,8 +32,8 @@ import styles from './translation-group.scss';
  * - `Partial` — only some children do
  * - `English` — none do, so all of them fall back to the English text
  *
- * `Empty` replaces the last of those for English itself, which has nothing to fall back to. English is the source
- * rather than a translation, so it is also left out of the `n of m translated` count beside the label.
+ * `Empty` replaces the last of those for English itself, which has nothing to fall back to. English counts towards
+ * the `n of m` beside the label like any other language.
  *
  * The children own their values; this component only chooses which language is shown and reports on what they hold.
  * It reads them back on every child `zn-change`, so the chips and the count follow an edit as it is typed.
@@ -221,14 +221,12 @@ export default class ZnTranslationGroup extends ZnPanel {
     const languageCodes = [...Object.keys(this.languages), ...extra];
     const hasMultipleLanguages = languageCodes.length > 1;
 
-    // English is the source every other language falls back to, so it is not itself one of the translations counted.
-    const targets = languageCodes.filter(code => code !== 'en');
-    const translated = targets.filter(code => this.languageState(code).type === 'success').length;
     // Closed, the select answers "how much is left to do" rather than the state of the one language on show — that
     // is what the options are for.
+    const translated = languageCodes.filter(code => this.languageState(code).type === 'success').length;
     const summary = {
-      label: `${translated}/${targets.length}`,
-      type: translated === targets.length ? 'success' : translated > 0 ? 'warning' : 'error'
+      label: `${translated}/${languageCodes.length}`,
+      type: translated === languageCodes.length ? 'success' : translated > 0 ? 'warning' : 'error'
     };
 
     return html`

package/src/components/translation-group/translation-group.test.ts

@@ -188,7 +188,7 @@ describe('<zn-translation-group>', () => {
       expect(label.textContent?.trim(), 'nothing else rides the caption').to.equal('Content');
 
       const summary = selectOf(group).querySelector('zn-chip[slot="suffix"]')!;
-      expect(summary.textContent?.trim()).to.equal('1/1');
+      expect(summary.textContent?.trim()).to.equal('2/2');
     });
 
     it('wears the same chrome as any other select', async () => {
@@ -327,19 +327,19 @@ describe('<zn-translation-group>', () => {
         ['{"en":"Hello","fr":"Bonjour","de":"Hallo"}', '{"en":"Hi","fr":"Salut"}']);
 
       const summary = selectOf(group).querySelector('zn-chip[slot="suffix"]')!;
-      expect(summary.textContent?.trim()).to.equal('1/3');
+      expect(summary.textContent?.trim()).to.equal('2/4');
       expect(summary.getAttribute('type')).to.equal('warning');
 
       expect(chipsOf(group)).to.deep.equal(['Translated', 'Translated', 'Partial', 'English']);
     });
 
-    it('marks the summary chip done once every target language is translated', async () => {
+    it('marks the summary chip done once every language is translated', async () => {
       const group = await groupFixture(
         {en: 'English', fr: 'French'},
         ['{"en":"Hello","fr":"Bonjour"}']);
 
       const summary = selectOf(group).querySelector('zn-chip[slot="suffix"]')!;
-      expect(summary.textContent?.trim()).to.equal('1/1');
+      expect(summary.textContent?.trim()).to.equal('2/2');
       expect(summary.getAttribute('type')).to.equal('success');
     });
 
@@ -351,13 +351,13 @@ describe('<zn-translation-group>', () => {
       expect(chipsOf(group)).to.deep.equal(['Translated', 'English']);
     });
 
-    it('counts the target languages, not English', async () => {
+    it('counts English alongside the target languages', async () => {
       const group = await groupFixture(
         {en: 'English', fr: 'French', de: 'German'},
         ['{"en":"Hello","fr":"Bonjour"}']);
 
       const summary = selectOf(group).querySelector('zn-chip[slot="suffix"]')!;
-      expect(summary.textContent?.trim()).to.equal('1/2');
+      expect(summary.textContent?.trim()).to.equal('2/3');
     });
 
     it('switches every child when the select changes', async () => {
@@ -416,14 +416,14 @@ describe('<zn-translation-group>', () => {
       await group.updateComplete;
 
       const summary = () => group.shadowRoot!.querySelector('zn-select zn-chip[slot="suffix"]')!.textContent?.trim();
-      expect(summary()).to.equal('0/1');
+      expect(summary()).to.equal('1/2');
 
       form.reset();
       await new Promise(resolve => requestAnimationFrame(() => resolve(null)));
       await group.updateComplete;
 
       expect(child.values).to.deep.equal({en: 'Hello', fr: 'Bonjour'});
-      expect(summary()).to.equal('1/1');
+      expect(summary()).to.equal('2/2');
     });
   });
 });

package/src/components/translations/translations.component.ts

@@ -445,11 +445,10 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
     ];
     // Closed, the select answers "how much is left to do" rather than the state of the one language on show — that
     // is what the options are for.
-    const targets = languageCodes.filter(code => code !== 'en');
-    const translated = targets.filter(code => this.hasTranslation(code)).length;
+    const translated = languageCodes.filter(code => this.hasTranslation(code)).length;
     const summary = {
-      label: `${translated}/${targets.length}`,
-      type: translated === targets.length ? 'success' : translated > 0 ? 'warning' : 'error'
+      label: `${translated}/${languageCodes.length}`,
+      type: translated === languageCodes.length ? 'success' : translated > 0 ? 'warning' : 'error'
     };
 
     const currentTranslation = this.values[this._activeLanguage] ?? '';

package/src/components/translations/translations.test.ts

@@ -95,7 +95,7 @@ describe('<zn-translations>', () => {
       await el.updateComplete;
 
       const summary = selectOf(el)!.querySelector('zn-chip[slot="suffix"]')!;
-      expect(summary.textContent?.trim()).to.equal('1/2');
+      expect(summary.textContent?.trim()).to.equal('2/3');
       expect(summary.getAttribute('type')).to.equal('warning');
 
       const options = [...selectOf(el)!.querySelectorAll('zn-option zn-chip')];