@kubex/zinc 1.1.117 → 1.1.118

package/dist/custom-elements.json

@@ -16558,6 +16558,15 @@
               "default": "null",
               "description": "The scroller the label is tracked against by hand; null while native sticky is enough."
             },
+            {
+              "kind": "field",
+              "name": "stickyTop",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
             {
               "kind": "field",
               "name": "frame",
@@ -49712,12 +49721,16 @@
                 "module": "src/components/panel/panel.component.ts"
               }
             },
+            {
+              "description": "The form group holding the caption, the language select and the fields.",
+              "name": "form-group"
+            },
             {
               "description": "The row of buttons at the bottom of the body.",
               "name": "actions"
             },
             {
-              "description": "The label and select that choose the language every child is editing.",
+              "description": "The select that chooses the language every child is editing, in the group's chip slot.",
               "name": "language-field"
             },
             {
@@ -49743,7 +49756,7 @@
               }
             },
             {
-              "description": "Content displayed in the grey panel footer. The header belongs to the language select; nothing else is slotted into it.",
+              "description": "Content displayed in the grey panel footer.",
               "name": "footer",
               "inheritedFrom": {
                 "name": "ZnPanel",
@@ -49759,7 +49772,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ 'zn-chip': ZnChip, 'zn-header': ZnHeader, 'zn-option': ZnOption, 'zn-select': ZnSelect }"
+              "default": "{ 'zn-chip': ZnChip, 'zn-form-group': ZnFormGroup, 'zn-option': ZnOption, 'zn-select': ZnSelect }"
             },
             {
               "kind": "field",
@@ -49775,9 +49788,19 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The caption shown in the panel header. An alias for the inherited `caption`, which wins where both are set.",
+              "description": "The form group's label. An alias for the inherited `caption`, which wins where both are set.",
               "attribute": "label"
             },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Sits under the label, above the language select, as help text does in any other form group.",
+              "attribute": "help-text"
+            },
             {
               "kind": "field",
               "name": "inline",
@@ -49785,7 +49808,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Drops the panel chrome — border, background and padding — so the group reads as a section of the form around it\nrather than a panel of its own. For groups nested inside another panel, where the fields would otherwise sit\nindented behind a second border.",
+              "description": "Drops the panel chrome — border, background and padding — so the group reads as a section of the surrounding form\nrather than a panel of its own. For groups nested inside another panel, where the fields would otherwise sit\nindented behind a second border.",
               "attribute": "inline",
               "reflects": true
             },
@@ -49881,7 +49904,7 @@
                   }
                 }
               ],
-              "description": "`English (EN)`, or the code alone where the configured name already is the code."
+              "description": "The configured name, or the code where `languages` does not name the language."
             },
             {
               "kind": "method",
@@ -50100,16 +50123,25 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The caption shown in the panel header. An alias for the inherited `caption`, which wins where both are set.",
+              "description": "The form group's label. An alias for the inherited `caption`, which wins where both are set.",
               "fieldName": "label"
             },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Sits under the label, above the language select, as help text does in any other form group.",
