@warp-ds/elements 2.3.0-next.2 → 2.3.0-next.20

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/packages/switch/index.js

@@ -1,4 +1,4 @@
-var h=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var c=(a,t,n,r)=>{for(var e=r>1?void 0:r?u(t,n):t,l=a.length-1,s;l>=0;l--)(s=a[l])&&(e=(r?s(t,n,e):s(e))||e);return r&&e&&h(t,n,e),e};var d=function(){for(var a=[],t=arguments.length;t--;)a[t]=arguments[t];return a.reduce(function(n,r){return n.concat(typeof r=="string"?r:Array.isArray(r)?d.apply(void 0,r):typeof r=="object"&&r?Object.keys(r).map(function(e){return r[e]?e:""}):"")},[]).join(" ")};import{html as m,LitElement as f}from"lit";import{property as v}from"lit/decorators.js";import{css as b}from"lit";var p=b`
+var h=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var c=(a,t,n,r)=>{for(var o=r>1?void 0:r?u(t,n):t,l=a.length-1,s;l>=0;l--)(s=a[l])&&(o=(r?s(t,n,o):s(o))||o);return r&&o&&h(t,n,o),o};var d=function(){for(var a=[],t=arguments.length;t--;)a[t]=arguments[t];return a.reduce(function(n,r){return n.concat(typeof r=="string"?r:Array.isArray(r)?d.apply(void 0,r):typeof r=="object"&&r?Object.keys(r).map(function(o){return r[o]?o:""}):"")},[]).join(" ")};import{html as m,LitElement as f}from"lit";import{property as v}from"lit/decorators.js";import{css as b}from"lit";var p=b`
   *,
   :before,
   :after {
@@ -2437,7 +2437,7 @@ var h=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var c=(a,t,n,r
                     display: none
                 }
             }
