@aquera/nile-elements 1.8.6 → 1.8.8

package/package.json

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

package/src/nile-markdown-editor/nile-markdown-editor.ts

@@ -618,6 +618,7 @@ export class NileMarkdownEditor extends NileElement {
         part="base"
       >
         <div class="header" part="header">
+          ${this.renderToolbar()}
           <nile-button-toggle-group
             class="tabs"
             aria-label="Editor view"
@@ -643,7 +644,6 @@ export class NileMarkdownEditor extends NileElement {
               `
             )}
           </nile-button-toggle-group>
-          ${this.renderToolbar()}
         </div>
         <div
           class=${classMap({ body: true, 'body--dragging': this.splitDragging })}

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

@@ -32,12 +32,15 @@ export const styles = css`
     line-height: var(--nile-line-height-1-8, var(--ng-line-height-text-md));
     letter-spacing: normal;
     color: var(--nile-color-dark-1, var(--ng-colors-text-primary-900));
-    padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));
+    padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-none));
     transition: 150ms fill;
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     cursor: pointer;
     margin-bottom: var(--nile-spacing-none, var(--ng-spacing-xxs) )
   }
+  :host([legacy]) .option {
+    padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));
+  }
 
   .option--single-select {
     padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));
@@ -77,12 +80,17 @@ export const styles = css`
     justify-content: center;
     visibility: hidden;
     padding-inline-end: var(--nile-spacing-xs);
+    color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
   }
 
   .option--selected .option__check {
     visibility: visible;
   }
 
+  :host([tickonselect][selected]) .option__check {
+    visibility: visible;
+  }
+
   .option__prefix,
   .option__suffix {
     flex: 0 0 auto;
@@ -107,9 +115,22 @@ export const styles = css`
     margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));
     margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));
     width:auto;
+    display:var(--nile-display-inline-block, var(--ng-display-inline-block));
+  }
+  :host([legacy]) .option--checkbox{
     display:var(--nile-display-inline-block, var(--ng-display-none));
   }
 
