@warp-ds/elements 2.10.0-next.15 → 2.10.0-next.17

package/dist/packages/snackbar-item/styles.js

@@ -1,111 +1,133 @@
 import { css } from "lit";
 export const styles = css `
-    :host {
-        display: block;
-
-        --_snackbar-item-bg: var(--w-c-snackbar-item-bg, var(--w-color-tooltip-background-static));
-        --_snackbar-item-action-bg-hover: var(--w-c-snackbar-item-action-bg-hover, var(--w-color-tooltip-background-static));
-        --_snackbar-item-action-bg-active: var(--w-c-snackbar-item-action-bg-active, var(--w-color-tooltip-background-static));
-        --_snackbar-item-border-radius: var(--w-c-snackbar-item-radius, 8px);
-        --_snackbar-item-box-shadow: var(--w-c-snackbar-item-box-shadow, var(--w-shadow-l));
-        --_snackbar-item-color: var(--w-c-snackbar-item-color, var(--w-s-color-text-inverted-static));
-        --_snackbar-item-action-color-hover: var(--w-c-snackbar-item-action-color-hover, var(--w-s-color-text-inverted-static));
-        --_snackbar-item-action-color-active: var(--w-c-snackbar-item-action-color-active, var(--w-s-color-text-inverted-static));
-        --_snackbar-item-max-width: var(--w-c-snackbar-item-max-width, 480px);
-        --_snackbar-item-min-width: var(--w-c-snackbar-item-min-width, 328px);
-        --_snackbar-item-padding: var(--w-c-snackbar-item-padding, 8px);
-    }
-
-    /* Using a padding-less div as target so we get animation to and from zero height */
-    .animation-wrapper {
-        border-radius: var(--_snackbar-item-border-radius); /* Avoid sharp bottom corners during the transitino */
-    }
-
-    [part='item'] {
-        background-color: var(--_snackbar-item-bg);
-        border-radius: var(--_snackbar-item-border-radius);
-        box-shadow: var(--_snackbar-item-box-shadow);
-        color: var(--_snackbar-item-color);
-        max-width: var(--_snackbar-item-max-width);
-        min-width: var(--_snackbar-item-min-width);
-        padding: var(--_snackbar-item-padding);
-        
-        display: grid;
-        column-gap: 8px;
-        grid-template:
-            "icon message inline-action"
-            "block-action block-action block-action";
-        grid-template-columns: auto 1fr auto;
-        align-items: center;
-    }
-
-    [part='item'] w-button,
-    [part='item'] ::slotted(w-button) {
-        --w-c-button-bg: var(--_snackbar-item-bg);
-        --w-c-button-bg-active: var(--_snackbar-item-action-bg-active);
-        --w-c-button-bg-hover: var(--_snackbar-item-action-bg-hover);
-        --w-c-button-color: var(--_snackbar-item-color);
-        --w-c-button-color-active: var(--_snackbar-item-action-color-active);
-        --w-c-button-color-hover: var(--_snackbar-item-action-color-hover);
-    }
-
-    [part='icon'] {
-        grid-area: icon;
-
-        color: var(--_snackbar-item-color);
-        padding-block: 4px;
-    }
-
-    [part='icon'] ::slotted(w-icon) {
-        display: block; /* override default inline-block to avoid line-height */
-        margin-inline-start: 4px;
-    }
-
-    [part='icon'] ::slotted(w-icon[name="SuccessFilled"]) {
-        color: var(--w-s-color-icon-positive);
-    }
-    
-    [part='icon'] ::slotted(w-icon[name="WarningFilled"]) {
-        color: var(--w-s-color-icon-warning);
-    }
-    
-    [part='icon'] ::slotted(w-icon[name="ErrorFilled"]) {
-        color: var(--w-s-color-icon-negative);
-    }
-    
-    [part='icon'] ::slotted(w-icon[name="InfoFilled"]) {
-        color: var(--w-s-color-icon-info);
-    }
-    
-    [part='message'] {
-        grid-area: message;
-
-        align-self: center;
-        font-size: var(--w-font-size-s);
-        line-height: var(--w-line-height-s);
-        padding-block: 7px;
-    }
-
-    [part='action'] {
-        grid-area: inline-action;
-
-        display: flex;
-        column-gap: 2px; /* to allow space for focus outline */
-        justify-content: flex-end;
-        padding-inline-start: 8px;
-    }
-    
-    :host([action-placement='block']) [part='action'] {
-        grid-area: block-action;
-
-    }
-
-    w-attention [slot='message'] {
-        font-size: var(--w-font-size-s);
-        line-height: var(--w-line-height-s);
-    }
-
-    kbd {
-        font-family: var(--w-font-family);
-    }
+	:host {
+		display: block;
+
+		--_snackbar-item-bg: var(
+			--w-c-snackbar-item-bg,
+			var(--w-color-tooltip-background-static)
+		);
+		--_snackbar-item-action-bg-hover: var(
+			--w-c-snackbar-item-action-bg-hover,
+			var(--w-color-tooltip-background-static)
+		);
+		--_snackbar-item-action-bg-active: var(
+			--w-c-snackbar-item-action-bg-active,
+			var(--w-color-tooltip-background-static)
+		);
+		--_snackbar-item-border-radius: var(--w-c-snackbar-item-radius, 8px);
+		--_snackbar-item-box-shadow: var(
+			--w-c-snackbar-item-box-shadow,
+			var(--w-shadow-l)
+		);
+		--_snackbar-item-color: var(
+			--w-c-snackbar-item-color,
+			var(--w-s-color-text-inverted-static)
+		);
+		--_snackbar-item-action-color-hover: var(
+			--w-c-snackbar-item-action-color-hover,
+			var(--w-s-color-text-inverted-static)
+		);
+		--_snackbar-item-action-color-active: var(
+			--w-c-snackbar-item-action-color-active,
+			var(--w-s-color-text-inverted-static)
+		);
+		--_snackbar-item-max-width: var(--w-c-snackbar-item-max-width, 480px);
+		--_snackbar-item-min-width: var(--w-c-snackbar-item-min-width, 328px);
+		--_snackbar-item-padding: var(--w-c-snackbar-item-padding, 8px);
+	}
+
+	/* Using a padding-less div as target so we get animation to and from zero height */
+	.animation-wrapper {
+		border-radius: var(
+			--_snackbar-item-border-radius
+		); /* Avoid sharp bottom corners during the transitino */
+	}
+
+	[part="item"] {
+		background-color: var(--_snackbar-item-bg);
+		border-radius: var(--_snackbar-item-border-radius);
+		box-shadow: var(--_snackbar-item-box-shadow);
+		color: var(--_snackbar-item-color);
+		max-width: var(--_snackbar-item-max-width);
+		min-width: var(--_snackbar-item-min-width);
+		padding: var(--_snackbar-item-padding);
+
+		display: grid;
+		column-gap: 8px;
+		grid-template:
+			"icon message inline-action"
+			"block-action block-action block-action";
+		grid-template-columns: auto 1fr auto;
+		align-items: center;
+	}
+
+	[part="item"] w-button,
+	[part="item"] ::slotted(w-button) {
+		--w-c-button-bg: var(--_snackbar-item-bg);
+		--w-c-button-bg-active: var(--_snackbar-item-action-bg-active);
+		--w-c-button-bg-hover: var(--_snackbar-item-action-bg-hover);
+		--w-c-button-color: var(--_snackbar-item-color);
+		--w-c-button-color-active: var(--_snackbar-item-action-color-active);
+		--w-c-button-color-hover: var(--_snackbar-item-action-color-hover);
+	}
+
+	[part="icon"] {
+		grid-area: icon;
+
+		color: var(--_snackbar-item-color);
+		padding-block: 4px;
+	}
+
+	[part="icon"] ::slotted(w-icon) {
+		display: block; /* override default inline-block to avoid line-height */
+		margin-inline-start: 4px;
+	}
+
+	[part="icon"] ::slotted(w-icon[name="SuccessFilled"]) {
+		color: var(--w-s-color-icon-positive);
+	}
+
+	[part="icon"] ::slotted(w-icon[name="WarningFilled"]) {
+		color: var(--w-s-color-icon-warning);
+	}
+
+	[part="icon"] ::slotted(w-icon[name="ErrorFilled"]) {
+		color: var(--w-s-color-icon-negative);
+	}
+
+	[part="icon"] ::slotted(w-icon[name="InfoFilled"]) {
+		color: var(--w-s-color-icon-info);
+	}
+
+	[part="message"] {
+		grid-area: message;
+
+		align-self: center;
+		font-size: var(--w-font-size-s);
+		line-height: var(--w-line-height-s);
+		padding-block: 7px;
+	}
+
+	[part="action"] {
+		grid-area: inline-action;
+
+		display: flex;
+		column-gap: 2px; /* to allow space for focus outline */
+		justify-content: flex-end;
+		padding-inline-start: 8px;
+	}
+
+	:host([action-placement="block"]) [part="action"] {
+		grid-area: block-action;
+	}
+
+	w-attention [slot="message"] {
+		font-size: var(--w-font-size-s);
+		line-height: var(--w-line-height-s);
+	}
+
+	kbd {
+		font-family: var(--w-font-family);
+	}
 `;

