@dile/ui 3.17.1 → 3.18.1

package/components/steps/index.js

@@ -0,0 +1,2 @@
+export { DileSteps } from './src/DileSteps.js';
+export { DileStep } from './src/DileStep.js';

package/components/steps/src/DileStep.js

@@ -0,0 +1,90 @@
+import { LitElement, html, css } from 'lit';
+
+export class DileStep extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        width: var(--dile-step-size, 1.5rem);
+        height: var(--dile-step-size, 1.5rem);
+      }
+      .step {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        background-color: var(--dile-step-background-color, var(--dile-background-color, #fff));
+        border-radius: 3rem;
+        font-size: var(--dile-step-font-size, 0.8rem);
+        font-weight: normal;
+        font-family: inherit;
+        padding: 0;
+        border: var(--dile-step-border-width, 2px) solid var(--dile-step-border-color, #ddd);
+        color: var(--dile-step-text-color, var(--dile-on-background-color, #303030));
+        cursor: default;
+      }
+      button.step:focus-visible {
+        outline: 2px solid var(--dile-step-active-border-color, var(--dile-primary-dark-color, #0039cb));
+        outline-offset: 2px;
+      }
+      :host([reached]) .step {
+        background-color: var(--dile-step-reached-background-color, var(--dile-primary-color, #2962ff));
+        border-color: var(--dile-step-reached-background-color, var(--dile-primary-color, #2962ff));
+        color: var(--dile-step-reached-text-color, var(--dile-on-primary-color, #fff));
+      }
+      :host([reached]:not([readonly])) .step {
+        cursor: pointer;
+      }
+      :host([active]) .step {
+        border-color: var(--dile-step-active-border-color, var(--dile-primary-dark-color, #0039cb));
+        font-weight: bold;
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      /** Step label, used as accessible name of the button */
+      label: { type: String },
+      /** Zero-based position of the step */
+      index: { type: Number },
+      /** The step is the current one */
+      active: { type: Boolean, reflect: true },
+      /** The step can be navigated to */
+      reached: { type: Boolean, reflect: true },
+      /** Display only: renders the bubble without a button */
+      readonly: { type: Boolean, reflect: true },
+    };
+  }
+
+  constructor() {
+    super();
+    this.index = 0;
+    this.active = false;
+    this.reached = false;
+    this.readonly = false;
+  }
+
+  render() {
+    if (this.readonly) {
+      return html`<span class="step" aria-hidden="true">${this.index + 1}</span>`;
+    }
+    return html`<button
+      type="button"
+      class="step"
+      ?disabled=${!this.reached}
+      aria-label=${this.label ?? ''}
+      @click=${this.doClick}
+    >${this.index + 1}</button>`;
+  }
+
+  doClick() {
+    this.dispatchEvent(new CustomEvent('dile-step-click', {
+      bubbles: true,
+      composed: true,
+      detail: { index: this.index, label: this.label }
+    }));
+  }
+}

package/components/steps/src/DileSteps.js

@@ -0,0 +1,171 @@
+import { LitElement, html, css } from 'lit';
+import '../step.js';
+
+export class DileSteps extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+
+      /* ── Horizontal ── */
+      .horizontal {
+        display: flex;
+        position: relative;
+        padding-bottom: 0.5rem;
+      }
+      .line-bg {
+        position: absolute;
+        top: calc(var(--dile-step-size, 1.5rem) / 2 - var(--dile-steps-line-width, 0.5rem) / 2);
+        left: 0.75rem;
+        right: 0.75rem;
+        height: var(--dile-steps-line-width, 0.5rem);
+        background-color: var(--dile-steps-line-color, var(--dile-primary-color, #2962ff));
+        border-radius: 2rem;
+      }
+      .h-step {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex: 1;
+        position: relative;
+        z-index: 1;
+      }
+      .h-label {
+        font-size: var(--dile-step-label-font-size, 0.7rem);
+        text-align: center;
+        margin-top: 0.3rem;
+        color: var(--dile-step-label-color, #606060);
+        line-height: 1.2;
+      }
+
+      /* ── Vertical ── */
+      .vertical {
+        display: flex;
+        flex-direction: column;
+      }
+      .v-step {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        gap: 0.75rem;
+      }
+      .v-track {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: var(--dile-step-size, 1.5rem);
+        flex-shrink: 0;
+      }
+      .connector {
+        width: var(--dile-steps-connector-width, 0.35rem);
+        height: var(--dile-steps-connector-height, 1rem);
+        background-color: var(--dile-steps-line-color, var(--dile-primary-color, #2962ff));
+        border-radius: 2rem;
+      }
+      .v-label {
+        font-size: var(--dile-step-label-font-size, 0.85rem);
+        color: var(--dile-step-label-color, #606060);
+        padding-top: 0.2rem;
+        line-height: 1.2;
+      }
+
+      .active .h-label,
+      .active .v-label {
+        color: var(--dile-step-active-label-color, var(--dile-step-active-border-color, var(--dile-primary-dark-color, #0039cb)));
+        font-weight: 600;
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      /** Array with the label of each step */
+      steps: { type: Array },
+      /** Zero-based index of the current step */
+      current: { type: Number },
+      /** Highest step index reached so far */
+      reached: { type: Number },
+      /** All steps can be selected, regardless of reached */
+      freeNavigation: { type: Boolean },
+      /** Vertical layout */
+      vertical: { type: Boolean },
+      /** Display only: steps can not be clicked */
+      readonly: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.steps = [];
+    this.current = 0;
+    this.reached = 0;
+    this.freeNavigation = false;
+    this.vertical = false;
+    this.readonly = false;
+  }
+
+  isReached(index) {
+    return this.freeNavigation || index <= this.reached;
+  }
+
+  render() {
+    return this.vertical ? this.renderVertical() : this.renderHorizontal();
+  }
+
+  renderHorizontal() {
+    return html`
+      <div class="horizontal" role="list" @dile-step-click=${this.onStepClick}>
+        <div class="line-bg"></div>
+        ${this.steps.map((step, index) => html`
+          <div class="h-step ${index === this.current ? 'active' : ''}" role="listitem" aria-current=${index === this.current ? 'step' : 'false'}>
+            ${this.stepTemplate(step, index)}
+            <span class="h-label">${step}</span>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+
+  renderVertical() {
+    return html`
+      <div class="vertical" role="list" @dile-step-click=${this.onStepClick}>
+        ${this.steps.map((step, index) => html`
+          <div class="v-step ${index === this.current ? 'active' : ''}" role="listitem" aria-current=${index === this.current ? 'step' : 'false'}>
+            <div class="v-track">
+              ${this.stepTemplate(step, index)}
+              ${index < this.steps.length - 1
+                ? html`<div class="connector"></div>`
+                : ''}
+            </div>
+            <span class="v-label">${step}</span>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+
+  stepTemplate(step, index) {
+    return html`
+      <dile-step
+        ?active=${index === this.current}
+        ?reached=${this.isReached(index)}
+        ?readonly=${this.readonly}
+        label="${step}"
+        index="${index}"
+      ></dile-step>
+    `;
+  }
+
+  onStepClick(e) {
+    e.stopPropagation();
+    if (this.readonly) {
+      return;
+    }
+    this.dispatchEvent(new CustomEvent('dile-steps-select', {
+      bubbles: true,
+      composed: true,
+      detail: { index: e.detail.index, label: e.detail.label }
+    }));
+  }
+}

package/components/steps/step.js

@@ -0,0 +1,5 @@
+import { DileStep } from './src/DileStep.js';
+
+if (!customElements.get('dile-step')) {
+  customElements.define('dile-step', DileStep);
+}

package/components/steps/steps.js

@@ -0,0 +1,5 @@
+import { DileSteps } from './src/DileSteps.js';
+
+if (!customElements.get('dile-steps')) {
+  customElements.define('dile-steps', DileSteps);
+}

package/components/toast/src/DileToast.js

@@ -28,8 +28,9 @@ export class DileToast extends LitElement {
         display: flex;
         flex-direction: column-reverse;
         position: fixed;
-        bottom: 20px;
+        bottom: var(--dile-toast-bottom, 20px);
         left: 15px;
+        z-index: var(--dile-toast-z-index, 1001);
       }
     `;
   }

package/components/toast/src/DileToastPersistent.js

@@ -6,7 +6,7 @@ export class DileToastPersistent extends LitElement {
       :host {
         display: block;
         position: fixed;
-        bottom: var(--dile-toast-persistent-gap, 1rem);
+        bottom: var(--dile-toast-persistent-bottom, var(--dile-toast-persistent-gap, 1rem));
         left: var(--dile-toast-persistent-gap, 1rem);
         z-index: var(--dile-toast-persistent-z-index, 999);
         width: var(--dile-toast-persistent-width, 300px);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.17.1",
+  "version": "3.18.1",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -21,12 +21,12 @@
   },
   "homepage": "https://dile-components.com/",
   "dependencies": {
-    "@dile/iconlib": "^2.0.1",
-    "@dile/icons": "^2.5.1",
+    "@dile/iconlib": "^2.0.2",
+    "@dile/icons": "^2.5.2",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "eb8d274006be88ab2b44ed574f5c2829f27a2ec3"
+  "gitHead": "6724d25c93731ed35e6710228a6d0b18e5b6ebb1"
 }

package/components/accordion/accordion.spec.js

@@ -1,253 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import './accordion.js';
-import './accordion-item.js';
-
-describe('DileAccordion - Accessibility', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderAccordion(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-accordion-item') || document.body.querySelector('dile-accordion');
-    await el.updateComplete;
-    return el;
-  }
-
-  async function renderAccordionGroup(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-accordion');
-    const items = el.querySelectorAll('dile-accordion-item');
-    await el.updateComplete;
-    for (const item of items) {
-      await item.updateComplete;
-    }
-    return { accordion: el, items };
-  }
-
-  describe('Semantic Structure & ARIA', () => {
-    it('should have region role with aria-label on container', async () => {
-      const { accordion } = await renderAccordionGroup(`
-        <dile-accordion>
-          <dile-accordion-item title="Item 1">
-            <div slot="accordion-item-content">Content 1</div>
-          </dile-accordion-item>
-        </dile-accordion>
-      `);
-      
-      const region = accordion.shadowRoot.querySelector('[role="region"]');
-      
-      expect(region).toBeTruthy();
-      expect(region.getAttribute('aria-label')).toBe('Accordion');
-    });
-
-    it('button should have aria-expanded attribute', async () => {
-      const el = await renderAccordion(`
-        <dile-accordion-item title="Expandable">
-          <div slot="accordion-item-content">Content</div>
-        </dile-accordion-item>
-      `);
-      
-      const button = el.shadowRoot.querySelector('button');
-      expect(button.getAttribute('aria-expanded')).toBe('false');
-      
-      button.click();
-      await el.updateComplete;
-      
-      expect(button.getAttribute('aria-expanded')).toBe('true');
-    });
-
-    it('button should have aria-controls pointing to content', async () => {
-      const el = await renderAccordion(`
-        <dile-accordion-item title="Item">
-          <div slot="accordion-item-content">Content</div>
-        </dile-accordion-item>
-      `);
-      
-      const button = el.shadowRoot.querySelector('button');
-      const contentContainer = el.shadowRoot.querySelector('.contentContainer');
-      
-      const controlsId = button.getAttribute('aria-controls');
-      expect(controlsId).toBeTruthy();
-      expect(contentContainer.id).toBe(controlsId);
-    });
-
-    it('content region should have aria-labelledby pointing to button', async () => {
-      const el = await renderAccordion(`
-        <dile-accordion-item title="Section Title">
-          <div slot="accordion-item-content">Content</div>
-        </dile-accordion-item>
-      `);
-      
-      const button = el.shadowRoot.querySelector('button');
-      const contentRegion = el.shadowRoot.querySelector('[role="region"]');
-      
-      expect(contentRegion.getAttribute('aria-labelledby')).toBe(button.id);
-    });
-
-    it('icon should be hidden from screen readers with aria-hidden', async () => {
-      const el = await renderAccordion(`
-        <dile-accordion-item title="Item">
-          <div slot="accordion-item-content">Content</div>
-        </dile-accordion-item>
-      `);
-      
-      const icon = el.shadowRoot.querySelector('span.icon');
-      expect(icon.getAttribute('aria-hidden')).toBe('true');
-    });
-  });
-
-  describe('Keyboard Navigation', () => {
-    it('button should be keyboard focusable', async () => {
-      const el = await renderAccordion(`
-        <dile-accordion-item title="Item">
-          <div slot="accordion-item-content">Content</div>
-        </dile-accordion-item>
-      `);
-      
-      const button = el.shadowRoot.querySelector('button');
-      button.focus();
-      
-      expect(el.shadowRoot.activeElement).toBe(button);
-    });
-
-    it('button should toggle on click', async () => {
-      const el = await renderAccordion(`
-        <dile-accordion-item title="Item">
-          <div slot="accordion-item-content">Content</div>
-        </dile-accordion-item>
-      `);
-      
-      const button = el.shadowRoot.querySelector('button');
-      
-      expect(el.opened).toBe(false);
-      button.click();
-      await el.updateComplete;
-      
-      expect(el.opened).toBe(true);
-    });
-  });
-
-  describe('Focus Management', () => {
-    it('should have visible focus outline (focus-visible)', async () => {
-      const el = await renderAccordion(`
-        <dile-accordion-item title="Item">
-          <div slot="accordion-item-content">Content</div>
-        </dile-accordion-item>
-      `);
-      
-      const button = el.shadowRoot.querySelector('button');
-      
-      // Verify focus-visible CSS exists
-      const styles = el.shadowRoot.adoptedStyleSheets[0];
-      let hasFocusVisible = false;
-      for (const rule of styles.cssRules) {
-        if (rule.selectorText && rule.selectorText.includes('focus-visible')) {
-          hasFocusVisible = true;
-          break;
-        }
-      }
-      
-      expect(hasFocusVisible).toBe(true);
-    });
-  });
-
-  describe('Live Region Announcements', () => {
-    it('should dispatch live region announcement on expand', async () => {
-      const el = await renderAccordion(`
-        <dile-accordion-item title="Settings">
-          <div slot="accordion-item-content">Expanded content</div>
-        </dile-accordion-item>
-      `);
-      
-      const button = el.shadowRoot.querySelector('button');
-      button.click();
-      await el.updateComplete;
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      // Verify that a live region element exists with status role
-      const liveRegions = el.querySelectorAll('[role="status"][aria-live]');
-      expect(liveRegions.length).toBeGreaterThanOrEqual(0);
-    });
-  });
-
-  describe('Content Visibility & Structure', () => {
-    it('content should be hidden when closed', async () => {
-      const el = await renderAccordion(`
-        <dile-accordion-item title="Item">
-          <div slot="accordion-item-content">Hidden Content</div>
-        </dile-accordion-item>
-      `);
-      
-      expect(el.opened).toBe(false);
-      const button = el.shadowRoot.querySelector('button');
-      expect(button.className).not.toContain('opened');
-    });
-
-    it('content should be visible when opened', async () => {
-      const el = await renderAccordion(`
-        <dile-accordion-item title="Item" opened>
-          <div slot="accordion-item-content">Visible Content</div>
-        </dile-accordion-item>
-      `);
-      
-      // Give time for animation to trigger
-      await new Promise(resolve => setTimeout(resolve, 150));
-      
-      expect(el.opened).toBe(true);
-      const button = el.shadowRoot.querySelector('button');
-      expect(button.className).toContain('opened');
-    });
-  });
-
-  describe('Multiple Items', () => {
-    it('only one item should be open at a time (mutually exclusive)', async () => {
-      const { accordion, items } = await renderAccordionGroup(`
-        <dile-accordion>
-          <dile-accordion-item title="Item 1">
-            <div slot="accordion-item-content">Content 1</div>
-          </dile-accordion-item>
-          <dile-accordion-item title="Item 2">
-            <div slot="accordion-item-content">Content 2</div>
-          </dile-accordion-item>
-        </dile-accordion>
-      `);
-      
-      const button1 = items[0].shadowRoot.querySelector('button');
-      const button2 = items[1].shadowRoot.querySelector('button');
-      
-      button1.click();
-      await items[0].updateComplete;
-      expect(items[0].opened).toBe(true);
-      
-      button2.click();
-      await items[1].updateComplete;
-      await items[0].updateComplete;
-      
-      expect(items[0].opened).toBe(false);
-      expect(items[1].opened).toBe(true);
-    });
-  });
-
-  describe('Unique IDs', () => {
-    it('each accordion item should have unique IDs', async () => {
-      const { items } = await renderAccordionGroup(`
-        <dile-accordion>
-          <dile-accordion-item title="Item 1">
-            <div slot="accordion-item-content">Content 1</div>
-          </dile-accordion-item>
-          <dile-accordion-item title="Item 2">
-            <div slot="accordion-item-content">Content 2</div>
-          </dile-accordion-item>
-        </dile-accordion>
-      `);
-      
-      const button1Id = items[0].shadowRoot.querySelector('button').id;
-      const button2Id = items[1].shadowRoot.querySelector('button').id;
-      
-      expect(button1Id).toBeTruthy();
-      expect(button2Id).toBeTruthy();
-      expect(button1Id).not.toBe(button2Id);
-    });
-  });
-});