+ 
+  :host([tickonselect]) .option--checkbox{
+    display: none;
+  }
+
+  :host([tickonselect]) .option{
+    padding-left: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    padding-right: var(--nile-spacing-lg, var(--ng-spacing-lg));
+  }
+
 
   @media (forced-colors: active) {
     :host(:hover:not([aria-disabled='true'])) .option {

package/src/nile-option/nile-option.ts

@@ -62,6 +62,12 @@ export class NileOption extends NileElement {
 
   @property({ type: Boolean, reflect: true, attribute: true }) showCheckbox: boolean = false;
 
+  /** Opt OUT of the enhanced styling (enabled by default). Propagated from the parent nile-select. */
+  @property({ type: Boolean, reflect: true }) legacy: boolean = false;
+
+ 
+  @property({ type: Boolean, reflect: true, attribute: true }) tickOnSelect: boolean = false;
+
   /** Draws the option in a disabled state, preventing selection. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
@@ -262,6 +268,18 @@ export class NileOption extends NileElement {
                   `}
   
               <slot part="suffix" name="suffix" class="option__suffix"></slot>
+
+              ${this.tickOnSelect
+                ? html`<span part="checked-icon" class="option__check">
+                    <nile-icon
+                      name="var(--nile-icon-tick, var(--ng-icon-check))"
+                      method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+                      color="currentColor"
+                      library="system"
+                      aria-hidden="true"
+                    ></nile-icon>
+                  </span>`
+                : ''}
             </div>`
         : ''}
     `;

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

@@ -355,7 +355,8 @@ export const styles = css`
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    font-size: inherit;
+    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));
     color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
     border: none;
     background: none;
@@ -456,21 +457,29 @@ export const styles = css`
   }
 
 
+  /* Default: visible + centered footer with proper nxtgen fallbacks. */
   .select__footer {
     position: sticky;
     bottom: 0px;
-    background: var(--nile-colors-neutral-100);
-    border-top: 1px solid var(--nile-colors-neutral-400);
-    display: flex;
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
     height: 15px;
     /* Auto layout */
-    display:var(--nile-display-flex, var(--ng-display-none));
+    display: var(--nile-display-flex, var(--ng-display-flex));
     flex-direction: row;
+    align-items: center;
+    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));
+    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    justify-content: space-between;
+  }
+
+  :host([legacy]) .select__footer {
+    background: var(--nile-colors-neutral-100);
+    border-top: 1px solid var(--nile-colors-neutral-400);
+    display: var(--nile-display-flex, var(--ng-display-none));
     align-items: flex-start;
     padding: var(--nile-spacing-md) var(--nile-spacing-lg)
       var(--nile-spacing-xl);
-    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
-    justify-content: space-between;
   }
 
   .tag__prefix[slot='prefix'] {

package/src/nile-select/nile-select.ts

@@ -172,6 +172,11 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   @property({ type: Boolean, reflect: true }) searchEnabled = false;
 
+  @property({ type: Boolean, reflect: true }) legacy = false;
+
+  /** Variant: show a tick on the right of the selected option (single-select). Propagated to options. */
+  @property({ type: Boolean, reflect: true, attribute: true }) tickOnSelect = false;
+
   @property({attribute:'internal-search-placeholder'}) internalSearchPlaceHolder = 'Search...';
 
   @property({ type: Boolean, reflect: true, attribute: true }) enableVisibilityEffect = false;
@@ -386,6 +391,12 @@ export class NileSelect extends NileElement implements NileFormControl{
     if(_changedProperties.has('multiple')) {
       this.setCheckBoxInOption(this.multiple as boolean);
     }
+    if(_changedProperties.has('legacy')) {
+      this.setLegacyInOptions(this.legacy);
+    }
+    if(_changedProperties.has('tickOnSelect')) {
+      this.setTickOnSelectInOptions(this.tickOnSelect);
+    }
     if (_changedProperties.has('autoResize')) {
       this.setupResizeObserver();
     }
@@ -406,6 +417,8 @@ export class NileSelect extends NileElement implements NileFormControl{
     if(_changedProperties.has('multiple')) {
       this.setCheckBoxInOption(this.multiple as boolean);
     }
+    this.setLegacyInOptions(this.legacy);
+    this.setTickOnSelectInOptions(this.tickOnSelect);
     if (_changedProperties.has('enableDescription')) {
       this.setEnableDescriptionInOptions();
     }
@@ -445,6 +458,25 @@ export class NileSelect extends NileElement implements NileFormControl{
       option.showCheckbox = checked;
     })
   }
+  /** Propagates the legacy opt-out flag down to the slotted options. */
+  setLegacyInOptions(enabled: boolean): void {
+    if(!this.options.length) {
+      this.options = this.getAllOptions();
+    }
+    this.options.forEach((option: NileOption) => {
+      option.legacy = enabled;
+    })
+  }
+
+  /** Propagates the tick-on-select variant down to the slotted options. */
+  setTickOnSelectInOptions(enabled: boolean): void {
+    if(!this.options.length) {
+      this.options = this.getAllOptions();
+    }
+    this.options.forEach((option: NileOption) => {
+      option.tickOnSelect = enabled;
+    })
+  }
 
   setEnableDescriptionInOptions() {
     this.options = this.getAllOptions();

package/src/nile-select/virtual-scroll-helper.ts

@@ -56,6 +56,8 @@ export class VirtualScrollHelper {
           .descriptionSearchEnabled=${component.descriptionSearchEnabled}
           .allowHtmlLabel=${component.allowHtmlLabel}
           .enableDescription=${component.enableDescription}
+          .tickOnSelect=${component.tickOnSelect}
+          .legacy=${component.legacy}
           exportparts="
             select-options,
             select-no-results,

package/src/nile-side-bar/nile-side-bar.css.ts

@@ -45,6 +45,35 @@ export const styles = css`
   transform: translateX(calc(var(--sidebar-width) - var(--sidebar-collapsed-width)));
 }
 
+/*
+ * Overlay mode: lift the sidebar out of normal flow so expanding it floats
+ * on top of adjacent content instead of pushing siblings. Anchors to the
+ * nearest positioned ancestor; set --sidebar-overlay-position: fixed to pin
+ * it to the viewport instead.
+ */
+:host([overlay]) {
+  position: var(--sidebar-overlay-position, absolute);
+  top: 0;
+  bottom: 0;
+  height: 100%;
+}
+
+:host([overlay][position='left']) {
+  left: 0;
+}
+
+:host([overlay][position='right']) {
+  right: 0;
+}
+
+/* Elevate while expanded so it reads as floating above the page. */
+:host([overlay]:not([collapsed])) {
+  box-shadow: var(
+    --sidebar-overlay-shadow,
+    0px 8px 24px 0px rgba(119, 125, 130, 0.25)
+  );
+}
+
 :host {
   scrollbar-width: thin;
   scrollbar-color: #64748b transparent;

package/src/nile-side-bar/nile-side-bar.test.ts

@@ -0,0 +1,109 @@
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import './nile-side-bar';
+import '../nile-side-bar-expand/nile-side-bar-expand';
+import type { NileSideBar } from './nile-side-bar';
+
+describe('NileSideBar — collapse/expand API', () => {
+  it('1. defaults to expanded (not collapsed) and not overlay', async () => {
+    const el = await fixture<NileSideBar>(html`<nile-side-bar></nile-side-bar>`);
+    expect(el.collapsed).to.be.false;
+    expect(el.overlay).to.be.false;
+    expect(el.hasAttribute('overlay')).to.be.false;
+  });
+
+  it('2. collapse() sets collapsed state + reflects attribute', async () => {
+    const el = await fixture<NileSideBar>(html`<nile-side-bar></nile-side-bar>`);
+    el.collapse();
+    await el.updateComplete;
+    expect(el.collapsed).to.be.true;
+    expect(el.hasAttribute('collapsed')).to.be.true;
+  });
+
+  it('3. expand() clears collapsed state', async () => {
+    const el = await fixture<NileSideBar>(html`<nile-side-bar collapsed></nile-side-bar>`);
+    expect(el.collapsed).to.be.true;
+    el.expand();
+    await el.updateComplete;
+    expect(el.collapsed).to.be.false;
+    expect(el.hasAttribute('collapsed')).to.be.false;
+  });
+
+  it('4. toggle() flips state', async () => {
+    const el = await fixture<NileSideBar>(html`<nile-side-bar></nile-side-bar>`);
+    el.toggle();
+    await el.updateComplete;
+    expect(el.collapsed).to.be.true;
+    el.toggle();
+    await el.updateComplete;
+    expect(el.collapsed).to.be.false;
+  });
+
+  it('5. toggle(force) sets an explicit state', async () => {
+    const el = await fixture<NileSideBar>(html`<nile-side-bar></nile-side-bar>`);
+    el.toggle(false); // already expanded -> no-op
+    await el.updateComplete;
+    expect(el.collapsed).to.be.false;
+    el.toggle(true);
+    await el.updateComplete;
+    expect(el.collapsed).to.be.true;
+  });
+
+  it('6. emits nile-toggle with new collapsed state', async () => {
+    const el = await fixture<NileSideBar>(html`<nile-side-bar></nile-side-bar>`);
+    setTimeout(() => el.collapse());
+    const ev = await oneEvent(el, 'nile-toggle');
+    expect(ev.detail.collapsed).to.be.true;
+  });
+
+  it('7. does NOT emit nile-toggle when state is unchanged', async () => {
+    const el = await fixture<NileSideBar>(html`<nile-side-bar></nile-side-bar>`);
+    let fired = false;
+    el.addEventListener('nile-toggle', () => { fired = true; });
+    el.expand(); // already expanded
+    await el.updateComplete;
+    expect(fired).to.be.false;
+  });
+
+  it('8. built-in expand button toggles the sidebar (normal mode)', async () => {
+    const el = await fixture<NileSideBar>(html`
+      <nile-side-bar>
+        <nile-side-bar-expand slot="expand"></nile-side-bar-expand>
+      </nile-side-bar>
+    `);
+    await el.updateComplete;
+    const expandEl = el.querySelector('nile-side-bar-expand') as HTMLElement & { collapsed: boolean };
+    const btn = expandEl.shadowRoot!.querySelector('.expand-btn') as HTMLElement;
+
+    let detail: any;
+    el.addEventListener('nile-toggle', (e: Event) => { detail = (e as CustomEvent).detail; });
+
+    btn.click();
+    await el.updateComplete;
+    expect(el.collapsed).to.be.true;
+    expect(detail.collapsed).to.be.true;
+    expect(expandEl.collapsed).to.be.true; // arrow icon state stays in sync
+
+    btn.click();
+    await el.updateComplete;
+    expect(el.collapsed).to.be.false;
+    expect(expandEl.collapsed).to.be.false;
+  });
+
+  it('9. overlay attribute is opt-in and reflects', async () => {
+    const el = await fixture<NileSideBar>(html`<nile-side-bar overlay></nile-side-bar>`);
+    expect(el.overlay).to.be.true;
+    el.overlay = false;
+    await el.updateComplete;
+    expect(el.hasAttribute('overlay')).to.be.false;
+  });
+
+  it('10. methods work the same with overlay enabled', async () => {
+    const el = await fixture<NileSideBar>(html`<nile-side-bar overlay></nile-side-bar>`);
+    el.collapse();
+    await el.updateComplete;
+    expect(el.collapsed).to.be.true;
+    el.expand();
+    await el.updateComplete;
+    expect(el.collapsed).to.be.false;
+  });
+});

package/src/nile-side-bar/nile-side-bar.ts

@@ -18,6 +18,17 @@ import NileElement from '../internal/nile-element';
  * @attr position - Position of the sidebar ("left" | "right"). Defaults to "left".
  * @attr width - Expanded width of the sidebar (px).
  * @attr collapsed-width - Collapsed width of the sidebar (px).
+ * @attr overlay - When set, the sidebar is taken out of normal flow and floats
+ *   on top of adjacent content, so expanding it overlays the page instead of
+ *   pushing siblings sideways.
+ *
+ * @event nile-toggle - Fired after the collapsed state changes (via the built-in
+ *   expand button or the public expand()/collapse()/toggle() methods).
+ *   `event.detail.collapsed` is the new state.
+ *
+ * @method expand() - Expand the sidebar.
+ * @method collapse() - Collapse the sidebar.
+ * @method toggle(force?) - Toggle, or force a specific collapsed state.
  */
 @customElement('nile-side-bar')
 export class NileSideBar extends NileElement {
@@ -25,6 +36,8 @@ export class NileSideBar extends NileElement {
 
   @property({ type: Boolean, reflect: true, attribute: true })collapsed: boolean = false;
 
+  @property({ type: Boolean, reflect: true, attribute: true })overlay: boolean = false;
+
   @property({ type: Boolean, reflect: true, attribute: true })fullHeight: boolean = false;
    
   @property({ type: Number, attribute: true })width: number | null = null;
@@ -62,6 +75,22 @@ export class NileSideBar extends NileElement {
       this.style.setProperty('--sidebar-collapsed-width', `${this.collapsedWidth}px`);
     }
   }
+  public expand(): void {
+    this.setCollapsed(false);
+  }
+  public collapse(): void {
+    this.setCollapsed(true);
+  }
+
+  public toggle(force?: boolean): void {
+    this.setCollapsed(force ?? !this.collapsed);
+  }
+
+  private setCollapsed(value: boolean): void {
+    if (this.collapsed === value) return;
+    this.collapsed = value;
+    this.emit('nile-toggle', { collapsed: value });
+  }
 
   public render(): TemplateResult {
     return html`

package/src/nile-side-bar-expand/nile-side-bar-expand.ts

@@ -30,17 +30,16 @@ export class NileSideBarExpand extends NileElement {
   }
 
   private toggleSidebar() {
-    const sidebar = this.closest('nile-side-bar');
+    const sidebar = this.closest('nile-side-bar') as
+      | (HTMLElement & { toggle?: (force?: boolean) => void })
+      | null;
     if (!sidebar) return;
-
-    const isCollapsed = sidebar.hasAttribute('collapsed');
-    if (isCollapsed) {
-      sidebar.removeAttribute('collapsed');
-      this.collapsed = false;
+    if (typeof sidebar.toggle === 'function') {
+      sidebar.toggle();
     } else {
-      sidebar.setAttribute('collapsed', '');
-      this.collapsed = true;
+      sidebar.toggleAttribute('collapsed', !sidebar.hasAttribute('collapsed'));
     }
+    this.collapsed = sidebar.hasAttribute('collapsed');
   }
 
   public render(): TemplateResult {

package/src/nile-virtual-select/nile-virtual-select.css.ts

@@ -362,7 +362,8 @@ export const styles = css`
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    font-size: inherit;
+    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));
     color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
     border: none;
     background: none;
@@ -454,8 +455,8 @@ export const styles = css`
     /* Auto layout */
     display: var(--nile-display-flex, var(--ng-display-flex));
     flex-direction: row;
-    align-items: flex-start;
-    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));
+    align-items: center;
+    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));
     gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
     justify-content: space-between;
     box-sizing: unset;

package/src/nile-virtual-select/nile-virtual-select.ts

@@ -285,6 +285,12 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
   @property({ type: Boolean, reflect: true, attribute: true }) enableDescription = false;
 
+  /** Legacy: hide the option checkbox (the "Show Selected" footer is kept). */
+  @property({ type: Boolean, reflect: true }) legacy = false;
+
+  /** Variant: show a tick on the right of the selected option (single-select). */
+  @property({ type: Boolean, reflect: true, attribute: true }) tickOnSelect = false;
+
   @state() showListbox: boolean = false;
   @state() private wasShowSelectedCheckedOnClose: boolean = false;
 
@@ -1547,7 +1553,9 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       this.optionsLoading || this.loading,
       this.handleScroll.bind(this),
       this.allowHtmlLabel,
-      this.enableDescription
+      this.enableDescription,
+      this.tickOnSelect,
+      this.legacy
     );
   }
 

