@aquera/nile-elements 1.8.1 → 1.8.3

package/dist/nile-slider/nile-slider.template.esm.js

@@ -1,8 +1,9 @@
-import{html as a}from"lit";import{classMap as e}from"lit/directives/class-map.js";const i=e=>a`
+import{html as a}from"lit";import{classMap as l}from"lit/directives/class-map.js";import{v as e}from"./utils/nile-slider.utils.esm.js";const i=a=>a.disabled||"tooltip"!==a.valueLabel,t=l=>a`
     <div>
       <nile-tooltip
-        content=${e.rangeOneValue}
-        placement=${e.tooltipPosition}
+        content=${l.rangeOneValue}
+        placement=${l.tooltipPosition}
+        ?disabled=${i(l)}
       >
         <div 
           id="range-one" 
@@ -10,15 +11,16 @@ import{html as a}from"lit";import{classMap as e}from"lit/directives/class-map.js
           part="range-button"
           role="slider"
           tabindex="0"
-          aria-valuemin=${e.minValue}
-          aria-valuemax=${e.maxValue}
-          aria-valuenow=${e.rangeOneValue}
+          aria-valuemin=${l.minValue}
+          aria-valuemax=${l.maxValue}
+          aria-valuenow=${l.rangeOneValue}
           aria-label="Minimum value"
         ></div>
       </nile-tooltip>
       <nile-tooltip
-        content=${e.rangeTwoValue}
-        placement=${e.tooltipPosition}
+        content=${l.rangeTwoValue}
+        placement=${l.tooltipPosition}
+        ?disabled=${i(l)}
       >
         <div
           id="range-two"
@@ -26,34 +28,58 @@ import{html as a}from"lit";import{classMap as e}from"lit/directives/class-map.js
           part="range-button-two"
           role="slider"
           tabindex="0"
-          aria-valuemin=${e.minValue}
-          aria-valuemax=${e.maxValue}
-          aria-valuenow=${e.rangeTwoValue}
+          aria-valuemin=${l.minValue}
+          aria-valuemax=${l.maxValue}
+          aria-valuenow=${l.rangeTwoValue}
           aria-label="Maximum value"
         ></div>
       </nile-tooltip>
     </div>
-  `,t=i=>a`
+  `,n=e=>a`
     <div>
       <nile-tooltip
-        content=${i.value}
-        placement=${i.tooltipPosition}
+        content=${e.value}
+        placement=${e.tooltipPosition}
+        ?disabled=${i(e)}
       >
         <div 
-          class=${e({"range-button":!0,"range-button-active":"one"===i.activeThumb})} 
+          class=${l({"range-button":!0,"range-button-active":"one"===e.activeThumb})} 
           part="range-button"
           role="slider"
           tabindex="0"
-          aria-valuemin=${i.minValue}
-          aria-valuemax=${i.maxValue}
-          aria-valuenow=${i.value}
-          aria-label=${i.ariaLabel||"Slider value"}
+          aria-valuemin=${e.minValue}
+          aria-valuemax=${e.maxValue}
+          aria-valuenow=${e.value}
+          aria-label=${e.ariaLabel||e.label||"Slider value"}
         ></div>
       </nile-tooltip>
     </div>
-  `,l=e=>a`
+  `,s=l=>a`
     <div part="label-container" class="label-container">
-      <span id="label-start">${e.labelStart}</span>
-      <span id="label-end">${e.labelEnd}</span>
+      <span id="label-start">${l.labelStart}</span>
+      <span id="label-end">${l.labelEnd}</span>
+    </div>
+  `,r=l=>a`
+    <div part="field-header" class="field-header">
+      <label id="field-label" part="field-label" class="field-label">
+        ${l.label}
+      </label>
     </div>
-  `;export{l,i as r,t as s};
+  `,o=l=>l.rangeSlider?a`
+    <span
+      part="value-label"
+      class="value-label"
+      style="left: ${e(l.rangeOneValue,l)}%"
+    >${l.rangeOneValue}</span>
+    <span
+      part="value-label"
+      class="value-label"
+      style="left: ${e(l.rangeTwoValue,l)}%"
+    >${l.rangeTwoValue}</span>
+  `:a`
+      <span
+        part="value-label"
+        class="value-label"
+        style="left: ${e(l.value,l)}%"
+      >${l.value}</span>
+    `;export{o as b,r as f,s as l,t as r,n as s};

package/dist/nile-slider/utils/nile-slider.utils.cjs.js

