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

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

@@ -1,172 +0,0 @@
-import { html } from 'lit';
-import './index.js';
-const meta = {
-    title: 'Components/Step Indicator',
-    component: 'w-step-indicator',
-    argTypes: {
-        horizontal: {
-            control: { type: 'boolean' },
-            description: 'Display steps in horizontal layout',
-            defaultValue: false,
-        },
-        right: {
-            control: { type: 'boolean' },
-            description: 'Align steps to the right (vertical layout only)',
-            defaultValue: false,
-        },
-    },
-};
-export default meta;
-export const Default = {
-    args: {
-        horizontal: false,
-        right: false,
-    },
-    render: (args) => html `
-    <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>
-      </w-step>
-      <w-step active>
-        <h3>Step 2: Profile Information</h3>
-        <p>Fill in your personal details and preferences.</p>
-      </w-step>
-      <w-step>
-        <h3>Step 3: Payment Method</h3>
-        <p>Add a payment method to complete your registration.</p>
-      </w-step>
-      <w-step>
-        <h3>Step 4: Confirmation</h3>
-        <p>Review and confirm your information.</p>
-      </w-step>
-    </w-step-indicator>
-  `,
-};
-export const Horizontal = {
-    args: {
-        horizontal: true,
-        right: false,
-    },
-    render: (args) => html `
-    <w-step-indicator ?horizontal=${args.horizontal} ?right=${args.right}>
-      <w-step completed>
-        <h4>Setup</h4>
-        <p>Account created</p>
-      </w-step>
-      <w-step completed>
-        <h4>Profile</h4>
-        <p>Information added</p>
-      </w-step>
-      <w-step active>
-        <h4>Payment</h4>
-        <p>Add payment method</p>
-      </w-step>
-      <w-step>
-        <h4>Done</h4>
-        <p>Complete setup</p>
-      </w-step>
-    </w-step-indicator>
-  `,
-};
-export const RightAligned = {
-    args: {
-        horizontal: false,
-        right: true,
-    },
-    render: (args) => html `
-    <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>
-        <small>2:34 PM</small>
-      </w-step>
-      <w-step completed>
-        <h3>Payment Confirmed</h3>
-        <p>Payment has been successfully processed.</p>
-        <small>2:35 PM</small>
-      </w-step>
-      <w-step active>
-        <h3>Preparing for Shipment</h3>
-        <p>Your items are being prepared for shipment.</p>
-      </w-step>
-      <w-step>
-        <h3>Shipped</h3>
-        <p>Your order is on its way!</p>
-      </w-step>
-    </w-step-indicator>
-  `,
-};
-export const SimpleSteps = {
-    render: () => html `
-    <w-step-indicator>
-      <w-step completed>
-        <strong>Step 1</strong>
-      </w-step>
-      <w-step completed>
-        <strong>Step 2</strong>
-      </w-step>
-      <w-step active>
-        <strong>Step 3</strong>
-      </w-step>
-      <w-step>
-        <strong>Step 4</strong>
-      </w-step>
-      <w-step>
-        <strong>Step 5</strong>
-      </w-step>
-    </w-step-indicator>
-  `,
-};
-export const SimpleHorizontal = {
-    render: () => html `
-    <w-step-indicator horizontal>
-      <w-step completed>
-        <strong>Start</strong>
-      </w-step>
-      <w-step completed>
-        <strong>Progress</strong>
-      </w-step>
-      <w-step active>
-        <strong>Current</strong>
-      </w-step>
-      <w-step>
-        <strong>Next</strong>
-      </w-step>
-      <w-step>
-        <strong>End</strong>
-      </w-step>
-    </w-step-indicator>
-  `,
-};
-export const AllCompleted = {
-    render: () => html `
-    <w-step-indicator>
-      <w-step completed>
-        <h3>Registration</h3>
-        <p>Account successfully created</p>
-      </w-step>
-      <w-step completed>
-        <h3>Verification</h3>
-        <p>Email address verified</p>
-      </w-step>
-      <w-step completed>
-        <h3>Setup</h3>
-        <p>Profile information completed</p>
-      </w-step>
-      <w-step completed>
-        <h3>Welcome</h3>
-        <p>You're all set to get started!</p>
-      </w-step>
-    </w-step-indicator>
-  `,
-};
-export const MinimalExample = {
-    render: () => html `
-    <w-step-indicator>
-      <w-step completed>First</w-step>
-      <w-step active>Second</w-step>
-      <w-step>Third</w-step>
-    </w-step-indicator>
-  `,
-};

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

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

