@warp-ds/elements 2.4.0 → 2.5.0-next.2

package/dist/packages/slider/styles/w-slider.styles.js

@@ -1,148 +0,0 @@
-import { css } from 'lit';
-export const wSliderStyles = css `
-  .w-slider {
-    position: relative;
-    border: none;
-    padding: 0;
-    margin: 0;
-    display: grid;
-    width: 100%;
-    grid-template-areas:
-      "label"
-      "description"
-      "slider"
-      "error";
-    grid-template-columns: 1fr;
-
-    --w-slider-track-background: var(--w-s-color-background-disabled-subtle);
-    --w-slider-track-active-background: var(--w-s-color-background-primary);
-    --w-slider-track-height: 4px;
-    --w-slider-track-active-height: 6px;
-    --w-slider-thumb-background: var(--w-s-color-background-primary);
-    --w-slider-thumb-background-hover: var(
-      --w-s-color-background-primary-hover
-    );
-    --w-slider-thumb-size: 28px;
-    --w-slider-thumb-offset: calc(var(--w-slider-thumb-size) / 2);
-    --w-slider-marker-color: var(--w-s-color-border);
-
-
-    /* Vertical position of range and markers */
-    --_range-top: calc(
-      var(--w-slider-thumb-size) / 2 +
-        calc(
-          var(--w-slider-track-active-height) - calc(
-              var(--w-slider-track-height) / 2
-            ) + 1px
-        )
-    );
-  }
-
-  .w-slider__label {
-    grid-area: label;
-    font-size: var(--w-font-size-s);
-    line-height: var(--w-line-height-s);
-    font-weight: bold;
-    padding-bottom: 8px;
-    color: var(--w-s-color-text);
-  }
-
-  .w-slider__description {
-    grid-area: description;
-  }
-
-  .w-slider__range {
-    align-self: center;
-    background: var(--w-slider-track-background);
-    border-radius: 4px;
-    height: var(--w-slider-track-active-height);
-    position: absolute;
-    /* For range sliders to avoid overlapping the slider thumbs we transform them to
-    be visually to the left and right of their respective input[type="range"]. This
-    padding is here so the active-range element is the same width as the input fields. */
-    padding-inline-start: var(--active-range-inline-start-padding, 0);
-    padding-inline-end: var(--active-range-inline-end-padding, 0);
-    top: var(--_range-top);
-    left: 0;
-    right: 0;
-    grid-area: slider;
-  }
-
-  .w-slider__active-range {
-    box-sizing: content-box;
-    background: var(--w-slider-track-active-background);
-    height: var(--w-slider-track-active-height);
-
-    border-start-start-radius: var(--active-range-border-radius, 0);
-    border-end-start-radius: var(--active-range-border-radius, 0);
-
-    /* takes over-under into the calculation if set, as this makes the ranges longer in reality */
-    --max-with-offset: calc(var(--max) + var(--over-under-offset, 0));
-
-    /* calculate the offset for the "from" thumb in percentage to move the range visualisation from the left edge, using max() to avoid going off screen */
-    --offset-percentage: calc(calc(var(--from) - var(--min)) / calc(var(--max-with-offset) - var(--min)) * 100);
-    margin-left: calc(max(var(--offset-percentage) * 1%, 0px) - 1px);
-
-    /* calculate the width of the selected range in percentage, clamped between min/max */
-    --value-range: calc(var(--max-with-offset) - var(--min));
-    --range-span-percentage: calc(calc(min(var(--to), var(--max-with-offset)) - max(var(--min), var(--from))) / var(--value-range) * 100 );
-    width: calc(var(--range-span-percentage) * 1% + 1px);
-
-
-    z-index: 1;
-  }
-
-  .w-slider__markers {
-    --_marker-height: 7px;
-    --_marker-width: 1px;
-
-    align-self: center;
-
-    /* Creates a linear gradient with --_marker-width wide markers
-       followed by enough transparent that we can repeat the gradient
-       along the X axis and have markers visible where we want them. */
-    background: linear-gradient(
-        to right,
-        var(--w-slider-marker-color) var(--_marker-width),
-        rgba(0, 0, 0, 0) 1px calc(100% - 1px),
-        var(--w-slider-marker-color) 100%
-      )
-      repeat-x;
-    --_step-width-as-percent: calc(var(--markers) / var(--_value-range) * 100);
-    background-size: calc(var(--_step-width-as-percent) * 1%)
-      var(--_marker-height);
-
-    background-position: bottom 0 left 8px right 8px;
-    position: absolute;
-    top: calc(var(--_range-top) + 2px);
-    left: 1px;
-    right: 1px;
-    grid-area: slider;
-    height: var(--_marker-height);
-    margin-inline: var(--w-slider-thumb-offset);
-  }
-
-  .w-slider__error {
-    grid-area: error;
-    padding-top: 8px;
-    font-size: var(--w-font-size-xs);
-    line-height: var(--w-line-height-xs);
-    color: var(--w-s-color-text-negative);
-  }
-
-  .w-slider__help-text {
-    grid-area: error;
-    padding-top: 8px;
-    font-size: var(--w-font-size-xs);
-    line-height: var(--w-line-height-xs);
-  }
-
-  slot::slotted(w-slider-thumb) {
-    position: static;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    grid-area: slider;
-  }
-`;