package/dist/packages/step/react.d.ts

@@ -1,2 +1,2 @@
-import { WarpStep } from './step.js';
+import { WarpStep } from "./step.js";
 export declare const Step: import("@lit/react").ReactWebComponent<WarpStep, {}>;

package/dist/packages/step/react.js

@@ -1,11 +1,11 @@
-import { createComponent } from '@lit/react';
-import { LitElement } from 'lit';
-import React from 'react';
+import { createComponent } from "@lit/react";
+import { LitElement } from "lit";
+import React from "react";
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
 export const Step = createComponent({
-    tagName: 'w-step',
+    tagName: "w-step",
     elementClass: Component,
     react: React,
 });

package/dist/packages/step/step.d.ts

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
-import '../icon/icon.js';
+import { LitElement } from "lit";
+import "../icon/icon.js";
 export interface StepsContext {
     horizontal?: boolean;
     right?: boolean;

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

@@ -1 +1 @@
-import './step.js';
+import "./step.js";

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

@@ -1,23 +1,23 @@
-import { afterEach, beforeEach, describe, expect, test } from 'vitest';
-import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
-import './step.js';
-describe('w-step React SSR hydration', () => {
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { setupHydrationWarningCapture, testHydration, } from "../../tests/react-hydration";
+import "./step.js";
+describe("w-step React SSR hydration", () => {
     beforeEach(() => setupHydrationWarningCapture());
     afterEach(() => {
         window.__HYDRATION_WARNINGS__ = [];
     });
-    test('default (no attributes) hydrates without warnings', async () => {
-        const warnings = await testHydration('w-step', {});
+    test("default (no attributes) hydrates without warnings", async () => {
+        const warnings = await testHydration("w-step", {});
         expect(warnings).toEqual([]);
     });
-    test('active step hydrates without warnings', async () => {
-        const warnings = await testHydration('w-step', {
+    test("active step hydrates without warnings", async () => {
+        const warnings = await testHydration("w-step", {
             active: true,
         });
         expect(warnings).toEqual([]);
     });
-    test('completed step hydrates without warnings', async () => {
-        const warnings = await testHydration('w-step', {
+    test("completed step hydrates without warnings", async () => {
+        const warnings = await testHydration("w-step", {
             completed: true,
         });
         expect(warnings).toEqual([]);