@zywave/zui-formfield 4.3.0 → 4.4.0-pre.0

package/dist/custom-elements.json

@@ -8,7 +8,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<zui-formfield>` provides a standardized way of labeling and styling form controls.",
+          "description": "`<zui-formfield>` provides a standardized way of labeling and styling form controls such as `<zui-input>`, `<zui-select>`, `<zui-textarea>`, and `<zui-checkbox>`.",
           "name": "ZuiFormField",
           "cssParts": [
             {

package/dist/zui-formfield.d.ts

@@ -2,7 +2,7 @@ import { ZuiBaseElement } from '@zywave/zui-base';
 import type { PropertyValues } from 'lit';
 import '@zywave/zui-tooltip';
 /**
- * `<zui-formfield>` provides a standardized way of labeling and styling form controls.
+ * `<zui-formfield>` provides a standardized way of labeling and styling form controls such as `<zui-input>`, `<zui-select>`, `<zui-textarea>`, and `<zui-checkbox>`.
  *
  * @slot - Default, unnamed slot; for inserting form controls, such as `<select>`, `<input>`, `<zui-input>`, `<zui-select>`, etc., into `<zui-formfield>`
  *

package/dist/zui-formfield.js

@@ -11,7 +11,7 @@ import { property, query } from 'lit/decorators.js';
 import { style } from './zui-formfield-css.js';
 import '@zywave/zui-tooltip';
 /**
- * `<zui-formfield>` provides a standardized way of labeling and styling form controls.
+ * `<zui-formfield>` provides a standardized way of labeling and styling form controls such as `<zui-input>`, `<zui-select>`, `<zui-textarea>`, and `<zui-checkbox>`.
  *
  * @slot - Default, unnamed slot; for inserting form controls, such as `<select>`, `<input>`, `<zui-input>`, `<zui-select>`, etc., into `<zui-formfield>`
  *

package/dist/zui-formfield.js.map

@@ -1 +1 @@
-{"version":3,"file":"zui-formfield.js","sourceRoot":"","sources":["../src/zui-formfield.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiBaseElement } from '@zywave/zui-base';\nimport { findAssignedElement } from '@zywave/zui-base/dist/utils/find-assigned-element.js';\nimport { html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { style } from './zui-formfield-css.js';\nimport type { PropertyValues } from 'lit';\nimport '@zywave/zui-tooltip';\n\n/**\n * `<zui-formfield>` provides a standardized way of labeling and styling form controls.\n *\n * @slot - Default, unnamed slot; for inserting form controls, such as `<select>`, `<input>`, `<zui-input>`, `<zui-select>`, etc., into `<zui-formfield>`\n *\n * @csspart container - The container for form fields inserted into `zui-formfield`; this is exposed as a CSS shadow part and can be accessed with `::part(container)`.\n * @csspart label - The label for `zui-formfield`; this is exposed as a CSS shadow part and can be accessed with `::part(label)`.\n */\nexport class ZuiFormField extends ZuiBaseElement {\n  /**\n   * (optional): Label text, for the form control. Alternatively can slot in label text instead. If necessary, can be styled with `::part(label)`.\n   */\n  @property({ type: String })\n  label: string | null = null;\n\n  /**\n   * (optional): Provide a valid CSS selector to help `zui-formfield` find the correct form control. Defaults to the first child element.\n   */\n  @property({ type: String, attribute: 'control-selector' })\n  controlSelector = '*';\n\n  /**\n   * (optional): Tooltip text to display in a help icon next to the label.\n   */\n  @property({ type: String })\n  tooltip: string | null = null;\n\n  @query('slot')\n  _slotEl: HTMLSlotElement;\n\n  #validationMessageField?: string | null | undefined;\n\n  #validationIntervalId?: number | undefined;\n\n  #isRequired = false;\n\n  get #validationMessage() {\n    return this.#validationMessageField;\n  }\n\n  set #validationMessage(msg: string | null | undefined) {\n    const oldValue = this.#validationMessageField;\n    if (oldValue !== msg) {\n      this.#validationMessageField = msg?.trim();\n      this.requestUpdate();\n    }\n  }\n\n  get #control() {\n    return findAssignedElement(this._slotEl, this.controlSelector);\n  }\n\n  #checkRequired() {\n    const control = this.#control;\n    const wasRequired = this.#isRequired;\n    this.#isRequired = control?.hasAttribute('required') ?? false;\n\n    if (wasRequired !== this.#isRequired) {\n      this.requestUpdate();\n    }\n  }\n\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  async firstUpdated(changedProps: PropertyValues) {\n    super.firstUpdated(changedProps);\n\n    if (this.#control) {\n      this.#checkRequired();\n      this.#control.tagName.includes('-')\n        ? customElements\n            .whenDefined(this.#control.tagName.toLowerCase())\n            .then(() => this.#configureValidation(this.#control as ValidatableLitElement))\n        : this.#configureValidation(this.#control as ValidatableLitElement);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    if (this.#validationIntervalId) {\n      clearInterval(this.#validationIntervalId);\n      this.#validationIntervalId = undefined;\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"container\" part=\"container\">\n        ${this.label\n          ? html`\n              <label @click=\"${this.#onLabelClick}\" part=\"label\" class=\"${this.#isRequired ? 'required' : ''}\">\n                <span class=\"label-text\">${this.label}</span>\n                ${this.tooltip ? html`<zui-tooltip position=\"right\"> ${this.tooltip} </zui-tooltip>` : nothing}\n              </label>\n            `\n          : nothing}\n        <slot @slotchange=\"${this.#onSlotChange}\"></slot>\n        <div class=\"validation-message\">${this.#validationMessage ?? ''}</div>\n      </div>\n    `;\n  }\n\n  #onLabelClick() {\n    this.#control?.focus();\n    this.#control?.click();\n  }\n\n  #onSlotChange() {\n    if (this.#control) {\n      this.#checkRequired();\n      this.#configureValidation(this.#control as ValidatableLitElement);\n    }\n  }\n\n  #configureValidation(control: ValidatableLitElement) {\n    if (!control || typeof control.checkValidity !== 'function') {\n      return;\n    }\n\n    control.addEventListener(\n      'invalid',\n      async (event) => {\n        event.preventDefault();\n        await this.#extractValidationMessage(control);\n      },\n      { capture: true }\n    );\n\n    control.addEventListener('blur', async () => await this.#extractValidationMessage(control));\n    control.addEventListener('input', async () => await this.#extractValidationMessage(control));\n    control.addEventListener('change', async () => await this.#extractValidationMessage(control));\n    control.addEventListener('validitystatechange', async () => await this.#extractValidationMessage(control));\n\n    // workaround native elements not necessarily raising events for direct manipulation (i.e. input.value = 'foo' doesn't trigger events)\n    // see https://github.com/whatwg/html/issues/9878\n    if (!control.tagName.includes('-')) {\n      window.clearInterval(this.#validationIntervalId);\n\n      this.#validationIntervalId = window.setInterval(async () => {\n        if (control.matches(':user-invalid,:user-valid')) {\n          await this.#extractValidationMessage(control);\n        }\n      }, 100);\n    }\n  }\n\n  async #extractValidationMessage(control: ValidatableLitElement) {\n    if (control.updateComplete) {\n      await control.updateComplete;\n    }\n    this.#validationMessage = control.validationMessage;\n  }\n}\n\nwindow.customElements.define('zui-formfield', ZuiFormField);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-formfield': ZuiFormField;\n  }\n}\n\ntype ValidatableLitElement = ValidatableHTMLElement & {\n  updateComplete?: Promise<void>;\n};\n\ntype ValidatableHTMLElement = HTMLElement & {\n  setCustomValidity(message: string): void;\n  checkValidity(): boolean;\n  reportValidity(): boolean;\n  validationMessage: string;\n  validity: ValidityState;\n};\n"]}
+{"version":3,"file":"zui-formfield.js","sourceRoot":"","sources":["../src/zui-formfield.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAE/C,OAAO,qBAAqB,CAAC;AAE7B;;;;;;;GAOG;AACH,MAAM,OAAO,YAAa,SAAQ,cAAc;IAAhD;;QACE;;WAEG;QAEH,UAAK,GAAkB,IAAI,CAAC;QAE5B;;WAEG;QAEH,oBAAe,GAAG,GAAG,CAAC;QAEtB;;WAEG;QAEH,YAAO,GAAkB,IAAI,CAAC;QAS9B,gBAAW,GAAG,KAAK,CAAC;IAyHtB,CAAC;IA7HC,uBAAuB,CAA6B;IAEpD,qBAAqB,CAAsB;IAE3C,WAAW,CAAS;IAEpB,IAAI,kBAAkB;QACpB,OAAO,IAAI,CAAC,uBAAuB,CAAC;IACtC,CAAC;IAED,IAAI,kBAAkB,CAAC,GAA8B;QACnD,MAAM,QAAQ,GAAG,IAAI,CAAC,uBAAuB,CAAC;QAC9C,IAAI,QAAQ,KAAK,GAAG,EAAE,CAAC;YACrB,IAAI,CAAC,uBAAuB,GAAG,GAAG,EAAE,IAAI,EAAE,CAAC;YAC3C,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,mBAAmB,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IACjE,CAAC;IAED,cAAc;QACZ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC9B,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QACrC,IAAI,CAAC,WAAW,GAAG,OAAO,EAAE,YAAY,CAAC,UAAU,CAAC,IAAI,KAAK,CAAC;QAE9D,IAAI,WAAW,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC;YACrC,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,KAAK,CAAC,YAAY,CAAC,YAA4B;QAC7C,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;QAEjC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC;gBACjC,CAAC,CAAC,cAAc;qBACX,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;qBAChD,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,QAAiC,CAAC,CAAC;gBAClF,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,QAAiC,CAAC,CAAC;QACxE,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,IAAI,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC/B,aAAa,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;YAC1C,IAAI,CAAC,qBAAqB,GAAG,SAAS,CAAC;QACzC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA;+BACe,IAAI,CAAC,aAAa,yBAAyB,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;2CACjE,IAAI,CAAC,KAAK;kBACnC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA,kCAAkC,IAAI,CAAC,OAAO,iBAAiB,CAAC,CAAC,CAAC,OAAO;;aAEjG;YACH,CAAC,CAAC,OAAO;6BACU,IAAI,CAAC,aAAa;0CACL,IAAI,CAAC,kBAAkB,IAAI,EAAE;;KAElE,CAAC;IACJ,CAAC;IAED,aAAa;QACX,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC;QACvB,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC;IACzB,CAAC;IAED,aAAa;QACX,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,QAAiC,CAAC,CAAC;QACpE,CAAC;IACH,CAAC;IAED,oBAAoB,CAAC,OAA8B;QACjD,IAAI,CAAC,OAAO,IAAI,OAAO,OAAO,CAAC,aAAa,KAAK,UAAU,EAAE,CAAC;YAC5D,OAAO;QACT,CAAC;QAED,OAAO,CAAC,gBAAgB,CACtB,SAAS,EACT,KAAK,EAAE,KAAK,EAAE,EAAE;YACd,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,MAAM,IAAI,CAAC,yBAAyB,CAAC,OAAO,CAAC,CAAC;QAChD,CAAC,EACD,EAAE,OAAO,EAAE,IAAI,EAAE,CAClB,CAAC;QAEF,OAAO,CAAC,gBAAgB,CAAC,MAAM,EAAE,KAAK,IAAI,EAAE,CAAC,MAAM,IAAI,CAAC,yBAAyB,CAAC,OAAO,CAAC,CAAC,CAAC;QAC5F,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,KAAK,IAAI,EAAE,CAAC,MAAM,IAAI,CAAC,yBAAyB,CAAC,OAAO,CAAC,CAAC,CAAC;QAC7F,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,KAAK,IAAI,EAAE,CAAC,MAAM,IAAI,CAAC,yBAAyB,CAAC,OAAO,CAAC,CAAC,CAAC;QAC9F,OAAO,CAAC,gBAAgB,CAAC,qBAAqB,EAAE,KAAK,IAAI,EAAE,CAAC,MAAM,IAAI,CAAC,yBAAyB,CAAC,OAAO,CAAC,CAAC,CAAC;QAE3G,sIAAsI;QACtI,iDAAiD;QACjD,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YACnC,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;YAEjD,IAAI,CAAC,qBAAqB,GAAG,MAAM,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;gBACzD,IAAI,OAAO,CAAC,OAAO,CAAC,2BAA2B,CAAC,EAAE,CAAC;oBACjD,MAAM,IAAI,CAAC,yBAAyB,CAAC,OAAO,CAAC,CAAC;gBAChD,CAAC;YACH,CAAC,EAAE,GAAG,CAAC,CAAC;QACV,CAAC;IACH,CAAC;IAED,KAAK,CAAC,yBAAyB,CAAC,OAA8B;QAC5D,IAAI,OAAO,CAAC,cAAc,EAAE,CAAC;YAC3B,MAAM,OAAO,CAAC,cAAc,CAAC;QAC/B,CAAC;QACD,IAAI,CAAC,kBAAkB,GAAG,OAAO,CAAC,iBAAiB,CAAC;IACtD,CAAC;CACF;AA9IC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACC;AAM5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;qDACpC;AAMtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACG;AAG9B;IADC,KAAK,CAAC,MAAM,CAAC;6CACW;AAiI3B,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC","sourcesContent":["import { ZuiBaseElement } from '@zywave/zui-base';\nimport { findAssignedElement } from '@zywave/zui-base/dist/utils/find-assigned-element.js';\nimport { html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { style } from './zui-formfield-css.js';\nimport type { PropertyValues } from 'lit';\nimport '@zywave/zui-tooltip';\n\n/**\n * `<zui-formfield>` provides a standardized way of labeling and styling form controls such as `<zui-input>`, `<zui-select>`, `<zui-textarea>`, and `<zui-checkbox>`.\n *\n * @slot - Default, unnamed slot; for inserting form controls, such as `<select>`, `<input>`, `<zui-input>`, `<zui-select>`, etc., into `<zui-formfield>`\n *\n * @csspart container - The container for form fields inserted into `zui-formfield`; this is exposed as a CSS shadow part and can be accessed with `::part(container)`.\n * @csspart label - The label for `zui-formfield`; this is exposed as a CSS shadow part and can be accessed with `::part(label)`.\n */\nexport class ZuiFormField extends ZuiBaseElement {\n  /**\n   * (optional): Label text, for the form control. Alternatively can slot in label text instead. If necessary, can be styled with `::part(label)`.\n   */\n  @property({ type: String })\n  label: string | null = null;\n\n  /**\n   * (optional): Provide a valid CSS selector to help `zui-formfield` find the correct form control. Defaults to the first child element.\n   */\n  @property({ type: String, attribute: 'control-selector' })\n  controlSelector = '*';\n\n  /**\n   * (optional): Tooltip text to display in a help icon next to the label.\n   */\n  @property({ type: String })\n  tooltip: string | null = null;\n\n  @query('slot')\n  _slotEl: HTMLSlotElement;\n\n  #validationMessageField?: string | null | undefined;\n\n  #validationIntervalId?: number | undefined;\n\n  #isRequired = false;\n\n  get #validationMessage() {\n    return this.#validationMessageField;\n  }\n\n  set #validationMessage(msg: string | null | undefined) {\n    const oldValue = this.#validationMessageField;\n    if (oldValue !== msg) {\n      this.#validationMessageField = msg?.trim();\n      this.requestUpdate();\n    }\n  }\n\n  get #control() {\n    return findAssignedElement(this._slotEl, this.controlSelector);\n  }\n\n  #checkRequired() {\n    const control = this.#control;\n    const wasRequired = this.#isRequired;\n    this.#isRequired = control?.hasAttribute('required') ?? false;\n\n    if (wasRequired !== this.#isRequired) {\n      this.requestUpdate();\n    }\n  }\n\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  async firstUpdated(changedProps: PropertyValues) {\n    super.firstUpdated(changedProps);\n\n    if (this.#control) {\n      this.#checkRequired();\n      this.#control.tagName.includes('-')\n        ? customElements\n            .whenDefined(this.#control.tagName.toLowerCase())\n            .then(() => this.#configureValidation(this.#control as ValidatableLitElement))\n        : this.#configureValidation(this.#control as ValidatableLitElement);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    if (this.#validationIntervalId) {\n      clearInterval(this.#validationIntervalId);\n      this.#validationIntervalId = undefined;\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"container\" part=\"container\">\n        ${this.label\n          ? html`\n              <label @click=\"${this.#onLabelClick}\" part=\"label\" class=\"${this.#isRequired ? 'required' : ''}\">\n                <span class=\"label-text\">${this.label}</span>\n                ${this.tooltip ? html`<zui-tooltip position=\"right\"> ${this.tooltip} </zui-tooltip>` : nothing}\n              </label>\n            `\n          : nothing}\n        <slot @slotchange=\"${this.#onSlotChange}\"></slot>\n        <div class=\"validation-message\">${this.#validationMessage ?? ''}</div>\n      </div>\n    `;\n  }\n\n  #onLabelClick() {\n    this.#control?.focus();\n    this.#control?.click();\n  }\n\n  #onSlotChange() {\n    if (this.#control) {\n      this.#checkRequired();\n      this.#configureValidation(this.#control as ValidatableLitElement);\n    }\n  }\n\n  #configureValidation(control: ValidatableLitElement) {\n    if (!control || typeof control.checkValidity !== 'function') {\n      return;\n    }\n\n    control.addEventListener(\n      'invalid',\n      async (event) => {\n        event.preventDefault();\n        await this.#extractValidationMessage(control);\n      },\n      { capture: true }\n    );\n\n    control.addEventListener('blur', async () => await this.#extractValidationMessage(control));\n    control.addEventListener('input', async () => await this.#extractValidationMessage(control));\n    control.addEventListener('change', async () => await this.#extractValidationMessage(control));\n    control.addEventListener('validitystatechange', async () => await this.#extractValidationMessage(control));\n\n    // workaround native elements not necessarily raising events for direct manipulation (i.e. input.value = 'foo' doesn't trigger events)\n    // see https://github.com/whatwg/html/issues/9878\n    if (!control.tagName.includes('-')) {\n      window.clearInterval(this.#validationIntervalId);\n\n      this.#validationIntervalId = window.setInterval(async () => {\n        if (control.matches(':user-invalid,:user-valid')) {\n          await this.#extractValidationMessage(control);\n        }\n      }, 100);\n    }\n  }\n\n  async #extractValidationMessage(control: ValidatableLitElement) {\n    if (control.updateComplete) {\n      await control.updateComplete;\n    }\n    this.#validationMessage = control.validationMessage;\n  }\n}\n\nwindow.customElements.define('zui-formfield', ZuiFormField);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-formfield': ZuiFormField;\n  }\n}\n\ntype ValidatableLitElement = ValidatableHTMLElement & {\n  updateComplete?: Promise<void>;\n};\n\ntype ValidatableHTMLElement = HTMLElement & {\n  setCustomValidity(message: string): void;\n  checkValidity(): boolean;\n  reportValidity(): boolean;\n  validationMessage: string;\n  validity: ValidityState;\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zywave/zui-formfield",
-  "version": "4.3.0",
+  "version": "4.4.0-pre.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "UNLICENSED",
@@ -25,5 +25,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "6ccacba5d09f8f9b2548272f06482a8c392af6c9"
+  "gitHead": "a0cddeabb5ec57cdd40bc06c1d106536e3e20642"
 }

package/src/zui-formfield.ts

@@ -7,7 +7,7 @@ import type { PropertyValues } from 'lit';
 import '@zywave/zui-tooltip';
 
 /**
- * `<zui-formfield>` provides a standardized way of labeling and styling form controls.
+ * `<zui-formfield>` provides a standardized way of labeling and styling form controls such as `<zui-input>`, `<zui-select>`, `<zui-textarea>`, and `<zui-checkbox>`.
  *
  * @slot - Default, unnamed slot; for inserting form controls, such as `<select>`, `<input>`, `<zui-input>`, `<zui-select>`, etc., into `<zui-formfield>`
  *