package/dist/packages/slider/styles.d.ts

@@ -1 +0,0 @@
-export declare const styles: import("lit").CSSResult;

package/dist/packages/slider/styles.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export const styles = css `*,: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}.hidden{display:none}.absolute{position:absolute}.relative{position:relative}.static{position:static}.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}`;

package/dist/packages/stepindicator/index.d.ts

@@ -1,37 +0,0 @@
-import { LitElement } from 'lit';
-import '@warp-ds/icons/elements/check-16';
-/**
- * Steps are used to show progress through a process or to guide users through a multi-step task.
- *
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/components-steps--docs)
- */
-declare class WarpStepIndicator extends LitElement {
-    horizontal: boolean;
-    right: boolean;
-    static styles: import("lit").CSSResult[];
-    constructor();
-    updated(): void;
-    updateStepsContext(): void;
-    render(): import("lit").TemplateResult<1>;
-}
-interface StepsContext {
-    horizontal?: boolean;
-    right?: boolean;
-    isLast?: boolean;
-    isFirst?: boolean;
-}
-/**
- * Individual step component that shows a single step in a process
- */
-declare class WarpStep extends LitElement {
-    active: boolean;
-    completed: boolean;
-    private _context;
-    static styles: import("lit").CSSResult[];
-    constructor();
-    connectedCallback(): void;
-    setContext(context: StepsContext): void;
-    getAriaLabel(): string;
-    render(): import("lit").TemplateResult<1>;
-}
-export { WarpStepIndicator, WarpStep };

package/dist/packages/stepindicator/index.js