@@ -1,2 +1,2 @@
-System.register([],function(_export,_context){"use strict";var t,a,n,o,e,s,u,h,c,l;return{setters:[],execute:function execute(){t=function t(_t,a){return Math.max(0,Math.min(a,_t.width))/_t.width*100;},a=function a(t,_a){var n=_a.minValue+t/100*(_a.maxValue-_a.minValue);return _a.maxValue-_a.minValue<1?parseFloat(n.toFixed(2)):Math.floor(n);},_export("v",n=function n(t,a){return(t-a.minValue)/(a.maxValue-a.minValue)*100;}),_export("h",o=function o(n,_o,e){var s=n.clientX-_o.left,u=t(_o,s);e.value=a(u,e),e.emit("nile-change",{value:e.value}),e.buttonOne.style.left="".concat(u,"%"),e.completed.style.width="".concat(u,"%");}),_export("a",e=function e(n,o,_e){var s=n.clientX-o.left,u=t(o,s);_e.rangeOneValue=a(u,_e),_e.rangeOneValue=Math.min(_e.rangeOneValue,_e.rangeTwoValue),_e.emit("nile-button-first-change",{value:_e.rangeOneValue}),_e.rangeTwoValue>_e.rangeOneValue&&(_e.buttonOne.style.left="".concat(u,"%"));}),_export("b",s=function s(n,o,e){var s=n.clientX-o.left,u=t(o,s);e.rangeTwoValue=a(u,e),e.rangeTwoValue=Math.max(e.rangeTwoValue,e.rangeOneValue),e.emit("nile-button-last-change",{value:e.rangeTwoValue}),e.rangeTwoValue>e.rangeOneValue&&(e.buttonTwo.style.left="".concat(u,"%"));}),_export("g",u=function u(t){var _t$buttonOne,_t$buttonTwo;t.range=t.renderRoot.querySelector(".range"),t.buttonOne=t.renderRoot.querySelector(".range-button"),t.buttonTwo=t.renderRoot.querySelector(".range-button-two"),t.completed=t.renderRoot.querySelector(".range-completed"),t.range.addEventListener("mousedown",t.onMouseDown),(_t$buttonOne=t.buttonOne)!==null&&_t$buttonOne!==void 0&&_t$buttonOne.addEventListener("mousedown",function(){t.activeThumb="one",h(t);}),(_t$buttonTwo=t.buttonTwo)===null||_t$buttonTwo===void 0?void 0:_t$buttonTwo.addEventListener("mousedown",function(){t.activeThumb="two",h(t);});}),_export("c",h=function h(t){window.addEventListener("mousemove",t.onMouseMove),window.addEventListener("mouseup",t.onMouseUp);}),_export("r",c=function c(t){window.removeEventListener("mousemove",t.onMouseMove),window.removeEventListener("mouseup",t.onMouseUp);}),_export("d",l=function l(t,a){if(Math.abs(t-a.rangeOneValue)<=Math.abs(t-a.rangeTwoValue)){var _n=Math.min(t,a.rangeTwoValue);a.rangeOneValue=a.checkValueValidity(_n,a.minValue,a.maxValue);}else{var _n2=Math.max(t,a.rangeOneValue);a.rangeTwoValue=a.checkValueValidity(_n2,a.minValue,a.maxValue);}var o=n(a.rangeOneValue,a),e=n(a.rangeTwoValue,a);a.buttonOne.style.left="".concat(o,"%"),a.buttonTwo.style.left="".concat(e,"%");var s=Math.min(o,e),u=Math.abs(e-o);a.completed.style.left="".concat(s,"%"),a.completed.style.width="".concat(u,"%"),a.emit("nile-button-first-change",{value:a.rangeOneValue}),a.emit("nile-button-last-change",{value:a.rangeTwoValue});});}};});
+System.register([],function(_export,_context){"use strict";var t,a,n,o,e,s,u,h,c,l;return{setters:[],execute:function execute(){t=function t(_t,a){return Math.max(0,Math.min(a,_t.width))/_t.width*100;},a=function a(t,_a){var n=_a.minValue+t/100*(_a.maxValue-_a.minValue);return _a.maxValue-_a.minValue<1?parseFloat(n.toFixed(2)):Math.floor(n);},_export("v",n=function n(t,a){return(t-a.minValue)/(a.maxValue-a.minValue)*100;}),_export("h",o=function o(n,_o,e){var s=n.clientX-_o.left,u=t(_o,s);e.value=a(u,e),e.emit("nile-change",{value:e.value}),e.buttonOne.style.left="".concat(u,"%"),e.completed.style.width="".concat(u,"%");}),_export("a",e=function e(n,o,_e){var s=n.clientX-o.left,u=t(o,s);_e.rangeOneValue=a(u,_e),_e.rangeOneValue=Math.min(_e.rangeOneValue,_e.rangeTwoValue),_e.emit("nile-button-first-change",{value:_e.rangeOneValue}),_e.rangeTwoValue>_e.rangeOneValue&&(_e.buttonOne.style.left="".concat(u,"%"));}),_export("b",s=function s(n,o,e){var s=n.clientX-o.left,u=t(o,s);e.rangeTwoValue=a(u,e),e.rangeTwoValue=Math.max(e.rangeTwoValue,e.rangeOneValue),e.emit("nile-button-last-change",{value:e.rangeTwoValue}),e.rangeTwoValue>e.rangeOneValue&&(e.buttonTwo.style.left="".concat(u,"%"));}),_export("g",u=function u(t){var _t$buttonOne,_t$buttonTwo;t.range=t.renderRoot.querySelector(".range"),t.buttonOne=t.renderRoot.querySelector(".range-button"),t.buttonTwo=t.renderRoot.querySelector(".range-button-two"),t.completed=t.renderRoot.querySelector(".range-completed"),t.range.addEventListener("mousedown",t.onMouseDown),(_t$buttonOne=t.buttonOne)!==null&&_t$buttonOne!==void 0&&_t$buttonOne.addEventListener("mousedown",function(){t.disabled||(t.activeThumb="one",h(t));}),(_t$buttonTwo=t.buttonTwo)===null||_t$buttonTwo===void 0?void 0:_t$buttonTwo.addEventListener("mousedown",function(){t.disabled||(t.activeThumb="two",h(t));});}),_export("c",h=function h(t){window.addEventListener("mousemove",t.onMouseMove),window.addEventListener("mouseup",t.onMouseUp);}),_export("r",c=function c(t){window.removeEventListener("mousemove",t.onMouseMove),window.removeEventListener("mouseup",t.onMouseUp);}),_export("d",l=function l(t,a){if(Math.abs(t-a.rangeOneValue)<=Math.abs(t-a.rangeTwoValue)){var _n=Math.min(t,a.rangeTwoValue);a.rangeOneValue=a.checkValueValidity(_n,a.minValue,a.maxValue);}else{var _n2=Math.max(t,a.rangeOneValue);a.rangeTwoValue=a.checkValueValidity(_n2,a.minValue,a.maxValue);}var o=n(a.rangeOneValue,a),e=n(a.rangeTwoValue,a);a.buttonOne.style.left="".concat(o,"%"),a.buttonTwo.style.left="".concat(e,"%");var s=Math.min(o,e),u=Math.abs(e-o);a.completed.style.left="".concat(s,"%"),a.completed.style.width="".concat(u,"%"),a.emit("nile-button-first-change",{value:a.rangeOneValue}),a.emit("nile-button-last-change",{value:a.rangeTwoValue});});}};});
 //# sourceMappingURL=nile-slider.utils.cjs.js.map

