@skf-design-system/ui-components 1.0.2-beta.22 → 1.0.2-beta.24

package/dist/components/button/button.styles.js

@@ -3,8 +3,13 @@ const r = o`
 	/* stylelint-disable selector-class-pattern */
 	@layer components {
 		:host {
-			contain: initial;
-			display: inline-flex;
+			contain: paint style;
+			display: inline-block;
+		}
+
+		:host(:not([icon-only])) {
+			max-inline-size: min(100%, 23ch);
+			min-inline-size: 64px;
 		}
 
 		.btn {
@@ -14,13 +19,13 @@ const r = o`
 				var(--_skf-button-state-border-color, var(--_skf-button-border-color));
 			border-radius: var(--skf-border-radius-sm);
 			color: var(--_skf-button-state-color, var(--_skf-button-color));
+			display: inline-flex;
 			font-size: var(--_skf-button-font-size, var(--skf-font-size-100));
 			font-weight: var(--skf-font-weight-bold);
-			max-inline-size: min(100%, 23ch);
 			position: relative;
 
 			&:not(.btn--icon-only) {
-				min-inline-size: 64px;
+				inline-size: 100%;
 				padding-inline: var(--skf-spacing-100);
 			}
 
@@ -49,7 +54,6 @@ const r = o`
 
 		.btn--icon-only {
 			aspect-ratio: 1;
-			display: inherit;
 			place-content: center;
 		}
 
@@ -118,6 +122,7 @@ const r = o`
 			align-items: center;
 			display: flex;
 			gap: var(--skf-spacing-50);
