@aquera/nile-elements 1.8.1 → 1.8.3

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.8.1",
+  "version": "1.8.3",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-detail/nile-detail.css.ts

@@ -154,6 +154,41 @@ export const styles = css`
     padding: 0;
   }
 
+  /* ── Preview state ──────────────────────────────────────────────────────── */
+
+  .detail__body--preview {
+    position: relative;
+    cursor: pointer;
+  }
+
+  .detail__body--preview::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: var(--nile-detail-preview-fade-height, 40px);
+    background: linear-gradient(
+      to bottom,
+      transparent,
+      var(--nile-colors-white-base, var(--ng-colors-bg-primary))
+    );
+    pointer-events: none;
+  }
+
+  .detail__body--preview:focus {
+    outline: none;
+  }
+
+  .detail__body--preview:focus-visible {
+    outline: solid 3px var(--nile-colors-blue-500, var(--ng-colors-fg-brand-primary-600));
+    outline-offset: -3px;
+  }
+
+  .detail--disabled .detail__body--preview {
+    cursor: not-allowed;
+  }
+
   /* ── Selection variant ──────────────────────────────────────────────────── */
 
   .detail__selection-label {
@@ -410,7 +445,8 @@ export const styles = css`
       var(--nile-spacing-3xl, var(--ng-spacing-3xl));
   }
 
