@politiet/sheriff-web-components 1.1.0 → 1.3.0

package/dist/sds-textarea/sds-textarea.js

@@ -0,0 +1,240 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { guardedCustomElement } from '../utils/guarded-custom-element';
+import { styles } from './sds-textarea.styles';
+import '../sds-icon/sds-icon';
+let SDSTextArea = class SDSTextArea extends LitElement {
+    constructor() {
+        super();
+        this.disabled = false;
+        this.readOnly = false;
+        this.required = false;
+        this._defaultValue = '';
+        this._handleInputChange = (event) => {
+            event.stopImmediatePropagation();
+            if (!this.disabled) {
+                const currentValue = event.target.value;
+                this.value = currentValue;
+                this.internals.setFormValue(currentValue === '' ? null : currentValue);
+                this.updateValidity();
+                this.dispatchEvent(new CustomEvent(event.type, { bubbles: true, composed: true }));
+            }
+        };
+        this._handleSelect = (event) => {
+            event.stopImmediatePropagation();
+            if (!this.disabled) {
+                this.dispatchEvent(new CustomEvent('select', { bubbles: true, composed: true }));
+            }
+        };
+        this._handleFocus = (event) => {
+            event.stopImmediatePropagation();
+            this.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));
+        };
+        this._handleBlur = (event) => {
+            event.stopImmediatePropagation();
+            this.updateValidity();
+            this.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));
+        };
+        this.internals = this.attachInternals();
+        this.attachShadow({ mode: 'open', delegatesFocus: true });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._defaultValue = this.value ?? '';
+    }
+    updateValidity() {
+        if (this.control.checkValidity()) {
+            this.internals.setValidity({});
+        }
+        else {
+            this.internals.setValidity({ customError: true }, this.control.validationMessage, this.control);
+        }
+    }
+    renderCharacterCounter() {
+        if (this.counter === undefined)
+            return nothing;
+        const currentLength = this.value?.length || 0;
+        const isOverCounter = currentLength > this.counter;
+        if (isOverCounter) {
+            return html `<p class="sds-textarea__character-counter sds-textarea__character-counter--error">
+				Du har ${currentLength - this.counter} tegn for mye
+			</p>`;
+        }
+        return html `<p class="sds-textarea__character-counter">Du har ${this.counter - currentLength} tegn igjen</p>`;
+    }
+    formResetCallback() {
+        this.control.value = this._defaultValue;
+        this.internals.setFormValue(this._defaultValue === '' ? null : this._defaultValue);
+        this.value = this._defaultValue;
+        this.updateValidity();
+    }
+    select() {
+        if (!this.disabled)
+            this.control.select();
+    }
+    type() {
+        return 'textarea';
+    }
+    focus() {
+        if (!this.disabled)
+            this.control.focus();
+    }
+    blur() {
+        if (!this.disabled)
+            this.control.blur();
+    }
+    click() {
+        if (!this.disabled)
+            this.control.click();
+    }
+    get selectionStart() {
+        return this.control ? this.control.selectionStart : null;
+    }
+    set selectionStart(value) {
+        if (this.control && value !== null) {
+            this.control.selectionStart = value;
+        }
+    }
+    get selectionEnd() {
+        return this.control ? this.control.selectionEnd : null;
+    }
+    set selectionEnd(value) {
+        if (this.control && value !== null) {
+            this.control.selectionEnd = value;
+        }
+    }
+    setSelectionRange(start, end, direction) {
+        if (this.control) {
+            this.control.setSelectionRange(start, end, direction);
+        }
+    }
+    checkValidity() {
+        return this.control.checkValidity();
+    }
+    reportValidity() {
+        return this.control.reportValidity();
+    }
+    setCustomValidity(message) {
+        this.control.setCustomValidity(message);
+        this.updateValidity();
+    }
+    render() {
+        const textareaClasses = {
+            'sds-textarea': true,
+            'sds-textarea--error': Boolean(this.errorMessage),
+            'sds-textarea--disabled': Boolean(this.disabled),
+            'sds-textarea--readonly': Boolean(this.readOnly),
+        };
+        return html `
+			<div class="${classMap(textareaClasses)}">
+				${this.label
+            ? html `<label for="sds-textarea" class="sds-textarea__label">${this.label}</label>`
+            : nothing}
+				${this.helpText ? html `<p class="sds-textarea__help-text">${this.helpText}</p>` : nothing}
+				<div class="sds-textarea__input-container">
+					<textarea
+						class="sds-textarea__input"
+						id="sds-textarea"
+						?disabled="${this.disabled}"
+						?readonly="${this.readOnly}"
+						placeholder="${ifDefined(this.placeholder)}"
+						.value="${this.value ?? ''}"
+						.autocomplete="${this.autocomplete}"
+						name="${ifDefined(this.name)}"
+						?required="${this.required}"
+						rows="${ifDefined(this.rows)}"
+						cols="${ifDefined(this.cols)}"
+						wrap="${ifDefined(this.wrap)}"
+						minlength="${ifDefined(this.minlength)}"
+						maxlength="${ifDefined(this.maxlength)}"
+						@input="${this._handleInputChange}"
+						@change="${this._handleInputChange}"
+						@select="${this._handleSelect}"
+						@focus="${this._handleFocus}"
+						@blur="${this._handleBlur}"
+					></textarea>
+				</div>
+				${this.renderCharacterCounter()}
+				${this.errorMessage
+            ? html `<p class="sds-textarea__error-message">
+							<sds-icon
+								name="warning-material-filled"
+								size="m"
+								color="${!this.disabled
+                ? `var(--sds-color-semantic-icon-critical)`
+                : `var(--sds-color-semantic-icon-disabled)`}"
+							></sds-icon>
+							${this.errorMessage}
+						</p>`
+            : nothing}
+			</div>
+		`;
+    }
+};
+// Styling
+SDSTextArea.styles = [styles];
+SDSTextArea.formAssociated = true;
+__decorate([
+    property({ type: String })
+], SDSTextArea.prototype, "value", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSTextArea.prototype, "name", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSTextArea.prototype, "label", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSTextArea.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String, attribute: 'help-text', reflect: true })
+], SDSTextArea.prototype, "helpText", void 0);
+__decorate([
+    property({ type: String, attribute: 'error-message', reflect: true })
+], SDSTextArea.prototype, "errorMessage", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SDSTextArea.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'readonly', reflect: true })
+], SDSTextArea.prototype, "readOnly", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSTextArea.prototype, "autocomplete", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SDSTextArea.prototype, "required", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], SDSTextArea.prototype, "rows", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], SDSTextArea.prototype, "cols", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSTextArea.prototype, "wrap", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], SDSTextArea.prototype, "minlength", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], SDSTextArea.prototype, "maxlength", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], SDSTextArea.prototype, "counter", void 0);
+__decorate([
+    query('#sds-textarea')
+], SDSTextArea.prototype, "control", void 0);
+SDSTextArea = __decorate([
+    guardedCustomElement('sds-textarea')
+], SDSTextArea);
+export { SDSTextArea };
+//# sourceMappingURL=sds-textarea.js.map

