@warp-ds/elements 2.8.2-next.1 → 2.8.2-next.3

package/dist/packages/tabs/tabs.test.js

@@ -68,10 +68,102 @@ test('clicking a tab changes the active attribute, visible tab panel', async ()
     </w-tab-panel>
   </w-tabs>`;
     const page = render(component);
-    await userEvent.click(page.getByRole('tab').last());
+    // Query tabs by element tag name since role is set via ElementInternals
+    const tabs = page.container.querySelectorAll('w-tab');
+    await userEvent.click(tabs[2]);
     await page.container.querySelector('w-tabs').updateComplete;
     await page.container.querySelectorAll('w-tab-panel')[2].updateComplete;
     await expect.element(page.getByText('I am no man')).toBeVisible();
     await expect.element(page.getByText('And my axe!')).not.toBeVisible();
     await expect.element(page.getByText('I am on nobody\'s side')).not.toBeVisible();
 });
+test('switches panel content when panels are initialized with hidden attribute', async () => {
+    const component = html `<w-tabs active="tab2">
+    <w-tab for="tab1">First Tab</w-tab>
+    <w-tab-panel id="tab1">
+      <p>Content for the first tab.</p>
+    </w-tab-panel>
+
+    <w-tab for="tab2">Second Tab</w-tab>
+    <w-tab-panel id="tab2" hidden>
+      <p>Content for the second tab.</p>
+    </w-tab-panel>
+
+    <w-tab for="tab3">Third Tab</w-tab>
+    <w-tab-panel id="tab3" hidden>
+      <p>Content for the third tab.</p>
+    </w-tab-panel>
+  </w-tabs>`;
+    const page = render(component);
+    await page.container.querySelector('w-tabs').updateComplete;
+    await expect.element(page.getByText('Content for the second tab.')).toBeVisible();
+    await expect.element(page.getByText('Content for the first tab.')).not.toBeVisible();
+    await expect.element(page.getByText('Content for the third tab.')).not.toBeVisible();
+    const tabs = page.container.querySelectorAll('w-tab');
+    await userEvent.click(tabs[2]);
+    await page.container.querySelector('w-tabs').updateComplete;
+    await page.container.querySelectorAll('w-tab-panel')[2].updateComplete;
+    await expect.element(page.getByText('Content for the third tab.')).toBeVisible();
+    await expect.element(page.getByText('Content for the second tab.')).not.toBeVisible();
+});
+test('tab-panel visibility is controlled via internal shadow DOM (no host attribute changes) to avoid hydration mismatch', async () => {
+    const component = html `<w-tabs>
+    <w-tab for="panel1">Tab 1</w-tab>
+    <w-tab-panel id="panel1">
+      <p>Content 1</p>
+    </w-tab-panel>
+
+    <w-tab for="panel2">Tab 2</w-tab>
+    <w-tab-panel id="panel2">
+      <p>Content 2</p>
+    </w-tab-panel>
+  </w-tabs>`;
+    const page = render(component);
+    // Wait for tabs component to initialize
+    await page.container.querySelector('w-tabs').updateComplete;
+    const panels = page.container.querySelectorAll('w-tab-panel');
+    // Visibility is controlled via internal shadow DOM elements, not host attributes
+    // This avoids hydration mismatches when parent sets _parentActive
+    expect(panels[0].active).toBe(true);
+    expect(panels[1].active).toBe(false);
+    // Internal shadow DOM wrapper has data-active attribute for CSS visibility
+    const activeWrapper = panels[0].shadowRoot?.querySelector('.panel-content');
+    const inactiveWrapper = panels[1].shadowRoot?.querySelector('.panel-content');
+    expect(activeWrapper?.hasAttribute('data-active')).toBe(true);
+    expect(inactiveWrapper?.hasAttribute('data-active')).toBe(false);
+    // Verify visibility works correctly
+    await expect.element(page.getByText('Content 1')).toBeVisible();
+    await expect.element(page.getByText('Content 2')).not.toBeVisible();
+});
+test('aria-selected uses ElementInternals (no DOM attribute) to avoid hydration mismatch', async () => {
+    const component = html `<w-tabs>
+    <w-tab for="panel1">Tab 1</w-tab>
+    <w-tab-panel id="panel1"><p>Content 1</p></w-tab-panel>
+
+    <w-tab for="panel2">Tab 2</w-tab>
+    <w-tab-panel id="panel2"><p>Content 2</p></w-tab-panel>
+  </w-tabs>`;
+    const page = render(component);
+    const tabsEl = page.container.querySelector('w-tabs');
+    await tabsEl.updateComplete;
+    const tabs = page.container.querySelectorAll('w-tab');
+    // aria-selected is set via ElementInternals, not as a DOM attribute (to avoid hydration mismatch)
+    expect(tabs[0].hasAttribute('aria-selected')).toBe(false);
+    expect(tabs[1].hasAttribute('aria-selected')).toBe(false);
+    // But the property should be set correctly by the parent
+    expect(tabs[0].ariaSelected).toBe('true');
+    expect(tabs[1].ariaSelected).toBe('false');
+});
+test('w-tab does not mutate host aria-controls by default', async () => {
+    const component = html `<w-tabs>
+    <w-tab for="panel1">Tab 1</w-tab>
+    <w-tab-panel id="panel1"><p>Content 1</p></w-tab-panel>
+  </w-tabs>`;
+    const page = render(component);
+    const tabsEl = page.container.querySelector('w-tabs');
+    await tabsEl.updateComplete;
+    const tab = page.container.querySelector('w-tab');
+    const internalButton = tab.shadowRoot?.querySelector('button');
+    expect(tab.hasAttribute('aria-controls')).toBe(false);
+    expect(internalButton?.getAttribute('aria-controls')).toBe('panel1');
+});

package/dist/packages/textarea/textarea.hydration.test.d.ts

@@ -0,0 +1 @@
+import './textarea.js';

package/dist/packages/textarea/textarea.hydration.test.js

@@ -0,0 +1,43 @@
+import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
+import './textarea.js';
+describe('w-textarea React SSR hydration', () => {
+    beforeEach(() => setupHydrationWarningCapture());
+    afterEach(() => {
+        window.__HYDRATION_WARNINGS__ = [];
+    });
+    test('default (no attributes) hydrates without warnings', async () => {
+        const warnings = await testHydration('w-textarea', {});
+        expect(warnings).toEqual([]);
+    });
+    test('with label hydrates without warnings', async () => {
+        const warnings = await testHydration('w-textarea', {
+            label: 'Description',
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('with value hydrates without warnings', async () => {
+        const warnings = await testHydration('w-textarea', {
+            value: 'Some text content',
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('with disabled state hydrates without warnings', async () => {
+        const warnings = await testHydration('w-textarea', {
+            disabled: true,
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('with invalid state hydrates without warnings', async () => {
+        const warnings = await testHydration('w-textarea', {
+            invalid: true,
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('with help text hydrates without warnings', async () => {
+        const warnings = await testHydration('w-textarea', {
+            'help-text': 'Enter a detailed description',
+        });
+        expect(warnings).toEqual([]);
+    });
+});

package/dist/packages/textarea/textarea.react.stories.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { Textarea } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./textarea").WarpTextarea>, "name" | "form" | "label" | "onblur" | "onchange" | "onfocus" | "oninput" | "onFocus" | "onBlur" | "onChange" | "onInput" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "value" | "updated" | "firstUpdated" | "resetFormControl" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "invalid" | "required" | "reportValidity" | "optional" | "helpText" | "placeholder" | "readOnly" | "readonly" | "_helptextstyles" | "_helpId" | "_id" | "_error" | "handler" | "setCustomValidity" | "maxRows" | "minRows" | "minHeight" | "maxHeight" | "_textareaStyles"> & {
+    render(args: Omit<React.HTMLAttributes<import("./textarea").WarpTextarea>, "value" | "form" | "label" | "name" | "onblur" | "onchange" | "onfocus" | "oninput" | "onFocus" | "onBlur" | "onChange" | "onInput" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "updated" | "firstUpdated" | "resetFormControl" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "invalid" | "required" | "reportValidity" | "optional" | "helpText" | "placeholder" | "readOnly" | "readonly" | "_helptextstyles" | "_helpId" | "_id" | "_error" | "handler" | "setCustomValidity" | "maxRows" | "minRows" | "minHeight" | "maxHeight" | "_textareaStyles"> & {
         onBlur?: (e: Event) => void;
         onblur?: (e: Event) => void;
         onChange?: (e: Event) => void;

package/dist/packages/textfield/textfield.hydration.test.d.ts

@@ -0,0 +1 @@
+import './textfield.js';

package/dist/packages/textfield/textfield.hydration.test.js

@@ -0,0 +1,43 @@
+import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
+import './textfield.js';
+describe('w-textfield React SSR hydration', () => {
+    beforeEach(() => setupHydrationWarningCapture());
+    afterEach(() => {
+        window.__HYDRATION_WARNINGS__ = [];
+    });
+    test('default (no attributes) hydrates without warnings', async () => {
+        const warnings = await testHydration('w-textfield', {});
+        expect(warnings).toEqual([]);
+    });
+    test('with label hydrates without warnings', async () => {
+        const warnings = await testHydration('w-textfield', {
+            label: 'Email',
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('with value hydrates without warnings', async () => {
+        const warnings = await testHydration('w-textfield', {
+            value: 'test@example.com',
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('with disabled state hydrates without warnings', async () => {
+        const warnings = await testHydration('w-textfield', {
+            disabled: true,
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('with invalid state hydrates without warnings', async () => {
+        const warnings = await testHydration('w-textfield', {
+            invalid: true,
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('with help text hydrates without warnings', async () => {
+        const warnings = await testHydration('w-textfield', {
+            'help-text': 'Enter your email address',
+        });
+        expect(warnings).toEqual([]);
+    });
+});

package/dist/packages/textfield/textfield.js

@@ -2495,7 +2495,7 @@ var te=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var R=a=>{th
     text-overflow: ellipsis;
     z-index: 1;
   }
-`;import{css as ne}from"lit";var W=ne`*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px}.bg-transparent{background-color:#0000}.border-1{border-width:1px}.rounded-4{border-radius:4px}.caret-current{caret-color:currentColor}.block{display:block}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.outline-\\[--w-s-color-border-negative\\]\\!{outline-color:var(--w-s-color-border-negative)!important}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled-subtle{background-color:var(--w-s-color-background-disabled-subtle)}.s-text{color:var(--w-s-color-text)}.s-text-disabled{color:var(--w-s-color-text-disabled)}.s-text-negative{color:var(--w-s-color-text-negative)}.s-text-subtle{color:var(--w-s-color-text-subtle)}.placeholder\\:s-text-placeholder::placeholder{color:var(--w-s-color-text-placeholder)}.s-border-disabled{border-color:var(--w-s-color-border-disabled)}.s-border-negative{border-color:var(--w-s-color-border-negative)}.s-border-strong{border-color:var(--w-s-color-border-strong)}.hover\\:s-border-negative-hover:hover{border-color:var(--w-s-color-border-negative-hover)}.hover\\:s-border-strong-hover:hover{border-color:var(--w-s-color-border-strong-hover)}.active\\:s-border-selected:active{border-color:var(--w-s-color-border-selected)}.w-full{width:100%}.min-h-\\[42\\]{min-height:4.2rem}.mb-0{margin-bottom:0}.mt-4{margin-top:.4rem}.px-8{padding-left:.8rem;padding-right:.8rem}.py-12{padding-top:1.2rem;padding-bottom:1.2rem}.pb-4{padding-bottom:.4rem}.pl-0{padding-left:0}.pl-8{padding-left:.8rem}.pr-40{padding-right:4rem}.pl-\\[var\\(--w-prefix-width\\,_40px\\)\\]{padding-left:var(--w-prefix-width,40px)}.cursor-pointer{cursor:pointer}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:grayscale}.font-bold{font-weight:700}.font-normal{font-weight:400}.pointer-events-none{pointer-events:none}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.text-m{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-s{font-size:var(--w-font-size-s);line-height:var(--w-line-height-s)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}.leading-m{line-height:var(--w-line-height-m)}@media (min-width:480px){.sm\\:min-h-\\[45\\]{min-height:4.5rem}}`;var x={base:"block text-m leading-m mb-0 px-8 py-12 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] caret-current",default:"border-1 s-text s-bg s-border-strong hover:s-border-strong-hover active:s-border-selected",disabled:"border-1 s-text-disabled s-bg-disabled-subtle s-border-disabled pointer-events-none",invalid:"border-1 s-text-negative s-bg s-border-negative hover:s-border-negative-hover outline-[--w-s-color-border-negative]!",readOnly:"pl-0 bg-transparent pointer-events-none",placeholder:"placeholder:s-text-placeholder",suffix:"pr-40",prefix:"pl-[var(--w-prefix-width,_40px)]",textArea:"min-h-[42] sm:min-h-[45]"},ce={base:"antialiased block relative text-s font-bold pb-4 cursor-pointer s-text",optional:"pl-8 font-normal text-s s-text-subtle"},q={base:"text-xs mt-4 block",color:"s-text-subtle",colorInvalid:"s-text-negative"},V,s=class extends J(ee){constructor(){super(...arguments);this.disabled=!1;this.invalid=!1;this.readOnly=!1;this.readonly=!1;this.required=!1;this.type="text";this._hasPrefix=!1;this._hasSuffix=!1;D(this,V,null)}updated(r){r.has("value")&&(this.setValue(this.value),this.formatter&&(this.mask.innerText=this.formatter(this.value)))}firstUpdated(r){G(this,V,this.value)}resetFormControl(){this.value=H(this,V)}get _inputstyles(){return j([x.base,this._hasSuffix&&x.suffix,this._hasPrefix&&x.prefix,!this.invalid&&!this.disabled&&!(this.readonly||this.readOnly)&&x.default,this.invalid&&!this.disabled&&!(this.readonly||this.readOnly)&&x.invalid,!this.invalid&&this.disabled&&!(this.readonly||this.readOnly)&&x.disabled,!this.invalid&&!this.disabled&&(this.readonly||this.readOnly)&&x.readOnly])}get _helptextstyles(){return j([q.base,this.invalid?q.colorInvalid:q.color])}get _label(){if(this.label)return P`<label for="${this._id}" class=${ce.base}>${this.label}</label>`}get _helpId(){if(this.helpText)return`${this._id}__hint`}get _id(){return"textfield"}get _error(){if(this.invalid&&this._helpId)return this._helpId}handler(r){let{name:o,value:l}=r.currentTarget;this.value=l;let u=new CustomEvent(r.type,{detail:{name:o,value:l,target:r.target}});this.dispatchEvent(u)}prefixSlotChange(){this.renderRoot.querySelector("slot[name=prefix]").assignedElements().length&&(this._hasPrefix=!0)}suffixSlotChange(){this.renderRoot.querySelector("slot[name=suffix]").assignedElements().length&&(this._hasSuffix=!0)}render(){return P`
+`;import{css as ne}from"lit";var W=ne`*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px}.bg-transparent{background-color:#0000}.border-1{border-width:1px}.rounded-4{border-radius:4px}.caret-current{caret-color:currentColor}.block{display:block}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.outline-\\[--w-s-color-border-negative\\]\\!{outline-color:var(--w-s-color-border-negative)!important}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled-subtle{background-color:var(--w-s-color-background-disabled-subtle)}.s-text{color:var(--w-s-color-text)}.s-text-disabled{color:var(--w-s-color-text-disabled)}.s-text-negative{color:var(--w-s-color-text-negative)}.s-text-subtle{color:var(--w-s-color-text-subtle)}.placeholder\\:s-text-placeholder::placeholder{color:var(--w-s-color-text-placeholder)}.s-border-disabled{border-color:var(--w-s-color-border-disabled)}.s-border-negative{border-color:var(--w-s-color-border-negative)}.s-border-strong{border-color:var(--w-s-color-border-strong)}.hover\\:s-border-negative-hover:hover{border-color:var(--w-s-color-border-negative-hover)}.hover\\:s-border-strong-hover:hover{border-color:var(--w-s-color-border-strong-hover)}.active\\:s-border-selected:active{border-color:var(--w-s-color-border-selected)}.w-full{width:100%}.min-h-\\[42\\]{min-height:4.2rem}.mb-0{margin-bottom:0}.mt-4{margin-top:.4rem}.px-8{padding-left:.8rem;padding-right:.8rem}.py-12{padding-top:1.2rem;padding-bottom:1.2rem}.pb-4{padding-bottom:.4rem}.pl-0{padding-left:0}.pl-8{padding-left:.8rem}.pr-40{padding-right:4rem}.pl-\\[var\\(--w-prefix-width\\,_40px\\)\\]{padding-left:var(--w-prefix-width,40px)}.cursor-pointer{cursor:pointer}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:grayscale}.font-bold{font-weight:700}.font-normal{font-weight:400}.pointer-events-none{pointer-events:none}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.text-m{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-s{font-size:var(--w-font-size-s);line-height:var(--w-line-height-s)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}.leading-m{line-height:var(--w-line-height-m)}@media (min-width:480px){.sm\\:min-h-\\[45\\]{min-height:4.5rem}}`;var x={base:"block text-m leading-m mb-0 px-8 py-12 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] caret-current",default:"border-1 s-text s-bg s-border-strong hover:s-border-strong-hover active:s-border-selected",disabled:"border-1 s-text-disabled s-bg-disabled-subtle s-border-disabled pointer-events-none",invalid:"border-1 s-text-negative s-bg s-border-negative hover:s-border-negative-hover outline-[--w-s-color-border-negative]!",readOnly:"pl-0 bg-transparent pointer-events-none",placeholder:"placeholder:s-text-placeholder",suffix:"pr-40",prefix:"pl-[var(--w-prefix-width,_40px)]",textArea:"min-h-[42] sm:min-h-[45]"},ce={base:"antialiased block relative text-s font-bold pb-4 cursor-pointer s-text",optional:"pl-8 font-normal text-s s-text-subtle"},q={base:"text-xs mt-4 block",color:"s-text-subtle",colorInvalid:"s-text-negative"},V,s=class extends J(ee){constructor(){super(...arguments);this.disabled=!1;this.invalid=!1;this.readOnly=!1;this.readonly=!1;this.required=!1;this._hasPrefix=!1;this._hasSuffix=!1;D(this,V,null)}updated(r){r.has("value")&&(this.setValue(this.value),this.formatter&&(this.mask.innerText=this.formatter(this.value)))}firstUpdated(r){G(this,V,this.value)}resetFormControl(){this.value=H(this,V)}get _inputstyles(){return j([x.base,this._hasSuffix&&x.suffix,this._hasPrefix&&x.prefix,!this.invalid&&!this.disabled&&!(this.readonly||this.readOnly)&&x.default,this.invalid&&!this.disabled&&!(this.readonly||this.readOnly)&&x.invalid,!this.invalid&&this.disabled&&!(this.readonly||this.readOnly)&&x.disabled,!this.invalid&&!this.disabled&&(this.readonly||this.readOnly)&&x.readOnly])}get _helptextstyles(){return j([q.base,this.invalid?q.colorInvalid:q.color])}get _label(){if(this.label)return P`<label for="${this._id}" class=${ce.base}>${this.label}</label>`}get _helpId(){if(this.helpText)return`${this._id}__hint`}get _id(){return"textfield"}get _error(){if(this.invalid&&this._helpId)return this._helpId}handler(r){let{name:o,value:l}=r.currentTarget;this.value=l;let u=new CustomEvent(r.type,{detail:{name:o,value:l,target:r.target}});this.dispatchEvent(u)}prefixSlotChange(){this.renderRoot.querySelector("slot[name=prefix]").assignedElements().length&&(this._hasPrefix=!0)}suffixSlotChange(){this.renderRoot.querySelector("slot[name=suffix]").assignedElements().length&&(this._hasSuffix=!0)}render(){return P`
       ${this._label}
       <div
         class="${de({"w-textfield":!0,"w-textfield--has-prefix":this._hasPrefix,"w-textfield--has-suffix":this._hasSuffix})}">
@@ -2503,7 +2503,7 @@ var te=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var R=a=>{th
           ${this.formatter?P`<div class="w-textfield__mask"></div>`:se}
           <input
             class="${this._inputstyles}"
-            type="${this.type}"
+            type="${this.type||"text"}"
             min="${g(this.min)}"
             max="${g(this.max)}"
             size="${g(this.size)}"