package/dist/nile-slider/utils/nile-slider.utils.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-slider.utils.cjs.js","sources":["../../../../src/nile-slider/utils/nile-slider.utils.ts"],"sourcesContent":["import NileSlider from '../nile-slider';\nimport { NileSliderEvents } from '../types/nile-slider.enums';\n\nexport const getClampedPercent = (\n  rect: DOMRect,\n  x: number,\n): number => {\n  const clampedX = Math.max(0, Math.min(x, rect.width)); \n  const percent = (clampedX / rect.width) * 100;\n  return percent;\n};\n\nexport const percentToValue = (percent: number, nileSlider: NileSlider): number => {\n  const value = nileSlider.minValue + (percent / 100) * (nileSlider.maxValue - nileSlider.minValue);\n  if(nileSlider.maxValue - nileSlider.minValue < 1) {\n    return parseFloat(value.toFixed(2));\n  } else {\n    return Math.floor(value);\n  }\n};\n\nexport const valueToPercent = (value: number, nileSlider: NileSlider): number => {\n  return ((value - nileSlider.minValue) / (nileSlider.maxValue - nileSlider.minValue)) * 100;\n};\n\nexport const handleSingleSlider = (\n  e: MouseEvent,\n  rect: DOMRect,\n  nileSlider: NileSlider\n): void => {\n  const x = e.clientX - rect.left;\n  const percent = getClampedPercent(rect, x);\n  nileSlider.value = percentToValue(percent, nileSlider);\n  nileSlider.emit(NileSliderEvents.NILE_CHANGE, { value: nileSlider.value });\n  nileSlider.buttonOne.style.left = `${percent}%`;\n  nileSlider.completed.style.width = `${percent}%`;\n};\n\nexport const handleRangeOne = (\n  e: MouseEvent,\n  rect: DOMRect,\n  nileSlider: NileSlider\n): void => {\n  const x = e.clientX - rect.left;\n  const percent = getClampedPercent(rect, x);\n  nileSlider.rangeOneValue = percentToValue(percent, nileSlider);\n  nileSlider.rangeOneValue = Math.min(nileSlider.rangeOneValue, nileSlider.rangeTwoValue);\n  nileSlider.emit(NileSliderEvents.NILE_BUTTON_FIRST_CHANGE, {\n    value: nileSlider.rangeOneValue,\n  });\n  if (nileSlider.rangeTwoValue > nileSlider.rangeOneValue) {\n    nileSlider.buttonOne.style.left = `${percent}%`;\n  }\n};\n\nexport const handleRangeTwo = (\n  e: MouseEvent,\n  rect: DOMRect,\n  nileSlider: NileSlider\n): void => {\n  const x = e.clientX - rect.left;\n  const percent = getClampedPercent(rect, x);\n  nileSlider.rangeTwoValue = percentToValue(percent, nileSlider);\n  nileSlider.rangeTwoValue = Math.max(nileSlider.rangeTwoValue, nileSlider.rangeOneValue);\n  nileSlider.emit(NileSliderEvents.NILE_BUTTON_LAST_CHANGE, {\n    value: nileSlider.rangeTwoValue,\n  });\n\n  if (nileSlider.rangeTwoValue > nileSlider.rangeOneValue) {\n    nileSlider.buttonTwo.style.left = `${percent}%`;\n  }\n};\n\nexport const getHtmlElements = (nileSlider: NileSlider) => {\n  nileSlider.range = nileSlider.renderRoot.querySelector('.range') as HTMLElement;\n  nileSlider.buttonOne = nileSlider.renderRoot.querySelector('.range-button') as HTMLElement;\n  nileSlider.buttonTwo = nileSlider.renderRoot.querySelector('.range-button-two') as HTMLElement;\n  nileSlider.completed = nileSlider.renderRoot.querySelector('.range-completed') as HTMLElement;\n\n  nileSlider.range.addEventListener('mousedown', nileSlider.onMouseDown);\n\n  nileSlider.buttonOne?.addEventListener('mousedown', () => {\n    nileSlider.activeThumb = 'one';\n    addMoveListeners(nileSlider);\n  });\n\n  nileSlider.buttonTwo?.addEventListener('mousedown', () => {\n    nileSlider.activeThumb = 'two';\n    addMoveListeners(nileSlider);\n  });\n};\n\nexport const addMoveListeners = (nileSlider: NileSlider): void => {\n  window.addEventListener('mousemove', nileSlider.onMouseMove);\n  window.addEventListener('mouseup', nileSlider.onMouseUp);\n};\n\nexport const removeMoveListeners = (nileSlider: NileSlider): void => {\n  window.removeEventListener('mousemove', nileSlider.onMouseMove);\n  window.removeEventListener('mouseup', nileSlider.onMouseUp);\n};\n\nexport const handleTwoThumbClick = (\n  value: number,\n  nileSlider: NileSlider\n): void => {\n  const distToOne = Math.abs(value - nileSlider.rangeOneValue);\n  const distToTwo = Math.abs(value - nileSlider.rangeTwoValue);\n\n  if (distToOne <= distToTwo) {\n    const clamped = Math.min(value, nileSlider.rangeTwoValue);\n    nileSlider.rangeOneValue = nileSlider.checkValueValidity(clamped, nileSlider.minValue, nileSlider.maxValue);\n  } else {\n    const clamped = Math.max(value, nileSlider.rangeOneValue);\n    nileSlider.rangeTwoValue = nileSlider.checkValueValidity(clamped, nileSlider.minValue, nileSlider.maxValue);\n  }  \n\n  const percentOne = valueToPercent(nileSlider.rangeOneValue, nileSlider);\n  const percentTwo = valueToPercent(nileSlider.rangeTwoValue, nileSlider);\n\n  nileSlider.buttonOne.style.left = `${percentOne}%`;\n  nileSlider.buttonTwo.style.left = `${percentTwo}%`;\n\n  const left = Math.min(percentOne, percentTwo);\n  const width = Math.abs(percentTwo - percentOne);\n\n  nileSlider.completed.style.left = `${left}%`;\n  nileSlider.completed.style.width = `${width}%`;\n\n  nileSlider.emit(NileSliderEvents.NILE_BUTTON_FIRST_CHANGE, {\n    value: nileSlider.rangeOneValue,\n  });\n  nileSlider.emit(NileSliderEvents.NILE_BUTTON_LAST_CHANGE, {\n    value: nileSlider.rangeTwoValue,\n  });\n};\n"],"names":["getClampedPercent","rect","x","Math","max","min","width","percentToValue","percent","nileSlider","value","minValue","maxValue","parseFloat","toFixed","floor","_export","valueToPercent","handleSingleSlider","e","clientX","left","emit","buttonOne","style","completed","concat","handleRangeOne","rangeOneValue","rangeTwoValue","handleRangeTwo","buttonTwo","getHtmlElements","range","renderRoot","querySelector","addEventListener","onMouseDown","activeThumb","addMoveListeners","window","onMouseMove","onMouseUp","removeMoveListeners","removeEventListener","handleTwoThumbClick","abs","clamped","checkValueValidity","percentOne","percentTwo"],"mappings":"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"}
+{"version":3,"file":"nile-slider.utils.cjs.js","sources":["../../../../src/nile-slider/utils/nile-slider.utils.ts"],"sourcesContent":["import NileSlider from '../nile-slider';\nimport { NileSliderEvents } from '../types/nile-slider.enums';\n\nexport const getClampedPercent = (\n  rect: DOMRect,\n  x: number,\n): number => {\n  const clampedX = Math.max(0, Math.min(x, rect.width)); \n  const percent = (clampedX / rect.width) * 100;\n  return percent;\n};\n\nexport const percentToValue = (percent: number, nileSlider: NileSlider): number => {\n  const value = nileSlider.minValue + (percent / 100) * (nileSlider.maxValue - nileSlider.minValue);\n  if(nileSlider.maxValue - nileSlider.minValue < 1) {\n    return parseFloat(value.toFixed(2));\n  } else {\n    return Math.floor(value);\n  }\n};\n\nexport const valueToPercent = (value: number, nileSlider: NileSlider): number => {\n  return ((value - nileSlider.minValue) / (nileSlider.maxValue - nileSlider.minValue)) * 100;\n};\n\nexport const handleSingleSlider = (\n  e: MouseEvent,\n  rect: DOMRect,\n  nileSlider: NileSlider\n): void => {\n  const x = e.clientX - rect.left;\n  const percent = getClampedPercent(rect, x);\n  nileSlider.value = percentToValue(percent, nileSlider);\n  nileSlider.emit(NileSliderEvents.NILE_CHANGE, { value: nileSlider.value });\n  nileSlider.buttonOne.style.left = `${percent}%`;\n  nileSlider.completed.style.width = `${percent}%`;\n};\n\nexport const handleRangeOne = (\n  e: MouseEvent,\n  rect: DOMRect,\n  nileSlider: NileSlider\n): void => {\n  const x = e.clientX - rect.left;\n  const percent = getClampedPercent(rect, x);\n  nileSlider.rangeOneValue = percentToValue(percent, nileSlider);\n  nileSlider.rangeOneValue = Math.min(nileSlider.rangeOneValue, nileSlider.rangeTwoValue);\n  nileSlider.emit(NileSliderEvents.NILE_BUTTON_FIRST_CHANGE, {\n    value: nileSlider.rangeOneValue,\n  });\n  if (nileSlider.rangeTwoValue > nileSlider.rangeOneValue) {\n    nileSlider.buttonOne.style.left = `${percent}%`;\n  }\n};\n\nexport const handleRangeTwo = (\n  e: MouseEvent,\n  rect: DOMRect,\n  nileSlider: NileSlider\n): void => {\n  const x = e.clientX - rect.left;\n  const percent = getClampedPercent(rect, x);\n  nileSlider.rangeTwoValue = percentToValue(percent, nileSlider);\n  nileSlider.rangeTwoValue = Math.max(nileSlider.rangeTwoValue, nileSlider.rangeOneValue);\n  nileSlider.emit(NileSliderEvents.NILE_BUTTON_LAST_CHANGE, {\n    value: nileSlider.rangeTwoValue,\n  });\n\n  if (nileSlider.rangeTwoValue > nileSlider.rangeOneValue) {\n    nileSlider.buttonTwo.style.left = `${percent}%`;\n  }\n};\n\nexport const getHtmlElements = (nileSlider: NileSlider) => {\n  nileSlider.range = nileSlider.renderRoot.querySelector('.range') as HTMLElement;\n  nileSlider.buttonOne = nileSlider.renderRoot.querySelector('.range-button') as HTMLElement;\n  nileSlider.buttonTwo = nileSlider.renderRoot.querySelector('.range-button-two') as HTMLElement;\n  nileSlider.completed = nileSlider.renderRoot.querySelector('.range-completed') as HTMLElement;\n\n  nileSlider.range.addEventListener('mousedown', nileSlider.onMouseDown);\n\n  nileSlider.buttonOne?.addEventListener('mousedown', () => {\n    if (nileSlider.disabled) return;\n    nileSlider.activeThumb = 'one';\n    addMoveListeners(nileSlider);\n  });\n\n  nileSlider.buttonTwo?.addEventListener('mousedown', () => {\n    if (nileSlider.disabled) return;\n    nileSlider.activeThumb = 'two';\n    addMoveListeners(nileSlider);\n  });\n};\n\nexport const addMoveListeners = (nileSlider: NileSlider): void => {\n  window.addEventListener('mousemove', nileSlider.onMouseMove);\n  window.addEventListener('mouseup', nileSlider.onMouseUp);\n};\n\nexport const removeMoveListeners = (nileSlider: NileSlider): void => {\n  window.removeEventListener('mousemove', nileSlider.onMouseMove);\n  window.removeEventListener('mouseup', nileSlider.onMouseUp);\n};\n\nexport const handleTwoThumbClick = (\n  value: number,\n  nileSlider: NileSlider\n): void => {\n  const distToOne = Math.abs(value - nileSlider.rangeOneValue);\n  const distToTwo = Math.abs(value - nileSlider.rangeTwoValue);\n\n  if (distToOne <= distToTwo) {\n    const clamped = Math.min(value, nileSlider.rangeTwoValue);\n    nileSlider.rangeOneValue = nileSlider.checkValueValidity(clamped, nileSlider.minValue, nileSlider.maxValue);\n  } else {\n    const clamped = Math.max(value, nileSlider.rangeOneValue);\n    nileSlider.rangeTwoValue = nileSlider.checkValueValidity(clamped, nileSlider.minValue, nileSlider.maxValue);\n  }  \n\n  const percentOne = valueToPercent(nileSlider.rangeOneValue, nileSlider);\n  const percentTwo = valueToPercent(nileSlider.rangeTwoValue, nileSlider);\n\n  nileSlider.buttonOne.style.left = `${percentOne}%`;\n  nileSlider.buttonTwo.style.left = `${percentTwo}%`;\n\n  const left = Math.min(percentOne, percentTwo);\n  const width = Math.abs(percentTwo - percentOne);\n\n  nileSlider.completed.style.left = `${left}%`;\n  nileSlider.completed.style.width = `${width}%`;\n\n  nileSlider.emit(NileSliderEvents.NILE_BUTTON_FIRST_CHANGE, {\n    value: nileSlider.rangeOneValue,\n  });\n  nileSlider.emit(NileSliderEvents.NILE_BUTTON_LAST_CHANGE, {\n    value: nileSlider.rangeTwoValue,\n  });\n};\n"],"names":["getClampedPercent","rect","x","Math","max","min","width","percentToValue","percent","nileSlider","value","minValue","maxValue","parseFloat","toFixed","floor","_export","valueToPercent","n","handleSingleSlider","e","clientX","left","emit","buttonOne","style","completed","handleRangeOne","rangeOneValue","rangeTwoValue","handleRangeTwo","s","buttonTwo","concat","getHtmlElements","range","renderRoot","querySelector","addEventListener","onMouseDown","disabled","activeThumb","addMoveListeners","window","onMouseMove","onMouseUp","removeMoveListeners","removeEventListener","handleTwoThumbClick","l","abs","clamped","checkValueValidity","percentOne","percentTwo"],"mappings":"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"}