package/dist/sds-textarea/sds-textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-textarea.js","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-textarea.styles';\n\nimport '../sds-icon/sds-icon';\n\nexport interface SDSTextAreaProps {\n\tvalue?: string;\n\tname?: string;\n\tlabel?: string;\n\tplaceholder?: string;\n\t'help-text'?: string;\n\t'error-message'?: string;\n\tdisabled?: boolean;\n\treadonly?: boolean;\n\tautocomplete?: HTMLTextAreaElement['autocomplete'];\n\trequired?: boolean;\n\trows?: number;\n\tcols?: number;\n\twrap?: 'hard' | 'soft' | 'off';\n\tminlength?: number;\n\tmaxlength?: number;\n\tcounter?: number;\n\tonInput?: (event: Event) => void;\n\tonChange?: (event: Event) => void;\n\tonSelect?: (event: Event) => void;\n\tonFocus?: (event: Event) => void;\n\tonBlur?: (event: Event) => void;\n}\n\n@guardedCustomElement('sds-textarea')\nexport class SDSTextArea extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t@property({ type: String }) value?: string;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) label?: string;\n\t@property({ type: String, reflect: true }) placeholder?: string;\n\t@property({ type: String, attribute: 'help-text', reflect: true }) helpText?: string;\n\t@property({ type: String, attribute: 'error-message', reflect: true }) errorMessage?: string;\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n\t@property({ type: String, reflect: true }) autocomplete?: HTMLTextAreaElement['autocomplete'];\n\t@property({ type: Boolean, reflect: true }) required: boolean = false;\n\t@property({ type: Number, reflect: true }) rows?: number;\n\t@property({ type: Number, reflect: true }) cols?: number;\n\t@property({ type: String, reflect: true }) wrap?: 'hard' | 'soft';\n\t@property({ type: Number, reflect: true }) minlength?: number;\n\t@property({ type: Number, reflect: true }) maxlength?: number;\n\t@property({ type: Number, reflect: true }) counter?: number;\n\n\t@query('#sds-textarea') control!: HTMLTextAreaElement;\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\tprivate _defaultValue: string = '';\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis._defaultValue = this.value ?? '';\n\t}\n\n\tprivate updateValidity() {\n\t\tif (this.control.checkValidity()) {\n\t\t\tthis.internals.setValidity({});\n\t\t} else {\n\t\t\tthis.internals.setValidity({ customError: true }, this.control.validationMessage, this.control);\n\t\t}\n\t}\n\n\tprivate renderCharacterCounter() {\n\t\tif (this.counter === undefined) return nothing;\n\n\t\tconst currentLength = this.value?.length || 0;\n\t\tconst isOverCounter = currentLength > this.counter;\n\n\t\tif (isOverCounter) {\n\t\t\treturn html`<p class=\"sds-textarea__character-counter sds-textarea__character-counter--error\">\n\t\t\t\tDu har ${currentLength - this.counter} tegn for mye\n\t\t\t</p>`;\n\t\t}\n\n\t\treturn html`<p class=\"sds-textarea__character-counter\">Du har ${this.counter - currentLength} tegn igjen</p>`;\n\t}\n\n\tprivate readonly _handleInputChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tconst currentValue = (event.target as HTMLTextAreaElement).value;\n\t\t\tthis.value = currentValue;\n\t\t\tthis.internals.setFormValue(currentValue === '' ? null : currentValue);\n\t\t\tthis.updateValidity();\n\t\t\tthis.dispatchEvent(new CustomEvent(event.type, { bubbles: true, composed: true }));\n\t\t}\n\t};\n\n\tprivate readonly _handleSelect = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tthis.dispatchEvent(new CustomEvent('select', { bubbles: true, composed: true }));\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.updateValidity();\n\t\tthis.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));\n\t};\n\n\tformResetCallback() {\n\t\tthis.control.value = this._defaultValue;\n\t\tthis.internals.setFormValue(this._defaultValue === '' ? null : this._defaultValue);\n\t\tthis.value = this._defaultValue;\n\t\tthis.updateValidity();\n\t}\n\n\tselect(): void {\n\t\tif (!this.disabled) this.control.select();\n\t}\n\n\ttype(): string {\n\t\treturn 'textarea';\n\t}\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.control.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.control.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.control.click();\n\t}\n\n\tget selectionStart(): number | null {\n\t\treturn this.control ? this.control.selectionStart : null;\n\t}\n\n\tset selectionStart(value: number | null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionStart = value;\n\t\t}\n\t}\n\n\tget selectionEnd(): number | null {\n\t\treturn this.control ? this.control.selectionEnd : null;\n\t}\n\tset selectionEnd(value: number | null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionEnd = value;\n\t\t}\n\t}\n\n\tsetSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none'): void {\n\t\tif (this.control) {\n\t\t\tthis.control.setSelectionRange(start, end, direction);\n\t\t}\n\t}\n\n\tcheckValidity(): boolean {\n\t\treturn this.control.checkValidity();\n\t}\n\n\treportValidity(): boolean {\n\t\treturn this.control.reportValidity();\n\t}\n\n\tsetCustomValidity(message: string): void {\n\t\tthis.control.setCustomValidity(message);\n\t\tthis.updateValidity();\n\t}\n\n\toverride render() {\n\t\tconst textareaClasses = {\n\t\t\t'sds-textarea': true,\n\t\t\t'sds-textarea--error': Boolean(this.errorMessage),\n\t\t\t'sds-textarea--disabled': Boolean(this.disabled),\n\t\t\t'sds-textarea--readonly': Boolean(this.readOnly),\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(textareaClasses)}\">\n\t\t\t\t${this.label\n\t\t\t\t\t? html`<label for=\"sds-textarea\" class=\"sds-textarea__label\">${this.label}</label>`\n\t\t\t\t\t: nothing}\n\t\t\t\t${this.helpText ? html`<p class=\"sds-textarea__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"sds-textarea__input-container\">\n\t\t\t\t\t<textarea\n\t\t\t\t\t\tclass=\"sds-textarea__input\"\n\t\t\t\t\t\tid=\"sds-textarea\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t\t\t\tplaceholder=\"${ifDefined(this.placeholder)}\"\n\t\t\t\t\t\t.value=\"${this.value ?? ''}\"\n\t\t\t\t\t\t.autocomplete=\"${this.autocomplete}\"\n\t\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t\trows=\"${ifDefined(this.rows)}\"\n\t\t\t\t\t\tcols=\"${ifDefined(this.cols)}\"\n\t\t\t\t\t\twrap=\"${ifDefined(this.wrap)}\"\n\t\t\t\t\t\tminlength=\"${ifDefined(this.minlength)}\"\n\t\t\t\t\t\tmaxlength=\"${ifDefined(this.maxlength)}\"\n\t\t\t\t\t\t@input=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@change=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@select=\"${this._handleSelect}\"\n\t\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\t></textarea>\n\t\t\t\t</div>\n\t\t\t\t${this.renderCharacterCounter()}\n\t\t\t\t${this.errorMessage\n\t\t\t\t\t? html`<p class=\"sds-textarea__error-message\">\n\t\t\t\t\t\t\t<sds-icon\n\t\t\t\t\t\t\t\tname=\"warning-material-filled\"\n\t\t\t\t\t\t\t\tsize=\"m\"\n\t\t\t\t\t\t\t\tcolor=\"${!this.disabled\n\t\t\t\t\t\t\t\t\t? `var(--sds-color-semantic-icon-critical)`\n\t\t\t\t\t\t\t\t\t: `var(--sds-color-semantic-icon-disabled)`}\"\n\t\t\t\t\t\t\t></sds-icon>\n\t\t\t\t\t\t\t${this.errorMessage}\n\t\t\t\t\t\t</p>`\n\t\t\t\t\t: nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-textarea': SDSTextArea;\n\t}\n}\n"]}

