@warp-ds/elements 2.3.0-next.17 → 2.3.0-next.19

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

@@ -1,3 +1,3 @@
-import { WarpStep, WarpSteps } from './index.js';
-export declare const Steps: import("@lit/react").ReactWebComponent<WarpSteps, {}>;
+import { WarpStep, WarpStepIndicator } from './index.js';
+export declare const StepIndicator: import("@lit/react").ReactWebComponent<WarpStepIndicator, {}>;
 export declare const Step: import("@lit/react").ReactWebComponent<WarpStep, {}>;

package/dist/packages/steps/react.js

@@ -4,8 +4,8 @@ import React from 'react';
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
-export const Steps = createComponent({
-    tagName: 'w-steps',
+export const StepIndicator = createComponent({
+    tagName: 'w-step-indicator',
     elementClass: Component,
     react: React,
 });

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

@@ -1,15 +1,15 @@
 import { StoryObj } from '@storybook/react';
-import { Steps } from './react';
+import { StepIndicator } from './react';
 declare const _default: {
     title: string;
-    component: import("@lit/react").ReactWebComponent<import(".").WarpSteps, {}>;
+    component: import("@lit/react").ReactWebComponent<import(".").WarpStepIndicator, {}>;
 };
 export default _default;
-export type Story = StoryObj<typeof Steps>;
+export type Story = StoryObj<typeof StepIndicator>;
 export declare const Default: Story;
 export declare const Horizontal: Story;
 export declare const RightAligned: Story;
-export declare const SimpleSteps: Story;
+export declare const SimpleStepIndicator: Story;
 export declare const SimpleHorizontal: Story;
 export declare const AllCompleted: Story;
 export declare const MinimalExample: Story;

package/dist/packages/steps/steps.react.stories.js

@@ -1,15 +1,15 @@
 import React from 'react';
-import { Steps, Step } from './react';
+import { Step, StepIndicator } from './react';
 export default {
-    title: 'Components/Steps',
-    component: Steps,
+    title: 'Components/Step Indicator',
+    component: StepIndicator,
 };
 export const Default = {
     args: {
         horizontal: false,
         right: false,
     },
-    render: (args) => (React.createElement(Steps, { horizontal: args.horizontal, right: args.right },
+    render: (args) => (React.createElement(StepIndicator, { horizontal: args.horizontal, right: args.right },
         React.createElement(Step, { completed: true },
             React.createElement("h3", null, "Step 1: Account Setup"),
             React.createElement("p", null, "Create your account and verify your email address.")),
@@ -28,7 +28,7 @@ export const Horizontal = {
         horizontal: true,
         right: false,
     },
-    render: (args) => (React.createElement(Steps, { horizontal: args.horizontal, right: args.right },
+    render: (args) => (React.createElement(StepIndicator, { horizontal: args.horizontal, right: args.right },
         React.createElement(Step, { completed: true },
             React.createElement("h4", null, "Setup"),
             React.createElement("p", null, "Account created")),
@@ -47,7 +47,7 @@ export const RightAligned = {
         horizontal: false,
         right: true,
     },
-    render: (args) => (React.createElement(Steps, { horizontal: args.horizontal, right: args.right },
+    render: (args) => (React.createElement(StepIndicator, { horizontal: args.horizontal, right: args.right },
         React.createElement(Step, { completed: true },
             React.createElement("h3", null, "Order Placed"),
             React.createElement("p", null, "Your order has been received and is being processed."),
@@ -63,8 +63,8 @@ export const RightAligned = {
             React.createElement("h3", null, "Shipped"),
             React.createElement("p", null, "Your order is on its way!")))),
 };
-export const SimpleSteps = {
-    render: () => (React.createElement(Steps, null,
+export const SimpleStepIndicator = {
+    render: () => (React.createElement(StepIndicator, null,
         React.createElement(Step, { completed: true },
             React.createElement("strong", null, "Step 1")),
         React.createElement(Step, { completed: true },
@@ -77,7 +77,7 @@ export const SimpleSteps = {
             React.createElement("strong", null, "Step 5")))),
 };
 export const SimpleHorizontal = {
-    render: () => (React.createElement(Steps, { horizontal: true },
+    render: () => (React.createElement(StepIndicator, { horizontal: true },
         React.createElement(Step, { completed: true },
             React.createElement("strong", null, "Start")),
         React.createElement(Step, { completed: true },
@@ -90,7 +90,7 @@ export const SimpleHorizontal = {
             React.createElement("strong", null, "End")))),
 };
 export const AllCompleted = {
-    render: () => (React.createElement(Steps, null,
+    render: () => (React.createElement(StepIndicator, null,
         React.createElement(Step, { completed: true },
             React.createElement("h3", null, "Registration"),
             React.createElement("p", null, "Account successfully created")),
@@ -105,7 +105,7 @@ export const AllCompleted = {
             React.createElement("p", null, "You're all set to get started!")))),
 };
 export const MinimalExample = {
-    render: () => (React.createElement(Steps, null,
+    render: () => (React.createElement(StepIndicator, null,
         React.createElement(Step, { completed: true }, "First"),
         React.createElement(Step, { active: true }, "Second"),
         React.createElement(Step, null, "Third"))),

package/dist/packages/steps/steps.stories.js

@@ -1,8 +1,8 @@
 import { html } from 'lit';
 import './index.js';
 const meta = {
-    title: 'Components/Steps',
-    component: 'w-steps',
+    title: 'Components/Step Indicator',
+    component: 'w-step-indicator',
     argTypes: {
         horizontal: {
             control: { type: 'boolean' },
@@ -23,7 +23,7 @@ export const Default = {
         right: false,
     },
     render: (args) => html `
-    <w-steps ?horizontal=${args.horizontal} ?right=${args.right}>
+    <w-step-indicator ?horizontal=${args.horizontal} ?right=${args.right}>
       <w-step completed>
         <h3>Step 1: Account Setup</h3>
         <p>Create your account and verify your email address.</p>
@@ -40,7 +40,7 @@ export const Default = {
         <h3>Step 4: Confirmation</h3>
         <p>Review and confirm your information.</p>
       </w-step>
-    </w-steps>
+    </w-step-indicator>
   `,
 };
 export const Horizontal = {
@@ -49,7 +49,7 @@ export const Horizontal = {
         right: false,
     },
     render: (args) => html `
-    <w-steps ?horizontal=${args.horizontal} ?right=${args.right}>
+    <w-step-indicator ?horizontal=${args.horizontal} ?right=${args.right}>
       <w-step completed>
         <h4>Setup</h4>
         <p>Account created</p>
@@ -66,7 +66,7 @@ export const Horizontal = {
         <h4>Done</h4>
         <p>Complete setup</p>
       </w-step>
-    </w-steps>
+    </w-step-indicator>
   `,
 };
 export const RightAligned = {
@@ -75,7 +75,7 @@ export const RightAligned = {
         right: true,
     },
     render: (args) => html `
-    <w-steps ?horizontal=${args.horizontal} ?right=${args.right}>
+    <w-step-indicator ?horizontal=${args.horizontal} ?right=${args.right}>
       <w-step completed>
         <h3>Order Placed</h3>
         <p>Your order has been received and is being processed.</p>
@@ -94,12 +94,12 @@ export const RightAligned = {
         <h3>Shipped</h3>
         <p>Your order is on its way!</p>
       </w-step>
-    </w-steps>
+    </w-step-indicator>
   `,
 };
 export const SimpleSteps = {
     render: () => html `
-    <w-steps>
+    <w-step-indicator>
       <w-step completed>
         <strong>Step 1</strong>
       </w-step>
@@ -115,12 +115,12 @@ export const SimpleSteps = {
       <w-step>
         <strong>Step 5</strong>
       </w-step>
-    </w-steps>
+    </w-step-indicator>
   `,
 };
 export const SimpleHorizontal = {
     render: () => html `
-    <w-steps horizontal>
+    <w-step-indicator horizontal>
       <w-step completed>
         <strong>Start</strong>
       </w-step>
@@ -136,12 +136,12 @@ export const SimpleHorizontal = {
       <w-step>
         <strong>End</strong>
       </w-step>
-    </w-steps>
+    </w-step-indicator>
   `,
 };
 export const AllCompleted = {
     render: () => html `
-    <w-steps>
+    <w-step-indicator>
       <w-step completed>
         <h3>Registration</h3>
         <p>Account successfully created</p>
@@ -158,15 +158,15 @@ export const AllCompleted = {
         <h3>Welcome</h3>
         <p>You're all set to get started!</p>
       </w-step>
-    </w-steps>
+    </w-step-indicator>
   `,
 };
 export const MinimalExample = {
     render: () => html `
-    <w-steps>
+    <w-step-indicator>
       <w-step completed>First</w-step>
       <w-step active>Second</w-step>
       <w-step>Third</w-step>
-    </w-steps>
+    </w-step-indicator>
   `,
 };

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@warp-ds/elements",
-  "version": "2.3.0-next.16",
+  "version": "2.3.0-next.18",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1279,7 +1279,7 @@
           }
         },
         {
-          "name": "w-steps",
+          "name": "w-step-indicator",
           "description": "Steps are used to show progress through a process or to guide users through a multi-step task.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/components-steps--docs)\n---\n",
           "doc-url": "",
           "attributes": [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.3.0-next.17",
+  "version": "2.3.0-next.19",
   "packageManager": "pnpm@10.20.0",
   "description": "Custom elements for Warp",
   "exports": {
@@ -310,7 +310,6 @@
     "html-format": "1.1.7",
     "husky": "^9.1.7",
     "lightningcss": "^1.30.1",
-    "lit": "3.x",
     "nanoid": "^5.1.5",
     "playwright": "^1.55.0",
     "prettier": "3.3.2",
@@ -324,25 +323,25 @@
     "vite": "^6.0.0",
     "vitest": "^3.2.4",
     "vitest-browser-lit": "^0.1.0",
-    "vitest-browser-react": "^1.0.1"
-  },
-  "dependencies": {
-    "@lingui/core": "5.2.0",
-    "@lit-labs/rollup-plugin-minify-html-literals": "^0.1.0",
-    "@lit/react": "^1.0.8",
-    "@open-wc/form-control": "^1.0.0",
+    "vitest-browser-react": "^1.0.1",
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-terser": "^0.4.4",
+    "tslib": "^2.8.1",
+    "rollup": "^4.52.3",
+    "@lit-labs/rollup-plugin-minify-html-literals": "^0.1.0",
+    "@lingui/core": "5.2.0",
     "@warp-ds/core": "1.1.8",
     "@warp-ds/css": "2.1.1",
-    "@warp-ds/elements-core": "2.0.1",
     "@warp-ds/icons": "2.5.0",
     "date-fns": "^4.1.0",
-    "rollup": "^4.52.3",
     "scroll-doctor": "2.0.2",
-    "tslib": "^2.8.1"
+    "@open-wc/form-control": "^1.0.0"
+  },
+  "dependencies": {
+    "lit": "3.x",
+    "@lit/react": "^1.0.8"
   },
   "publishConfig": {
     "access": "public"