-        `;import{css as w}from"lit";var g=w`*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.bg-\\[--w-color-switch-track-background\\]{background-color:var(--w-color-switch-track-background)}.group:hover .group-hover\\:bg-\\[--w-color-switch-track-background-hover\\]{background-color:var(--w-color-switch-track-background-hover)}.rounded-full{border-radius:9999px}.block{display:block}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.left-0{left:0}.left-4{left:.4rem}.top-0{top:0}.top-4{top:.4rem}.absolute{position:absolute}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled{background-color:var(--w-s-color-background-disabled)}.s-bg-disabled-subtle{background-color:var(--w-s-color-background-disabled-subtle)}.s-bg-primary{background-color:var(--w-s-color-background-primary)}.group:hover .group-hover\\:s-bg-primary-hover{background-color:var(--w-s-color-background-primary-hover)}.shadow-s{box-shadow:var(--w-shadow-s)}.h-16{height:1.6rem}.h-24{height:2.4rem}.h-full{height:100%}.w-16{width:1.6rem}.w-44{width:4.4rem}.w-full{width:100%}.cursor-pointer{cursor:pointer}.pointer-events-none{pointer-events:none}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.translate-x-20{--w-translate-x:2rem;transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.transform-gpu{transform:translate3d(var(--w-translate-x),var(--w-translate-y),var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}`;var o={base:"block relative h-24 w-44 cursor-pointer group focusable rounded-full",disabled:"pointer-events-none",track:"absolute top-0 left-0 h-full w-full rounded-full transition-colors",trackActive:"s-bg-primary group-hover:s-bg-primary-hover",trackInactive:"bg-[--w-color-switch-track-background] group-hover:bg-[--w-color-switch-track-background-hover]",trackDisabled:"s-bg-disabled-subtle",handle:"absolute transform-gpu h-16 w-16 top-4 left-4 rounded-full transition-transform",handleSelected:"translate-x-20",handleNotDisabled:"s-bg shadow-s",handleDisabled:"s-bg-disabled",a11y:"sr-only"},i=class extends f{constructor(){super(...arguments);this.value=!1;this.disabled=!1}get _baseClasses(){return d([o.base,this.disabled&&o.disabled])}get _trackClasses(){return d([o.track,this.disabled&&o.trackDisabled,!this.disabled&&(this.value?o.trackActive:o.trackInactive)])}get _handleClasses(){return d([o.handle,this.value&&o.handleSelected,this.disabled?o.handleDisabled:o.handleNotDisabled])}_handleClick(){this.disabled||(this.value=!this.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0})))}render(){return m`
+        `;import{css as w}from"lit";var g=w`*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.bg-\\[--w-s-color-border-strong\\]{background-color:var(--w-s-color-border-strong)}.group:hover .group-hover\\:bg-\\[--w-s-color-border-strong-hover\\]{background-color:var(--w-s-color-border-strong-hover)}.border{border-width:1px}.rounded-full{border-radius:9999px}.block{display:block}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.left-0{left:0}.left-4{left:.4rem}.top-0{top:0}.top-4{top:.4rem}.absolute{position:absolute}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled{background-color:var(--w-s-color-background-disabled)}.s-bg-disabled-subtle{background-color:var(--w-s-color-background-disabled-subtle)}.s-bg-primary{background-color:var(--w-s-color-background-primary)}.group:hover .group-hover\\:s-bg-hover{background-color:var(--w-s-color-background-hover)}.group:hover .group-hover\\:s-bg-primary-hover{background-color:var(--w-s-color-background-primary-hover)}.s-border-disabled{border-color:var(--w-s-color-border-disabled)}.s-border-strong{border-color:var(--w-s-color-border-strong)}.group:hover .group-hover\\:s-border-strong-hover{border-color:var(--w-s-color-border-strong-hover)}.h-16{height:1.6rem}.h-24{height:2.4rem}.h-full{height:100%}.w-16{width:1.6rem}.w-44{width:4.4rem}.w-full{width:100%}.cursor-pointer{cursor:pointer}.pointer-events-none{pointer-events:none}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.translate-x-20{--w-translate-x:2rem;transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.transform-gpu{transform:translate3d(var(--w-translate-x),var(--w-translate-y),var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}`;var e={base:"block relative h-24 w-44 cursor-pointer group focusable rounded-full",disabled:"pointer-events-none",track:"absolute top-0 left-0 h-full w-full rounded-full transition-colors",trackActive:"s-bg-primary group-hover:s-bg-primary-hover",trackInactive:"s-bg border s-border-strong group-hover:s-bg-hover group-hover:s-border-strong-hover",trackDisabledOn:"s-bg-disabled",trackDisabledOff:"s-bg-disabled-subtle border s-border-disabled",handle:"absolute transform-gpu h-16 w-16 top-4 left-4 rounded-full transition-transform",handleSelected:"translate-x-20",handleActive:"s-bg",handleNotDisabled:"bg-[--w-s-color-border-strong] group-hover:bg-[--w-s-color-border-strong-hover]",handleDisabledOn:"s-bg-disabled-subtle",handleDisabledOff:"s-bg-disabled",a11y:"sr-only"},i=class extends f{constructor(){super(...arguments);this.value=!1;this.disabled=!1}get _baseClasses(){return d([e.base,this.disabled&&e.disabled])}get _trackClasses(){return d([e.track,this.disabled?this.value?e.trackDisabledOn:e.trackDisabledOff:this.value?e.trackActive:e.trackInactive])}get _handleClasses(){return d([e.handle,this.value&&e.handleSelected,this.disabled?this.value?e.handleDisabledOn:e.handleDisabledOff:this.value?e.handleActive:e.handleNotDisabled])}_handleClick(){this.disabled||(this.value=!this.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0})))}render(){return m`
       <div>
         <button
           type="button"
@@ -2446,7 +2446,8 @@ var h=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var c=(a,t,n,r
           class=${this._baseClasses}
           aria-disabled=${this.disabled}
           ?disabled=${this.disabled}
-          @click=${this._handleClick}>
+          @click=${this._handleClick}
+        >
           <span data-testid="track" class=${this._trackClasses}></span>
           <span data-testid="handle" class=${this._handleClasses}></span>
         </button>