@@ -1,195 +0,0 @@
-// @warp-css;
-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 { classNames } from '@chbphone55/classnames';
-import { i18n } from '@lingui/core';
-import { html, LitElement } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import '@warp-ds/icons/elements/check-16';
-import { activateI18n } from '../i18n.js';
-import { reset } from '../styles.js';
-import { messages as daMessages } from './locales/da/messages.mjs';
-import { messages as enMessages } from './locales/en/messages.mjs';
-import { messages as fiMessages } from './locales/fi/messages.mjs';
-import { messages as nbMessages } from './locales/nb/messages.mjs';
-import { messages as svMessages } from './locales/sv/messages.mjs';
-import { styles } from './styles.js';
-const ccSteps = {
-    wrapper: 'w-full',
-    horizontal: 'flex',
-};
-const ccStep = {
-    base: 'group/step',
-    vertical: 'group/stepv grid-rows-[20px_auto] grid grid-flow-col gap-x-16',
-    horizontal: 'group/steph grid-rows-[auto_20px] grid-cols-[1fr_20px_1fr] flex-1 grid items-center',
-    alignLeft: 'grid-cols-[20px_1fr]',
-    alignRight: 'grid-cols-[1fr_20px] text-right',
-    dot: 'rounded-full border-2 h-20 w-20 transition-colors duration-300 s-icon-inverted',
-    dotAlignRight: 'col-start-2',
-    dotHorizontal: 'row-start-2 justify-self-end',
-    dotActive: 's-border-primary s-bg-primary',
-    dotIncomplete: 's-border s-bg',
-    line: 'transition-colors duration-300',
-    lineVertical: 'w-2 h-full justify-self-center',
-    lineAlignRight: 'col-start-2',
-    lineHorizontal: 'h-2 w-full row-start-2',
-    lineIncomplete: 's-bg-disabled',
-    lineComplete: 's-bg-primary',
-    content: 'last:mb-0',
-    contentVertical: 'row-span-2 pb-32',
-    contentHorizontal: 'col-span-3 px-16 row-start-1 text-center',
-};
-/**
- * Steps are used to show progress through a process or to guide users through a multi-step task.
- *
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/components-steps--docs)
- */
-class WarpStepIndicator extends LitElement {
-    static { this.styles = [reset, styles]; }
-    constructor() {
-        super();
-        this.horizontal = false;
-        this.right = false;
-        activateI18n(enMessages, nbMessages, fiMessages, daMessages, svMessages);
-    }
-    updated() {
-        this.updateStepsContext();
-    }
-    updateStepsContext() {
-        // Provide context to child step elements
-        const steps = this.querySelectorAll('w-step');
-        steps.forEach((step, index) => {
-            step.setContext({
-                horizontal: this.horizontal,
-                right: this.right,
-                isLast: index === steps.length - 1,
-                isFirst: index === 0,
-            });
-        });
-    }
-    render() {
-        const classes = classNames([ccSteps.wrapper, this.horizontal && ccSteps.horizontal]);
-        return html `
-      <div role="list" class=${classes} ${this.horizontal && `style='display: grid; grid-auto-rows: 1fr;grid-template-columns: 1fr;'`}>
-        <slot></slot>
-      </div>
-    `;
-    }
-}
-__decorate([
-    property({ type: Boolean, reflect: true })
-], WarpStepIndicator.prototype, "horizontal", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], WarpStepIndicator.prototype, "right", void 0);
-const availableAriaLabels = {
-    completed: i18n._({
-        id: 'steps.aria.completed',
-        message: 'Step indicator completed circle',
-        comment: 'Completed circle',
-    }),
-    active: i18n._({
-        id: 'steps.aria.active',
-        message: 'Step indicator active circle',
-        comment: 'Active circle',
-    }),
-    default: i18n._({
-        id: 'steps.aria.emptyCircle',
-        message: 'Empty circle',
-        comment: 'Empty circle',
-    }),
-};
-/**
- * Individual step component that shows a single step in a process
- */
-class WarpStep extends LitElement {
-    static { this.styles = [reset, styles]; }
-    constructor() {
-        super();
-        this.active = false;
-        this.completed = false;
-        this._context = { horizontal: false, right: false, isLast: false, isFirst: false };
-        activateI18n(enMessages, nbMessages, fiMessages, daMessages, svMessages);
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.setAttribute('role', 'listitem');
-    }
-    setContext(context) {
-        this._context = context;
-        this.requestUpdate();
-    }
-    getAriaLabel() {
-        if (this.completed)
-            return availableAriaLabels.completed;
-        if (this.active)
-            return availableAriaLabels.active;
-        return availableAriaLabels.default;
-    }
-    render() {
-        const vertical = !this._context.horizontal;
-        const left = !this._context.right;
-        const isFirst = this._context.isFirst;
-        const isLast = this._context.isLast;
-        const stepClasses = classNames([
-            ccStep.base,
-            vertical ? ccStep.vertical : ccStep.horizontal,
-            vertical ? (left ? ccStep.alignLeft : ccStep.alignRight) : '',
-        ]);
-        const lineHorizontalClasses = classNames([
-            ccStep.line,
-            ccStep.lineHorizontal,
-            this.active || this.completed ? ccStep.lineComplete : ccStep.lineIncomplete,
-            isFirst ? 'invisible' : '',
-        ]);
-        const dotClasses = classNames([
-            ccStep.dot,
-            vertical ? (!left ? ccStep.dotAlignRight : '') : ccStep.dotHorizontal,
-            this.active || this.completed ? ccStep.dotActive : ccStep.dotIncomplete,
-        ]);
-        const lineClasses = classNames([
-            ccStep.line,
-            vertical ? ccStep.lineVertical : ccStep.lineHorizontal,
-            vertical && !left ? ccStep.lineAlignRight : '',
-            this.completed ? ccStep.lineComplete : ccStep.lineIncomplete,
-            isLast ? 'invisible' : '',
-        ]);
-        const contentClasses = classNames([
-            ccStep.content,
-            vertical ? ccStep.contentVertical : ccStep.contentHorizontal,
-            isLast ? 'pb-0' : '',
-        ]);
-        return html `
-      <div class="${stepClasses}" style=${this._context.horizontal && 'height: 100%;'}>
-        ${!vertical ? html `<div class=${lineHorizontalClasses}></div>` : ''}
-        <div class=${dotClasses} role="img" aria-label=${this.getAriaLabel()} ${this.active ? 'aria-current="step"' : ''}>
-          ${this.completed ? html `<w-icon-check-16 data-testid="completed-icon"></w-icon-check-16>` : ''}
-        </div>
-        <div class=${lineClasses}></div>
-        <div class=${contentClasses} ${this._context.horizontal && `style='height:100%;'`}>
-          <slot></slot>
-        </div>
-      </div>
-    `;
-    }
-}
-__decorate([
-    property({ type: Boolean, reflect: true })
-], WarpStep.prototype, "active", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], WarpStep.prototype, "completed", void 0);
-__decorate([
-    state()
-], WarpStep.prototype, "_context", void 0);
-if (!customElements.get('w-step-indicator')) {
-    customElements.define('w-step-indicator', WarpStepIndicator);
-}
-if (!customElements.get('w-step')) {
-    customElements.define('w-step', WarpStep);
-}
-export { WarpStepIndicator, WarpStep };