package/dist/nile-slider/utils/nile-slider.utils.esm.js

@@ -1 +1 @@
-const t=(t,a)=>Math.max(0,Math.min(a,t.width))/t.width*100,a=(t,a)=>{const n=a.minValue+t/100*(a.maxValue-a.minValue);return a.maxValue-a.minValue<1?parseFloat(n.toFixed(2)):Math.floor(n)},n=(t,a)=>(t-a.minValue)/(a.maxValue-a.minValue)*100,o=(n,o,e)=>{const s=n.clientX-o.left,u=t(o,s);e.value=a(u,e),e.emit("nile-change",{value:e.value}),e.buttonOne.style.left=`${u}%`,e.completed.style.width=`${u}%`},e=(n,o,e)=>{const s=n.clientX-o.left,u=t(o,s);e.rangeOneValue=a(u,e),e.rangeOneValue=Math.min(e.rangeOneValue,e.rangeTwoValue),e.emit("nile-button-first-change",{value:e.rangeOneValue}),e.rangeTwoValue>e.rangeOneValue&&(e.buttonOne.style.left=`${u}%`)},s=(n,o,e)=>{const s=n.clientX-o.left,u=t(o,s);e.rangeTwoValue=a(u,e),e.rangeTwoValue=Math.max(e.rangeTwoValue,e.rangeOneValue),e.emit("nile-button-last-change",{value:e.rangeTwoValue}),e.rangeTwoValue>e.rangeOneValue&&(e.buttonTwo.style.left=`${u}%`)},u=t=>{t.range=t.renderRoot.querySelector(".range"),t.buttonOne=t.renderRoot.querySelector(".range-button"),t.buttonTwo=t.renderRoot.querySelector(".range-button-two"),t.completed=t.renderRoot.querySelector(".range-completed"),t.range.addEventListener("mousedown",t.onMouseDown),t.buttonOne?.addEventListener("mousedown",(()=>{t.activeThumb="one",h(t)})),t.buttonTwo?.addEventListener("mousedown",(()=>{t.activeThumb="two",h(t)}))},h=t=>{window.addEventListener("mousemove",t.onMouseMove),window.addEventListener("mouseup",t.onMouseUp)},c=t=>{window.removeEventListener("mousemove",t.onMouseMove),window.removeEventListener("mouseup",t.onMouseUp)},l=(t,a)=>{if(Math.abs(t-a.rangeOneValue)<=Math.abs(t-a.rangeTwoValue)){const n=Math.min(t,a.rangeTwoValue);a.rangeOneValue=a.checkValueValidity(n,a.minValue,a.maxValue)}else{const n=Math.max(t,a.rangeOneValue);a.rangeTwoValue=a.checkValueValidity(n,a.minValue,a.maxValue)}const o=n(a.rangeOneValue,a),e=n(a.rangeTwoValue,a);a.buttonOne.style.left=`${o}%`,a.buttonTwo.style.left=`${e}%`;const s=Math.min(o,e),u=Math.abs(e-o);a.completed.style.left=`${s}%`,a.completed.style.width=`${u}%`,a.emit("nile-button-first-change",{value:a.rangeOneValue}),a.emit("nile-button-last-change",{value:a.rangeTwoValue})};export{e as a,s as b,h as c,l as d,u as g,o as h,c as r,n as v};
+const t=(t,a)=>Math.max(0,Math.min(a,t.width))/t.width*100,a=(t,a)=>{const n=a.minValue+t/100*(a.maxValue-a.minValue);return a.maxValue-a.minValue<1?parseFloat(n.toFixed(2)):Math.floor(n)},n=(t,a)=>(t-a.minValue)/(a.maxValue-a.minValue)*100,o=(n,o,e)=>{const s=n.clientX-o.left,u=t(o,s);e.value=a(u,e),e.emit("nile-change",{value:e.value}),e.buttonOne.style.left=`${u}%`,e.completed.style.width=`${u}%`},e=(n,o,e)=>{const s=n.clientX-o.left,u=t(o,s);e.rangeOneValue=a(u,e),e.rangeOneValue=Math.min(e.rangeOneValue,e.rangeTwoValue),e.emit("nile-button-first-change",{value:e.rangeOneValue}),e.rangeTwoValue>e.rangeOneValue&&(e.buttonOne.style.left=`${u}%`)},s=(n,o,e)=>{const s=n.clientX-o.left,u=t(o,s);e.rangeTwoValue=a(u,e),e.rangeTwoValue=Math.max(e.rangeTwoValue,e.rangeOneValue),e.emit("nile-button-last-change",{value:e.rangeTwoValue}),e.rangeTwoValue>e.rangeOneValue&&(e.buttonTwo.style.left=`${u}%`)},u=t=>{t.range=t.renderRoot.querySelector(".range"),t.buttonOne=t.renderRoot.querySelector(".range-button"),t.buttonTwo=t.renderRoot.querySelector(".range-button-two"),t.completed=t.renderRoot.querySelector(".range-completed"),t.range.addEventListener("mousedown",t.onMouseDown),t.buttonOne?.addEventListener("mousedown",(()=>{t.disabled||(t.activeThumb="one",h(t))})),t.buttonTwo?.addEventListener("mousedown",(()=>{t.disabled||(t.activeThumb="two",h(t))}))},h=t=>{window.addEventListener("mousemove",t.onMouseMove),window.addEventListener("mouseup",t.onMouseUp)},c=t=>{window.removeEventListener("mousemove",t.onMouseMove),window.removeEventListener("mouseup",t.onMouseUp)},l=(t,a)=>{if(Math.abs(t-a.rangeOneValue)<=Math.abs(t-a.rangeTwoValue)){const n=Math.min(t,a.rangeTwoValue);a.rangeOneValue=a.checkValueValidity(n,a.minValue,a.maxValue)}else{const n=Math.max(t,a.rangeOneValue);a.rangeTwoValue=a.checkValueValidity(n,a.minValue,a.maxValue)}const o=n(a.rangeOneValue,a),e=n(a.rangeTwoValue,a);a.buttonOne.style.left=`${o}%`,a.buttonTwo.style.left=`${e}%`;const s=Math.min(o,e),u=Math.abs(e-o);a.completed.style.left=`${s}%`,a.completed.style.width=`${u}%`,a.emit("nile-button-first-change",{value:a.rangeOneValue}),a.emit("nile-button-last-change",{value:a.rangeTwoValue})};export{e as a,s as b,h as c,l as d,u as g,o as h,c as r,n as v};