package/dist/sds-textarea/sds-textarea.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=sds-textarea.spec.d.ts.map

package/dist/sds-textarea/sds-textarea.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-textarea.spec.d.ts","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.spec.ts"],"names":[],"mappings":""}

package/dist/sds-textarea/sds-textarea.spec.js

@@ -0,0 +1,171 @@
+import { test } from '@playwright/test';
+import { onFormSubmitCallback } from '../playwright-util/form';
+import { expect } from '../playwright-util/custom-matchers';
+const pageUrl = 'iframe.html?viewMode=docs&id=test-textarea--docs';
+const textareaIds = [
+    'with-maxlength',
+    'with-min-max',
+    'without-maxlength',
+    'with-error',
+    'with-value',
+    'readonly',
+    'required',
+    'autocomplete-off',
+    'autocomplete-on',
+];
+test.describe('textarea-component', () => {
+    test.beforeEach(async ({ page }) => {
+        await page.goto(pageUrl);
+    });
+    test('visibility', async ({ page }) => {
+        for (const id of textareaIds) {
+            await expect(page.locator(`#${id}`)).toBeVisible();
+        }
+    });
+    test('initial states', async ({ page }) => {
+        // Check that textarea with value has the correct initial value
+        const withValue = page.locator('#with-value');
+        await expect(withValue).toHaveValue('Initial text');
+        // Check that disabled textarea is disabled
+        const disabled = page.locator('#disabled');
+        await expect(disabled).toHaveAttribute('disabled', '');
+        const readonly = page.locator('#readonly');
+        await expect(readonly).toHaveAttribute('readonly', '');
+    });
+    test('character counter visibility', async ({ page }) => {
+        // Character counter should be visible for textareas with maxlength
+        const withMaxlength = page.locator('#with-maxlength');
+        const withMaxlengthCounter = withMaxlength.locator('.sds-textarea__character-counter');
+        await expect(withMaxlengthCounter).toBeVisible();
+        // Character counter should not be visible for textareas without maxlength
+        const withoutMaxlength = page.locator('#without-maxlength');
+        const withoutMaxlengthCounter = withoutMaxlength.locator('.sds-textarea__character-counter');
+        await expect(withoutMaxlengthCounter).not.toBeVisible();
+        // Character counter should be visible for textarea with initial value
+        const withValue = page.locator('#with-value');
+        const withValueCounter = withValue.locator('.sds-textarea__character-counter');
+        await expect(withValueCounter).toBeVisible();
+        await expect(withValueCounter).toHaveText('Du har 8 tegn igjen');
+    });
+    test('character counter updates on input', async ({ page }) => {
+        const textarea = page.locator('#with-maxlength');
+        const counter = page.locator('#with-maxlength').locator('.sds-textarea__character-counter');
+        // Initial state
+        await expect(counter).toHaveText('Du har 10 tegn igjen');
+        // Type some text
+        await textarea.pressSequentially('Hello');
+        await expect(counter).toHaveText('Du har 5 tegn igjen');
+        // Type more text
+        await textarea.pressSequentially('Hello World');
+        await expect(counter).toHaveText('Du har 0 tegn igjen');
+    });
+    test('form-submission', async ({ page }) => {
+        const getFormData = await onFormSubmitCallback(page, 'textarea-form');
+        // Fill in some textareas
+        await page.locator('#with-maxlength').pressSequentially('Test');
+        await page.locator('#with-min-max').pressSequentially('Test input');
+        await page.locator('#submit-button').click();
+        await expect.poll(async () => (await getFormData()) !== null, 'Form data not received').toBeTruthy();
+        const formData = await getFormData();
+        expect(formData).toMatchObject({
+            'with-maxlength': 'Test',
+            'with-min-max': 'Test input',
+        });
+    });
+    test('form-reset', async ({ page }) => {
+        // Change values
+        await page.locator('#with-maxlength').pressSequentially('Changed text');
+        await page.locator('#with-value').pressSequentially('New value');
+        // Reset the form
+        await page.locator('#reset-button').click();
+        // Check that values are reset
+        await expect(page.locator('#with-maxlength')).toHaveValue('');
+        await expect(page.locator('#with-value')).toHaveValue('Initial text');
+        // Check that character counters are reset
+        await expect(page.locator('#with-maxlength').locator('.sds-textarea__character-counter')).toHaveText('Du har 10 tegn igjen');
+        await expect(page.locator('#with-value').locator('.sds-textarea__character-counter')).toHaveText('Du har 8 tegn igjen');
+    });
+    test('focus', async ({ page }) => {
+        for (const id of textareaIds) {
+            if (id === 'disabled')
+                continue; // Skip disabled textarea
+            // Prepare for focus test by adding a parent div for consistent screenshots
+            await page.evaluate((id) => {
+                const element = document.getElementById(id);
+                if (element) {
+                    const parentDiv = document.createElement('div');
+                    parentDiv.style.padding = '10px';
+                    parentDiv.style.backgroundColor = 'white';
+                    element.parentNode?.insertBefore(parentDiv, element);
+                    parentDiv.appendChild(element);
+                }
+            }, id);
+            // Focus the textarea
+            await page.locator(`#${id}`).focus();
+            // Verify focus state
+            const isFocused = await page.evaluate((id) => {
+                const element = document.getElementById(id);
+                return element === document.activeElement;
+            }, id);
+            expect(isFocused).toBeTruthy();
+        }
+    });
+    test('minlength', async ({ page }) => {
+        const textarea = page.locator('#with-min-max');
+        // Text shorter than minlength (5) → invalid
+        await textarea.pressSequentially('abc');
+        const isValidShort = await textarea.evaluate((el) => el.checkValidity());
+        expect(isValidShort).toBe(false);
+        // Text exactly at minlength (5) → valid
+        await page.goto(pageUrl);
+        await textarea.pressSequentially('abcde');
+        const isValidExact = await textarea.evaluate((el) => el.checkValidity());
+        expect(isValidExact).toBe(true);
+        // Text longer than minlength (5) → valid
+        await page.goto(pageUrl);
+        await textarea.pressSequentially('abcdefg');
+        const isValidLong = await textarea.evaluate((el) => el.checkValidity());
+        expect(isValidLong).toBe(true);
+    });
+    test('maxlength', async ({ page }) => {
+        const longStringToType = 'abcdefghijklmnop';
+        const textarea = page.locator('#with-maxlength');
+        // Type in string longer than the 10 character maxlength
+        await textarea.pressSequentially(longStringToType);
+        await expect(textarea).toHaveValue(longStringToType.substring(0, 10));
+    });
+    test('required', async ({ page }) => {
+        const textarea = page.locator('#required');
+        // No value → invalid
+        let isValid = await textarea.evaluate((el) => el.checkValidity());
+        expect(isValid).toBe(false);
+        // Has value → valid
+        await page.goto(pageUrl);
+        await textarea.pressSequentially('abc');
+        isValid = await textarea.evaluate((el) => el.checkValidity());
+        expect(isValid).toBe(true);
+    });
+    test('readonly', async ({ page }) => {
+        const textarea = page.locator('#readonly');
+        await textarea.pressSequentially('abc');
+        await expect(textarea).toHaveValue('Cannot be changed');
+    });
+    test('autocomplete on/off', async ({ page }) => {
+        const textareas = [
+            { id: 'autocomplete-off', expected: 'off' },
+            { id: 'autocomplete-on', expected: 'on' },
+        ];
+        for (const { id, expected } of textareas) {
+            const host = page.locator(`#${id}`);
+            // Check host element attribute
+            await expect(host).toHaveAttribute('autocomplete', expected);
+            // Check shadow DOM textarea element
+            const shadowDomTextarea = await host.evaluate((el) => {
+                const textarea = el.shadowRoot?.querySelector('textarea');
+                return textarea?.autocomplete ?? null;
+            });
+            expect(shadowDomTextarea).toBe(expected);
+        }
+    });
+});
+//# sourceMappingURL=sds-textarea.spec.js.map

