@solid-design-system/components 6.0.1 → 6.1.0

package/cdn-versioned/internal/form.d.ts

@@ -32,7 +32,7 @@ export declare class FormControlController implements ReactiveController {
     private doAction;
     updateValidityStyle(): void;
     getForm(): HTMLFormElement | null;
-    renderInvalidMessage(): import("lit").TemplateResult<1>;
+    renderInvalidMessage(size: string): import("lit").TemplateResult<1>;
     reset(invoker?: HTMLInputElement | SdButton): void;
     submit(invoker?: HTMLInputElement | SdButton): void;
     setValidity(isValid: boolean): void;

package/cdn-versioned/internal/form.js

@@ -9,7 +9,7 @@ export class FormControlController {
             const disabled = this.options.disabled(this.host);
             const name = this.options.name(this.host);
             const value = this.options.value(this.host);
-            const isButton = this.host.tagName.toLowerCase() === 'sd-6-0-1-button';
+            const isButton = this.host.tagName.toLowerCase() === 'sd-6-1-0-button';
             if (!disabled && !isButton && typeof name === 'string' && name.length > 0 && typeof value !== 'undefined') {
                 if (Array.isArray(value)) {
                     value.forEach(val => {
@@ -33,7 +33,7 @@ export class FormControlController {
                 event.preventDefault();
                 event.stopImmediatePropagation();
                 const invalidElements = this.form?.querySelectorAll('[data-invalid]');
-                const sdRadioGroups = Array.from(invalidElements).filter(element => element.tagName.toLowerCase() === 'sd-6-0-1-radio-group');
+                const sdRadioGroups = Array.from(invalidElements).filter(element => element.tagName.toLowerCase() === 'sd-6-1-0-radio-group');
                 sdRadioGroups.forEach(radioGroup => {
                     radioGroup.shadowRoot?.querySelector('input')?.dispatchEvent(new Event('invalid'));
                 });
@@ -76,7 +76,7 @@ export class FormControlController {
             disabled: input => input.disabled ?? false,
             reportValidity: input => (typeof input.reportValidity === 'function' ? input.reportValidity() : true),
             setValue: (input, value) => (input.value = value),
-            assumeInteractionOn: ['sd-6-0-1-input'],
+            assumeInteractionOn: ['sd-6-1-0-input'],
             ...options
         };
     }
@@ -206,10 +206,15 @@ export class FormControlController {
     getForm() {
         return this.form ?? null;
     }
-    renderInvalidMessage() {
+    renderInvalidMessage(size) {
+        const sizeClass = {
+            sm: 'text-sm',
+            md: 'text-base',
+            lg: 'text-base'
+        }[size];
         return html `<div
       id="invalid-message"
-      class="text-error text-sm mt-1 text-left"
+      class="text-error text-left ${sizeClass}"
       part="invalid-message"
       aria-live="polite"
       ?hidden=${!this.host.showInvalidStyle}