@aquera/nile-elements 1.7.3 → 1.7.5

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

@@ -147,6 +147,236 @@ export const styles = css `
     display: block;
     padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
   }
+
+  /* ── Selection variant ──────────────────────────────────────────────────── */
+
+  .detail__selection-label {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    flex: 1;
+    min-width: 0;
+  }
+
+  .detail__select-all {
+    flex: 0 0 auto;
+  }
+
+  .detail__selection-title {
+    display: flex;
+    flex-direction: column;
+    line-height: 1.3;
+    min-width: 0;
+  }
+
+  .detail__selection-count {
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));
+    margin-top: 2px;
+  }
+
+  .detail__selection-content {
+    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
+  }
+
+  .detail__selection-toolbar {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    margin-bottom: var(--nile-spacing-lg, var(--ng-spacing-lg));
+  }
+
+  .detail__selection-search {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .detail__selection-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    flex: 0 0 auto;
+  }
+
+  .detail__selection-grid {
+    display: grid;
+    grid-auto-flow: column;
+    gap: 8px 24px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding-bottom: 8px;
+    scroll-snap-type: x proximity;
+  }
+
+  .detail__selection-grid--virtual {
+    display: block;
+    position: relative;
+    width: 100%;
+    contain: layout paint;
+  }
+
+  .detail__selection-grid--virtual.detail__selection-grid--vertical {
+    overflow-x: hidden;
+    overflow-y: auto;
+    scroll-snap-type: y proximity;
+  }
+
+  .detail__selection-grid--virtual.detail__selection-grid--vertical::-webkit-scrollbar {
+    width: 8px;
+    height: 0;
+  }
+
+  .detail__selection-grid--virtual.detail__selection-grid--both {
+    overflow: auto;
+    scroll-snap-type: none;
+  }
+
+  .detail__selection-grid--virtual.detail__selection-grid--both::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  .detail__selection-grid--virtual .detail__selection-track {
+    position: relative;
+  }
+
+  .detail__selection-tooltip--virtual {
+    box-sizing: border-box;
+    padding-right: 24px;
+  }
+
+  .detail__selection-grid > nile-checkbox,
+  .detail__selection-grid > .detail__selection-tooltip {
+    scroll-snap-align: start;
+    min-width: 0;
+    display: block;
+    max-width: 100%;
+    overflow: hidden;
+  }
+
+  .detail__selection-checkbox {
+    display: block;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .detail__selection-checkbox::part(base) {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    align-items: center;
+  }
+
+  .detail__selection-checkbox::part(label) {
+    flex: 1 1 auto;
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .detail__selection-checkbox--disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .detail__selection-text {
+    display: inline-flex;
+    flex-direction: column;
+    min-width: 0;
+    flex: 1 1 auto;
+    line-height: 1.25;
+  }
+
+  .detail__selection-item-label {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .detail__selection-desc {
+    display: block;
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));
+    margin-top: 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .detail__selection-prefix,
+  .detail__selection-suffix {
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+    margin: 0 6px;
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));
+  }
+
+  .detail__selection-prefix { margin-left: 0; }
+  .detail__selection-suffix { margin-right: 0; }
+
+  .detail__selection-placeholder {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 4px 8px;
+    box-sizing: border-box;
+    opacity: 0.6;
+  }
+
+  .detail__selection-placeholder-bar {
+    width: 16px;
+    height: 16px;
+    border-radius: 4px;
+    background: linear-gradient(
+      90deg,
+      rgba(0,0,0,0.06) 0%,
+      rgba(0,0,0,0.12) 50%,
+      rgba(0,0,0,0.06) 100%
+    );
+    background-size: 200% 100%;
+    animation: nile-detail-shimmer 1.4s linear infinite;
+    flex: 0 0 auto;
+  }
+
+  .detail__selection-placeholder-label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));
+    background: linear-gradient(
+      90deg,
+      rgba(0,0,0,0.06) 0%,
+      rgba(0,0,0,0.12) 50%,
+      rgba(0,0,0,0.06) 100%
+    );
+    background-size: 200% 100%;
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+    animation: nile-detail-shimmer 1.4s linear infinite;
+  }
+
+  @keyframes nile-detail-shimmer {
+    0%   { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+  }
+
+  .detail__selection-grid::-webkit-scrollbar {
+    height: 8px;
+  }
+
+  .detail__selection-grid::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+  }
 `;
 export default [styles];
 //# sourceMappingURL=nile-detail.css.js.map

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoJxB,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\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0XxB,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  /* ── 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-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-bottom: 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: hidden;\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\nexport default [styles];\n"]}

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

@@ -1,6 +1,73 @@
 import { TemplateResult } from 'lit';
 import NileElement from '../internal/nile-element';
+import '../nile-checkbox/index';
+import '../nile-input/index';
+import '../nile-link/index';
+import '../nile-icon/index';
+import '../nile-lite-tooltip/index';
 import type { CSSResultGroup } from 'lit';
+export type NileDetailVariant = 'default' | 'selection';
+export interface NileDetailSelectionItem {
+    value: string;
+    label?: string;
+    description?: string;
+    prefix?: string;
+    suffix?: string;
+    disabled?: boolean;
+    className?: string;
+}
+export interface NileDetailRenderItemConfig {
+    getDisplayText: (item: any) => string;
+    getValue?: (item: any) => string;
+    getSearchText?: (item: any) => string;
+    getDescription?: (item: any) => string;
+    getPrefix?: (item: any) => string;
+    getSuffix?: (item: any) => string;
+    getDisabled?: (item: any) => boolean;
+    getClassName?: (item: any) => string;
+}
+type SelectionItem = string | NileDetailSelectionItem | Record<string, any>;
+export interface NileDetailSelectionConfig {
+    variant?: NileDetailVariant;
+    heading?: string;
+    description?: string;
+    itemsLabel?: string;
+    items?: SelectionItem[];
+    selected?: string[];
+    renderItemConfig?: NileDetailRenderItemConfig;
+    allowHtmlLabel?: boolean;
+    layout?: {
+        orientation?: 'horizontal' | 'vertical' | 'both';
+        gridRows?: number;
+        gridColumns?: number;
+        matrixColumns?: number;
+        minColumnWidth?: string;
+        laneHeight?: number;
+        maxHeight?: string;
+        expandIconPlacement?: 'left' | 'right';
+    };
+    search?: {
+        placeholder?: string;
+        disableLocal?: boolean;
+    };
+    virtualization?: {
+        enabled?: boolean;
+        threshold?: number;
+        overscan?: number;
+    };
+    pagination?: {
+        totalCount?: number;
+        pageSize?: number;
+        fetchPage?: (offset: number, limit: number) => Promise<SelectionItem[]>;
+        placeholderLabel?: string;
+    };
+    labels?: {
+        restore?: string;
+        clear?: string;
+    };
+    open?: boolean;
+    disabled?: boolean;
+}
 export declare class NileDetail extends NileElement {
     static styles: CSSResultGroup;
     detail: HTMLDetailsElement;
@@ -11,14 +78,98 @@ export declare class NileDetail extends NileElement {
     description: string;
     expandIconPlacement: 'left' | 'right';
     disabled: boolean;
+    variant: NileDetailVariant;
+    items: SelectionItem[];
+    selected: string[];
+    renderItemConfig?: NileDetailRenderItemConfig;
+    allowHtmlLabel: boolean;
+    disableLocalSearch: boolean;
+    totalCount?: number;
+    pageSize: number;
+    fetchPage?: (offset: number, limit: number) => Promise<SelectionItem[]>;
+    placeholderLabel: string;
+    config?: NileDetailSelectionConfig;
+    searchPlaceholder: string;
+    itemsLabel: string;
+    restoreLabel: string;
+    clearLabel: string;
+    gridRows: number;
+    gridColumns: number;
+    minColumnWidth: string;
+    laneHeight: number;
+    orientation: 'horizontal' | 'vertical' | 'both';
+    maxHeight: string;
+    matrixColumns: number;
+    virtualize: boolean;
+    virtualizeThreshold: number;
+    overscan: number;
     private _detailOpen;
+    private _searchTerm;
+    private _selectedSet;
+    private _restoreDefaults;
+    private _gridResizeObserver;
+    private _virtCtrl;
+    private _rowVirtCtrl;
+    private _colVirtCtrl;
+    private _pageCache;
+    private _pendingPages;
+    private get _isInfiniteMode();
+    private _effectiveTotalCount;
+    private _getItemAt;
+    private _scheduleFetchForRange;
+    private _loadPage;
+    /** Public: clear the page cache (use after a query change to refetch). */
+    resetPages(): void;
+    private get _isVirtualized();
+    private get _columnWidthPx();
     firstUpdated(): void;