-  .detail--light.detail--open .detail__header {
+  .detail--light.detail--open .detail__header,
+  .detail--light.detail--preview .detail__header {
     border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
   }
 

package/src/nile-detail/nile-detail.ts

@@ -12,6 +12,7 @@ import {
   hideDetail,
   handleSummaryClick,
   handleSummaryKeyDown,
+  getPreviewHeight,
 } from './nile-detail.utils';
 import '../nile-checkbox/index';
 import '../nile-input/index';
@@ -104,6 +105,10 @@ export interface NileDetailSelectionConfig {
 
   showSelectedToggle?: boolean;
 
+  // Preview state
+  preview?: boolean;
+  previewPercentage?: number;
+
   // Inherited / passthrough
   open?: boolean;
   disabled?: boolean;
@@ -128,6 +133,12 @@ export class NileDetail extends NileElement {
 
   @property({ attribute: true, type: Boolean, reflect: true }) disabled = false;
 
+  /** When set, the closed state shows a preview of the body content instead of hiding it. */
+  @property({ attribute: true, type: Boolean, reflect: true }) preview = false;
+
+  /** Percentage (0–100) of the content height shown while previewing. */
+  @property({ attribute: 'preview-percentage', type: Number, reflect: true }) previewPercentage = 30;
+
   @property({ attribute: true, type: String, reflect: true }) variant: NileDetailVariant = 'default';
 
   @property({ attribute: false, type: Array }) items: SelectionItem[] = [];
@@ -218,6 +229,16 @@ export class NileDetail extends NileElement {
     return this.variant === 'light' || this.variant === 'select-light';
   }
 
+  /** True when preview mode is on with a usable percentage. */
+  private get _previewEnabled(): boolean {
+    return this.preview && Math.min(100, Math.max(0, this.previewPercentage)) > 0;
+  }
+
+  /** True when the closed state should currently render the preview. */
+  private get _isPreviewActive(): boolean {
+    return this._previewEnabled && !this.open;
+  }
+
   private get _isInfiniteMode(): boolean {
     return (
       this._isSelectionVariant &&
@@ -308,9 +329,12 @@ export class NileDetail extends NileElement {
   }
 
   firstUpdated() {
-    this._detailOpen = this.open;
-    this.body.hidden = !this.open;
+    this._detailOpen = this.open || this._isPreviewActive;
+    this.body.hidden = !this.open && !this._isPreviewActive;
     this.body.style.height = this.open ? 'auto' : '0';
+    if (this._isPreviewActive) {
+      this._applyPreviewHeight();
+    }
     this._syncSelectedFromProperty();
     if (this._restoreDefaults === null) {
       this._restoreDefaults = [...this._selectedSet];
@@ -541,6 +565,9 @@ export class NileDetail extends NileElement {
     }
 
     if (c.showSelectedToggle !== undefined) this.showSelectedToggle = c.showSelectedToggle;
+
+    if (c.preview           !== undefined) this.preview           = c.preview;
+    if (c.previewPercentage !== undefined) this.previewPercentage = c.previewPercentage;
   }
 
   private _syncSelectedFromProperty() {
@@ -728,6 +755,9 @@ export class NileDetail extends NileElement {
       if (node.nodeType === Node.TEXT_NODE) return !!(node.textContent && node.textContent.trim());
       return false;
     });
+    if (this._isPreviewActive) {
+      this._applyPreviewHeight();
+    }
   }
 
   private _stopHeaderToggle(event: Event) {
@@ -750,10 +780,52 @@ export class NileDetail extends NileElement {
       await animateShow(this);
     } else {
       await animateHide(this);
+      // In preview mode the details element stays open so the preview remains visible.
+      this._detailOpen = this._previewEnabled;
+    }
+  }
+
+  @watch(['preview', 'previewPercentage'], { waitUntilFirstUpdate: true })
+  handlePreviewChange() {
+    if (this.open) {
+      return;
+    }
+    if (this._previewEnabled) {
+      this._detailOpen = true;
+      this._applyPreviewHeight();
+    } else {
+      this.body.hidden = true;
+      this.body.style.height = '0';
       this._detailOpen = false;
     }
   }
 
+  /** Measures the content and clamps the body to the configured preview height. */
+  private async _applyPreviewHeight() {
+    await this.updateComplete;
+    if (!this._isPreviewActive || !this.body) {
+      return;
+    }
+    this.body.hidden = false;
+    this.body.style.height = `${getPreviewHeight(this)}px`;
+  }
+
+  private _handlePreviewClick() {
+    if (this._isPreviewActive && !this.disabled) {
+      showDetail(this);
+    }
+  }
+
+  private _handlePreviewKeyDown(event: KeyboardEvent) {
+    if (!this._isPreviewActive || this.disabled) {
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      showDetail(this);
+    }
+  }
+
   async show() {
     return showDetail(this);
   }
@@ -1017,6 +1089,7 @@ export class NileDetail extends NileElement {
           'detail--disabled': this.disabled,
           'detail--selection': isSelection,
           'detail--light': this._isLightVariant,
+          'detail--preview': this._isPreviewActive,
         })}
       >
         <summary
@@ -1062,7 +1135,18 @@ export class NileDetail extends NileElement {
 
         </summary>
 
-        <div part="content" class="detail__body">
+        <div
+          part="content"
+          class=${classMap({
+            'detail__body': true,
+            'detail__body--preview': this._isPreviewActive,
+          })}
+          role=${this._isPreviewActive ? 'button' : nothing}
+          tabindex=${this._isPreviewActive && !this.disabled ? '0' : nothing}
+          aria-label=${this._isPreviewActive ? 'Expand to view full content' : nothing}
+          @click=${this._handlePreviewClick}
+          @keydown=${this._handlePreviewKeyDown}
+        >
           ${isSelection
             ? html`<div part="selection-content" class="detail__selection-content">${this._renderSelectionBody()}</div>`
             : ''}

package/src/nile-detail/nile-detail.utils.ts

@@ -2,9 +2,20 @@ import { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../internal/
 import { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';
 import { waitForEvent } from '../internal/event';
 import type { NileDetail } from './nile-detail';
+export function getPreviewHeight(component: NileDetail): number {
+  if (!component.preview) {
+    return 0;
+  }
+  const pct = Math.min(100, Math.max(0, component.previewPercentage));
+  if (pct <= 0) {
+    return 0;
+  }
+  return Math.max(1, Math.round((component.body.scrollHeight * pct) / 100));
+}
 
 /*
   Runs the show animation on the detail body.
+  In preview mode the animation starts from the preview height instead of 0.
   Emits nile-show (cancelable) before and nile-after-show after the animation.
 */
 export async function animateShow(component: NileDetail): Promise<void> {
@@ -17,8 +28,15 @@ export async function animateShow(component: NileDetail): Promise<void> {
   await stopAnimations(component.body);
   component.body.hidden = false;
 
+  const previewHeight = getPreviewHeight(component);
   const { keyframes, options } = getAnimation(component, 'detail.show', { dir: 'ltr' });
-  await animateTo(component.body, shimKeyframesHeightAuto(keyframes, component.body.scrollHeight), options);
+  const frames = previewHeight > 0
+    ? [
+        { height: `${previewHeight}px`, opacity: '1' },
+        { height: 'auto', opacity: '1' }
+      ]
+    : keyframes;
+  await animateTo(component.body, shimKeyframesHeightAuto(frames, component.body.scrollHeight), options);
   component.body.style.height = 'auto';
 
   component.emit('nile-after-show');
@@ -26,6 +44,7 @@ export async function animateShow(component: NileDetail): Promise<void> {
 
 /*
   Runs the hide animation on the detail body.
+  In preview mode the body collapses to the preview height and stays visible.
   Emits nile-hide (cancelable) before and nile-after-hide after the animation.
 */
 export async function animateHide(component: NileDetail): Promise<void> {
@@ -37,10 +56,21 @@ export async function animateHide(component: NileDetail): Promise<void> {
 
   await stopAnimations(component.body);
 
+  const previewHeight = getPreviewHeight(component);
   const { keyframes, options } = getAnimation(component, 'detail.hide', { dir: 'ltr' });
-  await animateTo(component.body, shimKeyframesHeightAuto(keyframes, component.body.scrollHeight), options);
-  component.body.hidden = true;
-  component.body.style.height = 'auto';
+
+  if (previewHeight > 0) {
+    const frames = [
+      { height: 'auto', opacity: '1' },
+      { height: `${previewHeight}px`, opacity: '1' }
+    ];
+    await animateTo(component.body, shimKeyframesHeightAuto(frames, component.body.scrollHeight), options);
+    component.body.style.height = `${previewHeight}px`;
+  } else {
+    await animateTo(component.body, shimKeyframesHeightAuto(keyframes, component.body.scrollHeight), options);
+    component.body.hidden = true;
+    component.body.style.height = 'auto';
+  }
 
   component.emit('nile-after-hide');
 }

package/src/nile-slider/nile-slider.css.ts

@@ -14,12 +14,31 @@ export const styles = css`
     display: block;
   }
 
+  /* Field header  */
+
+  .field-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));
+  }
+
+  .field-label {
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
+  }
+
+  /* Layout  */
+
   .container {
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: 10px;
-    height: 100px;
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    min-height: var(--nile-spacing-5xl, var(--ng-spacing-5xl));
   }
 
   .align-item-center {
@@ -27,14 +46,14 @@ export const styles = css`
   }
 
   slot.span {
-    font-size: var(--nile-font-size-micro);
-    margin-top: 14px;
+    font-size: var(--nile-font-size-micro, var(--ng-font-size-text-xs));
   }
 
   .range-container {
     display: flex;
     flex-direction: column;
-    gap: var(--nile-spacing-sm);
+    flex: 1 1 auto;
+    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
   }
 
   .column-reverse {
@@ -47,18 +66,21 @@ export const styles = css`
   }
 
   .label-container span {
-    margin: var(--nile-spacing-none);
-    padding: var(--nile-spacing-none);
-    font-size: var(--nile-font-size-micro);
+    margin: var(--nile-spacing-none, var(--ng-spacing-none));
+    padding: var(--nile-spacing-none, var(--ng-spacing-none));
+    font-size: var(--nile-font-size-micro, var(--ng-font-size-text-xs));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
   }
 
+  /* track & fill  */
+
   .range {
     position: relative;
-    width: 228px;
-    height: 4px;
-    background-color: var(--nile-colors-neutral-400);
+    width: var(--nile-slider-width, 228px);
+    height: var(--nile-spacing-xs, var(--ng-spacing-sm));
+    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-quaternary));
     user-select: none;
-    border-radius: var(--nile-radius-radius-3xl);
+    border-radius: var(--nile-radius-radius-3xl, var(--ng-radius-full));
   }
 
   .range:hover {
@@ -69,50 +91,149 @@ export const styles = css`
     position: absolute;
     height: 100%;
     width: 0%;
-    background-color: var(--nile-colors-primary-600);
+    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
     top: 0px;
     left: 0px;
     z-index: 98;
-    border-radius: var(--nile-radius-radius-3xl);
+    border-radius: var(--nile-radius-radius-3xl, var(--ng-radius-full));
+  }
+
+  /* ------------------------------------------------------------------ */
+  /* Inline value label (valueLabel="bottom")                            */
+  /* ------------------------------------------------------------------ */
+
+  .value-label {
+    position: absolute;
+    /* Start at the track bottom, then push down past the handle and the
+       largest (pressed, 8px) ring */
+    top: 100%;
+    margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    transform: translateX(-50%);
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-font-size-micro, var(--ng-font-size-text-xs));
+    font-variant-numeric: tabular-nums;
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));
+    white-space: nowrap;
+    pointer-events: none;
+    user-select: none;
+    -webkit-user-select: none;
   }
 
-  .range-button {
-    height: 12px;
-    width: 12px;
-    background-color: var(--nile-colors-primary-600);
+  /* Reserve room below the track for the inline value label */
+  :host([valuelabel='bottom']) .container {
+    padding-bottom: var(--nile-spacing-2xl, var(--ng-spacing-2xl));
+  }
+
+  /* Handles    */
+
+  .range-button,
+  .range-button-two {
+    height: var(--nile-spacing-lg, var(--ng-spacing-2xl));
+    width: var(--nile-spacing-lg, var(--ng-spacing-2xl));
+    box-sizing: border-box;
+    /* Enterprise: solid brand dot - NextGen: white fill + brand border */
+    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-primary));
+    border: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) solid
+      var(--nile-colors-primary-600, var(--ng-colors-border-brand-alt));
     position: absolute;
     top: 50%;
     transform: translate(-50%, -50%);
-    border-radius: var(--nile-radius-radius-3xl);
+    border-radius: var(--nile-radius-radius-3xl, var(--ng-radius-full));
     left: 0;
     z-index: 100;
-    box-shadow: rgba(0, 82, 145, 0.1) 0px 1px 2px 0px, rgba(0, 94, 166, 0.15) 0px 0px 0px 2px;
-    transition: box-shadow var(--nile-transition-duration-default) ease;
+    cursor: grab;
+    transition:
+      box-shadow var(--nile-transition-duration-short, 120ms) ease,
+      background-color var(--nile-transition-duration-short, 120ms) ease,
+      transform var(--nile-transition-duration-shorter, 80ms) ease;
   }
 
-  .range-button:hover, .range-button-two:hover {
-    cursor: pointer;
-    background-color: var(--nile-colors-primary-700);
+  .range-button-two {
+    left: 100%;
   }
 
-  .range-button:active, .range-button-two:active {
-    transition: box-shadow var(--nile-transition-duration-default) ease;
-    background-color: var(--nile-colors-primary-700);
-    box-shadow: rgba(0, 82, 145, 0.1) 0px 1px 2px 0px, rgba(0, 94, 166, 0.15) 0px 0px 0px 4px;
+  /* Hover: ring (Enterprise 2px - NextGen 6px) */
+  .range-button:hover,
+  .range-button-two:hover {
+    cursor: grab;
+    box-shadow: 0 0 0 var(--nile-spacing-xxs, var(--ng-spacing-sm))
+      var(--nile-colors-primary-100, var(--ng-colors-bg-brand-secondary));
   }
 
-  .range-button-two {
-    height: 12px;
-    width: 12px;
-    background-color: var(--nile-colors-primary-600);
-    position: absolute;
-    top: 50%;
+  /* Focused: theme focus ring */
+  .range-button:focus-visible,
+  .range-button-two:focus-visible {
+    outline: none;
+    box-shadow: var(--nile-focus-ring,
+      var(--ng-focus-ring,
+        0 0 0 var(--nile-spacing-xs) var(--nile-colors-primary-100)));
+  }
+
+  /* Pressed: ring (Enterprise 4px - NextGen 8px) + 1.1x scale */
+  .range-button:active,
+  .range-button-two:active {
+    cursor: grabbing;
+    transform: translate(-50%, -50%) scale(1.1);
+    box-shadow: 0 0 0 var(--nile-spacing-xs, var(--ng-spacing-md))
+      var(--nile-colors-primary-100, var(--ng-colors-bg-brand-secondary));
+  }
+
+  /* Error state    */
+  :host([error]) .range-completed {
+    background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid));
+  }
+
+  :host([error]) .range-button,
+  :host([error]) .range-button-two {
+    background-color: var(--nile-colors-red-700, var(--ng-colors-bg-primary));
+    border-color: var(--nile-colors-red-700, var(--ng-colors-border-error));
+  }
+
+  :host([error]) .range-button:hover,
+  :host([error]) .range-button-two:hover {
+    box-shadow: 0 0 0 var(--nile-spacing-xxs, var(--ng-spacing-sm))
+      var(--nile-colors-red-100, var(--ng-colors-bg-error-secondary, var(--ng-color-error-100)));
+  }
+
+  :host([error]) .range-button:focus-visible,
+  :host([error]) .range-button-two:focus-visible {
+    box-shadow: var(--nile-focus-ring-error,
+      var(--ng-focus-ring-error,
+        0 0 0 var(--nile-spacing-xs) var(--nile-colors-red-100)));
+  }
+
+  /* Disabled state */
+  :host([disabled]) .range,
+  :host([disabled]) .range:hover {
+    cursor: not-allowed;
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));
+  }
+
+  :host([disabled]) .range-completed {
+    background-color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));
+  }
+
+  :host([disabled]) .range-button,
+  :host([disabled]) .range-button-two {
+    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));
+    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));
+    cursor: not-allowed;
+  }
+
+  :host([disabled]) .range-button:hover,
+  :host([disabled]) .range-button-two:hover,
+  :host([disabled]) .range-button:active,
+  :host([disabled]) .range-button-two:active {
+    box-shadow: none;
     transform: translate(-50%, -50%);
-    border-radius: var(--nile-radius-radius-3xl);
-    left: 100%;
-    z-index: 100;
-    box-shadow: rgba(0, 82, 145, 0.1) 0px 1px 2px 0px, rgba(0, 94, 166, 0.15) 0px 0px 0px 2px;
-    transition: box-shadow var(--nile-transition-duration-default) ease;
+  }
+
+  :host([disabled]) .field-label,
+  :host([disabled]) .value-label,
+  :host([disabled]) .label-container span {
+    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));
+    user-select: none;
+    -webkit-user-select: none;
   }
 `;
 

package/src/nile-slider/nile-slider.template.ts

@@ -1,6 +1,10 @@
 import { TemplateResult, html } from 'lit';
 import NileSlider from './nile-slider';
 import { classMap } from 'lit/directives/class-map.js';
+import { valueToPercent } from './utils/nile-slider.utils';
+
+const tooltipDisabled = (nileSlider: NileSlider): boolean =>
+  nileSlider.disabled || nileSlider.valueLabel !== 'tooltip';
 
 export const rangeSlider = (nileSlider: NileSlider): TemplateResult => {
   return html`