package/dist/packages/stepindicator/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}.text-center{text-align:center}.text-right{text-align:right}.border-2{border-width:2px}.rounded-full{border-radius:9999px}.flex{display:flex}.grid{display:grid}.flex-1{flex:1}.gap-x-16{column-gap:1.6rem}.gap-y-16{row-gap:1.6rem}.row-span-2{grid-row:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.row-start-1{grid-row-start:1}.row-start-2{grid-row-start:2}.col-start-2{grid-column-start:2}.grid-flow-col{grid-auto-flow:column}.grid-rows-\\[20px_auto\\]{grid-template-rows:20px auto}.grid-rows-\\[auto_20px\\]{grid-template-rows:auto 20px}.grid-cols-\\[1fr_20px_1fr\\]{grid-template-columns:1fr 20px 1fr}.grid-cols-\\[1fr_20px\\]{grid-template-columns:1fr 20px}.grid-cols-\\[20px_1fr\\]{grid-template-columns:20px 1fr}.items-center{align-items:center}.justify-self-end{justify-self:end}.justify-self-center{justify-self:center}.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-primary{background-color:var(--w-s-color-background-primary)}.s-icon-inverted{color:var(--w-s-color-icon-inverted)}.s-border{border-color:var(--w-s-color-border)}.s-border-primary{border-color:var(--w-s-color-border-primary)}.h-2{height:.2rem}.h-20{height:2rem}.h-full{height:100%}.w-2{width:.2rem}.w-20{width:2rem}.w-full{width:100%}.last\\:mb-0:last-child{margin-bottom:0}.px-16{padding-left:1.6rem;padding-right:1.6rem}.pb-0{padding-bottom:0}.pb-32{padding-bottom:3.2rem}.invisible{visibility:hidden}.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)}.duration-300{transition-duration:.3s}`;

package/dist/packages/tabs/tab-panel.js

@@ -1,51 +0,0 @@
-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 { html, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
-import { reset } from '../styles.js';
-import { styles } from './styles.js';
-/**
- * Tab panel component that holds content for individual tabs.
- * Each tab panel should have a name that matches a corresponding tab.
- *
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)
- */
-export class WarpTabPanel extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.hidden = true;
-    }
-    static { this.styles = [reset, styles]; }
-    connectedCallback() {
-        super.connectedCallback();
-        this.setAttribute('tabindex', '-1');
-        this.setAttribute('role', 'tabpanel');
-        // Set aria-labelledby to reference the corresponding tab
-        if (this.name) {
-            this.setAttribute('aria-labelledby', `warp-tab-${this.name}`);
-            this.setAttribute('id', `warp-tabpanel-${this.name}`);
-        }
-    }
-    updated(changedProperties) {
-        if (changedProperties.has('name') && this.name) {
-            this.setAttribute('aria-labelledby', `warp-tab-${this.name}`);
-            this.setAttribute('id', `warp-tabpanel-${this.name}`);
-        }
-    }
-    render() {
-        return html `<slot></slot>`;
-    }
-}
-__decorate([
-    property({ reflect: true })
-], WarpTabPanel.prototype, "name", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], WarpTabPanel.prototype, "hidden", void 0);
-if (!customElements.get('w-tab-panel')) {
-    customElements.define('w-tab-panel', WarpTabPanel);
-}

package/dist/packages/tabs/tab.js

@@ -1,104 +0,0 @@
-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 { html, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
-import { reset } from '../styles.js';
-import { styles } from './styles.js';
-const ccTab = {
-    base: 'grid w-full items-center font-bold gap-8 antialias p-16 pb-8 border-b-4 bg-transparent border-transparent hover:s-text-link hover:s-border-primary',
-    inactive: 's-text-subtle',
-    active: 's-text-link s-border-selected',
-    icon: 'mx-auto',
-    content: 'flex items-center justify-center gap-8',
-    contentUnderlined: 'content-underlined', // content-underlined is a no-op that prevents a quirk in how Vue handles class bindings
-};
-const ccButtonReset = 'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block';
-/**
- * Individual tab component used within w-tabs container.
- *
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)
- */
-export class WarpTab extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.label = '';
-        this.active = false;
-        this.over = false;
-        this.tabClass = '';
-        this._handleClick = (event) => {
-            // Dispatch a custom event that the parent tabs component can listen to
-            this.dispatchEvent(new CustomEvent('tab-click', {
-                detail: { name: this.name },
-                bubbles: true,
-                composed: true,
-            }));
-            // Also dispatch a generic click event for any click handlers
-            this.dispatchEvent(new CustomEvent('click', {
-                detail: { name: this.name, originalEvent: event },
-                bubbles: true,
-                composed: true,
-            }));
-        };
-    }
-    static { this.styles = [reset, styles]; }
-    get _classes() {
-        return classNames(this.tabClass, [ccButtonReset, ccTab.base, this.active ? ccTab.active : ccTab.inactive]);
-    }
-    get _hasChildren() {
-        return this.querySelector('[slot="icon"]') !== null || this.innerHTML.trim() !== this.label;
-    }
-    render() {
-        const hasChildren = this._hasChildren;
-        return html `
-      <button
-        type="button"
-        role="tab"
-        aria-selected="${this.active ? 'true' : 'false'}"
-        aria-controls="${this.active ? `warp-tabpanel-${this.name}` : ''}"
-        id="warp-tab-${this.name}"
-        class="${this._classes}"
-        @click="${this._handleClick}"
-        tabindex="${ /* This needs to be -1 to prevent the auto-focus on buttons, messing up tab order */-1}"
-        style="height: 100%">
-        ${!hasChildren
-            ? html `<span class="${ccTab.contentUnderlined}">${this.label}</span>`
-            : this.over
-                ? html `
-                <span class="${ccTab.icon}">
-                  <slot name="icon"></slot>
-                </span>
-                <span class="${ccTab.contentUnderlined}">${this.label}</span>
-              `
-                : html `
-                <div class="${ccTab.content}">
-                  <slot name="icon"></slot>
-                  ${this.label}
-                </div>
-              `}
-      </button>
-    `;
-    }
-}
-__decorate([
-    property({ reflect: true })
-], WarpTab.prototype, "name", void 0);
-__decorate([
-    property({ reflect: true })
-], WarpTab.prototype, "label", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], WarpTab.prototype, "active", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], WarpTab.prototype, "over", void 0);
-__decorate([
-    property({ attribute: 'tab-class', reflect: true })
-], WarpTab.prototype, "tabClass", void 0);
-if (!customElements.get('w-tab')) {
-    customElements.define('w-tab', WarpTab);
-}

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

@@ -1 +0,0 @@
-export * from './textarea.js';

package/dist/packages/textarea/index.js

@@ -1 +0,0 @@
-export * from './textarea.js';

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

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

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

@@ -1 +0,0 @@
-/*eslint-disable*/ export const messages = JSON.parse("{\"textarea.label.optional\":[\"(valgfrit)\"]}");

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

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

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

@@ -1 +0,0 @@
-/*eslint-disable*/ export const messages = JSON.parse("{\"textarea.label.optional\":[\"(optional)\"]}");

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

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

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

@@ -1 +0,0 @@
-/*eslint-disable*/ export const messages = JSON.parse("{\"textarea.label.optional\":[\"(vapaaehtoinen)\"]}");

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

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

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

@@ -1 +0,0 @@
-/*eslint-disable*/ export const messages = JSON.parse("{\"textarea.label.optional\":[\"(valgfritt)\"]}");

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

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

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

@@ -1 +0,0 @@
-/*eslint-disable*/ export const messages = JSON.parse("{\"textarea.label.optional\":[\"(valfritt)\"]}");

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

@@ -1,11 +0,0 @@
-import { WarpTextarea } from './index.js';
-export declare const Textarea: import("@lit/react").ReactWebComponent<WarpTextarea, {
-    onBlur: string;
-    onblur: string;
-    onChange: string;
-    onchange: string;
-    onInput: string;
-    oninput: string;
-    onFocus: string;
-    onfocus: string;
-}>;

package/dist/packages/textarea/react.js

@@ -1,21 +0,0 @@
-import { LitElement } from 'lit';
-import { createComponent } from '@lit/react';
-import React from 'react';
-// decouple from CDN by providing a dummy class
-class Component extends LitElement {
-}
-export const Textarea = createComponent({
-    tagName: 'w-textarea',
-    elementClass: Component,
-    react: React,
-    events: {
-        onBlur: 'blur',
-        onblur: 'blur',
-        onChange: 'change',
-        onchange: 'change',
-        onInput: 'input',
-        oninput: 'input',
-        onFocus: 'focus',
-        onfocus: 'focus',
-    },
-});

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

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

package/dist/packages/textarea/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}.focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px}.bg-transparent{background-color:#0000}.border-1{border-width:1px}.rounded-4{border-radius:4px}.caret-current{caret-color:currentColor}.block{display:block}.flex{display:flex}.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}.outline-\\[--w-s-color-border-negative\\]\\!{outline-color:var(--w-s-color-border-negative)!important}.fixed{position:fixed}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled-subtle{background-color:var(--w-s-color-background-disabled-subtle)}.s-text{color:var(--w-s-color-text)}.s-text-disabled{color:var(--w-s-color-text-disabled)}.s-text-negative{color:var(--w-s-color-text-negative)}.s-text-subtle{color:var(--w-s-color-text-subtle)}.placeholder\\:s-text-placeholder::placeholder{color:var(--w-s-color-text-placeholder)}.s-border-disabled{border-color:var(--w-s-color-border-disabled)}.s-border-negative{border-color:var(--w-s-color-border-negative)}.s-border-strong{border-color:var(--w-s-color-border-strong)}.hover\\:s-border-negative-hover:hover{border-color:var(--w-s-color-border-negative-hover)}.hover\\:s-border-strong-hover:hover{border-color:var(--w-s-color-border-strong-hover)}.active\\:s-border-selected:active{border-color:var(--w-s-color-border-selected)}.w-full{width:100%}.min-h-\\[42\\]{min-height:4.2rem}.mb-0{margin-bottom:0}.mt-4{margin-top:.4rem}.px-8{padding-left:.8rem;padding-right:.8rem}.py-12{padding-top:1.2rem;padding-bottom:1.2rem}.pb-4{padding-bottom:.4rem}.pl-0{padding-left:0}.pl-8{padding-left:.8rem}.pr-40{padding-right:4rem}.pl-\\[var\\(--w-prefix-width\\,_40px\\)\\]{padding-left:var(--w-prefix-width,40px)}.cursor-pointer{cursor:pointer}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:grayscale}.font-bold{font-weight:700}.font-normal{font-weight:400}.pointer-events-none{pointer-events:none}.resize{resize:both}.resize-none{resize:none}.text-m{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-s{font-size:var(--w-font-size-s);line-height:var(--w-line-height-s)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}.leading-m{line-height:var(--w-line-height-m)}@media (min-width:480px){.sm\\:min-h-\\[45\\]{min-height:4.5rem}}`;

