@kubex/zinc 1.1.116 → 1.1.118

package/dist/custom-elements.json

@@ -16461,6 +16461,18 @@
           "kind": "class",
           "description": "",
           "name": "ZnFormGroup",
+          "cssProperties": [
+            {
+              "description": "Offset the label column sticks at while the inputs scroll past.",
+              "name": "--zn-form-group-sticky-top"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The column holding the label, help text and chip.",
+              "name": "form-control-text"
+            }
+          ],
           "slots": [
             {
               "description": "The default slot.",
@@ -16535,6 +16547,210 @@
               },
               "default": "false",
               "attribute": "pad"
+            },
+            {
+              "kind": "field",
+              "name": "tracked",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "privacy": "private",
+              "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",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "rebind",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "offset",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "resizeObserver",
+              "type": {
+                "text": "ResizeObserver | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "labelColumn",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "schedule",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "rebind",
+                  "default": "false",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Coalesces scroll and resize work into one frame, and out of the ResizeObserver callback."
+            },
+            {
+              "kind": "method",
+              "name": "findScroller",
+              "privacy": "private",
+              "description": "Native sticky only follows the nearest scroll container. Where that container isn't the one\nthe user actually scrolls — a `zn-panel` body sized to its content inside a scrolling\nslideout, say — the label never moves, so it gets translated by hand instead."
+            },
+            {
+              "kind": "method",
+              "name": "trackScroller",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "scroller",
+                  "type": {
+                    "text": "HTMLElement | null"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "scrollTarget",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "EventTarget | null"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "scroller",
+                  "type": {
+                    "text": "HTMLElement | null"
+                  }
+                }
+              ],
+              "description": "The document scrolls through the window, every other scroller reports its own events."
+            },
+            {
+              "kind": "field",
+              "name": "onScroll",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "onViewportResize",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "positionLabel",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "nearestScrollContainer",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLElement | null"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "from",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "description": "The box native sticky would anchor to, whether or not it can be scrolled."
+            },
+            {
+              "kind": "method",
+              "name": "scrollingAncestor",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLElement | null"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "from",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "description": "The nearest ancestor the user can actually scroll, falling back to the document."
+            },
+            {
+              "kind": "method",
+              "name": "isScrollContainer",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "overflow",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "ancestors",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLElement[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "from",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "description": "Walks the flattened tree, so slots and shadow boundaries are crossed the way layout does."
             }
           ],
           "attributes": [
@@ -16598,7 +16814,7 @@
           "tagNameWithoutPrefix": "form-group",
           "tagName": "zn-form-group",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/form-group\n * @status experimental\n * @since 1.0\n *\n * @slot - The default slot.\n * @slot chip - A chip displayed under the form group's help text.\n *\n */",
+          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/form-group\n * @status experimental\n * @since 1.0\n *\n * @slot - The default slot.\n * @slot chip - A chip displayed under the form group's help text.\n *\n * @csspart form-control-text - The column holding the label, help text and chip.\n *\n * @cssproperty --zn-form-group-sticky-top - Offset the label column sticks at while the inputs scroll past.\n *\n */",
           "documentation": "https://zinc.style/components/form-group",
           "status": "experimental",
           "since": "1.0"
@@ -49505,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"
             },
             {
@@ -49536,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",
@@ -49552,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",
@@ -49568,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",
@@ -49578,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
             },
@@ -49674,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",
@@ -49893,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"
             },
             {
@@ -50064,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"
           ],
@@ -50518,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",
@@ -51125,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.116",
+    "version": "1.1.118",
     "author": "",
     "license": "MIT"
   }

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

@@ -1922,7 +1922,7 @@
     },
     {
       "name": "zn-form-group",
-      "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **chip** - A chip displayed under the form group's help text.",
+      "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **chip** - A chip displayed under the form group's help text.\n\n### **CSS Properties:**\n - **--zn-form-group-sticky-top** - Offset the label column sticks at while the inputs scroll past. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control-text** - The column holding the label, help text and chip.",
       "attributes": [
         {
           "name": "label",
@@ -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.116",
+  "version": "1.1.118",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -4509,7 +4509,7 @@
         },
         {
           "name": "zn-form-group",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **chip** - A chip displayed under the form group's help text.",
+          "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **chip** - A chip displayed under the form group's help text.\n\n### **CSS Properties:**\n - **--zn-form-group-sticky-top** - Offset the label column sticks at while the inputs scroll past. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control-text** - The column holding the label, help text and chip.",
           "doc-url": "",
           "attributes": [
             {
@@ -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"
               },
               {