+              "fieldName": "helpText"
+            },
             {
               "name": "inline",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Drops the panel chrome — border, background and padding — so the group reads as a section of the form around it\nrather than a panel of its own. For groups nested inside another panel, where the fields would otherwise sit\nindented behind a second border.",
+              "description": "Drops the panel chrome — border, background and padding — so the group reads as a section of the surrounding form\nrather than a panel of its own. For groups nested inside another panel, where the fields would otherwise sit\nindented behind a second border.",
               "fieldName": "inline"
             },
             {
@@ -50271,13 +50303,13 @@
           "tagNameWithoutPrefix": "translation-group",
           "tagName": "zn-translation-group",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Puts several zn-translations fields behind one language select, so a whole form's worth of copy is\n *  translated a language at a time.\n * @documentation https://zinc.style/components/translation-group\n * @status experimental\n * @since 1.0\n *\n * The select sits at the top right of the header, opposite the caption. Choosing a language switches every child at\n * once, and each child hides its own select while it is in a group — `grouped` is set on them here.\n *\n * Closed, the select carries how many target languages are done — `1/5`. Its options each carry a chip aggregated\n * across the children:\n *\n * - `Translated` — every child has a value for it\n * - `Partial` — only some children do\n * - `English` — none do, so all of them fall back to the English text\n *\n * `Empty` replaces the last of those for English itself, which has nothing to fall back to. English is the source\n * rather than a translation, so it is also left out of the `n of m translated` count beside the label.\n *\n * The children own their values; this component only chooses which language is shown and reports on what they hold.\n * It reads them back on every child `zn-change`, so the chips and the count follow an edit as it is typed.\n *\n * Extends `zn-panel`, so `caption`, `icon`, `flush`, `transparent` and the `footer` slot behave as they do there.\n * Nested inside another panel, add `inline` to drop the chrome and keep the fields aligned with the surrounding form.\n *\n * @dependency zn-chip\n * @dependency zn-header\n * @dependency zn-option\n * @dependency zn-select\n *\n * @event zn-language-change - Emitted when the active language changes. Detail: `{ language: string }`.\n *\n * @slot - The `zn-translations` fields the select drives.\n * @slot actions - Buttons for the bottom of the panel, on the white body rather than the grey footer. They sit on\n *  the right, as zinc's form action rows do; `align=\"start\"` moves one to the left. Write them in the order they\n *  should be read — the sides are set by CSS ordering, so markup order is what a keyboard follows.\n * @slot footer - Content displayed in the grey panel footer. The header belongs to the language select; nothing\n *  else is slotted into it.\n *\n * @csspart base - The component's base wrapper.\n * @csspart actions - The row of buttons at the bottom of the body.\n * @csspart language-field - The label and select that choose the language every child is editing.\n * @csspart language-select - The select itself.\n */",
+          "jsDoc": "/**\n * @summary Puts several zn-translations fields behind one language select, so a whole form's worth of copy is\n *  translated a language at a time.\n * @documentation https://zinc.style/components/translation-group\n * @status experimental\n * @since 1.0\n *\n * The fields sit in a `zn-form-group`, so the caption, help text and the language select share its label column and\n * the fields line up with every other form group around them. Choosing a language switches every child at once, and\n * each child hides its own select while it is in a group — `grouped` is set on them here.\n *\n * The select is searchable. Each option holds its language code as its value, so typing `de` finds German without the\n * code being on show.\n *\n * Closed, the select carries how many target languages are done — `1/5`. Its options each carry a chip aggregated\n * across the children:\n *\n * - `Translated` — every child has a value for it\n * - `Partial` — only some children do\n * - `English` — none do, so all of them fall back to the English text\n *\n * `Empty` replaces the last of those for English itself, which has nothing to fall back to. English is the source\n * rather than a translation, so it is also left out of the `n of m translated` count beside the label.\n *\n * The children own their values; this component only chooses which language is shown and reports on what they hold.\n * It reads them back on every child `zn-change`, so the chips and the count follow an edit as it is typed.\n *\n * Extends `zn-panel`, so `caption`, `flush`, `transparent` and the `footer` slot behave as they do there. Nested\n * inside another panel, add `inline` to drop the chrome and keep the fields aligned with the surrounding form.\n *\n * @dependency zn-chip\n * @dependency zn-form-group\n * @dependency zn-option\n * @dependency zn-select\n *\n * @event zn-language-change - Emitted when the active language changes. Detail: `{ language: string }`.\n *\n * @slot - The `zn-translations` fields the select drives.\n * @slot actions - Buttons for the bottom of the panel, on the white body rather than the grey footer. They sit on\n *  the right, as zinc's form action rows do; `align=\"start\"` moves one to the left. Write them in the order they\n *  should be read — the sides are set by CSS ordering, so markup order is what a keyboard follows.\n * @slot footer - Content displayed in the grey panel footer.\n *\n * @csspart base - The component's base wrapper.\n * @csspart form-group - The form group holding the caption, the language select and the fields.\n * @csspart actions - The row of buttons at the bottom of the body.\n * @csspart language-field - The select that chooses the language every child is editing, in the group's chip slot.\n * @csspart language-select - The select itself.\n */",
           "documentation": "https://zinc.style/components/translation-group",
           "status": "experimental",
           "since": "1.0",
           "dependencies": [
             "zn-chip",
-            "zn-header",
+            "zn-form-group",
             "zn-option",
             "zn-select"
           ],
@@ -50725,7 +50757,7 @@
                   }
                 }
               ],