package/dist/packages/textarea/textarea.d.ts

@@ -1,49 +0,0 @@
-import { LitElement, PropertyValues } from 'lit';
-declare const WarpTextarea_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
-/**
- * A single line text input element.
- *
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)
- */
-declare class WarpTextarea extends WarpTextarea_base {
-    #private;
-    static shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        serializable?: boolean;
-        slotAssignment?: SlotAssignmentMode;
-    };
-    disabled: boolean;
-    invalid: boolean;
-    label: string;
-    helpText: string;
-    maxRows: number;
-    minRows: number;
-    name: string;
-    placeholder: string;
-    /** @deprecated Use the native readonly attribute instead. Here for API consistency with `w-textfield`. */
-    readOnly: boolean;
-    readonly: boolean;
-    required: boolean;
-    value: string;
-    optional: boolean;
-    minHeight: number;
-    maxHeight: number;
-    updated(changedProperties: PropertyValues<this>): void;
-    resetFormControl(): void;
-    static styles: import("lit").CSSResult[];
-    /** @internal */
-    get _textareaStyles(): string;
-    /** @internal */
-    get _helptextstyles(): string;
-    /** @internal */
-    get _helpId(): string;
-    /** @internal */
-    get _id(): string;
-    /** @internal */
-    get _error(): string;
-    connectedCallback(): Promise<void>;
-    handler(e: InputEvent): void;
-    render(): import("lit").TemplateResult<1>;
-}
-export { WarpTextarea };