package/dist/packages/stepindicator/locales/da/messages.d.mts

@@ -1 +0,0 @@
-export const messages: any;

package/dist/packages/stepindicator/locales/da/messages.mjs

@@ -1 +0,0 @@
-/*eslint-disable*/ export const messages = JSON.parse("{\"steps.aria.emptyCircle\":[\"Tom cirkel\"],\"steps.aria.active\":[\"Trinindikator aktiv cirkel\"],\"steps.aria.completed\":[\"Trinindikator fuldført cirkel\"]}");

package/dist/packages/stepindicator/locales/en/messages.d.mts

@@ -1 +0,0 @@
-export const messages: any;

package/dist/packages/stepindicator/locales/en/messages.mjs

@@ -1 +0,0 @@
-/*eslint-disable*/ export const messages = JSON.parse("{\"steps.aria.emptyCircle\":[\"Empty circle\"],\"steps.aria.active\":[\"Step indicator active circle\"],\"steps.aria.completed\":[\"Step indicator completed circle\"]}");

package/dist/packages/stepindicator/locales/fi/messages.d.mts

@@ -1 +0,0 @@
-export const messages: any;

package/dist/packages/stepindicator/locales/fi/messages.mjs

@@ -1 +0,0 @@
-/*eslint-disable*/ export const messages = JSON.parse("{\"steps.aria.emptyCircle\":[\"Tyhjä ympyrä\"],\"steps.aria.active\":[\"Vaiheilmaisin aktiivinen ympyrä\"],\"steps.aria.completed\":[\"Vaiheilmaisin valmis ympyrä\"]}");

package/dist/packages/stepindicator/locales/nb/messages.d.mts

@@ -1 +0,0 @@
-export const messages: any;

package/dist/packages/stepindicator/locales/nb/messages.mjs

@@ -1 +0,0 @@
-/*eslint-disable*/ export const messages = JSON.parse("{\"steps.aria.emptyCircle\":[\"Tom sirkel\"],\"steps.aria.active\":[\"Stegindikator aktiv sirkel\"],\"steps.aria.completed\":[\"Stegindikator hel sirkel\"]}");

package/dist/packages/stepindicator/locales/sv/messages.d.mts

@@ -1 +0,0 @@
-export const messages: any;

package/dist/packages/stepindicator/locales/sv/messages.mjs

@@ -1 +0,0 @@
-/*eslint-disable*/ export const messages = JSON.parse("{\"steps.aria.emptyCircle\":[\"Tom cirkel\"],\"steps.aria.active\":[\"Stegindikator aktiv cirkel\"],\"steps.aria.completed\":[\"Stegindikator fulländad cirkel\"]}");

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

@@ -1,3 +0,0 @@
-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/stepindicator/stepindicator.react.stories.d.ts

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

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

