@dile/ui 3.8.3 → 3.9.1

package/components/button/button.spec.js

@@ -46,6 +46,58 @@ describe('dile-button', () => {
     expect(el.shadowRoot.querySelector('dile-spinner-icon')).toBeTruthy();
   });
 
+  it('renders the loading spinner after the label (far right)', async () => {
+    const el = await renderButton('<dile-button loading>Save</dile-button>');
+    const children = [...el.shadowRoot.querySelector('button').children].map(n => n.tagName.toLowerCase());
+    expect(children.indexOf('dile-spinner-icon')).toBeGreaterThan(children.indexOf('slot'));
+  });
+
+  describe('icon support', () => {
+    it('does not render an icon element when no icon is provided (backwards compatible)', async () => {
+      const el = await renderButton('<dile-button>Plain</dile-button>');
+      expect(el.shadowRoot.querySelector('dile-iconlib')).toBeNull();
+    });
+
+    it('renders a dile-iconlib icon from a "family.name" string', async () => {
+      const el = await renderButton('<dile-button icon="lucide.rocket">Launch</dile-button>');
+      const icon = el.shadowRoot.querySelector('dile-iconlib');
+      expect(icon).toBeTruthy();
+      expect(icon.getAttribute('icon')).toBe('lucide.rocket');
+      expect(icon.getAttribute('aria-hidden')).toBe('true');
+    });
+
+    it('places the icon before the label by default and after it when iconPosition is "right"', async () => {
+      const el = await renderButton('<dile-button icon="lucide.rocket">Launch</dile-button>');
+      let children = [...el.shadowRoot.querySelector('button').children].map(n => n.tagName.toLowerCase());
+      expect(children.indexOf('dile-iconlib')).toBeLessThan(children.indexOf('slot'));
+
+      el.iconPosition = 'right';
+      await el.updateComplete;
+      children = [...el.shadowRoot.querySelector('button').children].map(n => n.tagName.toLowerCase());
+      expect(children.indexOf('dile-iconlib')).toBeGreaterThan(children.indexOf('slot'));
+    });
+
+    it('reads the icon position from the "icon-position" attribute', async () => {
+      const el = await renderButton('<dile-button icon="lucide.rocket" icon-position="right">Continue</dile-button>');
+      expect(el.iconPosition).toBe('right');
+      const children = [...el.shadowRoot.querySelector('button').children].map(n => n.tagName.toLowerCase());
+      expect(children.indexOf('dile-iconlib')).toBeGreaterThan(children.indexOf('slot'));
+    });
+
+    it('marks the button as having text only when the slot has content', async () => {
+      const withText = await renderButton('<dile-button icon="lucide.rocket">Launch</dile-button>');
+      expect(withText.shadowRoot.querySelector('button').classList.contains('has-text')).toBe(true);
+
+      const iconOnly = await renderButton('<dile-button icon="lucide.rocket" label="Launch"></dile-button>');
+      expect(iconOnly.shadowRoot.querySelector('button').classList.contains('has-text')).toBe(false);
+    });
+
+    it('exposes the label as the accessible name of the inner button', async () => {
+      const el = await renderButton('<dile-button icon="lucide.rocket" label="Launch rocket"></dile-button>');
+      expect(el.shadowRoot.querySelector('button').getAttribute('aria-label')).toBe('Launch rocket');
+    });
+  });
+
   describe('Native form submission', () => {
     it('includes name/value in the FormData when clicked', async () => {
       document.body.innerHTML = `

package/components/button/src/DileButton.js

@@ -1,5 +1,8 @@
 import { html, css, LitElement } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import '../../spinner/spinner-icon.js';
+import '@dile/iconlib/dile-iconlib.js';
 
 export class DileButton extends LitElement {
 
@@ -12,6 +15,19 @@ export class DileButton extends LitElement {
       name: { type: String, reflect: true },
       type: { type: String },
       value: { type: String },
+      /**
+       * Icon to display, in the dile-iconlib `"family.name"` format
+       * (e.g. `"lucide.rocket"`, `"material.home"`). When empty, the button
+       * behaves exactly as a plain text button (backwards compatible).
+       */
+      icon: { type: String },
+      /** Icon placement relative to the label: `"left"` (default) or `"right"`. */
+      iconPosition: { type: String, reflect: true, attribute: 'icon-position' },
+      /** Prevent the label from wrapping into several lines. */
+      noWrap: { type: Boolean, reflect: true, attribute: 'no-wrap' },
+      /** Accessible name for the button. Required when the button only shows an icon. */
+      label: { type: String },
+      _hasText: { type: Boolean, state: true },
     };
   }
 
@@ -20,9 +36,21 @@ export class DileButton extends LitElement {
     this.disabled = false;
     this.loading = false;
     this.type = "button";
+    this.icon = "";
+    this.iconPosition = "left";
+    this.noWrap = false;
+    this.label = "";
+    this._hasText = true;
     this._internals = this.attachInternals();
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    // Seed the layout state before the first slotchange so an icon-only button
+    // does not flash the text-spacing margin on first paint.
+    this._hasText = this._detectText();
+  }
+
   static get styles() {
     return css`
       :host {
@@ -31,6 +59,9 @@ export class DileButton extends LitElement {
       }
       button {
         cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         padding-top: var(--dile-button-padding-y, 0.5rem);
         padding-bottom: var(--dile-button-padding-y, 0.5rem);
         padding-right: var(--dile-button-padding-x, 0.8rem);
@@ -43,18 +74,20 @@ export class DileButton extends LitElement {
         transition-duration: 0.3s;
         transition-timing-function: ease-in-out;
         border-style: solid;
-        color: var(--dile-button-text-color, var(--dile-on-primary-color, #fff)); 
+        color: var(--dile-button-text-color, var(--dile-on-primary-color, #fff));
         font-size: var(--dile-button-font-size, 1rem);
         font-weight: var(--dile-button-font-weight, bold);
         text-transform: var(--dile-button-text-transform, none);
         letter-spacing: var(--dile-button-letter-spacing, 0);
         user-select: none;
         box-shadow: var(--dile-button-box-shadow, none);
+        --dile-icon-color: var(--dile-button-icon-color, var(--dile-button-text-color, var(--dile-on-primary-color, #fff)));
       }
       button:hover {
         background-color: var(--dile-button-hover-background-color, var(--dile-button-background-color, var(--dile-primary-light-color, #f3f3ae)));
         color: var(--dile-button-hover-text-color, var(--dile-button-text-color, var(--dile-on-primary-light-color, #303030)));
         border-color:  var(--dile-button-hover-border-color, var(--dile-button-border-color, var(--dile-primary-color, #666666)));
+        --dile-icon-color: var(--dile-button-icon-hover-color, var(--dile-button-hover-text-color, var(--dile-button-text-color, var(--dile-on-primary-light-color, #303030))));
       }
       button:focus-visible {
         outline: 2px solid var(--dile-button-ring-color, #12c9e9);
@@ -101,32 +134,90 @@ export class DileButton extends LitElement {
       :host([loading]) {
         pointer-events: none;
       }
-      button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: var(--dile-button-spinner-gap, 0.5rem);
+
+      :host([no-wrap]) button {
+        white-space: nowrap;
       }
+
       dile-spinner-icon {
         --dile-icon-size: var(--dile-button-spinner-size, calc(var(--dile-button-font-size, 1rem) * 0.8));
         --dile-icon-color: var(--dile-on-primary-color, #fff);
       }
+      button.has-text dile-spinner-icon {
+        margin-left: var(--dile-button-spinner-gap, 0.5rem);
+      }
+
+      .button-icon {
+        display: flex;
+        align-items: center;
+        --dile-icon-size: var(--dile-button-icon-size, calc(var(--dile-button-font-size, 1rem) * 1.125));
+      }
+      /* The icon-to-text separation is only applied when the button has a label,
+         so an icon-only button stays perfectly centered with no dead space. */
+      button.has-text .button-icon.icon-left {
+        margin-right: var(--dile-button-icon-separation, 0.3rem);
+      }
+      button.has-text .button-icon.icon-right {
+        margin-left: var(--dile-button-icon-separation, 0.3rem);
+      }
     `;
   }
 
   render() {
+    const showIcon = !!this.icon && !this.loading;
     return html`
-      <button 
-        @click=${this._onClick} 
+      <button
+        class=${classMap({ 'has-text': this._hasText })}
+        @click=${this._onClick}
         ?disabled=${this.disabled || this.loading}
         type=${this.type || "button"}
+        aria-label=${ifDefined(this._computedAriaLabel)}
+        aria-busy=${ifDefined(this.loading ? 'true' : undefined)}
       >
+        ${showIcon && this.iconPosition !== 'right' ? this.iconTemplate : ''}
+        <slot @slotchange=${this._onSlotChange}></slot>
+        ${showIcon && this.iconPosition === 'right' ? this.iconTemplate : ''}
         ${this.loading ? html`<dile-spinner-icon active></dile-spinner-icon>` : ''}
-        <slot></slot>
       </button>
     `;
   }
 
+  get iconTemplate() {
+    const side = this.iconPosition === 'right' ? 'icon-right' : 'icon-left';
+    return html`
+      <dile-iconlib
+        class="button-icon ${side}"
+        icon=${this.icon}
+        aria-hidden="true"
+      ></dile-iconlib>
+    `;
+  }
+
+  get _computedAriaLabel() {
+    return this.label || undefined;
+  }
+
+  _detectText() {
+    if (this.textContent && this.textContent.trim().length > 0) return true;
+    return this.childElementCount > 0;
+  }
+
+  _onSlotChange(e) {
+    const nodes = e.target.assignedNodes({ flatten: true });
+    this._hasText = nodes.some(node =>
+      node.nodeType === Node.ELEMENT_NODE ||
+      (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '')
+    );
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('icon') || changedProperties.has('label') || changedProperties.has('_hasText')) {
+      if (this.icon && !this._hasText && !this.label) {
+        console.warn('dile-button: an icon-only button should set the "label" property so it has an accessible name.');
+      }
+    }
+  }
+
   _onClick(e) {
     if (this.disabled || this.loading) {
       e.preventDefault();

package/components/button/src/DileButtonIcon.js

@@ -1,7 +1,16 @@
-import { html, css, LitElement } from "lit";
+import { html, css } from "lit";
 import { DileButton } from './DileButton.js';
 import '../../icon/icon.js';
 
+/**
+ * dile-button-icon renders an icon supplied as a lit-html template (or any HTML
+ * template, e.g. an `<img>`). If you want string-based icons with icon-family
+ * support ("lucide.rocket", "material.home", ...), use `<dile-button>` together
+ * with its `icon` property instead.
+ *
+ * It inherits every feature from dile-button: `iconPosition`, `no-wrap`,
+ * `label`, loading spinner and form integration.
+ */
 export class DileButtonIcon extends DileButton {
   static get properties() {
     return {
@@ -14,30 +23,23 @@ export class DileButtonIcon extends DileButton {
       super.styles,
       css`
         button {
-          display: flex;
-          align-items: center;
           --dile-icon-color: var(--dile-button-icon-color, var(--dile-on-primary-color, #ffffff));
         }
-        dile-icon {
-          --dile-icon-size: var(--dile-button-icon-size, calc(var(--dile-button-font-size, 1rem) * 1.125));
-          margin-right: var(--dile-button-icon-separation, 0.3rem);
-        }
         button:hover {
           --dile-icon-color: var(--dile-button-icon-hover-color, var(--dile-on-primary-light-color, #888));
         }
-        :host([no-wrap]) {
-          white-space: nowrap;
-        }
       `
     ];
   }
 
-  render() {
+  get iconTemplate() {
+    const side = this.iconPosition === 'right' ? 'icon-right' : 'icon-left';
     return html`
-      <button @click="${this.doClick}">
-          <dile-icon .icon=${this.icon}></dile-icon>
-          <slot></slot>
-      </button>
+      <dile-icon
+        class="button-icon ${side}"
+        .icon=${this.icon}
+        aria-hidden="true"
+      ></dile-icon>
     `;
   }
 }

package/components/card/src/DileCard.js

@@ -7,7 +7,8 @@ export class DileCard extends LitElement {
           box-sizing: border-box;
         }
         :host {
-          display: block;
+          display: flex;
+          flex-direction: column;
           border: var(--dile-card-border, 1px solid #ccc);
           border-radius: var(--dile-card-border-radius, 0.5rem);
           background-color: var(--dile-card-background-color, #fff);
@@ -35,6 +36,7 @@ export class DileCard extends LitElement {
         main {
           padding-top: var(--dile-card-padding-y, 1rem);
           padding-bottom: var(--dile-card-padding-y, 1rem);
+          flex-grow: 1;
         }
         footer {
           border-top: var(--dile-card-footer-border-separator, 1px solid #ccc);

package/components/tabs/src/DileTab.js

@@ -13,8 +13,8 @@ export class DileTab  extends DileSelectableItem(LitElement) {
         border-top-left-radius: var(--dile-tab-border-radius, 4px);
         border-top-right-radius: var(--dile-tab-border-radius, 4px);
         transition: all 0.3s ease;
-        color: var(--dile-tab-text-color, #666);
-        background-color: var(--dile-tab-background-color, transparent);
+        color: var(--dile-tab-text-color, var(--dile-on-primary-color, #666));
+        background-color: var(--dile-tab-background-color, var(--dile-primary-color, #eee));
         cursor: pointer;
         border: var(--dile-tab-border, none);
         font-weight: var(--dile-tab-font-weight, normal);
@@ -26,15 +26,15 @@ export class DileTab  extends DileSelectableItem(LitElement) {
         white-space: nowrap;
       }
       .selected {
-        background-color: var(--dile-tab-selected-background-color, #039be5);
-        color: var(--dile-tab-selected-text-color, #fff);
+        background-color: var(--dile-tab-selected-background-color, var(--dile-primary-dark-color, #888));
+        color: var(--dile-tab-selected-text-color, var(--dile-on-primary-dark-color, #000));
         border: var(--dile-tab-selected-border, none);
       }
       span {
         display: block;
         height: var(--dile-tab-selected-line-height, 5px);
         width: 0;
-        background-color: var(--dile-tab-selected-line-color, #0070c0);
+        background-color: var(--dile-tab-selected-line-color, var(--dile-secondary-color, #333));
         transition: width 0.3s ease;
       }
       .markselected {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.8.3",
+  "version": "3.9.1",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -28,5 +28,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "807eac93fd36691a8fb656b5e0f2549ed9c887cb"
+  "gitHead": "9e326dc3d88fc6a0154d7e8833034469aae9c8d1"
 }