package/dist/src/nile-detail/nile-detail.css.js

@@ -153,6 +153,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 {
@@ -409,7 +444,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/dist/src/nile-detail/nile-detail.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-detail.css.js","sourceRoot":"","sources":["../../../src/nile-detail/nile-detail.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkaxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none;\n  }\n\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  .detail {\n    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    border-radius: var(--nile-radius-md, var(--ng-radius-xl));\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-xs));\n    overflow: hidden;\n    width: 100%;\n    line-height: var(--nile-line-height-inherit, var(--ng-line-height-text-sm));\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n  }\n\n  .detail--disabled {\n    opacity: var(--nile-opacity-50, var(--ng-opacity-50));\n  }\n\n  .detail__header {\n    display: flex;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    align-items: center;\n    border-radius: inherit;\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));\n    font-size: var(--nile-type-scale-4, var(--ng-spacing-xl));\n    font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-semibold));\n    color: var(--nile-colors-neutral-900, var(--ng-colors-text-primary));\n    user-select: none;\n    cursor: pointer;\n    list-style: none;\n  }\n\n  .detail__header::-webkit-details-marker {\n    display: none;\n  }\n\n  .detail__header::marker {\n    content: '';\n  }\n\n  .detail__header--icon-left {\n    flex-direction: row-reverse;\n  }\n\n  .detail__header:focus {\n    outline: none;\n  }\n\n  .detail__header:focus-visible {\n    outline: solid 3px var(--nile-colors-blue-500, var(--ng-colors-fg-brand-primary-600));\n    outline-offset: calc(1px + 1px);\n  }\n\n  .detail--disabled .detail__header {\n    cursor: not-allowed;\n  }\n\n  .detail--disabled .detail__header:focus-visible {\n    outline: none;\n    box-shadow: none;\n  }\n\n  .detail__label {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .detail__header-actions {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  .detail__prefix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  .detail__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  .detail__heading-text {\n    font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-semibold));\n    font-family: var(--nile-font-family-medium, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-4, var(--ng-spacing-xl));\n  }\n\n  .detail__description {\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));\n    margin-top: 2px;\n  }\n\n  .detail__summary-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    transition: 250ms transform ease;\n    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary));\n    transform: rotate(90deg);\n  }\n\n  .detail--open .detail__summary-icon {\n    transform: rotate(-90deg);\n  }\n\n  .detail__body {\n    overflow: hidden;\n  }\n\n  .detail__body[hidden] {\n    display: none;\n  }\n\n  .detail__content {\n    display: block;\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .detail__content--empty {\n    display: none;\n    padding: 0;\n  }\n\n  /* ── Selection variant ──────────────────────────────────────────────────── */\n\n  .detail__selection-label {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    flex: 1;\n    min-width: 0;\n  }\n\n  .detail__select-all {\n    flex: 0 0 auto;\n  }\n\n  .detail__selection-title {\n    display: flex;\n    flex-direction: column;\n    line-height: 1.3;\n    min-width: 0;\n  }\n\n  .detail__selection-count {\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));\n    margin-top: 2px;\n  }\n\n  .detail__selection-content {\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .detail__selection-toolbar {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    margin-bottom: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .detail__selection-search {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .detail__selection-search-slot {\n    display: flex;\n    flex: 1;\n    min-width: 0;\n  }\n\n  .detail__selection-search-slot::slotted(*) {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .detail__selected-toggle {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n  }\n\n  .detail__selection-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    flex: 0 0 auto;\n  }\n\n  .detail__selection-grid {\n    display: grid;\n    grid-auto-flow: column;\n    gap: 8px 24px;\n    overflow-x: auto;\n    overflow-y: hidden;\n    padding: 4px 4px 8px;\n    scroll-snap-type: x proximity;\n  }\n\n  .detail__selection-grid--virtual {\n    display: block;\n    position: relative;\n    width: 100%;\n    contain: layout paint;\n  }\n\n  .detail__selection-grid--virtual.detail__selection-grid--vertical {\n    overflow-x: hidden;\n    overflow-y: auto;\n    scroll-snap-type: y proximity;\n  }\n\n  .detail__selection-grid--virtual.detail__selection-grid--vertical::-webkit-scrollbar {\n    width: 8px;\n    height: 0;\n  }\n\n  .detail__selection-grid--virtual.detail__selection-grid--both {\n    overflow: auto;\n    scroll-snap-type: none;\n  }\n\n  .detail__selection-grid--virtual.detail__selection-grid--both::-webkit-scrollbar {\n    width: 8px;\n    height: 8px;\n  }\n\n  .detail__selection-grid--virtual .detail__selection-track {\n    position: relative;\n  }\n\n  .detail__selection-tooltip--virtual {\n    box-sizing: border-box;\n    padding-right: 24px;\n  }\n\n  .detail__selection-grid > nile-checkbox,\n  .detail__selection-grid > .detail__selection-tooltip {\n    scroll-snap-align: start;\n    min-width: 0;\n    display: block;\n    max-width: 100%;\n    overflow: visible;\n    padding-left: 4px;\n  }\n\n  .detail__selection-checkbox {\n    display: block;\n    width: 100%;\n    min-width: 0;\n  }\n\n  .detail__selection-checkbox::part(base) {\n    display: flex;\n    width: 100%;\n    min-width: 0;\n    align-items: center;\n  }\n\n  .detail__selection-checkbox::part(label) {\n    flex: 1 1 auto;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .detail__selection-checkbox--disabled {\n    opacity: 0.5;\n    pointer-events: none;\n  }\n\n  .detail__selection-text {\n    display: inline-flex;\n    flex-direction: column;\n    min-width: 0;\n    flex: 1 1 auto;\n    line-height: 1.25;\n  }\n\n  .detail__selection-item-label {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .detail__selection-desc {\n    display: block;\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));\n    margin-top: 2px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .detail__selection-prefix,\n  .detail__selection-suffix {\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n    margin: 0 6px;\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));\n  }\n\n  .detail__selection-prefix { margin-left: 0; }\n  .detail__selection-suffix { margin-right: 0; }\n\n  .detail__selection-placeholder {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 4px 8px;\n    box-sizing: border-box;\n    opacity: 0.6;\n  }\n\n  .detail__selection-placeholder-bar {\n    width: 16px;\n    height: 16px;\n    border-radius: 4px;\n    background: linear-gradient(\n      90deg,\n      rgba(0,0,0,0.06) 0%,\n      rgba(0,0,0,0.12) 50%,\n      rgba(0,0,0,0.06) 100%\n    );\n    background-size: 200% 100%;\n    animation: nile-detail-shimmer 1.4s linear infinite;\n    flex: 0 0 auto;\n  }\n\n  .detail__selection-placeholder-label {\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));\n    background: linear-gradient(\n      90deg,\n      rgba(0,0,0,0.06) 0%,\n      rgba(0,0,0,0.12) 50%,\n      rgba(0,0,0,0.06) 100%\n    );\n    background-size: 200% 100%;\n    background-clip: text;\n    -webkit-background-clip: text;\n    color: transparent;\n    animation: nile-detail-shimmer 1.4s linear infinite;\n  }\n\n  @keyframes nile-detail-shimmer {\n    0%   { background-position: 200% 0; }\n    100% { background-position: -200% 0; }\n  }\n\n  .detail__selection-grid::-webkit-scrollbar {\n    height: 8px;\n  }\n\n  .detail__selection-grid::-webkit-scrollbar-thumb {\n    background: rgba(0, 0, 0, 0.2);\n    border-radius: 4px;\n  }\n\n /* ── Light variant ──────────────────────────────────────────────────────── */\n\n  .detail--light .detail__header {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl))\n      var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n  }\n\n  .detail--light.detail--open .detail__header {\n    border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n\n  .detail--light .detail__content,\n  .detail--light .detail__selection-content {\n    padding: var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-detail.css.js","sourceRoot":"","sources":["../../../src/nile-detail/nile-detail.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAscxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none;\n  }\n\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  .detail {\n    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    border-radius: var(--nile-radius-md, var(--ng-radius-xl));\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-xs));\n    overflow: hidden;\n    width: 100%;\n    line-height: var(--nile-line-height-inherit, var(--ng-line-height-text-sm));\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n  }\n\n  .detail--disabled {\n    opacity: var(--nile-opacity-50, var(--ng-opacity-50));\n  }\n\n  .detail__header {\n    display: flex;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    align-items: center;\n    border-radius: inherit;\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));\n    font-size: var(--nile-type-scale-4, var(--ng-spacing-xl));\n    font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-semibold));\n    color: var(--nile-colors-neutral-900, var(--ng-colors-text-primary));\n    user-select: none;\n    cursor: pointer;\n    list-style: none;\n  }\n\n  .detail__header::-webkit-details-marker {\n    display: none;\n  }\n\n  .detail__header::marker {\n    content: '';\n  }\n\n  .detail__header--icon-left {\n    flex-direction: row-reverse;\n  }\n\n  .detail__header:focus {\n    outline: none;\n  }\n\n  .detail__header:focus-visible {\n    outline: solid 3px var(--nile-colors-blue-500, var(--ng-colors-fg-brand-primary-600));\n    outline-offset: calc(1px + 1px);\n  }\n\n  .detail--disabled .detail__header {\n    cursor: not-allowed;\n  }\n\n  .detail--disabled .detail__header:focus-visible {\n    outline: none;\n    box-shadow: none;\n  }\n\n  .detail__label {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .detail__header-actions {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  .detail__prefix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  .detail__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  .detail__heading-text {\n    font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-semibold));\n    font-family: var(--nile-font-family-medium, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-4, var(--ng-spacing-xl));\n  }\n\n  .detail__description {\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));\n    margin-top: 2px;\n  }\n\n  .detail__summary-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    transition: 250ms transform ease;\n    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary));\n    transform: rotate(90deg);\n  }\n\n  .detail--open .detail__summary-icon {\n    transform: rotate(-90deg);\n  }\n\n  .detail__body {\n    overflow: hidden;\n  }\n\n  .detail__body[hidden] {\n    display: none;\n  }\n\n  .detail__content {\n    display: block;\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .detail__content--empty {\n    display: none;\n    padding: 0;\n  }\n\n  /* ── Preview state ──────────────────────────────────────────────────────── */\n\n  .detail__body--preview {\n    position: relative;\n    cursor: pointer;\n  }\n\n  .detail__body--preview::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    height: var(--nile-detail-preview-fade-height, 40px);\n    background: linear-gradient(\n      to bottom,\n      transparent,\n      var(--nile-colors-white-base, var(--ng-colors-bg-primary))\n    );\n    pointer-events: none;\n  }\n\n  .detail__body--preview:focus {\n    outline: none;\n  }\n\n  .detail__body--preview:focus-visible {\n    outline: solid 3px var(--nile-colors-blue-500, var(--ng-colors-fg-brand-primary-600));\n    outline-offset: -3px;\n  }\n\n  .detail--disabled .detail__body--preview {\n    cursor: not-allowed;\n  }\n\n  /* ── Selection variant ──────────────────────────────────────────────────── */\n\n  .detail__selection-label {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    flex: 1;\n    min-width: 0;\n  }\n\n  .detail__select-all {\n    flex: 0 0 auto;\n  }\n\n  .detail__selection-title {\n    display: flex;\n    flex-direction: column;\n    line-height: 1.3;\n    min-width: 0;\n  }\n\n  .detail__selection-count {\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));\n    margin-top: 2px;\n  }\n\n  .detail__selection-content {\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .detail__selection-toolbar {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    margin-bottom: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  .detail__selection-search {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .detail__selection-search-slot {\n    display: flex;\n    flex: 1;\n    min-width: 0;\n  }\n\n  .detail__selection-search-slot::slotted(*) {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .detail__selected-toggle {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n  }\n\n  .detail__selection-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    flex: 0 0 auto;\n  }\n\n  .detail__selection-grid {\n    display: grid;\n    grid-auto-flow: column;\n    gap: 8px 24px;\n    overflow-x: auto;\n    overflow-y: hidden;\n    padding: 4px 4px 8px;\n    scroll-snap-type: x proximity;\n  }\n\n  .detail__selection-grid--virtual {\n    display: block;\n    position: relative;\n    width: 100%;\n    contain: layout paint;\n  }\n\n  .detail__selection-grid--virtual.detail__selection-grid--vertical {\n    overflow-x: hidden;\n    overflow-y: auto;\n    scroll-snap-type: y proximity;\n  }\n\n  .detail__selection-grid--virtual.detail__selection-grid--vertical::-webkit-scrollbar {\n    width: 8px;\n    height: 0;\n  }\n\n  .detail__selection-grid--virtual.detail__selection-grid--both {\n    overflow: auto;\n    scroll-snap-type: none;\n  }\n\n  .detail__selection-grid--virtual.detail__selection-grid--both::-webkit-scrollbar {\n    width: 8px;\n    height: 8px;\n  }\n\n  .detail__selection-grid--virtual .detail__selection-track {\n    position: relative;\n  }\n\n  .detail__selection-tooltip--virtual {\n    box-sizing: border-box;\n    padding-right: 24px;\n  }\n\n  .detail__selection-grid > nile-checkbox,\n  .detail__selection-grid > .detail__selection-tooltip {\n    scroll-snap-align: start;\n    min-width: 0;\n    display: block;\n    max-width: 100%;\n    overflow: visible;\n    padding-left: 4px;\n  }\n\n  .detail__selection-checkbox {\n    display: block;\n    width: 100%;\n    min-width: 0;\n  }\n\n  .detail__selection-checkbox::part(base) {\n    display: flex;\n    width: 100%;\n    min-width: 0;\n    align-items: center;\n  }\n\n  .detail__selection-checkbox::part(label) {\n    flex: 1 1 auto;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .detail__selection-checkbox--disabled {\n    opacity: 0.5;\n    pointer-events: none;\n  }\n\n  .detail__selection-text {\n    display: inline-flex;\n    flex-direction: column;\n    min-width: 0;\n    flex: 1 1 auto;\n    line-height: 1.25;\n  }\n\n  .detail__selection-item-label {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .detail__selection-desc {\n    display: block;\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));\n    margin-top: 2px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .detail__selection-prefix,\n  .detail__selection-suffix {\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n    margin: 0 6px;\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));\n  }\n\n  .detail__selection-prefix { margin-left: 0; }\n  .detail__selection-suffix { margin-right: 0; }\n\n  .detail__selection-placeholder {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 4px 8px;\n    box-sizing: border-box;\n    opacity: 0.6;\n  }\n\n  .detail__selection-placeholder-bar {\n    width: 16px;\n    height: 16px;\n    border-radius: 4px;\n    background: linear-gradient(\n      90deg,\n      rgba(0,0,0,0.06) 0%,\n      rgba(0,0,0,0.12) 50%,\n      rgba(0,0,0,0.06) 100%\n    );\n    background-size: 200% 100%;\n    animation: nile-detail-shimmer 1.4s linear infinite;\n    flex: 0 0 auto;\n  }\n\n  .detail__selection-placeholder-label {\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));\n    background: linear-gradient(\n      90deg,\n      rgba(0,0,0,0.06) 0%,\n      rgba(0,0,0,0.12) 50%,\n      rgba(0,0,0,0.06) 100%\n    );\n    background-size: 200% 100%;\n    background-clip: text;\n    -webkit-background-clip: text;\n    color: transparent;\n    animation: nile-detail-shimmer 1.4s linear infinite;\n  }\n\n  @keyframes nile-detail-shimmer {\n    0%   { background-position: 200% 0; }\n    100% { background-position: -200% 0; }\n  }\n\n  .detail__selection-grid::-webkit-scrollbar {\n    height: 8px;\n  }\n\n  .detail__selection-grid::-webkit-scrollbar-thumb {\n    background: rgba(0, 0, 0, 0.2);\n    border-radius: 4px;\n  }\n\n /* ── Light variant ──────────────────────────────────────────────────────── */\n\n  .detail--light .detail__header {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl))\n      var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n  }\n\n  .detail--light.detail--open .detail__header,\n  .detail--light.detail--preview .detail__header {\n    border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n\n  .detail--light .detail__content,\n  .detail--light .detail__selection-content {\n    padding: var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -68,6 +68,8 @@ export interface NileDetailSelectionConfig {
         showAll?: string;
     };
     showSelectedToggle?: boolean;
+    preview?: boolean;
+    previewPercentage?: number;
     open?: boolean;
     disabled?: boolean;
 }
@@ -81,6 +83,10 @@ export declare class NileDetail extends NileElement {
     description: string;
     expandIconPlacement: 'left' | 'right';
     disabled: boolean;
+    /** When set, the closed state shows a preview of the body content instead of hiding it. */
+    preview: boolean;
+    /** Percentage (0–100) of the content height shown while previewing. */
+    previewPercentage: number;
     variant: NileDetailVariant;
     items: SelectionItem[];
     selected: string[];
@@ -125,6 +131,10 @@ export declare class NileDetail extends NileElement {
     private get _isSelectionVariant();
     /** True for any variant that applies the light styling. */
     private get _isLightVariant();
+    /** True when preview mode is on with a usable percentage. */
+    private get _previewEnabled();
+    /** True when the closed state should currently render the preview. */
+    private get _isPreviewActive();
     private get _isInfiniteMode();
     private _effectiveTotalCount;
     private _getItemAt;
@@ -173,6 +183,11 @@ export declare class NileDetail extends NileElement {
     private _handleSummaryClick;
     private _handleSummaryKeyDown;
     handleOpenChange(): Promise<void>;
+    handlePreviewChange(): void;
+    /** Measures the content and clamps the body to the configured preview height. */
+    private _applyPreviewHeight;
+    private _handlePreviewClick;
+    private _handlePreviewKeyDown;
     show(): Promise<unknown>;
     hide(): Promise<unknown>;
     private get _summaryLabel();

package/dist/src/nile-detail/nile-detail.js

@@ -6,7 +6,7 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { styles } from './nile-detail.css';
 import NileElement from '../internal/nile-element';
 import { watch } from '../internal/watch';
-import { animateShow, animateHide, showDetail, hideDetail, handleSummaryClick, handleSummaryKeyDown, } from './nile-detail.utils';
+import { animateShow, animateHide, showDetail, hideDetail, handleSummaryClick, handleSummaryKeyDown, getPreviewHeight, } from './nile-detail.utils';
 import '../nile-checkbox/index';
 import '../nile-input/index';
 import '../nile-link/index';
@@ -22,6 +22,10 @@ let NileDetail = class NileDetail extends NileElement {
         this.description = '';
         this.expandIconPlacement = 'right';
         this.disabled = false;
+        /** When set, the closed state shows a preview of the body content instead of hiding it. */
+        this.preview = false;
+        /** Percentage (0–100) of the content height shown while previewing. */
+        this.previewPercentage = 30;
         this.variant = 'default';
         this.items = [];
         this.selected = [];
@@ -67,6 +71,14 @@ let NileDetail = class NileDetail extends NileElement {
     get _isLightVariant() {
         return this.variant === 'light' || this.variant === 'select-light';
     }
+    /** True when preview mode is on with a usable percentage. */
+    get _previewEnabled() {
+        return this.preview && Math.min(100, Math.max(0, this.previewPercentage)) > 0;
+    }
+    /** True when the closed state should currently render the preview. */
+    get _isPreviewActive() {
+        return this._previewEnabled && !this.open;
+    }
     get _isInfiniteMode() {
         return (this._isSelectionVariant &&
             typeof this.fetchPage === 'function' &&
@@ -153,9 +165,12 @@ let NileDetail = class NileDetail extends NileElement {
         return Number.isFinite(parsed) && parsed > 0 ? parsed : 220;
     }
     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];
@@ -400,6 +415,10 @@ let NileDetail = 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;
     }
     _syncSelectedFromProperty() {
         this._selectedSet = new Set(this.selected || []);
@@ -582,6 +601,9 @@ let NileDetail = class NileDetail extends NileElement {
                 return !!(node.textContent && node.textContent.trim());
             return false;
         });
+        if (this._isPreviewActive) {
+            this._applyPreviewHeight();
+        }
     }
     _stopHeaderToggle(event) {
         event.stopPropagation();
@@ -600,9 +622,47 @@ let NileDetail = class NileDetail extends NileElement {
         }
         else {
             await animateHide(this);
+            // In preview mode the details element stays open so the preview remains visible.
+            this._detailOpen = this._previewEnabled;
+        }
+    }
+    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. */
+    async _applyPreviewHeight() {
+        await this.updateComplete;
+        if (!this._isPreviewActive || !this.body) {
+            return;
+        }
+        this.body.hidden = false;
+        this.body.style.height = `${getPreviewHeight(this)}px`;
+    }
+    _handlePreviewClick() {
+        if (this._isPreviewActive && !this.disabled) {
+            showDetail(this);
+        }
+    }
+    _handlePreviewKeyDown(event) {
+        if (!this._isPreviewActive || this.disabled) {
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            showDetail(this);
+        }
+    }
     async show() {
         return showDetail(this);
     }
@@ -847,6 +907,7 @@ let NileDetail = class NileDetail extends NileElement {
             'detail--disabled': this.disabled,
             'detail--selection': isSelection,
             'detail--light': this._isLightVariant,
+            'detail--preview': this._isPreviewActive,
         })}
       >
         <summary
@@ -892,7 +953,18 @@ let NileDetail = 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>`
             : ''}
@@ -934,6 +1006,12 @@ __decorate([
 __decorate([
     property({ attribute: true, type: Boolean, reflect: true })
 ], NileDetail.prototype, "disabled", void 0);
+__decorate([
+    property({ attribute: true, type: Boolean, reflect: true })
+], NileDetail.prototype, "preview", void 0);
+__decorate([
+    property({ attribute: 'preview-percentage', type: Number, reflect: true })
+], NileDetail.prototype, "previewPercentage", void 0);
 __decorate([
     property({ attribute: true, type: String, reflect: true })
 ], NileDetail.prototype, "variant", void 0);
@@ -1042,6 +1120,9 @@ __decorate([
 __decorate([
     watch('open', { waitUntilFirstUpdate: true })
 ], NileDetail.prototype, "handleOpenChange", null);
+__decorate([
+    watch(['preview', 'previewPercentage'], { waitUntilFirstUpdate: true })
+], NileDetail.prototype, "handlePreviewChange", null);
 NileDetail = __decorate([
     customElement('nile-detail')
 ], NileDetail);