+			min-inline-size: 0;
 		}
 
 		.btn__label {

package/dist/components/select/select.component.d.ts

@@ -107,6 +107,7 @@ export declare class SkfSelect extends FormBase {
     constructor();
     willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
     firstUpdated(): void;
+    /** @internal Handles updates to the size of the select-option component */
     _handleSizeUpdate(): void;
     /** @internal */
     _handleExpandedChange(): void;
@@ -122,8 +123,7 @@ export declare class SkfSelect extends FormBase {
     _handleReset: () => void;
     /** @internal */
     onUpdateComplete(): Promise<string>;
-    /** @internal */
-    /** Filter out elements other than skf-select-option and store in this._optionsList */
+    /** @internal Filter out elements other than skf-select-option and store in this._optionsList */
     _collectSlotOptionTags(): void;
     /** @internal */
     _updateWidth: () => void;

package/dist/components/select/select.component.js

@@ -8,8 +8,8 @@ import "../tag/tag.js";
 import { computePosition as S, flip as C, shift as V, offset as $ } from "@floating-ui/dom";
 import { FormBase as L } from "../../internal/components/formBase.js";
 import "../../internal/components/hint/hint.js";
-import { PopoverController as k } from "../../internal/controllers/popover.controller.js";
-import { findMatchingTags as E } from "../../internal/helpers/findMatchingTags.js";
+import { PopoverController as E } from "../../internal/controllers/popover.controller.js";
+import { findMatchingTags as k } from "../../internal/helpers/findMatchingTags.js";
 import { hintSeverity as A } from "../../internal/helpers/hintSeverity.js";
 import { raiseError as I } from "../../internal/helpers/raiseError.js";
 import { watch as w } from "../../internal/helpers/watch.js";
@@ -17,22 +17,22 @@ import { Asterisk as D } from "../../internal/templates/asterisk.js";
 import { componentStyles as P } from "../../styles/component.styles.js";
 import { LocalizeController as F } from "../../utilities/localize.js";
 import { nothing as b, html as p } from "lit";
-import { property as a, state as c, query as m, queryAssignedElements as T } from "lit/decorators.js";
-import { classMap as z } from "lit/directives/class-map.js";
+import { property as n, state as c, query as m, queryAssignedElements as T } from "lit/decorators.js";
+import { classMap as U } from "lit/directives/class-map.js";
 import { ifDefined as O } from "lit/directives/if-defined.js";
-import { SkfSelectOption as U } from "./select-option.component.js";
-import { GlobalClickController as M, KeyboardNavigationController as N, DeveloperFeedbackController as H } from "./select.controllers.js";
-import { styles as q } from "./select.styles.js";
+import { SkfSelectOption as z } from "./select-option.component.js";
+import { GlobalClickController as M, KeyboardNavigationController as N, DeveloperFeedbackController as q } from "./select.controllers.js";
+import { styles as H } from "./select.styles.js";
 var R = Object.defineProperty, j = Object.getOwnPropertyDescriptor, s = (l, r, t, e) => {
-  for (var o = e > 1 ? void 0 : e ? j(r, t) : r, n = l.length - 1, h; n >= 0; n--)
-    (h = l[n]) && (o = (e ? h(r, t, o) : h(o)) || o);
+  for (var o = e > 1 ? void 0 : e ? j(r, t) : r, a = l.length - 1, h; a >= 0; a--)
+    (h = l[a]) && (o = (e ? h(r, t, o) : h(o)) || o);
   return e && o && R(r, t, o), o;
 }, d;
 const f = class f extends L {
   constructor() {
     super();
     g(this, d);
-    y(this, d, new F(this)), this._componentIsConnected = !1, this.selectDelay = 200, this._optionsList = [], this.hideLabel = !1, this.hideTags = !1, this.label = "", this.lang = "en", this.multiple = !1, this.showValid = !1, this.size = "md", this._expanded = !1, this._invalid = !1, this.globalClickController = new M(this), this.keyboardNavController = new N(this), this.developerFeedbackController = new H(this), this.popoverController = new k(this), this._handleOptionSelected = ((t) => {
+    y(this, d, new F(this)), this._componentIsConnected = !1, this.selectDelay = 200, this._optionsList = [], this.hideLabel = !1, this.hideTags = !1, this.label = "", this.lang = "en", this.multiple = !1, this.showValid = !1, this.size = "md", this._expanded = !1, this._invalid = !1, this.globalClickController = new M(this), this.keyboardNavController = new N(this), this.developerFeedbackController = new q(this), this.popoverController = new E(this), this._handleOptionSelected = ((t) => {
       this._pristine = !1;
       const e = this._selectedOptions.length > 0;
       this.setFormValue(e ? this.selectedValues.join(",") : null), this._updateState(t);
@@ -78,14 +78,14 @@ const f = class f extends L {
         (e || o !== t) && o.removeAttribute("selected");
       }), this._optionsList = [];
     }, this._handleSlotChange = () => {
-      this._handleSizeUpdate(), this._collectSlotOptionTags(), this._ifValueIsSetSelectOption(), this._validateInput(), this._componentIsConnected = !0, this.emit("skf-select-connected");
+      this._handleSizeUpdate(), this._collectSlotOptionTags(), this._ifValueIsSetSelectOption(), this._validateInput(), this._componentIsConnected = !0, this.emit("skf-select-connected"), this.requestUpdate();
     }, this._ifValueIsSetSelectOption = () => {
       if (this.value)
         if (this.multiple) {
           const t = this.value.split(",").map((e) => e.toLowerCase().trim());
           this._optionsList.forEach((e) => {
-            t.includes(e.value.toLowerCase().trim()) ? (e.setSelectedDiscrete = !0, this.selectedOptions = [...this.selectedOptions, e]) : (e.setSelectedDiscrete = !1, this._selectedOptions = this._selectedOptions.filter(
-              (o) => o.value.toLowerCase().trim() !== e.value.toLowerCase().trim()
+            t.includes(e.value.toLowerCase().trim()) ? (e.setSelectedDiscrete = !0, this._selectedOptions = [.../* @__PURE__ */ new Set([...this._selectedOptions, e])]) : (e.setSelectedDiscrete = !1, this._selectedOptions = this._selectedOptions.filter(
+              (a) => a.value.toLowerCase().trim() !== e.value.toLowerCase().trim()
             ));
           }), this._setValue().catch((e) => {
             console.error(e);
@@ -114,11 +114,11 @@ const f = class f extends L {
   }
   set value(t) {
     let e = [];
-    this._componentIsConnected && (this.multiple ? e = t.split(",").map((n) => n.toLowerCase().trim()) : e = [t.toLowerCase().trim()], this._selectedOptions = this._optionsList.filter(
-      (n) => e.includes(n.value.toLowerCase().trim())
-    ), this._optionsList.forEach((n) => {
-      n.selected && (n.setSelectedDiscrete = !1);
-    }), this._selectedOptions.forEach((n) => n.setSelectedDiscrete = !0)), this._setValue();
+    this._componentIsConnected && (this.multiple ? e = t.split(",").map((a) => a.toLowerCase().trim()) : e = [t.toLowerCase().trim()], this._selectedOptions = this._optionsList.filter(
+      (a) => e.includes(a.value.toLowerCase().trim())
+    ), this._optionsList.forEach((a) => {
+      a.selected && (a.setSelectedDiscrete = !1);
+    }), this._selectedOptions.forEach((a) => a.setSelectedDiscrete = !0)), this._setValue();
   }
   get value() {
     return this._selectedOptions.length ? this._selectedOptions.length === 1 ? this._selectedOptions[0].value.trim() : this._selectedOptions.map((t) => t.value.trim()).join(",") : "";
@@ -152,7 +152,7 @@ const f = class f extends L {
   }
   _handleSizeUpdate() {
     this._slottedItems.forEach((t) => {
-      (t instanceof U || t instanceof x) && (t.small = this.size === "sm");
+      (t instanceof z || t instanceof x) && (t.small = this.size === "sm");
     });
   }
   _handleExpandedChange() {
@@ -195,10 +195,9 @@ const f = class f extends L {
   async onUpdateComplete() {
     return await this.updateComplete, this._updateWidth(), "done";
   }
-  /** @internal */
-  /** Filter out elements other than skf-select-option and store in this._optionsList */
+  /** @internal Filter out elements other than skf-select-option and store in this._optionsList */
   _collectSlotOptionTags() {
-    this._optionsList = E(this, "skf-select-option"), this._selectedOptions = this._optionsList.filter((t) => t.selected), I({
+    this._optionsList = k(this, "skf-select-option"), this._selectedOptions = this._optionsList.filter((t) => t.selected), I({
       assert: this._optionsList.length > 0,
       reason: "no-children",
       replaceStrings: [this.localName, "skf-select-option"]
@@ -244,7 +243,7 @@ const f = class f extends L {
 					>
 						<span
 							id="selected-value"
-							class=${z({ "selected-value": !0, "contains-meta-info": !this.value })}>
+							class=${U({ "selected-value": !0, "contains-meta-info": !this.value })}>
 							${this._computeVisibleValue()}
 						</span>
 						<skf-icon class="arrow" data-color="custom" name="chevronDown"></skf-icon>
@@ -285,58 +284,58 @@ const f = class f extends L {
 		`;
   }
 };
-d = new WeakMap(), f.styles = [P, q];
+d = new WeakMap(), f.styles = [P, H];
 let i = f;
 s([
-  a({ type: String, attribute: "custom-invalid" })
+  n({ type: String, attribute: "custom-invalid" })
 ], i.prototype, "customInvalid", 2);
 s([
-  a({ type: Boolean, attribute: "hide-label" })
+  n({ type: Boolean, attribute: "hide-label" })
 ], i.prototype, "hideLabel", 2);
 s([
-  a({ type: Boolean, reflect: !0, attribute: "hide-tags" })
+  n({ type: Boolean, reflect: !0, attribute: "hide-tags" })
 ], i.prototype, "hideTags", 2);
 s([
-  a({ type: String })
+  n({ type: String })
 ], i.prototype, "hint", 2);
 s([
-  a({ type: Array, attribute: !1 })
+  n({ type: Array, attribute: !1 })
 ], i.prototype, "selectedValues", 1);
 s([
-  a({ type: Array, attribute: !1 })
+  n({ type: Array, attribute: !1 })
 ], i.prototype, "selectedOptionsText", 1);
 s([
-  a({ type: String, reflect: !0 })
+  n({ type: String, reflect: !0 })
 ], i.prototype, "label", 2);
 s([
-  a({ type: String })
+  n({ type: String })
 ], i.prototype, "lang", 2);
 s([
-  a({ type: Number })
+  n({ type: Number })
 ], i.prototype, "max", 2);
 s([
-  a({ type: Number, attribute: "max-visible-items" })
+  n({ type: Number, attribute: "max-visible-items" })
 ], i.prototype, "maxVisibleItems", 2);
 s([
-  a({ type: Number })
+  n({ type: Number })
 ], i.prototype, "min", 2);
 s([
-  a({ type: Boolean, reflect: !0 })
+  n({ type: Boolean, reflect: !0 })
 ], i.prototype, "multiple", 2);
 s([
-  a({ type: String })
+  n({ type: String })
 ], i.prototype, "name", 2);
 s([
-  a()
+  n()
 ], i.prototype, "severity", 2);
 s([
-  a({ type: Boolean, attribute: "show-valid" })
+  n({ type: Boolean, attribute: "show-valid" })
 ], i.prototype, "showValid", 2);
 s([
-  a({ reflect: !0 })
+  n({ reflect: !0 })
 ], i.prototype, "size", 2);
 s([
-  a({ type: String, attribute: !1 })
+  n({ type: String, attribute: !1 })
 ], i.prototype, "value", 1);
 s([
   c()

package/dist/components/textarea/textarea.component.js

@@ -1,26 +1,26 @@
-var $ = (a) => {
+var _ = (a) => {
   throw TypeError(a);
 };
-var _ = (a, r, t) => r.has(a) || $("Cannot " + t);
-var p = (a, r, t) => (_(a, r, "read from private field"), t ? t.call(a) : r.get(a)), c = (a, r, t) => r.has(a) ? $("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(a) : r.set(a, t), v = (a, r, t, n) => (_(a, r, "write to private field"), n ? n.call(a, t) : r.set(a, t), t);
+var E = (a, r, t) => r.has(a) || _("Cannot " + t);
+var p = (a, r, t) => (E(a, r, "read from private field"), t ? t.call(a) : r.get(a)), c = (a, r, t) => r.has(a) ? _("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(a) : r.set(a, t), v = (a, r, t, h) => (E(a, r, "write to private field"), h ? h.call(a, t) : r.set(a, t), t);
 import "../icon/icon.js";
-import { FormBase as V } from "../../internal/components/formBase.js";
+import { FormBase as L } from "../../internal/components/formBase.js";
 import "../../internal/components/hint/hint.js";
-import { hintSeverity as C } from "../../internal/helpers/hintSeverity.js";
-import { watch as g } from "../../internal/helpers/watch.js";
-import { Asterisk as w } from "../../internal/templates/asterisk.js";
-import { componentStyles as I } from "../../styles/component.styles.js";
-import { LocalizeController as x } from "../../utilities/localize.js";
-import { nothing as f, html as E } from "lit";
-import { property as s, query as L } from "lit/decorators.js";
-import { ifDefined as h } from "lit/directives/if-defined.js";
-import O from "./textarea.styles.js";
-var S = Object.defineProperty, F = Object.getOwnPropertyDescriptor, e = (a, r, t, n) => {
-  for (var l = n > 1 ? void 0 : n ? F(r, t) : r, o = a.length - 1, d; o >= 0; o--)
-    (d = a[o]) && (l = (n ? d(r, t, l) : d(l)) || l);
-  return n && l && S(r, t, l), l;
+import { hintSeverity as V } from "../../internal/helpers/hintSeverity.js";
+import { watch as b } from "../../internal/helpers/watch.js";
+import { Asterisk as x } from "../../internal/templates/asterisk.js";
+import { componentStyles as C } from "../../styles/component.styles.js";
+import { LocalizeController as w } from "../../utilities/localize.js";
+import { nothing as f, html as g } from "lit";
+import { property as s, query as I } from "lit/decorators.js";
+import { ifDefined as o } from "lit/directives/if-defined.js";
+import { styles as O } from "./textarea.styles.js";
+var S = Object.defineProperty, F = Object.getOwnPropertyDescriptor, e = (a, r, t, h) => {
+  for (var l = h > 1 ? void 0 : h ? F(r, t) : r, n = a.length - 1, d; n >= 0; n--)
+    (d = a[n]) && (l = (h ? d(r, t, l) : d(l)) || l);
+  return h && l && S(r, t, l), l;
 }, y, u, m;
-const b = class b extends V {
+const $ = class $ extends L {
   constructor() {
     super(...arguments);
     c(this, y);
@@ -28,7 +28,7 @@ const b = class b extends V {
     c(this, u);
     /** @internal */
     c(this, m);
-    v(this, y, new x(this)), this.debug = !1, this.hideLabel = !1, this.invalid = !1, this.lang = "en", this.readonly = !1, this.showValid = !1, this.size = "md", this.validateOn = "change", this.value = "", this._resetValue = (t) => {
+    v(this, y, new w(this)), this.debug = !1, this.hideLabel = !1, this.invalid = !1, this.lang = "en", this.readonly = !1, this.showValid = !1, this.size = "md", this.validateOn = "change", this.value = "", this._resetValue = (t) => {
       t.stopPropagation(), this.value = p(this, u) ?? "", this._internals.setFormValue(this.value);
     }, this._handleInput = () => {
       this.value = this.$input?.value ?? "", this.validateOn === "input" && (this.pristine = !1, this.validateInput());
@@ -47,8 +47,8 @@ const b = class b extends V {
       this.pristine = !1, this.invalid = !0, this.customErrorDisplay && t.preventDefault();
     }), this.addEventListener("reset", this._resetValue), this.validateInput();
   }
-  attributeChangedCallback(t, n, l) {
-    if (super.attributeChangedCallback(t, n, l), t === "value" && l !== p(this, u) && v(this, u, void 0), t === "custom-invalid")
+  attributeChangedCallback(t, h, l) {
+    if (super.attributeChangedCallback(t, h, l), t === "value" && l !== p(this, u) && v(this, u, void 0), t === "custom-invalid")
       if (typeof l == "string") {
         const d = this.withFallback(l);
         this.pristine = !1, this._internals.setValidity({ customError: !0 }, d), this.invalid = !0, this.hint = d, this.checkValidity();
@@ -73,19 +73,19 @@ const b = class b extends V {
   /** @internal */
   validateInput() {
     if (this._internals.validity.customError || !this.$input) return;
-    const n = this.$input.validity;
-    if (this.invalid = !1, n.valid)
+    const h = this.$input.validity;
+    if (this.invalid = !1, h.valid)
       this._internals.setValidity({ customError: this._internals.validity.customError });
     else {
-      this.invalid = !this.pristine && !n.valid;
+      this.invalid = !this.pristine && !h.valid;
       let l;
-      for (l in n) {
-        const o = `data-${l}`;
-        if (n[l] && !this.hasAttribute(o) && this.debug && console.log(
-          `Add custom message on ${this.localName} using attribute: ${o.toUpperCase()}="Your custom message"`
-        ), n[l]) {
+      for (l in h) {
+        const n = `data-${l}`;
+        if (h[l] && !this.hasAttribute(n) && this.debug && console.log(
+          `Add custom message on ${this.localName} using attribute: ${n.toUpperCase()}="Your custom message"`
+        ), h[l]) {
           this.validationError = l;
-          const d = this.hasAttribute(o) ? this.getAttribute(o) : this.$input.validationMessage;
+          const d = this.hasAttribute(n) ? this.getAttribute(n) : this.$input.validationMessage;
           this._internals.setValidity(
             { [this.validationError]: !0, customError: this._internals.validity.customError },
             this.withFallback(d)
@@ -95,11 +95,11 @@ const b = class b extends V {
     }
   }
   render() {
-    return console.log("rendering"), E`
+    return g`
 			<div id="root">
 				<label>
 					<div class=${this.hideLabel ? "visually-hidden" : ""} id="label">
-						<slot>${this.label}</slot> ${this.required ? w(p(this, y).term("required")) : f}
+						<slot>${this.label}</slot> ${this.required ? x(p(this, y).term("required")) : f}
 					</div>
 					<div id="input">
 						<textarea
@@ -108,35 +108,39 @@ const b = class b extends V {
 							?required=${this.required}
 							.value=${this.value}
 							@input=${this._handleInput}
-							aria-describedby=${h(this.hint?.trim() ? "hint" : f)}
-							aria-errormessage=${h(this.hint?.trim() ? "hint" : f)}
+							aria-describedby=${o(this.hint?.trim() ? "hint" : f)}
+							aria-errormessage=${o(this.hint?.trim() ? "hint" : f)}
 							aria-invalid=${!!this.invalid}
-							cols=${h(this.cols)}
-							maxlength=${h(this.maxLength)}
-							minlength=${h(this.minLength)}
-							name=${h(this.name)}
-							placeholder=${h(this.placeholder)}
-							rows=${h(this.rows)}
+							cols=${o(this.cols)}
+							maxlength=${o(this.maxLength)}
+							minlength=${o(this.minLength)}
+							name=${o(this.name)}
+							placeholder=${o(this.placeholder)}
+							rows=${o(this.rows)}
 						>
 						</textarea>
 					</div>
 				</label>
-				${this.hint && E`
-					<skf-hint
-						?disabled=${this.disabled}
-						aria-live=${this.invalid ? "assertive" : "polite"}
-						id="hint"
-						severity=${h(C(this.invalid, this.severity))}
-					>
-						${this.customInvalid ?? this.hint}
-					</skf-hint>
-				`}
+				${// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    (this.hint || this.maxLength) && g`
+						<div id="foot">
+							<skf-hint
+								?disabled=${this.disabled}
+								aria-live=${this.invalid ? "assertive" : "polite"}
+								id="hint"
+								severity=${o(V(this.invalid, this.severity))}
+							>
+								${this.customInvalid ?? this.hint}
+							</skf-hint>
+							${this.maxLength ? g`<div id="counter">${this.value.length}/${this.maxLength}</div>` : f}
+						</div>
+					`}
 			</div>
 		`;
   }
 };
-y = new WeakMap(), u = new WeakMap(), m = new WeakMap(), b.styles = [I, O];
-let i = b;
+y = new WeakMap(), u = new WeakMap(), m = new WeakMap(), $.styles = [C, O];
+let i = $;
 e([
   s({ type: Number })
 ], i.prototype, "cols", 2);
@@ -165,10 +169,10 @@ e([
   s()
 ], i.prototype, "name", 2);
 e([
-  s({ type: Number, attribute: "maxlength" })
+  s({ type: Number })
 ], i.prototype, "maxLength", 2);
 e([
-  s({ type: Number, attribute: "minlength" })
+  s({ type: Number })
 ], i.prototype, "minLength", 2);
 e([
   s()
@@ -195,16 +199,16 @@ e([
   s({ type: String })
 ], i.prototype, "value", 2);
 e([
-  L("textarea")
+  I("textarea")
 ], i.prototype, "$input", 2);
 e([
-  g("invalid")
+  b("invalid")
 ], i.prototype, "_invalidChanged", 1);
 e([
-  g("hint")
+  b("hint")
 ], i.prototype, "_hintChanged", 1);
 e([
-  g("value", { waitUntilFirstUpdate: !0 })
+  b("value", { waitUntilFirstUpdate: !0 })
 ], i.prototype, "_valueChanged", 1);
 export {
   i as SkfTextArea

package/dist/components/textarea/textarea.styles.d.ts

@@ -1,2 +1 @@
-declare const _default: import("lit").CSSResult[];
-export default _default;
+export declare const styles: import("lit").CSSResult[];

package/dist/components/textarea/textarea.styles.js

@@ -1,6 +1,22 @@
 import o from "../../styles/form-field.styles.js";
 import { visuallyHidden as t } from "../../styles/util.styles.js";
-const r = [t, o];
+import { css as e } from "lit";
+const i = [
+  t,
+  o,
+  e`
+		#foot {
+			display: flex;
+			gap: var(--skf-spacing-25);
+			justify-content: space-between;
+		}
+
+		#counter {
+			color: var(--skf-text-color-tertiary);
+			font-size: var(--skf-font-size-75);
+		}
+	`
+];
 export {
-  r as default
+  i as styles
 };

package/dist/custom-elements.json

@@ -6253,13 +6253,6 @@
               },
               "privacy": "private"
             },
-            {
-              "kind": "method",
-              "name": "_handleSizeUpdate",
-              "type": {
-                "text": "_handleSizeUpdate() => void"
-              }
-            },
             {
               "kind": "field",
               "name": "_selectedOptions",
@@ -7546,7 +7539,7 @@
                 "text": "number | undefined"
               },
               "description": "If defined, sets the maximum character length to accept for this input",
-              "attribute": "maxlength"
+              "attribute": "maxLength"
             },
             {
               "kind": "field",
@@ -7555,7 +7548,7 @@
                 "text": "number | undefined"
               },
               "description": "If defined, sets the minimum character length to accept for this input",
-              "attribute": "minlength"
+              "attribute": "minLength"
             },
             {
               "kind": "field",
@@ -7752,7 +7745,7 @@
               "fieldName": "name"
             },
             {
-              "name": "maxlength",
+              "name": "maxLength",
               "type": {
                 "text": "number | undefined"
               },
@@ -7760,7 +7753,7 @@
               "fieldName": "maxLength"
             },
             {
-              "name": "minlength",
+              "name": "minLength",
               "type": {
                 "text": "number | undefined"
               },