+    disconnectedCallback(): void;
+    updated(_changed: Map<string, unknown>): void;
+    private _syncVirtualizer;
+    private _syncBothVirtualizers;
+    private _setupGridResizeObserver;
+    private _scheduleTooltipOverflowCheck;
+    private _updateTooltipOverflowStates;
+    _onSelectedPropertyChange(): void;
+    _onConfigChange(): void;
+    private _applyConfig;
+    private _syncSelectedFromProperty;
+    private _getItemValue;
+    private _getItemLabel;
+    private _getItemSearchText;
+    private _getItemDescription;
+    private _getItemPrefix;
+    private _getItemSuffix;
+    private _getItemDisabled;
+    private _getItemClassName;
+    private get _filteredItems();
+    private _selectableValues;
+    private get _allChecked();
+    private get _indeterminate();
+    private get _countLabel();
+    private _emitSelectionChange;
+    private _onItemChange;
+    private _onSelectAllChange;
+    private _emitSearch;
+    private _onSearchInput;
+    private _onSearchClear;
+    private _onRestore;
+    private _onClear;
+    private _stopHeaderToggle;
     private _handleSummaryClick;
     private _handleSummaryKeyDown;
     handleOpenChange(): Promise<void>;
     show(): Promise<unknown>;
     hide(): Promise<unknown>;
     private get _summaryLabel();
+    private _renderSelectionLabel;
+    private _renderSelectionBody;
+    private _renderItemContent;
+    private _renderItemTooltip;
+    private _renderStaticGrid;
+    private _renderBothVirtualGrid;
+    private _renderVirtualGrid;
+    private _renderPlaceholder;
     render(): TemplateResult;
 }
 export default NileDetail;