-              "description": "`English (EN)` — the configured name plus its code, unless the name already is the code, in which case the code\nalone. `languages` is written both ways: `{\"en\": \"English\"}` and `{\"en\": \"EN\"}`."
+              "description": "The configured name, or the code where `languages` does not name the language."
             },
             {
               "kind": "method",
@@ -51332,7 +51364,7 @@
   "package": {
     "name": "@kubex/zinc",
     "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
-    "version": "1.1.117",
+    "version": "1.1.118",
     "author": "",
     "license": "MIT"
   }

package/dist/vscode.html-custom-data.json

@@ -5181,16 +5181,21 @@
     },
     {
       "name": "zn-translation-group",
-      "description": "Puts several zn-translations fields behind one language select, so a whole form's worth of copy is\ntranslated a language at a time.\n---\n\n\n### **Events:**\n - **zn-language-change** - Emitted when the active language changes. Detail: `{ language: string }`.\n\n### **Slots:**\n - _default_ - The `zn-translations` fields the select drives.\n- **actions** - Buttons for the bottom of the panel, on the white body rather than the grey footer. They sit on the right, as zinc's form action rows do; `align=\"start\"` moves one to the left. Write them in the order they should be read — the sides are set by CSS ordering, so markup order is what a keyboard follows.\n- **footer** - Content displayed in the grey panel footer. The header belongs to the language select; nothing else is slotted into it.\n\n### **CSS Properties:**\n - **--zn-panel-basis** - The flex-basis of the panel. Can be set using the basis-px attribute. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **actions** - The row of buttons at the bottom of the body.\n- **language-field** - The label and select that choose the language every child is editing.\n- **language-select** - The select itself.",
+      "description": "Puts several zn-translations fields behind one language select, so a whole form's worth of copy is\ntranslated a language at a time.\n---\n\n\n### **Events:**\n - **zn-language-change** - Emitted when the active language changes. Detail: `{ language: string }`.\n\n### **Slots:**\n - _default_ - The `zn-translations` fields the select drives.\n- **actions** - Buttons for the bottom of the panel, on the white body rather than the grey footer. They sit on the right, as zinc's form action rows do; `align=\"start\"` moves one to the left. Write them in the order they should be read — the sides are set by CSS ordering, so markup order is what a keyboard follows.\n- **footer** - Content displayed in the grey panel footer.\n\n### **CSS Properties:**\n - **--zn-panel-basis** - The flex-basis of the panel. Can be set using the basis-px attribute. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-group** - The form group holding the caption, the language select and the fields.\n- **actions** - The row of buttons at the bottom of the body.\n- **language-field** - The select that chooses the language every child is editing, in the group's chip slot.\n- **language-select** - The select itself.",
       "attributes": [
         {
           "name": "label",
-          "description": "The caption shown in the panel header. An alias for the inherited `caption`, which wins where both are set.",
+          "description": "The form group's label. An alias for the inherited `caption`, which wins where both are set.",
+          "values": []
+        },
+        {
+          "name": "help-text",
+          "description": "Sits under the label, above the language select, as help text does in any other form group.",
           "values": []
         },
         {
           "name": "inline",
-          "description": "Drops the panel chrome — border, background and padding — so the group reads as a section of the form around it\nrather than a panel of its own. For groups nested inside another panel, where the fields would otherwise sit\nindented behind a second border.",
+          "description": "Drops the panel chrome — border, background and padding — so the group reads as a section of the surrounding form\nrather than a panel of its own. For groups nested inside another panel, where the fields would otherwise sit\nindented behind a second border.",
           "values": []
         },
         {

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@kubex/zinc",
-  "version": "1.1.117",
+  "version": "1.1.118",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -12211,17 +12211,22 @@
         },
         {
           "name": "zn-translation-group",
-          "description": "Puts several zn-translations fields behind one language select, so a whole form's worth of copy is\ntranslated a language at a time.\n---\n\n\n### **Events:**\n - **zn-language-change** - Emitted when the active language changes. Detail: `{ language: string }`.\n\n### **Slots:**\n - _default_ - The `zn-translations` fields the select drives.\n- **actions** - Buttons for the bottom of the panel, on the white body rather than the grey footer. They sit on the right, as zinc's form action rows do; `align=\"start\"` moves one to the left. Write them in the order they should be read — the sides are set by CSS ordering, so markup order is what a keyboard follows.\n- **footer** - Content displayed in the grey panel footer. The header belongs to the language select; nothing else is slotted into it.\n\n### **CSS Properties:**\n - **--zn-panel-basis** - The flex-basis of the panel. Can be set using the basis-px attribute. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **actions** - The row of buttons at the bottom of the body.\n- **language-field** - The label and select that choose the language every child is editing.\n- **language-select** - The select itself.",
+          "description": "Puts several zn-translations fields behind one language select, so a whole form's worth of copy is\ntranslated a language at a time.\n---\n\n\n### **Events:**\n - **zn-language-change** - Emitted when the active language changes. Detail: `{ language: string }`.\n\n### **Slots:**\n - _default_ - The `zn-translations` fields the select drives.\n- **actions** - Buttons for the bottom of the panel, on the white body rather than the grey footer. They sit on the right, as zinc's form action rows do; `align=\"start\"` moves one to the left. Write them in the order they should be read — the sides are set by CSS ordering, so markup order is what a keyboard follows.\n- **footer** - Content displayed in the grey panel footer.\n\n### **CSS Properties:**\n - **--zn-panel-basis** - The flex-basis of the panel. Can be set using the basis-px attribute. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-group** - The form group holding the caption, the language select and the fields.\n- **actions** - The row of buttons at the bottom of the body.\n- **language-field** - The select that chooses the language every child is editing, in the group's chip slot.\n- **language-select** - The select itself.",
           "doc-url": "",
           "attributes": [
             {
               "name": "label",
-              "description": "The caption shown in the panel header. An alias for the inherited `caption`, which wins where both are set.",
+              "description": "The form group's label. An alias for the inherited `caption`, which wins where both are set.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-text",
+              "description": "Sits under the label, above the language select, as help text does in any other form group.",
               "value": { "type": "string", "default": "''" }
             },
             {
               "name": "inline",
-              "description": "Drops the panel chrome — border, background and padding — so the group reads as a section of the form around it\nrather than a panel of its own. For groups nested inside another panel, where the fields would otherwise sit\nindented behind a second border.",
+              "description": "Drops the panel chrome — border, background and padding — so the group reads as a section of the surrounding form\nrather than a panel of its own. For groups nested inside another panel, where the fields would otherwise sit\nindented behind a second border.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -12261,7 +12266,7 @@
             },
             {
               "name": "footer",
-              "description": "Content displayed in the grey panel footer. The header belongs to the language select; nothing else is slotted into it."
+              "description": "Content displayed in the grey panel footer."
             }
           ],
           "events": [
@@ -12274,12 +12279,17 @@
             "properties": [
               {
                 "name": "label",
-                "description": "The caption shown in the panel header. An alias for the inherited `caption`, which wins where both are set.",
+                "description": "The form group's label. An alias for the inherited `caption`, which wins where both are set.",
+                "type": "string"
+              },
+              {
+                "name": "helpText",
+                "description": "Sits under the label, above the language select, as help text does in any other form group.",
                 "type": "string"
               },
               {
                 "name": "inline",
-                "description": "Drops the panel chrome — border, background and padding — so the group reads as a section of the form around it\nrather than a panel of its own. For groups nested inside another panel, where the fields would otherwise sit\nindented behind a second border.",
+                "description": "Drops the panel chrome — border, background and padding — so the group reads as a section of the surrounding form\nrather than a panel of its own. For groups nested inside another panel, where the fields would otherwise sit\nindented behind a second border.",
                 "type": "boolean"
               },
               {

package/dist/zn.d.ts

@@ -7324,6 +7324,7 @@ declare module "components/form-group/form-group.component" {
         pad: boolean;
         /** The scroller the label is tracked against by hand; null while native sticky is enough. */
         private tracked;
+        private stickyTop;
         private frame;
         private rebind;
         private offset;
@@ -9132,10 +9133,7 @@ declare module "components/translations/translations.component" {
         hasTranslation(language: string): boolean;
         /** The chip shown against a language, in the select's value and against each of its options. */
         private languageState;
-        /**
-         * `English (EN)` — the configured name plus its code, unless the name already is the code, in which case the code
-         * alone. `languages` is written both ways: `{"en": "English"}` and `{"en": "EN"}`.
-         */
+        /** The configured name, or the code where `languages` does not name the language. */
         private languageLabel;
         /**
          * `values`, falling back to the `value` attribute it is built from while that is still pending. A parent
@@ -9309,7 +9307,7 @@ declare module "components/animated-button/index" {
 declare module "components/translation-group/translation-group.component" {
     import { type CSSResultGroup, type PropertyValues } from 'lit';
     import ZnChip from "components/chip/index";
-    import ZnHeader from "components/header/index";
+    import ZnFormGroup from "components/form-group/index";
     import ZnOption from "components/option/index";
     import ZnPanel from "components/panel/panel.component";
     import ZnSelect from "components/select/index";
@@ -9320,8 +9318,12 @@ declare module "components/translation-group/translation-group.component" {
      * @status experimental
      * @since 1.0
      *
-     * The select sits at the top right of the header, opposite the caption. Choosing a language switches every child at
-     * once, and each child hides its own select while it is in a group — `grouped` is set on them here.
+     * The fields sit in a `zn-form-group`, so the caption, help text and the language select share its label column and
+     * the fields line up with every other form group around them. Choosing a language switches every child at once, and
+     * each child hides its own select while it is in a group — `grouped` is set on them here.
+     *
+     * The select is searchable. Each option holds its language code as its value, so typing `de` finds German without the
+     * code being on show.
      *
      * Closed, the select carries how many target languages are done — `1/5`. Its options each carry a chip aggregated
      * across the children:
@@ -9336,11 +9338,11 @@ declare module "components/translation-group/translation-group.component" {
      * 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.
      *
-     * Extends `zn-panel`, so `caption`, `icon`, `flush`, `transparent` and the `footer` slot behave as they do there.
-     * Nested inside another panel, add `inline` to drop the chrome and keep the fields aligned with the surrounding form.
+     * Extends `zn-panel`, so `caption`, `flush`, `transparent` and the `footer` slot behave as they do there. Nested
+     * inside another panel, add `inline` to drop the chrome and keep the fields aligned with the surrounding form.
      *
      * @dependency zn-chip
-     * @dependency zn-header
+     * @dependency zn-form-group
      * @dependency zn-option
      * @dependency zn-select
      *
@@ -9350,27 +9352,29 @@ declare module "components/translation-group/translation-group.component" {
      * @slot actions - Buttons for the bottom of the panel, on the white body rather than the grey footer. They sit on
      *  the right, as zinc's form action rows do; `align="start"` moves one to the left. Write them in the order they
      *  should be read — the sides are set by CSS ordering, so markup order is what a keyboard follows.
-     * @slot footer - Content displayed in the grey panel footer. The header belongs to the language select; nothing
-     *  else is slotted into it.
+     * @slot footer - Content displayed in the grey panel footer.
      *
      * @csspart base - The component's base wrapper.
+     * @csspart form-group - The form group holding the caption, the language select and the fields.
      * @csspart actions - The row of buttons at the bottom of the body.
-     * @csspart language-field - The label and select that choose the language every child is editing.
+     * @csspart language-field - The select that chooses the language every child is editing, in the group's chip slot.
      * @csspart language-select - The select itself.
      */
     export default class ZnTranslationGroup extends ZnPanel {
         static styles: CSSResultGroup;
         static dependencies: {
             'zn-chip': typeof ZnChip;
-            'zn-header': typeof ZnHeader;
+            'zn-form-group': typeof ZnFormGroup;
             'zn-option': typeof ZnOption;
             'zn-select': typeof ZnSelect;
         };
         private readonly _slotController;
-        /** The caption shown in the panel header. An alias for the inherited `caption`, which wins where both are set. */
+        /** The form group's label. An alias for the inherited `caption`, which wins where both are set. */
         label: string;
+        /** Sits under the label, above the language select, as help text does in any other form group. */
+        helpText: string;
         /**
-         * Drops the panel chrome — border, background and padding — so the group reads as a section of the form around it
+         * Drops the panel chrome — border, background and padding — so the group reads as a section of the surrounding form
          * rather than a panel of its own. For groups nested inside another panel, where the fields would otherwise sit
          * indented behind a second border.
          */
@@ -9402,7 +9406,7 @@ declare module "components/translation-group/translation-group.component" {
          * count are read off the children, so a child's edit has to bring the group back round.
          */
         private languageState;
-        /** `English (EN)`, or the code alone where the configured name already is the code. */
+        /** The configured name, or the code where `languages` does not name the language. */
         private displayName;
         /** Children take their language list from the group, so a change to `languages` has to reach them. */
         private syncChildLanguages;