package/dist/sds-textarea/sds-textarea.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-textarea.spec.js","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { test } from '@playwright/test';\nimport { onFormSubmitCallback } from '../playwright-util/form';\nimport { expect } from '../playwright-util/custom-matchers';\n\nconst pageUrl = 'iframe.html?viewMode=docs&id=test-textarea--docs';\nconst textareaIds = [\n\t'with-maxlength',\n\t'with-min-max',\n\t'without-maxlength',\n\t'with-error',\n\t'with-value',\n\t'readonly',\n\t'required',\n\t'autocomplete-off',\n\t'autocomplete-on',\n];\n\ntest.describe('textarea-component', () => {\n\ttest.beforeEach(async ({ page }) => {\n\t\tawait page.goto(pageUrl);\n\t});\n\n\ttest('visibility', async ({ page }) => {\n\t\tfor (const id of textareaIds) {\n\t\t\tawait expect(page.locator(`#${id}`)).toBeVisible();\n\t\t}\n\t});\n\n\ttest('initial states', async ({ page }) => {\n\t\t// Check that textarea with value has the correct initial value\n\t\tconst withValue = page.locator('#with-value');\n\t\tawait expect(withValue).toHaveValue('Initial text');\n\n\t\t// Check that disabled textarea is disabled\n\t\tconst disabled = page.locator('#disabled');\n\t\tawait expect(disabled).toHaveAttribute('disabled', '');\n\n\t\tconst readonly = page.locator('#readonly');\n\t\tawait expect(readonly).toHaveAttribute('readonly', '');\n\t});\n\n\ttest('character counter visibility', async ({ page }) => {\n\t\t// Character counter should be visible for textareas with maxlength\n\t\tconst withMaxlength = page.locator('#with-maxlength');\n\t\tconst withMaxlengthCounter = withMaxlength.locator('.sds-textarea__character-counter');\n\t\tawait expect(withMaxlengthCounter).toBeVisible();\n\n\t\t// Character counter should not be visible for textareas without maxlength\n\t\tconst withoutMaxlength = page.locator('#without-maxlength');\n\t\tconst withoutMaxlengthCounter = withoutMaxlength.locator('.sds-textarea__character-counter');\n\t\tawait expect(withoutMaxlengthCounter).not.toBeVisible();\n\n\t\t// Character counter should be visible for textarea with initial value\n\t\tconst withValue = page.locator('#with-value');\n\t\tconst withValueCounter = withValue.locator('.sds-textarea__character-counter');\n\t\tawait expect(withValueCounter).toBeVisible();\n\t\tawait expect(withValueCounter).toHaveText('Du har 8 tegn igjen');\n\t});\n\n\ttest('character counter updates on input', async ({ page }) => {\n\t\tconst textarea = page.locator('#with-maxlength');\n\t\tconst counter = page.locator('#with-maxlength').locator('.sds-textarea__character-counter');\n\n\t\t// Initial state\n\t\tawait expect(counter).toHaveText('Du har 10 tegn igjen');\n\n\t\t// Type some text\n\t\tawait textarea.pressSequentially('Hello');\n\t\tawait expect(counter).toHaveText('Du har 5 tegn igjen');\n\n\t\t// Type more text\n\t\tawait textarea.pressSequentially('Hello World');\n\t\tawait expect(counter).toHaveText('Du har 0 tegn igjen');\n\t});\n\n\ttest('form-submission', async ({ page }) => {\n\t\tconst getFormData = await onFormSubmitCallback(page, 'textarea-form');\n\n\t\t// Fill in some textareas\n\t\tawait page.locator('#with-maxlength').pressSequentially('Test');\n\t\tawait page.locator('#with-min-max').pressSequentially('Test input');\n\n\t\tawait page.locator('#submit-button').click();\n\n\t\tawait expect.poll(async () => (await getFormData()) !== null, 'Form data not received').toBeTruthy();\n\t\tconst formData = await getFormData();\n\n\t\texpect(formData).toMatchObject({\n\t\t\t'with-maxlength': 'Test',\n\t\t\t'with-min-max': 'Test input',\n\t\t});\n\t});\n\n\ttest('form-reset', async ({ page }) => {\n\t\t// Change values\n\t\tawait page.locator('#with-maxlength').pressSequentially('Changed text');\n\t\tawait page.locator('#with-value').pressSequentially('New value');\n\n\t\t// Reset the form\n\t\tawait page.locator('#reset-button').click();\n\n\t\t// Check that values are reset\n\t\tawait expect(page.locator('#with-maxlength')).toHaveValue('');\n\t\tawait expect(page.locator('#with-value')).toHaveValue('Initial text');\n\n\t\t// Check that character counters are reset\n\t\tawait expect(page.locator('#with-maxlength').locator('.sds-textarea__character-counter')).toHaveText(\n\t\t\t'Du har 10 tegn igjen'\n\t\t);\n\t\tawait expect(page.locator('#with-value').locator('.sds-textarea__character-counter')).toHaveText(\n\t\t\t'Du har 8 tegn igjen'\n\t\t);\n\t});\n\n\ttest('focus', async ({ page }) => {\n\t\tfor (const id of textareaIds) {\n\t\t\tif (id === 'disabled') continue; // Skip disabled textarea\n\n\t\t\t// Prepare for focus test by adding a parent div for consistent screenshots\n\t\t\tawait page.evaluate((id) => {\n\t\t\t\tconst element = document.getElementById(id);\n\t\t\t\tif (element) {\n\t\t\t\t\tconst parentDiv = document.createElement('div');\n\t\t\t\t\tparentDiv.style.padding = '10px';\n\t\t\t\t\tparentDiv.style.backgroundColor = 'white';\n\t\t\t\t\telement.parentNode?.insertBefore(parentDiv, element);\n\t\t\t\t\tparentDiv.appendChild(element);\n\t\t\t\t}\n\t\t\t}, id);\n\n\t\t\t// Focus the textarea\n\t\t\tawait page.locator(`#${id}`).focus();\n\n\t\t\t// Verify focus state\n\t\t\tconst isFocused = await page.evaluate((id) => {\n\t\t\t\tconst element = document.getElementById(id);\n\t\t\t\treturn element === document.activeElement;\n\t\t\t}, id);\n\n\t\t\texpect(isFocused).toBeTruthy();\n\t\t}\n\t});\n\n\ttest('minlength', async ({ page }) => {\n\t\tconst textarea = page.locator('#with-min-max');\n\n\t\t// Text shorter than minlength (5) → invalid\n\t\tawait textarea.pressSequentially('abc');\n\t\tconst isValidShort = await textarea.evaluate((el: HTMLTextAreaElement) => el.checkValidity());\n\t\texpect(isValidShort).toBe(false);\n\n\t\t// Text exactly at minlength (5) → valid\n\t\tawait page.goto(pageUrl);\n\t\tawait textarea.pressSequentially('abcde');\n\t\tconst isValidExact = await textarea.evaluate((el: HTMLTextAreaElement) => el.checkValidity());\n\t\texpect(isValidExact).toBe(true);\n\n\t\t// Text longer than minlength (5) → valid\n\t\tawait page.goto(pageUrl);\n\t\tawait textarea.pressSequentially('abcdefg');\n\t\tconst isValidLong = await textarea.evaluate((el: HTMLTextAreaElement) => el.checkValidity());\n\t\texpect(isValidLong).toBe(true);\n\t});\n\n\ttest('maxlength', async ({ page }) => {\n\t\tconst longStringToType = 'abcdefghijklmnop';\n\t\tconst textarea = page.locator('#with-maxlength');\n\n\t\t// Type in string longer than the 10 character maxlength\n\t\tawait textarea.pressSequentially(longStringToType);\n\t\tawait expect(textarea).toHaveValue(longStringToType.substring(0, 10));\n\t});\n\n\ttest('required', async ({ page }) => {\n\t\tconst textarea = page.locator('#required');\n\n\t\t// No value → invalid\n\t\tlet isValid = await textarea.evaluate((el: HTMLTextAreaElement) => el.checkValidity());\n\t\texpect(isValid).toBe(false);\n\n\t\t// Has value → valid\n\t\tawait page.goto(pageUrl);\n\t\tawait textarea.pressSequentially('abc');\n\t\tisValid = await textarea.evaluate((el: HTMLTextAreaElement) => el.checkValidity());\n\t\texpect(isValid).toBe(true);\n\t});\n\n\ttest('readonly', async ({ page }) => {\n\t\tconst textarea = page.locator('#readonly');\n\t\tawait textarea.pressSequentially('abc');\n\t\tawait expect(textarea).toHaveValue('Cannot be changed');\n\t});\n\n\ttest('autocomplete on/off', async ({ page }) => {\n\t\tconst textareas = [\n\t\t\t{ id: 'autocomplete-off', expected: 'off' },\n\t\t\t{ id: 'autocomplete-on', expected: 'on' },\n\t\t];\n\n\t\tfor (const { id, expected } of textareas) {\n\t\t\tconst host = page.locator(`#${id}`);\n\n\t\t\t// Check host element attribute\n\t\t\tawait expect(host).toHaveAttribute('autocomplete', expected);\n\n\t\t\t// Check shadow DOM textarea element\n\t\t\tconst shadowDomTextarea = await host.evaluate((el: HTMLElement) => {\n\t\t\t\tconst textarea = el.shadowRoot?.querySelector('textarea') as HTMLTextAreaElement | null;\n\t\t\t\treturn textarea?.autocomplete ?? null;\n\t\t\t});\n\t\t\texpect(shadowDomTextarea).toBe(expected);\n\t\t}\n\t});\n});\n"]}

package/dist/sds-textarea/sds-textarea.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=sds-textarea.styles.d.ts.map

package/dist/sds-textarea/sds-textarea.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-textarea.styles.d.ts","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAmHlB,CAAC"}

package/dist/sds-textarea/sds-textarea.styles.js

@@ -0,0 +1,118 @@
+import { css } from 'lit';
+export const styles = css `
+	:host {
+		all: unset;
+		display: block;
+		text-align: start;
+	}
+
+	.sds-textarea {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+		font-family: var(--sds-typography-font-family);
+
+		.sds-textarea__input-container {
+			max-width: var(--sds-typography-max-line-width);
+			position: relative;
+		}
+
+		.sds-textarea__input {
+			box-sizing: border-box;
+			color: var(--sds-color-semantic-text-default);
+			padding: 0.75rem 1rem;
+			line-height: 1.25rem;
+			font-size: 1rem;
+			justify-content: flex-end;
+			border-radius: var(--sds-radius-4);
+			border: 1px solid var(--sds-color-semantic-border-default);
+			background: var(--sds-color-semantic-surface-default);
+			max-width: var(--sds-typography-max-line-width);
+			width: 100%;
+			min-height: 6rem;
+			resize: vertical;
+			font-family: var(--sds-typography-font-family);
+
+			&:hover {
+				border-color: var(--sds-color-semantic-border-strong);
+			}
+
+			&:focus {
+				outline: 2px solid var(--sds-color-semantic-border-focus);
+				outline-offset: 1px;
+			}
+
+			&:active {
+				border-color: var(--sds-color-semantic-border-action);
+				outline: none;
+			}
+		}
+
+		.sds-textarea__label {
+			color: var(--sds-color-semantic-text-default);
+			display: block;
+			font-size: 1rem;
+			font-weight: 500;
+			line-height: 1.5rem;
+			max-width: var(--sds-typography-max-line-width);
+		}
+
+		.sds-textarea__help-text,
+		.sds-textarea__character-counter {
+			color: var(--sds-color-semantic-text-subtle);
+			font-size: 1rem;
+			font-weight: 400;
+			line-height: 1.25rem;
+			margin: 0;
+			max-width: var(--sds-typography-max-line-width);
+		}
+
+		.sds-textarea__character-counter--error {
+			color: var(--sds-color-semantic-text-warning);
+		}
+
+		.sds-textarea__error-message {
+			margin: 0;
+			max-width: var(--sds-typography-max-line-width);
+			align-items: flex-start;
+			color: var(--sds-color-semantic-text-default);
+			display: flex;
+			line-height: 1.5rem;
+			gap: 0.25rem;
+		}
+	}
+
+	.sds-textarea--error {
+		color: var(--sds-color-semantic-text-default);
+		line-height: 1.5rem;
+
+		.sds-textarea__input,
+		.sds-textarea__input:hover {
+			border-color: var(--sds-color-semantic-border-critical);
+		}
+	}
+
+	.sds-textarea--disabled {
+		pointer-events: none;
+
+		.sds-textarea__label,
+		.sds-textarea__help-text,
+		.sds-textarea__character-counter,
+		.sds-textarea__error-message,
+		.sds-textarea__input {
+			color: var(--sds-color-semantic-text-disabled);
+		}
+
+		.sds-textarea__input {
+			border: 1px solid var(--sds-color-semantic-border-disabled);
+			resize: none;
+		}
+	}
+
+	.sds-textarea--readonly {
+		.sds-textarea__input {
+			resize: none;
+		}
+	}
+`;
+//# sourceMappingURL=sds-textarea.styles.js.map

package/dist/sds-textarea/sds-textarea.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-textarea.styles.js","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmHxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tall: unset;\n\t\tdisplay: block;\n\t\ttext-align: start;\n\t}\n\n\t.sds-textarea {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 0.25rem;\n\t\tfont-family: var(--sds-typography-font-family);\n\n\t\t.sds-textarea__input-container {\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t\tposition: relative;\n\t\t}\n\n\t\t.sds-textarea__input {\n\t\t\tbox-sizing: border-box;\n\t\t\tcolor: var(--sds-color-semantic-text-default);\n\t\t\tpadding: 0.75rem 1rem;\n\t\t\tline-height: 1.25rem;\n\t\t\tfont-size: 1rem;\n\t\t\tjustify-content: flex-end;\n\t\t\tborder-radius: var(--sds-radius-4);\n\t\t\tborder: 1px solid var(--sds-color-semantic-border-default);\n\t\t\tbackground: var(--sds-color-semantic-surface-default);\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t\twidth: 100%;\n\t\t\tmin-height: 6rem;\n\t\t\tresize: vertical;\n\t\t\tfont-family: var(--sds-typography-font-family);\n\n\t\t\t&:hover {\n\t\t\t\tborder-color: var(--sds-color-semantic-border-strong);\n\t\t\t}\n\n\t\t\t&:focus {\n\t\t\t\toutline: 2px solid var(--sds-color-semantic-border-focus);\n\t\t\t\toutline-offset: 1px;\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tborder-color: var(--sds-color-semantic-border-action);\n\t\t\t\toutline: none;\n\t\t\t}\n\t\t}\n\n\t\t.sds-textarea__label {\n\t\t\tcolor: var(--sds-color-semantic-text-default);\n\t\t\tdisplay: block;\n\t\t\tfont-size: 1rem;\n\t\t\tfont-weight: 500;\n\t\t\tline-height: 1.5rem;\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t}\n\n\t\t.sds-textarea__help-text,\n\t\t.sds-textarea__character-counter {\n\t\t\tcolor: var(--sds-color-semantic-text-subtle);\n\t\t\tfont-size: 1rem;\n\t\t\tfont-weight: 400;\n\t\t\tline-height: 1.25rem;\n\t\t\tmargin: 0;\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t}\n\n\t\t.sds-textarea__character-counter--error {\n\t\t\tcolor: var(--sds-color-semantic-text-warning);\n\t\t}\n\n\t\t.sds-textarea__error-message {\n\t\t\tmargin: 0;\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t\talign-items: flex-start;\n\t\t\tcolor: var(--sds-color-semantic-text-default);\n\t\t\tdisplay: flex;\n\t\t\tline-height: 1.5rem;\n\t\t\tgap: 0.25rem;\n\t\t}\n\t}\n\n\t.sds-textarea--error {\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tline-height: 1.5rem;\n\n\t\t.sds-textarea__input,\n\t\t.sds-textarea__input:hover {\n\t\t\tborder-color: var(--sds-color-semantic-border-critical);\n\t\t}\n\t}\n\n\t.sds-textarea--disabled {\n\t\tpointer-events: none;\n\n\t\t.sds-textarea__label,\n\t\t.sds-textarea__help-text,\n\t\t.sds-textarea__character-counter,\n\t\t.sds-textarea__error-message,\n\t\t.sds-textarea__input {\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t}\n\n\t\t.sds-textarea__input {\n\t\t\tborder: 1px solid var(--sds-color-semantic-border-disabled);\n\t\t\tresize: none;\n\t\t}\n\t}\n\n\t.sds-textarea--readonly {\n\t\t.sds-textarea__input {\n\t\t\tresize: none;\n\t\t}\n\t}\n`;\n"]}

package/dist/sds-textfield/sds-textfield.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sds-textfield.d.ts","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"sds-textfield.d.ts","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.ts"],"names":[],"mappings":"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"}