@politiet/sheriff-web-components 1.3.0 → 2.0.0-beta.1

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

@@ -17,11 +17,6 @@ const primaryButtonIds = [
     'button-primary-medium-icon-only',
     'button-primary-small-icon-only',
     'button-primary-disabled-icon-only',
-    'button-as-link-primary-large',
-    'button-as-link-primary-medium',
-    'button-as-link-primary-small',
-    'button-as-link-icon-before',
-    'button-as-link-icon-after',
 ];
 const secondaryButtonIds = [
     // Secondary
@@ -41,9 +36,6 @@ const secondaryButtonIds = [
     'button-secondary-medium-icon-only',
     'button-secondary-small-icon-only',
     'button-secondary-disabled-icon-only',
-    'button-as-link-secondary-large',
-    'button-as-link-secondary-medium',
-    'button-as-link-secondary-small',
 ];
 const tertiaryButtonIds = [
     // Tertiary
@@ -63,9 +55,6 @@ const tertiaryButtonIds = [
     'button-tertiary-medium-icon-only',
     'button-tertiary-small-icon-only',
     'button-tertiary-disabled-icon-only',
-    'button-as-link-tertiary-large',
-    'button-as-link-tertiary-medium',
-    'button-as-link-tertiary-small',
 ];
 const criticalButtonIds = [
     // Critical
@@ -85,22 +74,70 @@ const criticalButtonIds = [
     'button-critical-medium-icon-only',
     'button-critical-small-icon-only',
     'button-critical-disabled-icon-only',
-    'button-as-link-critical-large',
-    'button-as-link-critical-medium',
-    'button-as-link-critical-small',
+];
+const dangerButtonIds = [
+    // Danger
+    'button-danger-primary-large',
+    'button-danger-primary-medium',
+    'button-danger-primary-small',
+    'button-danger-primary-disabled',
+    'button-danger-primary-large-icon-before',
+    'button-danger-primary-medium-icon-before',
+    'button-danger-primary-small-icon-before',
+    'button-danger-primary-disabled-icon-before',
+    'button-danger-primary-large-icon-after',
+    'button-danger-primary-medium-icon-after',
+    'button-danger-primary-small-icon-after',
+    'button-danger-primary-disabled-icon-after',
+    'button-danger-primary-large-icon-only',
+    'button-danger-primary-medium-icon-only',
+    'button-danger-primary-small-icon-only',
+    'button-danger-primary-disabled-icon-only',
+    'button-danger-secondary-large',
+    'button-danger-secondary-medium',
+    'button-danger-secondary-small',
+    'button-danger-secondary-disabled',
+    'button-danger-secondary-large-icon-before',
+    'button-danger-secondary-medium-icon-before',
+    'button-danger-secondary-small-icon-before',
+    'button-danger-secondary-disabled-icon-before',
+    'button-danger-secondary-large-icon-after',
+    'button-danger-secondary-medium-icon-after',
+    'button-danger-secondary-small-icon-after',
+    'button-danger-secondary-disabled-icon-after',
+    'button-danger-secondary-large-icon-only',
+    'button-danger-secondary-medium-icon-only',
+    'button-danger-secondary-small-icon-only',
+    'button-danger-secondary-disabled-icon-only',
+    'button-danger-tertiary-large',
+    'button-danger-tertiary-medium',
+    'button-danger-tertiary-small',
+    'button-danger-tertiary-disabled',
+    'button-danger-tertiary-large-icon-before',
+    'button-danger-tertiary-medium-icon-before',
+    'button-danger-tertiary-small-icon-before',
+    'button-danger-tertiary-disabled-icon-before',
+    'button-danger-tertiary-large-icon-after',
+    'button-danger-tertiary-medium-icon-after',
+    'button-danger-tertiary-small-icon-after',
+    'button-danger-tertiary-disabled-icon-after',
+    'button-danger-tertiary-large-icon-only',
+    'button-danger-tertiary-medium-icon-only',
+    'button-danger-tertiary-small-icon-only',
+    'button-danger-tertiary-disabled-icon-only',
 ];
 test.describe('button-component', () => {
     test.beforeEach(async ({ page }) => {
         await page.goto('iframe.html?viewMode=docs&id=test-button--docs');
     });
     test('visibility', async ({ page }) => {
-        const buttonIds = [...primaryButtonIds, ...secondaryButtonIds, ...tertiaryButtonIds, ...criticalButtonIds];
+        const buttonIds = [...primaryButtonIds, ...secondaryButtonIds, ...tertiaryButtonIds, ...criticalButtonIds, ...dangerButtonIds];
         for (const id of buttonIds) {
             await expect(page.locator(`#${id}`)).toBeVisible();
         }
     });
     test('design-implementation', async ({ page }) => {
-        const buttonIds = [...primaryButtonIds, ...secondaryButtonIds, ...tertiaryButtonIds, ...criticalButtonIds];
+        const buttonIds = [...primaryButtonIds, ...secondaryButtonIds, ...tertiaryButtonIds, ...criticalButtonIds, ...dangerButtonIds];
         await page.reload();
         for (const id of buttonIds) {
             // Default state
@@ -141,27 +178,5 @@ test.describe('button-component', () => {
         const value = await page.locator('#first-name').getAttribute('value');
         expect(value).toBeNull();
     });
-    test('button-as-link', async ({ page }) => {
-        const buttonAsLink = page.locator('#button-as-link-target-blank');
-        await expect(buttonAsLink).toHaveAttribute('href', 'https://www.politiet.no');
-        const shadowButtonAsLinkHref = await buttonAsLink.evaluate((el) => {
-            const shadowRoot = el.shadowRoot;
-            if (shadowRoot) {
-                const anchorElement = shadowRoot.querySelector('a');
-                return anchorElement?.getAttribute('href');
-            }
-            return null;
-        });
-        await expect(shadowButtonAsLinkHref).toBe('https://www.politiet.no');
-        const shadowButtonAsLinkTarget = await buttonAsLink.evaluate((el) => {
-            const shadowRoot = el.shadowRoot;
-            if (shadowRoot) {
-                const anchorElement = shadowRoot.querySelector('a');
-                return anchorElement?.getAttribute('target');
-            }
-            return null;
-        });
-        await expect(shadowButtonAsLinkTarget).toBe('_blank');
-    });
 });
 //# sourceMappingURL=sds-button.spec.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sds-button.spec.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { test, expect } from '@playwright/test';\n\nconst primaryButtonIds = [\n\t// Primary\n\t'button-primary-large',\n\t'button-primary-medium',\n\t'button-primary-small',\n\t'button-primary-disabled',\n\t'button-primary-large-icon-before',\n\t'button-primary-medium-icon-before',\n\t'button-primary-small-icon-before',\n\t'button-primary-disabled-icon-before',\n\t'button-primary-large-icon-after',\n\t'button-primary-medium-icon-after',\n\t'button-primary-small-icon-after',\n\t'button-primary-disabled-icon-after',\n\t'button-primary-large-icon-only',\n\t'button-primary-medium-icon-only',\n\t'button-primary-small-icon-only',\n\t'button-primary-disabled-icon-only',\n\t'button-as-link-primary-large',\n\t'button-as-link-primary-medium',\n\t'button-as-link-primary-small',\n\t'button-as-link-icon-before',\n\t'button-as-link-icon-after',\n];\nconst secondaryButtonIds = [\n\t// Secondary\n\t'button-secondary-large',\n\t'button-secondary-medium',\n\t'button-secondary-small',\n\t'button-secondary-disabled',\n\t'button-secondary-large-icon-before',\n\t'button-secondary-medium-icon-before',\n\t'button-secondary-small-icon-before',\n\t'button-secondary-disabled-icon-before',\n\t'button-secondary-large-icon-after',\n\t'button-secondary-medium-icon-after',\n\t'button-secondary-small-icon-after',\n\t'button-secondary-disabled-icon-after',\n\t'button-secondary-large-icon-only',\n\t'button-secondary-medium-icon-only',\n\t'button-secondary-small-icon-only',\n\t'button-secondary-disabled-icon-only',\n\t'button-as-link-secondary-large',\n\t'button-as-link-secondary-medium',\n\t'button-as-link-secondary-small',\n];\nconst tertiaryButtonIds = [\n\t// Tertiary\n\t'button-tertiary-large',\n\t'button-tertiary-medium',\n\t'button-tertiary-small',\n\t'button-tertiary-disabled',\n\t'button-tertiary-large-icon-before',\n\t'button-tertiary-medium-icon-before',\n\t'button-tertiary-small-icon-before',\n\t'button-tertiary-disabled-icon-before',\n\t'button-tertiary-large-icon-after',\n\t'button-tertiary-medium-icon-after',\n\t'button-tertiary-small-icon-after',\n\t'button-tertiary-disabled-icon-after',\n\t'button-tertiary-large-icon-only',\n\t'button-tertiary-medium-icon-only',\n\t'button-tertiary-small-icon-only',\n\t'button-tertiary-disabled-icon-only',\n\t'button-as-link-tertiary-large',\n\t'button-as-link-tertiary-medium',\n\t'button-as-link-tertiary-small',\n];\nconst criticalButtonIds = [\n\t// Critical\n\t'button-critical-large',\n\t'button-critical-medium',\n\t'button-critical-small',\n\t'button-critical-disabled',\n\t'button-critical-large-icon-before',\n\t'button-critical-medium-icon-before',\n\t'button-critical-small-icon-before',\n\t'button-critical-disabled-icon-before',\n\t'button-critical-large-icon-after',\n\t'button-critical-medium-icon-after',\n\t'button-critical-small-icon-after',\n\t'button-critical-disabled-icon-after',\n\t'button-critical-large-icon-only',\n\t'button-critical-medium-icon-only',\n\t'button-critical-small-icon-only',\n\t'button-critical-disabled-icon-only',\n\t'button-as-link-critical-large',\n\t'button-as-link-critical-medium',\n\t'button-as-link-critical-small',\n];\n\ntest.describe('button-component', () => {\n\ttest.beforeEach(async ({ page }) => {\n\t\tawait page.goto('iframe.html?viewMode=docs&id=test-button--docs');\n\t});\n\n\ttest('visibility', async ({ page }) => {\n\t\tconst buttonIds = [...primaryButtonIds, ...secondaryButtonIds, ...tertiaryButtonIds, ...criticalButtonIds];\n\n\t\tfor (const id of buttonIds) {\n\t\t\tawait expect(page.locator(`#${id}`)).toBeVisible();\n\t\t}\n\t});\n\n\ttest('design-implementation', async ({ page }) => {\n\t\tconst buttonIds = [...primaryButtonIds, ...secondaryButtonIds, ...tertiaryButtonIds, ...criticalButtonIds];\n\t\tawait page.reload();\n\n\t\tfor (const id of buttonIds) {\n\t\t\t// Default state\n\t\t\tawait expect(page.locator(`#${id}`)).toHaveScreenshot(`${id}.png`);\n\t\t\t// Hover state\n\t\t\tpage.locator(`#${id}`).hover();\n\t\t\tawait expect(page.locator(`#${id}`)).toHaveScreenshot(`${id}-hover.png`);\n\t\t\t// Focus state\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\t\t\tpage.locator(`#${id}`).focus();\n\t\t\tconst parentDiv = await page.locator(`#${id}`).locator('xpath=..');\n\t\t\tawait expect(parentDiv).toHaveScreenshot(`${id}-focus.png`);\n\t\t}\n\t});\n\n\ttest('form-submission', async ({ page }) => {\n\t\tlet requestUrl: URL | undefined;\n\t\tpage.on('request', (request) => {\n\t\t\tif (request.url().includes('iframe.html?first-name=John')) {\n\t\t\t\trequestUrl = new URL(request.url());\n\t\t\t}\n\t\t});\n\n\t\tawait page.locator('#first-name').pressSequentially('John');\n\t\tawait page.locator('#submit-button').click();\n\t\tawait expect(requestUrl?.searchParams.get('first-name')).toBe('John');\n\t});\n\n\ttest('form-reset', async ({ page }) => {\n\t\tawait page.locator('#first-name').pressSequentially('John');\n\t\tawait page.locator('#reset-button').click();\n\t\tconst value = await page.locator('#first-name').getAttribute('value');\n\t\texpect(value).toBeNull();\n\t});\n\n\ttest('button-as-link', async ({ page }) => {\n\t\tconst buttonAsLink = page.locator('#button-as-link-target-blank');\n\t\tawait expect(buttonAsLink).toHaveAttribute('href', 'https://www.politiet.no');\n\n\t\tconst shadowButtonAsLinkHref = await buttonAsLink.evaluate((el) => {\n\t\t\tconst shadowRoot = el.shadowRoot;\n\t\t\tif (shadowRoot) {\n\t\t\t\tconst anchorElement = shadowRoot.querySelector('a');\n\t\t\t\treturn anchorElement?.getAttribute('href');\n\t\t\t}\n\t\t\treturn null;\n\t\t});\n\n\t\tawait expect(shadowButtonAsLinkHref).toBe('https://www.politiet.no');\n\n\t\tconst shadowButtonAsLinkTarget = await buttonAsLink.evaluate((el) => {\n\t\t\tconst shadowRoot = el.shadowRoot;\n\t\t\tif (shadowRoot) {\n\t\t\t\tconst anchorElement = shadowRoot.querySelector('a');\n\t\t\t\treturn anchorElement?.getAttribute('target');\n\t\t\t}\n\t\t\treturn null;\n\t\t});\n\n\t\tawait expect(shadowButtonAsLinkTarget).toBe('_blank');\n\t});\n});\n"]}
+{"version":3,"file":"sds-button.spec.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { test, expect } from '@playwright/test';\n\nconst primaryButtonIds = [\n\t// Primary\n\t'button-primary-large',\n\t'button-primary-medium',\n\t'button-primary-small',\n\t'button-primary-disabled',\n\t'button-primary-large-icon-before',\n\t'button-primary-medium-icon-before',\n\t'button-primary-small-icon-before',\n\t'button-primary-disabled-icon-before',\n\t'button-primary-large-icon-after',\n\t'button-primary-medium-icon-after',\n\t'button-primary-small-icon-after',\n\t'button-primary-disabled-icon-after',\n\t'button-primary-large-icon-only',\n\t'button-primary-medium-icon-only',\n\t'button-primary-small-icon-only',\n\t'button-primary-disabled-icon-only',\n];\nconst secondaryButtonIds = [\n\t// Secondary\n\t'button-secondary-large',\n\t'button-secondary-medium',\n\t'button-secondary-small',\n\t'button-secondary-disabled',\n\t'button-secondary-large-icon-before',\n\t'button-secondary-medium-icon-before',\n\t'button-secondary-small-icon-before',\n\t'button-secondary-disabled-icon-before',\n\t'button-secondary-large-icon-after',\n\t'button-secondary-medium-icon-after',\n\t'button-secondary-small-icon-after',\n\t'button-secondary-disabled-icon-after',\n\t'button-secondary-large-icon-only',\n\t'button-secondary-medium-icon-only',\n\t'button-secondary-small-icon-only',\n\t'button-secondary-disabled-icon-only',\n];\nconst tertiaryButtonIds = [\n\t// Tertiary\n\t'button-tertiary-large',\n\t'button-tertiary-medium',\n\t'button-tertiary-small',\n\t'button-tertiary-disabled',\n\t'button-tertiary-large-icon-before',\n\t'button-tertiary-medium-icon-before',\n\t'button-tertiary-small-icon-before',\n\t'button-tertiary-disabled-icon-before',\n\t'button-tertiary-large-icon-after',\n\t'button-tertiary-medium-icon-after',\n\t'button-tertiary-small-icon-after',\n\t'button-tertiary-disabled-icon-after',\n\t'button-tertiary-large-icon-only',\n\t'button-tertiary-medium-icon-only',\n\t'button-tertiary-small-icon-only',\n\t'button-tertiary-disabled-icon-only',\n];\nconst criticalButtonIds = [\n\t// Critical\n\t'button-critical-large',\n\t'button-critical-medium',\n\t'button-critical-small',\n\t'button-critical-disabled',\n\t'button-critical-large-icon-before',\n\t'button-critical-medium-icon-before',\n\t'button-critical-small-icon-before',\n\t'button-critical-disabled-icon-before',\n\t'button-critical-large-icon-after',\n\t'button-critical-medium-icon-after',\n\t'button-critical-small-icon-after',\n\t'button-critical-disabled-icon-after',\n\t'button-critical-large-icon-only',\n\t'button-critical-medium-icon-only',\n\t'button-critical-small-icon-only',\n\t'button-critical-disabled-icon-only',\n];\n\nconst dangerButtonIds = [\n\t// Danger\n\t'button-danger-primary-large',\n\t'button-danger-primary-medium',\n\t'button-danger-primary-small',\n\t'button-danger-primary-disabled',\n\t'button-danger-primary-large-icon-before',\n\t'button-danger-primary-medium-icon-before',\n\t'button-danger-primary-small-icon-before',\n\t'button-danger-primary-disabled-icon-before',\n\t'button-danger-primary-large-icon-after',\n\t'button-danger-primary-medium-icon-after',\n\t'button-danger-primary-small-icon-after',\n\t'button-danger-primary-disabled-icon-after',\n\t'button-danger-primary-large-icon-only',\n\t'button-danger-primary-medium-icon-only',\n\t'button-danger-primary-small-icon-only',\n\t'button-danger-primary-disabled-icon-only',\n\t'button-danger-secondary-large',\n\t'button-danger-secondary-medium',\n\t'button-danger-secondary-small',\n\t'button-danger-secondary-disabled',\n\t'button-danger-secondary-large-icon-before',\n\t'button-danger-secondary-medium-icon-before',\n\t'button-danger-secondary-small-icon-before',\n\t'button-danger-secondary-disabled-icon-before',\n\t'button-danger-secondary-large-icon-after',\n\t'button-danger-secondary-medium-icon-after',\n\t'button-danger-secondary-small-icon-after',\n\t'button-danger-secondary-disabled-icon-after',\n\t'button-danger-secondary-large-icon-only',\n\t'button-danger-secondary-medium-icon-only',\n\t'button-danger-secondary-small-icon-only',\n\t'button-danger-secondary-disabled-icon-only',\n\t'button-danger-tertiary-large',\n\t'button-danger-tertiary-medium',\n\t'button-danger-tertiary-small',\n\t'button-danger-tertiary-disabled',\n\t'button-danger-tertiary-large-icon-before',\n\t'button-danger-tertiary-medium-icon-before',\n\t'button-danger-tertiary-small-icon-before',\n\t'button-danger-tertiary-disabled-icon-before',\n\t'button-danger-tertiary-large-icon-after',\n\t'button-danger-tertiary-medium-icon-after',\n\t'button-danger-tertiary-small-icon-after',\n\t'button-danger-tertiary-disabled-icon-after',\n\t'button-danger-tertiary-large-icon-only',\n\t'button-danger-tertiary-medium-icon-only',\n\t'button-danger-tertiary-small-icon-only',\n\t'button-danger-tertiary-disabled-icon-only',\n];\n\ntest.describe('button-component', () => {\n\ttest.beforeEach(async ({ page }) => {\n\t\tawait page.goto('iframe.html?viewMode=docs&id=test-button--docs');\n\t});\n\n\ttest('visibility', async ({ page }) => {\n\t\tconst buttonIds = [...primaryButtonIds, ...secondaryButtonIds, ...tertiaryButtonIds, ...criticalButtonIds, ...dangerButtonIds];\n\n\t\tfor (const id of buttonIds) {\n\t\t\tawait expect(page.locator(`#${id}`)).toBeVisible();\n\t\t}\n\t});\n\n\ttest('design-implementation', async ({ page }) => {\n\t\tconst buttonIds = [...primaryButtonIds, ...secondaryButtonIds, ...tertiaryButtonIds, ...criticalButtonIds, ...dangerButtonIds];\n\t\tawait page.reload();\n\n\t\tfor (const id of buttonIds) {\n\t\t\t// Default state\n\t\t\tawait expect(page.locator(`#${id}`)).toHaveScreenshot(`${id}.png`);\n\t\t\t// Hover state\n\t\t\tpage.locator(`#${id}`).hover();\n\t\t\tawait expect(page.locator(`#${id}`)).toHaveScreenshot(`${id}-hover.png`);\n\t\t\t// Focus state\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\t\t\tpage.locator(`#${id}`).focus();\n\t\t\tconst parentDiv = await page.locator(`#${id}`).locator('xpath=..');\n\t\t\tawait expect(parentDiv).toHaveScreenshot(`${id}-focus.png`);\n\t\t}\n\t});\n\n\ttest('form-submission', async ({ page }) => {\n\t\tlet requestUrl: URL | undefined;\n\t\tpage.on('request', (request) => {\n\t\t\tif (request.url().includes('iframe.html?first-name=John')) {\n\t\t\t\trequestUrl = new URL(request.url());\n\t\t\t}\n\t\t});\n\n\t\tawait page.locator('#first-name').pressSequentially('John');\n\t\tawait page.locator('#submit-button').click();\n\t\tawait expect(requestUrl?.searchParams.get('first-name')).toBe('John');\n\t});\n\n\ttest('form-reset', async ({ page }) => {\n\t\tawait page.locator('#first-name').pressSequentially('John');\n\t\tawait page.locator('#reset-button').click();\n\t\tconst value = await page.locator('#first-name').getAttribute('value');\n\t\texpect(value).toBeNull();\n\t});\n});\n"]}

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

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

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

@@ -1,153 +1,168 @@
 import { css } from 'lit';
 export const styles = css `
 	:host {
-		--_color-semantic-surface-critical-hover: #b32a23;
+		--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-action-default));
+		--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-action-default));
+		--_sds-button-border-width: var(--sds-button-border-width, var(--sds-border-md));
+		--_sds-button-disabled-opacity: var(--sds-button-disabled-opacity, var(--sds-color-states-disabled-opacity));
+		--_sds-button-focus-color: var(--sds-button-focus-color, var(--sds-color-states-focus-outer));
+		--_sds-button-focus-inner-color: var(--sds-button-focus-inner-color, var(--sds-color-states-focus-inner));
+		--_sds-button-focus-spacing: var(--sds-button-focus-spacing, var(--sds-color-states-focus-spacing));
+		--_sds-button-font-family: var(--sds-button-font, var(--sds-typography-font-family-roboto));
+		--_sds-button-font-size: var(--sds-button-font-size, var(--sds-typography-body-md-desktop-font-size));
+		--_sds-button-font-weight: var(--sds-button-font-weight, var(--sds-typography-body-md-desktop-font-weight));
+		--_sds-button-gap: var(--sds-button-gap, var(--sds-spacing-3xs));
+		--_sds-button-line-height: var(--sds-button-line-height, var(--sds-typography-body-md-desktop-line-height));
+		--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-lg));
+		--_sds-button-padding-block: var(--sds-button-padding-block, 0);
+		--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-xs));
+		--_sds-button-radius: var(--sds-button-radius, var(--sds-radius-sm));
+		--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-accent-action-contrast-default));
+
 		display: inline-block;
 		box-sizing: border-box;
 	}
 
 	.sds-button {
 		align-items: center;
+		background-color: var(--_sds-button-background-color);
+		border-radius: var(--_sds-button-radius);
+		border: var(--_sds-button-border-width) solid var(--_sds-button-border-color);
+		color: var(--_sds-button-text-color);
+		cursor: pointer;
 		display: inline-flex;
-		gap: var(--sds-spacing-3, 8px);
-		justify-content: center;
-		padding: var(--sds-spacing-3) var(--sds-spacing-4);
+		font-family: var(--_sds-button-font-family);
+		font-size: var(--_sds-button-font-size);
+		font-weight: var(--_sds-button-font-weight);
+		gap: var(--_sds-button-gap);
 		inline-size: 100%;
-
-		background-color: var(--sds-color-semantic-surface-action-default);
-		border: 2px solid var(--sds-color-semantic-border-action);
-		border-radius: var(--sds-radius-4);
-		cursor: pointer;
-
-		color: var(--sds-color-semantic-text-on-action);
-		font-family: var(--sds-typography-font-family);
-		font-size: 1rem;
-		font-weight: 500;
-		line-height: 1.5;
+		justify-content: center;
+		line-height: var(--_sds-button-line-height);
+		min-height: var(--_sds-button-min-height);
+		padding: var(--_sds-button-padding-block) var(--_sds-button-padding-inline);
 		text-align: center;
 
 		&:hover {
-			background-color: var(--sds-color-semantic-surface-action-hover);
-			border: 2px solid var(--sds-color-semantic-surface-action-hover);
+			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-action-hover));
+			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-action-hover));
 		}
 
-		&:focus {
-			background-color: var(--sds-color-semantic-surface-action-default);
-			outline: 2px solid var(--sds-color-semantic-surface-action-default);
-			outline-offset: 1px;
+		&:focus-visible {
+			box-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-button-focus-inner-color);
+			outline: 3px solid var(--_sds-button-focus-color);
+			outline-offset: 3px;
 		}
 
 		&:active {
-			background-color: var(--sds-color-semantic-surface-action-active);
-			border: 2px solid var(--sds-color-semantic-surface-action-active);
-			outline: 0;
+			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-action-active));
+			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-action-active));
 		}
 
 		&:disabled {
-			background-color: var(--sds-color-semantic-surface-disabled);
-			border: 2px solid var(--sds-color-semantic-surface-disabled);
-			color: var(--sds-color-semantic-text-subtle);
+			opacity: var(--_sds-button-disabled-opacity);
 			cursor: not-allowed;
+			pointer-events: none;
 		}
 	}
 
-	.sds-button--secondary {
-		background-color: var(--sds-color-semantic-surface-action-inverted);
-		border: 2px solid var(--sds-color-semantic-border-action);
-		color: var(--sds-color-semantic-text-default);
-
-		&:focus {
-			background-color: var(--sds-color-semantic-surface-action-inverted);
-			border: 2px solid var(--sds-color-semantic-border-action);
-		}
+	.sds-button--as-link {
+		inline-size: auto;
+		text-decoration: none;
+	}
 
-		&:hover {
-			background-color: var(--sds-color-semantic-surface-action-subtle);
-		}
+	:host([color='danger']) {
+		--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-action-default));
+		--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-action-default));
 
-		&:active {
-			background-color: var(--sds-color-semantic-surface-action-active);
-			border: 2px solid var(--sds-color-semantic-surface-action-active);
-			color: var(--sds-color-semantic-text-on-action);
-			outline: 0;
+		.sds-button:hover {
+			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-action-hover));
+			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-action-hover));
 		}
 
-		&:disabled {
-			border: 2px solid var(--sds-color-semantic-border-disabled);
-			background: var(--sds-color-semantic-surface-action-inverted);
-			color: var(--sds-color-semantic-text-disabled);
+		.sds-button:active {
+			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-action-active));
+			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-action-active));
 		}
 	}
 
-	.sds-button--tertiary {
-		background-color: transparent;
-		border: 2px solid transparent;
-		color: var(--sds-color-semantic-text-action-default);
+	:host([variant='secondary']) {
+		--_sds-button-background-color: var(--sds-button-background-color, transparent);
+		--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-action-default));
+		--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-accent-action-default));
 
-		&:focus {
-			background-color: transparent;
-			border: 2px solid transparent;
+		.sds-button:hover {
+			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-surface-hover));
 		}
 
-		&:hover {
-			background-color: var(--sds-color-semantic-surface-action-subtle);
-			border: 2px solid transparent;
+		.sds-button:active {
+			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-surface-active));
 		}
+	}
 
-		&:active {
-			background-color: var(--sds-color-semantic-surface-action-active);
-			border: 2px solid var(--sds-color-semantic-surface-action-active);
-			color: var(--sds-color-semantic-text-on-action);
-			outline: 0;
-			position: relative;
+	:host([variant='tertiary']) {
+		--_sds-button-background-color: var(--sds-button-background-color, transparent);
+		--_sds-button-border-color: var(--sds-button-border-color, transparent);
+		--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-accent-action-default));
+
+		.sds-button:hover {
+			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-surface-hover));
+			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-surface-hover));
 		}
 
-		&:disabled {
-			border: 2px solid transparent;
-			background: transparent;
-			color: var(--sds-color-semantic-text-disabled);
+		.sds-button:active {
+			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-surface-active));
+			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-surface-active));
 		}
 	}
 
-	.sds-button--critical {
-		background-color: var(--sds-color-semantic-surface-critical-xtreme);
-		border: 2px solid var(--sds-color-semantic-border-critical);
-		color: var(--sds-color-semantic-text-on-critical);
+	:host([variant='secondary']):host([color='danger']) {
+		--_sds-button-background-color: var(--sds-button-background-color, transparent);
+		--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-action-default));
+		--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-alert-danger-action-default));
 
-		&:focus {
-			background-color: var(--sds-color-semantic-surface-critical-xtreme);
-			border: 2px solid var(--sds-color-semantic-border-critical);
+		.sds-button:hover {
+			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-surface-hover));
 		}
 
-		&:hover {
-			background-color: var(--_color-semantic-surface-critical-hover);
-			border: 2px solid var(--_color-semantic-surface-critical-hover);
+		.sds-button:active {
+			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-surface-active));
 		}
+	}
 
-		&:active {
-			background-color: var(--sds-color-semantic-surface-action-active);
-			border: 2px solid var(--sds-color-semantic-surface-action-active);
+	:host([variant='tertiary']):host([color='danger']) {
+		--_sds-button-background-color: var(--sds-button-background-color, transparent);
+		--_sds-button-border-color: var(--sds-button-border-color, transparent);
+		--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-alert-danger-action-default));
+
+		.sds-button:hover {
+			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-surface-hover));
+			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-surface-hover));
 		}
 
-		&:disabled {
-			background-color: var(--sds-color-semantic-surface-disabled);
-			border: 2px solid var(--sds-color-semantic-surface-disabled);
-			color: var(--sds-color-semantic-text-subtle);
+		.sds-button:active {
+			--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-surface-active));
+			--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-surface-active));
 		}
 	}
 
-	.sds-button--medium {
-		padding: var(--sds-spacing-1) var(--sds-spacing-3);
+	:host([size='medium']), /* Deprecated */
+	:host([size='md']) {
+		--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-md));
+		--_sds-button-padding-block: var(--sds-button-padding-block, var(--sds-spacing-4xs));
+		--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-3xs));
 	}
 
-	.sds-button--small {
+	:host([size='small']), /* Deprecated */
+	:host([size='sm']) {
+		--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-sm));
+		--_sds-button-padding-block: var(--sds-button-padding-block, 0);
+		--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-3xs));
 		font-size: 0.875rem;
-		padding: 0 var(--sds-spacing-3);
 	}
 
-	.sds-button--as-link {
-		inline-size: auto;
-		text-decoration: none;
+	:host([icon]) {
+		--_sds-button-padding-inline: var(--sds-button-padding-inline, 0);
+		min-width: var(--_sds-button-min-height);
 	}
 `;
 //# sourceMappingURL=sds-button.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sds-button.styles.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsJxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_color-semantic-surface-critical-hover: #b32a23;\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.sds-button {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\tgap: var(--sds-spacing-3, 8px);\n\t\tjustify-content: center;\n\t\tpadding: var(--sds-spacing-3) var(--sds-spacing-4);\n\t\tinline-size: 100%;\n\n\t\tbackground-color: var(--sds-color-semantic-surface-action-default);\n\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\tborder-radius: var(--sds-radius-4);\n\t\tcursor: pointer;\n\n\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-size: 1rem;\n\t\tfont-weight: 500;\n\t\tline-height: 1.5;\n\t\ttext-align: center;\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-hover);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-hover);\n\t\t}\n\n\t\t&:focus {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-default);\n\t\t\toutline: 2px solid var(--sds-color-semantic-surface-action-default);\n\t\t\toutline-offset: 1px;\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-disabled);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-disabled);\n\t\t\tcolor: var(--sds-color-semantic-text-subtle);\n\t\t\tcursor: not-allowed;\n\t\t}\n\t}\n\n\t.sds-button--secondary {\n\t\tbackground-color: var(--sds-color-semantic-surface-action-inverted);\n\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\tcolor: var(--sds-color-semantic-text-default);\n\n\t\t&:focus {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-inverted);\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-subtle);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-disabled);\n\t\t\tbackground: var(--sds-color-semantic-surface-action-inverted);\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t}\n\t}\n\n\t.sds-button--tertiary {\n\t\tbackground-color: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--sds-color-semantic-text-action-default);\n\n\t\t&:focus {\n\t\t\tbackground-color: transparent;\n\t\t\tborder: 2px solid transparent;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-subtle);\n\t\t\tborder: 2px solid transparent;\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t\toutline: 0;\n\t\t\tposition: relative;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tborder: 2px solid transparent;\n\t\t\tbackground: transparent;\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t}\n\t}\n\n\t.sds-button--critical {\n\t\tbackground-color: var(--sds-color-semantic-surface-critical-xtreme);\n\t\tborder: 2px solid var(--sds-color-semantic-border-critical);\n\t\tcolor: var(--sds-color-semantic-text-on-critical);\n\n\t\t&:focus {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-critical-xtreme);\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-critical);\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--_color-semantic-surface-critical-hover);\n\t\t\tborder: 2px solid var(--_color-semantic-surface-critical-hover);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t}\n\n\t\t&:disabled {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-disabled);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-disabled);\n\t\t\tcolor: var(--sds-color-semantic-text-subtle);\n\t\t}\n\t}\n\n\t.sds-button--medium {\n\t\tpadding: var(--sds-spacing-1) var(--sds-spacing-3);\n\t}\n\n\t.sds-button--small {\n\t\tfont-size: 0.875rem;\n\t\tpadding: 0 var(--sds-spacing-3);\n\t}\n\n\t.sds-button--as-link {\n\t\tinline-size: auto;\n\t\ttext-decoration: none;\n\t}\n`;\n"]}
+{"version":3,"file":"sds-button.styles.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqKxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-action-default));\n\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-action-default));\n\t\t--_sds-button-border-width: var(--sds-button-border-width, var(--sds-border-md));\n\t\t--_sds-button-disabled-opacity: var(--sds-button-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\t\t--_sds-button-focus-color: var(--sds-button-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-button-focus-inner-color: var(--sds-button-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-button-focus-spacing: var(--sds-button-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-button-font-family: var(--sds-button-font, var(--sds-typography-font-family-roboto));\n\t\t--_sds-button-font-size: var(--sds-button-font-size, var(--sds-typography-body-md-desktop-font-size));\n\t\t--_sds-button-font-weight: var(--sds-button-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-button-gap: var(--sds-button-gap, var(--sds-spacing-3xs));\n\t\t--_sds-button-line-height: var(--sds-button-line-height, var(--sds-typography-body-md-desktop-line-height));\n\t\t--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-lg));\n\t\t--_sds-button-padding-block: var(--sds-button-padding-block, 0);\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-xs));\n\t\t--_sds-button-radius: var(--sds-button-radius, var(--sds-radius-sm));\n\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-accent-action-contrast-default));\n\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.sds-button {\n\t\talign-items: center;\n\t\tbackground-color: var(--_sds-button-background-color);\n\t\tborder-radius: var(--_sds-button-radius);\n\t\tborder: var(--_sds-button-border-width) solid var(--_sds-button-border-color);\n\t\tcolor: var(--_sds-button-text-color);\n\t\tcursor: pointer;\n\t\tdisplay: inline-flex;\n\t\tfont-family: var(--_sds-button-font-family);\n\t\tfont-size: var(--_sds-button-font-size);\n\t\tfont-weight: var(--_sds-button-font-weight);\n\t\tgap: var(--_sds-button-gap);\n\t\tinline-size: 100%;\n\t\tjustify-content: center;\n\t\tline-height: var(--_sds-button-line-height);\n\t\tmin-height: var(--_sds-button-min-height);\n\t\tpadding: var(--_sds-button-padding-block) var(--_sds-button-padding-inline);\n\t\ttext-align: center;\n\n\t\t&:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-action-hover));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-action-hover));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-button-focus-inner-color);\n\t\t\toutline: 3px solid var(--_sds-button-focus-color);\n\t\t\toutline-offset: 3px;\n\t\t}\n\n\t\t&:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-action-active));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-action-active));\n\t\t}\n\n\t\t&:disabled {\n\t\t\topacity: var(--_sds-button-disabled-opacity);\n\t\t\tcursor: not-allowed;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.sds-button--as-link {\n\t\tinline-size: auto;\n\t\ttext-decoration: none;\n\t}\n\n\t:host([color='danger']) {\n\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-action-default));\n\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-action-default));\n\n\t\t.sds-button:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t}\n\n\t\t.sds-button:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-action-active));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-action-active));\n\t\t}\n\t}\n\n\t:host([variant='secondary']) {\n\t\t--_sds-button-background-color: var(--sds-button-background-color, transparent);\n\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-action-default));\n\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-accent-action-default));\n\n\t\t.sds-button:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-surface-hover));\n\t\t}\n\n\t\t.sds-button:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-surface-active));\n\t\t}\n\t}\n\n\t:host([variant='tertiary']) {\n\t\t--_sds-button-background-color: var(--sds-button-background-color, transparent);\n\t\t--_sds-button-border-color: var(--sds-button-border-color, transparent);\n\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-accent-action-default));\n\n\t\t.sds-button:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-surface-hover));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-surface-hover));\n\t\t}\n\n\t\t.sds-button:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-surface-active));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-surface-active));\n\t\t}\n\t}\n\n\t:host([variant='secondary']):host([color='danger']) {\n\t\t--_sds-button-background-color: var(--sds-button-background-color, transparent);\n\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-action-default));\n\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-alert-danger-action-default));\n\n\t\t.sds-button:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-surface-hover));\n\t\t}\n\n\t\t.sds-button:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-surface-active));\n\t\t}\n\t}\n\n\t:host([variant='tertiary']):host([color='danger']) {\n\t\t--_sds-button-background-color: var(--sds-button-background-color, transparent);\n\t\t--_sds-button-border-color: var(--sds-button-border-color, transparent);\n\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-alert-danger-action-default));\n\n\t\t.sds-button:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-surface-hover));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-surface-hover));\n\t\t}\n\n\t\t.sds-button:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-surface-active));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-surface-active));\n\t\t}\n\t}\n\n\t:host([size='medium']), /* Deprecated */\n\t:host([size='md']) {\n\t\t--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-md));\n\t\t--_sds-button-padding-block: var(--sds-button-padding-block, var(--sds-spacing-4xs));\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-3xs));\n\t}\n\n\t:host([size='small']), /* Deprecated */\n\t:host([size='sm']) {\n\t\t--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-sm));\n\t\t--_sds-button-padding-block: var(--sds-button-padding-block, 0);\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-3xs));\n\t\tfont-size: 0.875rem;\n\t}\n\n\t:host([icon]) {\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, 0);\n\t\tmin-width: var(--_sds-button-min-height);\n\t}\n`;\n"]}

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

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+export interface SDSCardProps {
+    link: string;
+}
+export declare class SDSCard extends LitElement {
+    static styles: import("lit").CSSResult[];
+    link: string;
+    private headingSlot;
+    private contentSlot;
+    protected firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sds-card': SDSCard;
+    }
+}
+//# sourceMappingURL=sds-card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-card.d.ts","sourceRoot":"","sources":["../../src/sds-card/sds-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,MAAM,WAAW,YAAY;IAC5B,IAAI,EAAE,MAAM,CAAC;CACb;AAED,qBACa,OAAQ,SAAQ,UAAU;IAEtC,OAAgB,MAAM,4BAAY;IAGS,IAAI,EAAG,MAAM,CAAC;IAGlC,OAAO,CAAC,WAAW,CAAmB;IACtC,OAAO,CAAC,WAAW,CAAmB;cAE1C,YAAY,IAAI,IAAI;IAsB9B,MAAM;CAWf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}

package/dist/sds-card/sds-card.js

@@ -0,0 +1,58 @@
+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 } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { guardedCustomElement } from '../utils/guarded-custom-element';
+import { validateSlotContent } from '../utils/slot-validator';
+import { styles } from './sds-card.styles';
+let SDSCard = class SDSCard extends LitElement {
+    firstUpdated() {
+        const contentWarning = '[sds-card] text slot should only contain top-level <p> elements with no nested elements:';
+        const headerWarning = '[sds-card] header slot should only contain one of <h2>–<h6> elements:';
+        validateSlotContent(this.contentSlot, ['P'], false, contentWarning);
+        const headerNodes = this.headingSlot.assignedNodes({ flatten: true });
+        if (headerNodes.length > 0) {
+            validateSlotContent(this.headingSlot, ['H2', 'H3', 'H4', 'H5', 'H6'], false, headerWarning);
+        }
+        this.contentSlot.addEventListener('slotchange', () => {
+            validateSlotContent(this.contentSlot, ['P'], false, contentWarning);
+        });
+        this.headingSlot.addEventListener('slotchange', () => {
+            const nodes = this.headingSlot.assignedNodes({ flatten: true });
+            if (nodes.length > 0) {
+                validateSlotContent(this.headingSlot, ['H2', 'H3', 'H4', 'H5', 'H6'], false, headerWarning);
+            }
+        });
+    }
+    render() {
+        return html `
+			<article class="sds-card">
+				<a href="${this.link}" class="sds-card__link">
+					<slot name="heading" id="heading"></slot>
+					<slot name="text" id="content"></slot>
+					<sds-icon name="arrow_forward-material-outlined" size="md" class="sds-card__icon"></sds-icon>
+				</a>
+			</article>
+		`;
+    }
+};
+// Styling
+SDSCard.styles = [styles];
+__decorate([
+    property({ type: String, reflect: true })
+], SDSCard.prototype, "link", void 0);
+__decorate([
+    query('slot#heading')
+], SDSCard.prototype, "headingSlot", void 0);
+__decorate([
+    query('slot#content')
+], SDSCard.prototype, "contentSlot", void 0);
+SDSCard = __decorate([
+    guardedCustomElement('sds-card')
+], SDSCard);
+export { SDSCard };
+//# sourceMappingURL=sds-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-card.js","sourceRoot":"","sources":["../../src/sds-card/sds-card.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAOpC,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAWnB,YAAY;QAC9B,MAAM,cAAc,GAAG,0FAA0F,CAAC;QAClH,MAAM,aAAa,GAAG,uEAAuE,CAAC;QAE9F,mBAAmB,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC;QACpE,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACtE,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC5B,mBAAmB,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC;QAC7F,CAAC;QAED,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE;YACpD,mBAAmB,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC;QACrE,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE;YACpD,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;YAChE,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACtB,mBAAmB,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC;YAC7F,CAAC;QACF,CAAC,CAAC,CAAC;IACJ,CAAC;IAEQ,MAAM;QACd,OAAO,IAAI,CAAA;;eAEE,IAAI,CAAC,IAAI;;;;;;GAMrB,CAAC;IACH,CAAC;;AA1CD,UAAU;AACM,cAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGS;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAAe;AAG1B;IAA9B,KAAK,CAAC,cAAc,CAAC;4CAAuC;AAC9B;IAA9B,KAAK,CAAC,cAAc,CAAC;4CAAuC;AATjD,OAAO;IADnB,oBAAoB,CAAC,UAAU,CAAC;GACpB,OAAO,CA4CnB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { validateSlotContent } from '../utils/slot-validator';\nimport { styles } from './sds-card.styles';\n\nexport interface SDSCardProps {\n\tlink: string;\n}\n\n@guardedCustomElement('sds-card')\nexport class SDSCard extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String, reflect: true }) link!: string;\n\n\t// Slots\n\t@query('slot#heading') private headingSlot!: HTMLSlotElement;\n\t@query('slot#content') private contentSlot!: HTMLSlotElement;\n\n\tprotected override firstUpdated(): void {\n\t\tconst contentWarning = '[sds-card] text slot should only contain top-level <p> elements with no nested elements:';\n\t\tconst headerWarning = '[sds-card] header slot should only contain one of <h2>–<h6> elements:';\n\n\t\tvalidateSlotContent(this.contentSlot, ['P'], false, contentWarning);\n\t\tconst headerNodes = this.headingSlot.assignedNodes({ flatten: true });\n\t\tif (headerNodes.length > 0) {\n\t\t\tvalidateSlotContent(this.headingSlot, ['H2', 'H3', 'H4', 'H5', 'H6'], false, headerWarning);\n\t\t}\n\n\t\tthis.contentSlot.addEventListener('slotchange', () => {\n\t\t\tvalidateSlotContent(this.contentSlot, ['P'], false, contentWarning);\n\t\t});\n\n\t\tthis.headingSlot.addEventListener('slotchange', () => {\n\t\t\tconst nodes = this.headingSlot.assignedNodes({ flatten: true });\n\t\t\tif (nodes.length > 0) {\n\t\t\t\tvalidateSlotContent(this.headingSlot, ['H2', 'H3', 'H4', 'H5', 'H6'], false, headerWarning);\n\t\t\t}\n\t\t});\n\t}\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<article class=\"sds-card\">\n\t\t\t\t<a href=\"${this.link}\" class=\"sds-card__link\">\n\t\t\t\t\t<slot name=\"heading\" id=\"heading\"></slot>\n\t\t\t\t\t<slot name=\"text\" id=\"content\"></slot>\n\t\t\t\t\t<sds-icon name=\"arrow_forward-material-outlined\" size=\"md\" class=\"sds-card__icon\"></sds-icon>\n\t\t\t\t</a>\n\t\t\t</article>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-card': SDSCard;\n\t}\n}\n"]}

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

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

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

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