@@ -8,6 +12,7 @@ export const rangeSlider = (nileSlider: NileSlider): TemplateResult => {
       <nile-tooltip
         content=${nileSlider.rangeOneValue}
         placement=${nileSlider.tooltipPosition}
+        ?disabled=${tooltipDisabled(nileSlider)}
       >
         <div 
           id="range-one" 
@@ -24,6 +29,7 @@ export const rangeSlider = (nileSlider: NileSlider): TemplateResult => {
       <nile-tooltip
         content=${nileSlider.rangeTwoValue}
         placement=${nileSlider.tooltipPosition}
+        ?disabled=${tooltipDisabled(nileSlider)}
       >
         <div
           id="range-two"
@@ -47,6 +53,7 @@ export const singleSlider = (nileSlider: NileSlider): TemplateResult => {
       <nile-tooltip
         content=${nileSlider.value}
         placement=${nileSlider.tooltipPosition}
+        ?disabled=${tooltipDisabled(nileSlider)}
       >
         <div 
           class=${classMap({
@@ -59,7 +66,7 @@ export const singleSlider = (nileSlider: NileSlider): TemplateResult => {
           aria-valuemin=${nileSlider.minValue}
           aria-valuemax=${nileSlider.maxValue}
           aria-valuenow=${nileSlider.value}
-          aria-label=${nileSlider.ariaLabel || "Slider value"}
+          aria-label=${nileSlider.ariaLabel || nileSlider.label || "Slider value"}
         ></div>
       </nile-tooltip>
     </div>
@@ -74,4 +81,40 @@ export const lableContaier = (nileSlider: NileSlider): TemplateResult => {
       <span id="label-end">${nileSlider.labelEnd}</span>
     </div>
   `;
-};
+};
+
+
+export const fieldHeader = (nileSlider: NileSlider): TemplateResult => {
+  return html`
+    <div part="field-header" class="field-header">
+      <label id="field-label" part="field-label" class="field-label">
+        ${nileSlider.label}
+      </label>
+    </div>
+  `;
+};
+
+
+export const bottomValueLabels = (nileSlider: NileSlider): TemplateResult => {
+  if (!nileSlider.rangeSlider) {
+    return html`
+      <span
+        part="value-label"
+        class="value-label"
+        style="left: ${valueToPercent(nileSlider.value, nileSlider)}%"
+      >${nileSlider.value}</span>
+    `;
+  }
+  return html`
+    <span
+      part="value-label"
+      class="value-label"
+      style="left: ${valueToPercent(nileSlider.rangeOneValue, nileSlider)}%"
+    >${nileSlider.rangeOneValue}</span>
+    <span
+      part="value-label"
+      class="value-label"
+      style="left: ${valueToPercent(nileSlider.rangeTwoValue, nileSlider)}%"
+    >${nileSlider.rangeTwoValue}</span>
+  `;
+};