@@ -1,112 +0,0 @@
-import React from 'react';
-import { Step, StepIndicator } from './react';
-export default {
-    title: 'Components/Step Indicator',
-    component: StepIndicator,
-};
-export const Default = {
-    args: {
-        horizontal: false,
-        right: false,
-    },
-    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.")),
-        React.createElement(Step, { active: true },
-            React.createElement("h3", null, "Step 2: Profile Information"),
-            React.createElement("p", null, "Fill in your personal details and preferences.")),
-        React.createElement(Step, null,
-            React.createElement("h3", null, "Step 3: Payment Method"),
-            React.createElement("p", null, "Add a payment method to complete your registration.")),
-        React.createElement(Step, null,
-            React.createElement("h3", null, "Step 4: Confirmation"),
-            React.createElement("p", null, "Review and confirm your information.")))),
-};
-export const Horizontal = {
-    args: {
-        horizontal: true,
-        right: false,
-    },
-    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")),
-        React.createElement(Step, { completed: true },
-            React.createElement("h4", null, "Profile"),
-            React.createElement("p", null, "Information added")),
-        React.createElement(Step, { active: true },
-            React.createElement("h4", null, "Payment"),
-            React.createElement("p", null, "Add payment method")),
-        React.createElement(Step, null,
-            React.createElement("h4", null, "Done"),
-            React.createElement("p", null, "Complete setup")))),
-};
-export const RightAligned = {
-    args: {
-        horizontal: false,
-        right: true,
-    },
-    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."),
-            React.createElement("small", null, "2:34 PM")),
-        React.createElement(Step, { completed: true },
-            React.createElement("h3", null, "Payment Confirmed"),
-            React.createElement("p", null, "Payment has been successfully processed."),
-            React.createElement("small", null, "2:35 PM")),
-        React.createElement(Step, { active: true },
-            React.createElement("h3", null, "Preparing for Shipment"),
-            React.createElement("p", null, "Your items are being prepared for shipment.")),
-        React.createElement(Step, null,
-            React.createElement("h3", null, "Shipped"),
-            React.createElement("p", null, "Your order is on its way!")))),
-};
-export const SimpleStepIndicator = {
-    render: () => (React.createElement(StepIndicator, null,
-        React.createElement(Step, { completed: true },
-            React.createElement("strong", null, "Step 1")),
-        React.createElement(Step, { completed: true },
-            React.createElement("strong", null, "Step 2")),
-        React.createElement(Step, { active: true },
-            React.createElement("strong", null, "Step 3")),
-        React.createElement(Step, null,
-            React.createElement("strong", null, "Step 4")),
-        React.createElement(Step, null,
-            React.createElement("strong", null, "Step 5")))),
-};
-export const SimpleHorizontal = {
-    render: () => (React.createElement(StepIndicator, { horizontal: true },
-        React.createElement(Step, { completed: true },
-            React.createElement("strong", null, "Start")),
-        React.createElement(Step, { completed: true },
-            React.createElement("strong", null, "Progress")),
-        React.createElement(Step, { active: true },
-            React.createElement("strong", null, "Current")),
-        React.createElement(Step, null,
-            React.createElement("strong", null, "Next")),
-        React.createElement(Step, null,
-            React.createElement("strong", null, "End")))),
-};
-export const AllCompleted = {
-    render: () => (React.createElement(StepIndicator, null,
-        React.createElement(Step, { completed: true },
-            React.createElement("h3", null, "Registration"),
-            React.createElement("p", null, "Account successfully created")),
-        React.createElement(Step, { completed: true },
-            React.createElement("h3", null, "Verification"),
-            React.createElement("p", null, "Email address verified")),
-        React.createElement(Step, { completed: true },
-            React.createElement("h3", null, "Setup"),
-            React.createElement("p", null, "Profile information completed")),
-        React.createElement(Step, { completed: true },
-            React.createElement("h3", null, "Welcome"),
-            React.createElement("p", null, "You're all set to get started!")))),
-};
-export const MinimalExample = {
-    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/stepindicator/stepindicator.stories.d.ts

@@ -1,12 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import './index.js';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Default: Story;
-export declare const Horizontal: Story;
-export declare const RightAligned: Story;
-export declare const SimpleSteps: Story;
-export declare const SimpleHorizontal: Story;
-export declare const AllCompleted: Story;
-export declare const MinimalExample: Story;