@politiet/sheriff-web-components 1.3.4 → 2.0.0-rc.0

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

@@ -33,18 +33,23 @@ test.describe('textarea-component', () => {
         await expect(readonly).toHaveAttribute('readonly', '');
     });
     test('character counter visibility', async ({ page }) => {
-        // Character counter should be visible for textareas with counter
-        const withCounter = page.locator('#with-counter');
-        const withCounterText = withCounter.locator('.sds-textarea__character-counter');
-        await expect(withCounterText).toBeVisible();
-        // Character counter should not be visible for textareas without counter
-        const withoutCounter = page.locator('#without-maxlength');
-        const withoutMaxlengthCounter = withoutCounter.locator('.sds-textarea__character-counter');
+        // 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-counter');
-        const counter = page.locator('#with-counter').locator('.sds-textarea__character-counter');
+        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
@@ -52,7 +57,7 @@ test.describe('textarea-component', () => {
         await expect(counter).toHaveText('Du har 5 tegn igjen');
         // Type more text
         await textarea.pressSequentially('Hello World');
-        await expect(counter).toHaveText('Du har 6 tegn for mye');
+        await expect(counter).toHaveText('Du har 0 tegn igjen');
     });
     test('form-submission', async ({ page }) => {
         const getFormData = await onFormSubmitCallback(page, 'textarea-form');
@@ -71,14 +76,14 @@ test.describe('textarea-component', () => {
         // Change values
         await page.locator('#with-maxlength').pressSequentially('Changed text');
         await page.locator('#with-value').pressSequentially('New value');
-        await page.locator('#with-counter').pressSequentially('Some letters');
         // 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-counter').locator('.sds-textarea__character-counter')).toHaveText('Du har 10 tegn igjen');
+        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) {
@@ -162,17 +167,5 @@ test.describe('textarea-component', () => {
             expect(shadowDomTextarea).toBe(expected);
         }
     });
-    test('can be combined with external control of value attribute', async ({ page }) => {
-        const textAreaInsideShadowDOM = page.getByRole('textbox', { name: 'Text area in React' });
-        await expect(textAreaInsideShadowDOM).toHaveValue('Initial text');
-        // First clear and then type in the text area
-        await textAreaInsideShadowDOM.clear();
-        await textAreaInsideShadowDOM.fill('Something typed into the form');
-        await expect(textAreaInsideShadowDOM).toHaveValue('Something typed into the form');
-        // Then click the button to change the text to "Text set in React"
-        const reactButton = page.locator('#react-button');
-        await reactButton.click();
-        await expect(textAreaInsideShadowDOM).toHaveValue('Text set with React');
-    });
 });
 //# sourceMappingURL=sds-textarea.spec.js.map

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

@@ -1 +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 counter\n\t\tconst withCounter = page.locator('#with-counter');\n\t\tconst withCounterText = withCounter.locator('.sds-textarea__character-counter');\n\t\tawait expect(withCounterText).toBeVisible();\n\n\t\t// Character counter should not be visible for textareas without counter\n\t\tconst withoutCounter = page.locator('#without-maxlength');\n\t\tconst withoutMaxlengthCounter = withoutCounter.locator('.sds-textarea__character-counter');\n\t\tawait expect(withoutMaxlengthCounter).not.toBeVisible();\n\t});\n\n\ttest('character counter updates on input', async ({ page }) => {\n\t\tconst textarea = page.locator('#with-counter');\n\t\tconst counter = page.locator('#with-counter').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 6 tegn for mye');\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\t\tawait page.locator('#with-counter').pressSequentially('Some letters');\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-counter').locator('.sds-textarea__character-counter')).toHaveText(\n\t\t\t'Du har 10 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\ttest('can be combined with external control of value attribute', async ({ page }) => {\n\t\tconst textAreaInsideShadowDOM = page.getByRole('textbox', { name: 'Text area in React' });\n\t\tawait expect(textAreaInsideShadowDOM).toHaveValue('Initial text');\n\n\t\t// First clear and then type in the text area\n\t\tawait textAreaInsideShadowDOM.clear();\n\t\tawait textAreaInsideShadowDOM.fill('Something typed into the form');\n\t\tawait expect(textAreaInsideShadowDOM).toHaveValue('Something typed into the form');\n\n\t\t// Then click the button to change the text to \"Text set in React\"\n\t\tconst reactButton = page.locator('#react-button');\n\t\tawait reactButton.click();\n\n\t\tawait expect(textAreaInsideShadowDOM).toHaveValue('Text set with React');\n\t});\n});\n"]}
+{"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.map

@@ -1 +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"}
+{"version":3,"file":"sds-textarea.styles.d.ts","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAwLlB,CAAC"}

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

@@ -1,6 +1,45 @@
 import { css } from 'lit';
 export const styles = css `
 	:host {
+		--_sds-textarea-background-color: var(--sds-textarea-background-color, var(--sds-color-neutral-background-default));
+		--_sds-textarea-text-color: var(--sds-textarea-text-color, var(--sds-color-neutral-text-default));
+
+		--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-neutral-border-default));
+		--_sds-textarea-border-width: var(--sds-textarea-border-width, var(--sds-border-sm));
+		--_sds-textarea-border-radius: var(--sds-textarea-border-radius, var(--sds-radius-sm));
+
+		--_sds-textarea-font-family: var(--sds-textarea-font-family, var(--sds-typography-font-family-roboto));
+		--_sds-textarea-font-size: var(--sds-textarea-font-size, var(--sds-components-font-size-md));
+		--_sds-textarea-font-weight: var(--sds-textarea-font-weight, var(--sds-typography-font-weight-regular));
+		--_sds-textarea-line-height: var(--sds-textarea-line-height, var(--sds-components-line-height-tall-md));
+		--_sds-textarea-min-height: var(--sds-textarea-height, var(--sds-components-button-md));
+
+		--_sds-textarea-gap: var(--sds-textarea-gap, var(--sds-spacing-3xs));
+		--_sds-textarea-padding-block: var(--sds-textarea-padding-block, var(--sds-spacing-2xs));
+		--_sds-textarea-padding-inline: var(--sds-textarea-padding-inline, var(--sds-spacing-2xs));
+		--_sds-textarea-disabled-opacity: var(--sds-textarea-disabled-opacity, var(--sds-color-states-disabled-opacity));
+
+		--_sds-textarea-label-text-color: var(--sds-textarea-label-text-color, var(--sds-color-neutral-text-default));
+		--_sds-textarea-label-font-size: var(--sds-textarea-label-font-size, var(--sds-components-font-size-md));
+		--_sds-textarea-label-font-weight: var(--sds-textarea-label-font-weight, var(--sds-typography-font-weight-medium));
+		--_sds-textarea-label-line-height: var(--sds-textarea-label-line-height, var(--sds-components-line-height-squeezed-md));
+
+		--_sds-textarea-label-gap: var(--sds-textarea-gap, var(--sds-spacing-4xs));
+
+		--_sds-textarea-helptext-text-color: var(--sds-textarea-helptext-text-color, var(--sds-color-neutral-text-subtle));
+		--_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-md));
+		--_sds-textarea-helptext-font-weight: var(--sds-textarea-helptext-font-weight, var(--sds-typography-font-weight-regular));
+		--_sds-textarea-helptext-line-height: var(--sds-textarea-helptext-line-height, var(--sds-components-line-height-squeezed-md));
+
+		--_sds-textarea-counter-text-color: var(--sds-textarea-counter-text-color, var(--sds-color-neutral-text-default));
+		--_sds-textarea-counter-font-size: var(--sds-textarea-counter-font-size, var(--sds-components-font-size-md));
+		--_sds-textarea-counter-font-weight: var(--sds-textarea-counter-font-weight, var(--sds-typography-font-weight-regular));
+		--_sds-textarea-counter-line-height: var(--sds-textarea-counter-line-height, var(--sds-components-line-height-squeezed-md));
+
+		--_sds-textarea-focus-color: var(--sds-textarea-focus-color, var(--sds-color-states-focus-outer));
+		--_sds-textarea-focus-inner-color: var(--sds-textarea-focus-inner-color, var(--sds-color-states-focus-inner));
+		--_sds-textarea-focus-spacing: var(--sds-textarea-focus-spacing, var(--sds-color-states-focus-spacing));
+
 		all: unset;
 		display: block;
 		text-align: start;
@@ -9,8 +48,8 @@ export const styles = css `
 	.sds-textarea {
 		display: flex;
 		flex-direction: column;
-		gap: 0.25rem;
-		font-family: var(--sds-typography-font-family);
+		gap: var(--_sds-textarea-gap);
+		font-family: var(--_sds-textarea-font-family);
 
 		.sds-textarea__input-container {
 			max-width: var(--sds-typography-max-line-width);
@@ -19,100 +58,130 @@ export const styles = css `
 
 		.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;
+			color: var(--_sds-textarea-text-color);
+			padding: var(--_sds-textarea-padding-block) var(--_sds-textarea-padding-inline);
+			line-height: var(--_sds-textarea-line-height);
+			font-size: var(--_sds-textarea-font-size);
+			font-weight: var(--_sds-textarea-font-weight);
+			font-family: var(--_sds-textarea-font-family);
 			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);
+			border-radius: var(--_sds-textarea-border-radius);
+			border: var(--_sds-textarea-border-width) solid var(--_sds-textarea-border-color);
+			background: var(--_sds-textarea-background-color);
 			max-width: var(--sds-typography-max-line-width);
 			width: 100%;
-			min-height: 6rem;
+			min-height: var(--_sds-textarea-min-height);
 			resize: vertical;
-			font-family: var(--sds-typography-font-family);
 
 			&:hover {
-				border-color: var(--sds-color-semantic-border-strong);
+				--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-main-action-hover));
 			}
 
-			&:focus {
-				outline: 2px solid var(--sds-color-semantic-border-focus);
-				outline-offset: 1px;
+			&:focus-visible {
+				box-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-textarea-focus-inner-color);
+				outline: 3px solid var(--_sds-textarea-focus-color);
+				outline-offset: 3px;
 			}
 
 			&:active {
-				border-color: var(--sds-color-semantic-border-action);
-				outline: none;
+				--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-main-action-active));
+				--_sds-textarea-text-color: var(--sds-textarea-text-color, var(--sds-color-main-text-default));
 			}
 		}
 
 		.sds-textarea__label {
-			color: var(--sds-color-semantic-text-default);
+			color: var(--_sds-textarea-label-text-color);
 			display: block;
-			font-size: 1rem;
-			font-weight: 500;
-			line-height: 1.5rem;
+			font-size: var(--_sds-textarea-label-font-size);
+			font-weight: var(--_sds-textarea-label-font-weight);
+			line-height: var(--_sds-textarea-label-line-height);
 			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;
+		.sds-textarea__help-text {
+			color: var(--_sds-textarea-helptext-text-color);
+			font-size: var(--_sds-textarea-helptext-font-size);
+			font-weight: var(--_sds-textarea-helptext-font-weight);
+			line-height: var(--_sds-textarea-helptext-line-height);
 			margin: 0;
 			max-width: var(--sds-typography-max-line-width);
 		}
 
-		.sds-textarea__character-counter--error {
-			color: var(--sds-color-semantic-text-warning);
+		*:has(.sds-textarea__label) {
+			display: flex;
+			flex-direction: column;
+			gap: var(--_sds-textarea-label-gap);
 		}
 
-		.sds-textarea__error-message {
+		.sds-textarea__character-counter {
+			color: var(--_sds-textarea-counter-text-color);
+			font-size: var(--_sds-textarea-counter-font-size);
+			font-weight: var(--_sds-textarea-counter-font-weight);
+			line-height: var(--_sds-textarea-counter-line-height);
 			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--error {
+			--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-alert-danger-border-default));
+			--_sds-textarea-counter-text-color: var(--sds-textarea-counter-text-color, var(--sds-color-alert-danger-text-subtle));
 
-		.sds-textarea__input,
-		.sds-textarea__input:hover {
-			border-color: var(--sds-color-semantic-border-critical);
-		}
-	}
+			& .sds-textarea__input:hover {
+				--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-alert-danger-action-hover));
+				--_sds-textarea-text-color: var(--sds-textarea-text-color, var(--sds-color-alert-danger-text-default));
+			}
 
-	.sds-textarea--disabled {
-		pointer-events: none;
+			& .sds-textarea__input:active {
+				--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-alert-danger-action-active));
+			}
 
-		.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);
+			& :is(sds-alert) {
+				--sds-alert-padding: 0px;
+			}
 		}
+	}
 
+	:host([readonly]) {
+		--_sds-textarea-background-color: var(--sds-textarea-background-color, var(--sds-color-neutral-surface-tinted));
+		--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-neutral-border-subtle));
 		.sds-textarea__input {
-			border: 1px solid var(--sds-color-semantic-border-disabled);
 			resize: none;
 		}
 	}
 
-	.sds-textarea--readonly {
-		.sds-textarea__input {
-			resize: none;
-		}
+	:host([disabled]) {
+		opacity: var(--_sds-textarea-disabled-opacity);
+		pointer-events: none;
+	}
+
+	:host([size='sm']) {
+		--_sds-textarea-font-size: var(--sds-textarea-font-size, var(--sds-components-font-size-sm));
+		--_sds-textarea-line-height: var(--sds-textarea-line-height, var(--sds-components-line-height-tall-sm));
+		--_sds-textarea-min-height: var(--sds-textarea-height, var(--sds-components-button-sm));
+
+		--_sds-textarea-label-line-height: var(--sds-textarea-label-line-height, var(--sds-components-line-height-squeezed-sm));
+		--_sds-textarea-label-font-size: var(--sds-textarea-label-font-size, var(--sds-components-font-size-sm));
+
+		--_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-sm));
+		--_sds-textarea-helptext-line-height: var(--sds-textarea-helptext-line-height, var(--sds-components-line-height-squeezed-sm));
+
+		--_sds-textarea-counter-font-size: var(--sds-textarea-counter-font-size, var(--sds-components-font-size-sm));
+		--_sds-textarea-counter-line-height: var(--sds-textarea-counter-line-height, var(--sds-components-line-height-squeezed-sm));
+	}
+
+	:host([size='lg']) {
+		--_sds-textarea-font-size: var(--sds-textarea-font-size, var(--sds-components-font-size-lg));
+		--_sds-textarea-line-height: var(--sds-textarea-line-height, var(--sds-components-line-height-tall-lg));
+		--_sds-textarea-min-height: var(--sds-textarea-height, var(--sds-components-button-lg));
+
+		--_sds-textarea-label-line-height: var(--sds-textarea-label-line-height, var(--sds-components-line-height-squeezed-lg));
+		--_sds-textarea-label-font-size: var(--sds-textarea-label-font-size, var(--sds-components-font-size-lg));
+
+		--_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-lg));
+		--_sds-textarea-helptext-line-height: var(--sds-textarea-helptext-line-height, var(--sds-components-line-height-squeezed-lg));
+
+		--_sds-textarea-counter-font-size: var(--sds-textarea-counter-font-size, var(--sds-components-font-size-lg));
+		--_sds-textarea-counter-line-height: var(--sds-textarea-counter-line-height, var(--sds-components-line-height-squeezed-lg));
 	}
 `;
 //# sourceMappingURL=sds-textarea.styles.js.map

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

@@ -1 +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"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwLxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-textarea-background-color: var(--sds-textarea-background-color, var(--sds-color-neutral-background-default));\n\t\t--_sds-textarea-text-color: var(--sds-textarea-text-color, var(--sds-color-neutral-text-default));\n\n\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-neutral-border-default));\n\t\t--_sds-textarea-border-width: var(--sds-textarea-border-width, var(--sds-border-sm));\n\t\t--_sds-textarea-border-radius: var(--sds-textarea-border-radius, var(--sds-radius-sm));\n\n\t\t--_sds-textarea-font-family: var(--sds-textarea-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-textarea-font-size: var(--sds-textarea-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-textarea-font-weight: var(--sds-textarea-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-textarea-line-height: var(--sds-textarea-line-height, var(--sds-components-line-height-tall-md));\n\t\t--_sds-textarea-min-height: var(--sds-textarea-height, var(--sds-components-button-md));\n\n\t\t--_sds-textarea-gap: var(--sds-textarea-gap, var(--sds-spacing-3xs));\n\t\t--_sds-textarea-padding-block: var(--sds-textarea-padding-block, var(--sds-spacing-2xs));\n\t\t--_sds-textarea-padding-inline: var(--sds-textarea-padding-inline, var(--sds-spacing-2xs));\n\t\t--_sds-textarea-disabled-opacity: var(--sds-textarea-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--_sds-textarea-label-text-color: var(--sds-textarea-label-text-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-textarea-label-font-size: var(--sds-textarea-label-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-textarea-label-font-weight: var(--sds-textarea-label-font-weight, var(--sds-typography-font-weight-medium));\n\t\t--_sds-textarea-label-line-height: var(--sds-textarea-label-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-textarea-label-gap: var(--sds-textarea-gap, var(--sds-spacing-4xs));\n\n\t\t--_sds-textarea-helptext-text-color: var(--sds-textarea-helptext-text-color, var(--sds-color-neutral-text-subtle));\n\t\t--_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-textarea-helptext-font-weight: var(--sds-textarea-helptext-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-textarea-helptext-line-height: var(--sds-textarea-helptext-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-textarea-counter-text-color: var(--sds-textarea-counter-text-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-textarea-counter-font-size: var(--sds-textarea-counter-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-textarea-counter-font-weight: var(--sds-textarea-counter-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-textarea-counter-line-height: var(--sds-textarea-counter-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-textarea-focus-color: var(--sds-textarea-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-textarea-focus-inner-color: var(--sds-textarea-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-textarea-focus-spacing: var(--sds-textarea-focus-spacing, var(--sds-color-states-focus-spacing));\n\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: var(--_sds-textarea-gap);\n\t\tfont-family: var(--_sds-textarea-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-textarea-text-color);\n\t\t\tpadding: var(--_sds-textarea-padding-block) var(--_sds-textarea-padding-inline);\n\t\t\tline-height: var(--_sds-textarea-line-height);\n\t\t\tfont-size: var(--_sds-textarea-font-size);\n\t\t\tfont-weight: var(--_sds-textarea-font-weight);\n\t\t\tfont-family: var(--_sds-textarea-font-family);\n\t\t\tjustify-content: flex-end;\n\t\t\tborder-radius: var(--_sds-textarea-border-radius);\n\t\t\tborder: var(--_sds-textarea-border-width) solid var(--_sds-textarea-border-color);\n\t\t\tbackground: var(--_sds-textarea-background-color);\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t\twidth: 100%;\n\t\t\tmin-height: var(--_sds-textarea-min-height);\n\t\t\tresize: vertical;\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-main-action-hover));\n\t\t\t}\n\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-textarea-focus-inner-color);\n\t\t\t\toutline: 3px solid var(--_sds-textarea-focus-color);\n\t\t\t\toutline-offset: 3px;\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-main-action-active));\n\t\t\t\t--_sds-textarea-text-color: var(--sds-textarea-text-color, var(--sds-color-main-text-default));\n\t\t\t}\n\t\t}\n\n\t\t.sds-textarea__label {\n\t\t\tcolor: var(--_sds-textarea-label-text-color);\n\t\t\tdisplay: block;\n\t\t\tfont-size: var(--_sds-textarea-label-font-size);\n\t\t\tfont-weight: var(--_sds-textarea-label-font-weight);\n\t\t\tline-height: var(--_sds-textarea-label-line-height);\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\tcolor: var(--_sds-textarea-helptext-text-color);\n\t\t\tfont-size: var(--_sds-textarea-helptext-font-size);\n\t\t\tfont-weight: var(--_sds-textarea-helptext-font-weight);\n\t\t\tline-height: var(--_sds-textarea-helptext-line-height);\n\t\t\tmargin: 0;\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t}\n\n\t\t*:has(.sds-textarea__label) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tgap: var(--_sds-textarea-label-gap);\n\t\t}\n\n\t\t.sds-textarea__character-counter {\n\t\t\tcolor: var(--_sds-textarea-counter-text-color);\n\t\t\tfont-size: var(--_sds-textarea-counter-font-size);\n\t\t\tfont-weight: var(--_sds-textarea-counter-font-weight);\n\t\t\tline-height: var(--_sds-textarea-counter-line-height);\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--error {\n\t\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-alert-danger-border-default));\n\t\t\t--_sds-textarea-counter-text-color: var(--sds-textarea-counter-text-color, var(--sds-color-alert-danger-text-subtle));\n\n\t\t\t& .sds-textarea__input:hover {\n\t\t\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t\t--_sds-textarea-text-color: var(--sds-textarea-text-color, var(--sds-color-alert-danger-text-default));\n\t\t\t}\n\n\t\t\t& .sds-textarea__input:active {\n\t\t\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t}\n\n\t\t\t& :is(sds-alert) {\n\t\t\t\t--sds-alert-padding: 0px;\n\t\t\t}\n\t\t}\n\t}\n\n\t:host([readonly]) {\n\t\t--_sds-textarea-background-color: var(--sds-textarea-background-color, var(--sds-color-neutral-surface-tinted));\n\t\t--_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-neutral-border-subtle));\n\t\t.sds-textarea__input {\n\t\t\tresize: none;\n\t\t}\n\t}\n\n\t:host([disabled]) {\n\t\topacity: var(--_sds-textarea-disabled-opacity);\n\t\tpointer-events: none;\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-textarea-font-size: var(--sds-textarea-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-textarea-line-height: var(--sds-textarea-line-height, var(--sds-components-line-height-tall-sm));\n\t\t--_sds-textarea-min-height: var(--sds-textarea-height, var(--sds-components-button-sm));\n\n\t\t--_sds-textarea-label-line-height: var(--sds-textarea-label-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-textarea-label-font-size: var(--sds-textarea-label-font-size, var(--sds-components-font-size-sm));\n\n\t\t--_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-textarea-helptext-line-height: var(--sds-textarea-helptext-line-height, var(--sds-components-line-height-squeezed-sm));\n\n\t\t--_sds-textarea-counter-font-size: var(--sds-textarea-counter-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-textarea-counter-line-height: var(--sds-textarea-counter-line-height, var(--sds-components-line-height-squeezed-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-textarea-font-size: var(--sds-textarea-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-textarea-line-height: var(--sds-textarea-line-height, var(--sds-components-line-height-tall-lg));\n\t\t--_sds-textarea-min-height: var(--sds-textarea-height, var(--sds-components-button-lg));\n\n\t\t--_sds-textarea-label-line-height: var(--sds-textarea-label-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-textarea-label-font-size: var(--sds-textarea-label-font-size, var(--sds-components-font-size-lg));\n\n\t\t--_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-textarea-helptext-line-height: var(--sds-textarea-helptext-line-height, var(--sds-components-line-height-squeezed-lg));\n\n\t\t--_sds-textarea-counter-font-size: var(--sds-textarea-counter-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-textarea-counter-line-height: var(--sds-textarea-counter-line-height, var(--sds-components-line-height-squeezed-lg));\n\t}\n`;\n"]}

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

@@ -1,6 +1,9 @@
 import { LitElement } from 'lit';
 import '../sds-icon/sds-icon';
+import '../sds-alert/sds-alert';
+import { SDS_SIZES } from '../types';
 type InputType = 'text' | 'email' | 'tel' | 'number' | 'password' | 'search' | 'url';
+type InputSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;
 export type AutocompleteTypes = 'off' | 'on' | 'name' | 'honorific-prefix' | 'given-name' | 'additional-name' | 'family-name' | 'honorific-suffix' | 'nickname' | 'email' | 'username' | 'new-password' | 'current-password' | 'one-time-code' | 'organization-title' | 'organization' | 'street-address' | 'address-line1' | 'address-line2' | 'address-line3' | 'address-level4' | 'address-level3' | 'address-level2' | 'address-level1' | 'country' | 'country-name' | 'postal-code' | 'cc-name' | 'cc-given-name' | 'cc-additional-name' | 'cc-family-name' | 'cc-number' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-csc' | 'cc-type' | 'transaction-currency' | 'transaction-amount' | 'language' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'sex' | 'tel' | 'tel-country-code' | 'tel-national' | 'tel-area-code' | 'tel-local' | 'tel-extension' | 'impp' | 'url' | 'photo';
 export interface SDSTextFieldProps {
     type?: InputType;
@@ -17,6 +20,7 @@ export interface SDSTextFieldProps {
     pattern?: string;
     minlength?: number;
     maxlength?: number;
+    size?: InputSize;
     onInput?: (event: Event) => void;
     onChange?: (event: Event) => void;
     onSelect?: (event: Event) => void;
@@ -39,6 +43,7 @@ export declare class SDSTextField extends LitElement {
     pattern?: string;
     minlength?: number;
     maxlength?: number;
+    size: InputSize;
     private hasIcon;
     control: HTMLInputElement;
     static formAssociated: boolean;

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":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAOhD,OAAO,sBAAsB,CAAC;AAG9B,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,CAAC;AACrF,MAAM,MAAM,iBAAiB,GAC1B,KAAK,GACL,IAAI,GACJ,MAAM,GACN,kBAAkB,GAClB,YAAY,GACZ,iBAAiB,GACjB,aAAa,GACb,kBAAkB,GAClB,UAAU,GACV,OAAO,GACP,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,eAAe,GACf,oBAAoB,GACpB,cAAc,GACd,gBAAgB,GAChB,eAAe,GACf,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,SAAS,GACT,cAAc,GACd,aAAa,GACb,SAAS,GACT,eAAe,GACf,oBAAoB,GACpB,gBAAgB,GAChB,WAAW,GACX,QAAQ,GACR,cAAc,GACd,aAAa,GACb,QAAQ,GACR,SAAS,GACT,sBAAsB,GACtB,oBAAoB,GACpB,UAAU,GACV,MAAM,GACN,UAAU,GACV,YAAY,GACZ,WAAW,GACX,KAAK,GACL,KAAK,GACL,kBAAkB,GAClB,cAAc,GACd,eAAe,GACf,WAAW,GACX,eAAe,GACf,MAAM,GACN,KAAK,GACL,OAAO,CAAC;AAEX,MAAM,WAAW,iBAAiB;IACjC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAChC;AAED,qBACa,YAAa,SAAQ,UAAU;IAE3C,OAAgB,MAAM,4BAAY;IAES,IAAI,EAAE,SAAS,CAAU;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACA,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACG,QAAQ,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACjD,QAAQ,EAAE,OAAO,CAAS;IACH,QAAQ,EAAE,OAAO,CAAS;IAClD,YAAY,CAAC,EAAE,iBAAiB,CAAC;IAChC,QAAQ,EAAE,OAAO,CAAS;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGrD,OAAO,CAAC,OAAO,CAAS;IAER,OAAO,EAAG,gBAAgB,CAAC;IAEpD,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAE5C,OAAO,CAAC,aAAa,CAAc;;IAQ1B,iBAAiB;IAK1B,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAG/B;IAEF,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CASjC;IAEF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAK5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAG3B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAI1B;IAEF,iBAAiB;IAOjB,MAAM,IAAI,IAAI;IAIL,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAItB,IAAI,cAAc,IAAI,MAAM,GAAG,IAAI,CAElC;IAED,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAItC;IAED,IAAI,YAAY,IAAI,MAAM,GAAG,IAAI,CAEhC;IACD,IAAI,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAIpC;IAED,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,IAAI;IAMhG,aAAa,IAAI,OAAO;IAIxB,cAAc,IAAI,OAAO;IAIzB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAK/B,MAAM;CA0Cf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD"}
+{"version":3,"file":"sds-textfield.d.ts","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.ts"],"names":[],"mappings":"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"}

package/dist/sds-textfield/sds-textfield.js

@@ -11,7 +11,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { guardedCustomElement } from '../utils/guarded-custom-element';
 import { styles } from './sds-textfield.styles';
 import '../sds-icon/sds-icon';
-import { renderErrorMessage } from '../utils/renderErrorMessage';
+import '../sds-alert/sds-alert';
 let SDSTextField = class SDSTextField extends LitElement {
     constructor() {
         super();
@@ -19,6 +19,7 @@ let SDSTextField = class SDSTextField extends LitElement {
         this.disabled = false;
         this.readOnly = false;
         this.required = false;
+        this.size = 'md';
         // State
         this.hasIcon = false;
         this._defaultValue = '';
@@ -123,14 +124,12 @@ let SDSTextField = class SDSTextField extends LitElement {
         const textfieldClasses = {
             'sds-textfield': true,
             'sds-textfield--error': Boolean(this.errorMessage),
-            'sds-textfield--disabled': Boolean(this.disabled),
-            'sds-textfield--readonly': Boolean(this.readOnly),
             'sds-textfield--has-icon': this.hasIcon,
         };
         return html `
 			<div class="${classMap(textfieldClasses)}">
 				${this.label
-            ? html `<label for="sds-textfield" class="sds-textfield__label">${this.label}</label>`
+            ? html `<label for="sds-textfield" class="sds-textfield__label">${this.readOnly ? html `<sds-icon name="lock-material-filled" size="m"></sds-icon>` : nothing}</sds-icon>${this.label}</label>`
             : nothing}
 				${this.helpText ? html `<p class="sds-textfield__help-text">${this.helpText}</p>` : nothing}
 				<div class="sds-textfield__input-container">
@@ -156,7 +155,7 @@ let SDSTextField = class SDSTextField extends LitElement {
 					/>
 					<slot name="after" @slotchange="${this.handleSlotChange}" aria-hidden="true"></slot>
 				</div>
-				${renderErrorMessage(this.errorMessage, 'sds-textfield__error-message', this.disabled)}
+				${this.errorMessage ? html `<sds-alert variant="secondary" data-palette="danger"><p slot="message">${this.errorMessage}</p></sds-alert>` : nothing}
 			</div>
 		`;
     }
@@ -206,6 +205,9 @@ __decorate([
 __decorate([
     property({ type: Number, reflect: true })
 ], SDSTextField.prototype, "maxlength", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSTextField.prototype, "size", void 0);
 __decorate([
     state()
 ], SDSTextField.prototype, "hasIcon", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"sds-textfield.js","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-textfield.styles';\n\nimport '../sds-icon/sds-icon';\nimport { renderErrorMessage } from '../utils/renderErrorMessage';\n\ntype InputType = 'text' | 'email' | 'tel' | 'number' | 'password' | 'search' | 'url';\nexport type AutocompleteTypes =\n\t| 'off'\n\t| 'on'\n\t| 'name'\n\t| 'honorific-prefix'\n\t| 'given-name'\n\t| 'additional-name'\n\t| 'family-name'\n\t| 'honorific-suffix'\n\t| 'nickname'\n\t| 'email'\n\t| 'username'\n\t| 'new-password'\n\t| 'current-password'\n\t| 'one-time-code'\n\t| 'organization-title'\n\t| 'organization'\n\t| 'street-address'\n\t| 'address-line1'\n\t| 'address-line2'\n\t| 'address-line3'\n\t| 'address-level4'\n\t| 'address-level3'\n\t| 'address-level2'\n\t| 'address-level1'\n\t| 'country'\n\t| 'country-name'\n\t| 'postal-code'\n\t| 'cc-name'\n\t| 'cc-given-name'\n\t| 'cc-additional-name'\n\t| 'cc-family-name'\n\t| 'cc-number'\n\t| 'cc-exp'\n\t| 'cc-exp-month'\n\t| 'cc-exp-year'\n\t| 'cc-csc'\n\t| 'cc-type'\n\t| 'transaction-currency'\n\t| 'transaction-amount'\n\t| 'language'\n\t| 'bday'\n\t| 'bday-day'\n\t| 'bday-month'\n\t| 'bday-year'\n\t| 'sex'\n\t| 'tel'\n\t| 'tel-country-code'\n\t| 'tel-national'\n\t| 'tel-area-code'\n\t| 'tel-local'\n\t| 'tel-extension'\n\t| 'impp'\n\t| 'url'\n\t| 'photo';\n\nexport interface SDSTextFieldProps {\n\ttype?: InputType;\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?: AutocompleteTypes;\n\trequired?: boolean;\n\tpattern?: string;\n\tminlength?: number;\n\tmaxlength?: 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-textfield')\nexport class SDSTextField extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t@property({ type: String, reflect: true }) type: InputType = 'text';\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?: AutocompleteTypes;\n\t@property({ type: Boolean, reflect: true }) required: boolean = false;\n\t@property({ type: String, reflect: true }) pattern?: string;\n\t@property({ type: Number, reflect: true }) minlength?: number;\n\t@property({ type: Number, reflect: true }) maxlength?: number;\n\n\t// State\n\t@state() private hasIcon = false;\n\n\t@query('#sds-textfield') control!: HTMLInputElement;\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 readonly handleSlotChange = (e: Event) => {\n\t\tconst slot = e.target as HTMLSlotElement;\n\t\tthis.hasIcon = slot.assignedNodes({ flatten: true }).length > 0;\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 readonly _handleInputChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tconst currentValue = (event.target as HTMLInputElement).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\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 textfieldClasses = {\n\t\t\t'sds-textfield': true,\n\t\t\t'sds-textfield--error': Boolean(this.errorMessage),\n\t\t\t'sds-textfield--disabled': Boolean(this.disabled),\n\t\t\t'sds-textfield--readonly': Boolean(this.readOnly),\n\t\t\t'sds-textfield--has-icon': this.hasIcon,\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(textfieldClasses)}\">\n\t\t\t\t${this.label\n\t\t\t\t\t? html`<label for=\"sds-textfield\" class=\"sds-textfield__label\">${this.label}</label>`\n\t\t\t\t\t: nothing}\n\t\t\t\t${this.helpText ? html`<p class=\"sds-textfield__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"sds-textfield__input-container\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tclass=\"sds-textfield__input\"\n\t\t\t\t\t\ttype=\"${this.type}\"\n\t\t\t\t\t\tid=\"sds-textfield\"\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\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\tautocomplete=\"${ifDefined(this.autocomplete as any)}\"\n\t\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t\tpattern=\"${ifDefined(this.pattern)}\"\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/>\n\t\t\t\t\t<slot name=\"after\" @slotchange=\"${this.handleSlotChange}\" aria-hidden=\"true\"></slot>\n\t\t\t\t</div>\n\t\t\t\t${renderErrorMessage(this.errorMessage, 'sds-textfield__error-message', this.disabled)}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-textfield': SDSTextField;\n\t}\n}\n"]}
+{"version":3,"file":"sds-textfield.js","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-textfield.styles';\n\nimport '../sds-icon/sds-icon';\nimport '../sds-alert/sds-alert';\nimport { SDS_SIZES } from '../types';\n\ntype InputType = 'text' | 'email' | 'tel' | 'number' | 'password' | 'search' | 'url';\ntype InputSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\nexport type AutocompleteTypes =\n\t| 'off'\n\t| 'on'\n\t| 'name'\n\t| 'honorific-prefix'\n\t| 'given-name'\n\t| 'additional-name'\n\t| 'family-name'\n\t| 'honorific-suffix'\n\t| 'nickname'\n\t| 'email'\n\t| 'username'\n\t| 'new-password'\n\t| 'current-password'\n\t| 'one-time-code'\n\t| 'organization-title'\n\t| 'organization'\n\t| 'street-address'\n\t| 'address-line1'\n\t| 'address-line2'\n\t| 'address-line3'\n\t| 'address-level4'\n\t| 'address-level3'\n\t| 'address-level2'\n\t| 'address-level1'\n\t| 'country'\n\t| 'country-name'\n\t| 'postal-code'\n\t| 'cc-name'\n\t| 'cc-given-name'\n\t| 'cc-additional-name'\n\t| 'cc-family-name'\n\t| 'cc-number'\n\t| 'cc-exp'\n\t| 'cc-exp-month'\n\t| 'cc-exp-year'\n\t| 'cc-csc'\n\t| 'cc-type'\n\t| 'transaction-currency'\n\t| 'transaction-amount'\n\t| 'language'\n\t| 'bday'\n\t| 'bday-day'\n\t| 'bday-month'\n\t| 'bday-year'\n\t| 'sex'\n\t| 'tel'\n\t| 'tel-country-code'\n\t| 'tel-national'\n\t| 'tel-area-code'\n\t| 'tel-local'\n\t| 'tel-extension'\n\t| 'impp'\n\t| 'url'\n\t| 'photo';\n\nexport interface SDSTextFieldProps {\n\ttype?: InputType;\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?: AutocompleteTypes;\n\trequired?: boolean;\n\tpattern?: string;\n\tminlength?: number;\n\tmaxlength?: number;\n\tsize?: InputSize;\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-textfield')\nexport class SDSTextField extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t@property({ type: String, reflect: true }) type: InputType = 'text';\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?: AutocompleteTypes;\n\t@property({ type: Boolean, reflect: true }) required: boolean = false;\n\t@property({ type: String, reflect: true }) pattern?: string;\n\t@property({ type: Number, reflect: true }) minlength?: number;\n\t@property({ type: Number, reflect: true }) maxlength?: number;\n\t@property({ type: String, reflect: true }) size: InputSize = 'md';\n\n\t// State\n\t@state() private hasIcon = false;\n\n\t@query('#sds-textfield') control!: HTMLInputElement;\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 readonly handleSlotChange = (e: Event) => {\n\t\tconst slot = e.target as HTMLSlotElement;\n\t\tthis.hasIcon = slot.assignedNodes({ flatten: true }).length > 0;\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 readonly _handleInputChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tconst currentValue = (event.target as HTMLInputElement).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\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 textfieldClasses = {\n\t\t\t'sds-textfield': true,\n\t\t\t'sds-textfield--error': Boolean(this.errorMessage),\n\t\t\t'sds-textfield--has-icon': this.hasIcon,\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(textfieldClasses)}\">\n\t\t\t\t${this.label\n\t\t\t\t\t? html`<label for=\"sds-textfield\" class=\"sds-textfield__label\">${this.readOnly ? html`<sds-icon name=\"lock-material-filled\" size=\"m\"></sds-icon>` : nothing}</sds-icon>${this.label}</label>`\n\t\t\t\t\t: nothing}\n\t\t\t\t${this.helpText ? html`<p class=\"sds-textfield__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"sds-textfield__input-container\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tclass=\"sds-textfield__input\"\n\t\t\t\t\t\ttype=\"${this.type}\"\n\t\t\t\t\t\tid=\"sds-textfield\"\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\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\tautocomplete=\"${ifDefined(this.autocomplete as any)}\"\n\t\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t\tpattern=\"${ifDefined(this.pattern)}\"\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/>\n\t\t\t\t\t<slot name=\"after\" @slotchange=\"${this.handleSlotChange}\" aria-hidden=\"true\"></slot>\n\t\t\t\t</div>\n\t\t\t\t${this.errorMessage ? html`<sds-alert variant=\"secondary\" data-palette=\"danger\"><p slot=\"message\">${this.errorMessage}</p></sds-alert>` : nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-textfield': SDSTextField;\n\t}\n}\n"]}