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

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/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/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';