package/src/nile-virtual-select/renderer.ts

@@ -28,7 +28,9 @@ export class VirtualSelectRenderer {
     loading?: boolean,
     onScroll?: (e: Event) => void,
     allowHtmlLabel?: boolean,
-    enableDescription?: boolean
+    enableDescription?: boolean,
+    tickOnSelect?: boolean,
+    legacy?: boolean
   ): TemplateResult {
     return html`
       <div part="select-options" class="select__options ${
@@ -51,13 +53,13 @@ export class VirtualSelectRenderer {
                       ${virtualize({
                         items: data,
                         renderItem: (item: any): TemplateResult =>
-                          VirtualSelectRenderer.getItemRenderFunction(item, renderItemFunction, value, multiple, getDisplayText, getItemValue, getItemDescription, getItemPrefix, getItemSuffix, allowHtmlLabel, enableDescription),
+                          VirtualSelectRenderer.getItemRenderFunction(item, renderItemFunction, value, multiple, getDisplayText, getItemValue, getItemDescription, getItemPrefix, getItemSuffix, allowHtmlLabel, enableDescription, tickOnSelect, legacy),
                         scroller: true,
                       })}
                     `
                   : html`
                       ${data.map((item: any) => 
-                        VirtualSelectRenderer.getItemRenderFunction(item, renderItemFunction, value, multiple, getDisplayText, getItemValue, getItemDescription, getItemPrefix, getItemSuffix, allowHtmlLabel, enableDescription)
+                        VirtualSelectRenderer.getItemRenderFunction(item, renderItemFunction, value, multiple, getDisplayText, getItemValue, getItemDescription, getItemPrefix, getItemSuffix, allowHtmlLabel, enableDescription, tickOnSelect, legacy)
                       )}
                     `}
               </div>
@@ -77,6 +79,8 @@ export class VirtualSelectRenderer {
     getItemSuffix?: (item: any) => string,
     allowHtmlLabel?: boolean,
     enableDescription?: boolean,
+    tickOnSelect?: boolean,
+    legacy?: boolean,
   ): TemplateResult {
     if(!item) {
       return html``;
@@ -105,6 +109,8 @@ export class VirtualSelectRenderer {
         .selected=${isSelected} 
         .disabled=${isDisabled}
         .showCheckbox=${multiple}
+        .tickOnSelect=${tickOnSelect ?? false}
+        .legacy=${legacy ?? false}
         class=${classMap({
           option: enableDescription ?? false,
           [className ?? '']: !!className,