@aquera/nile-elements 1.9.4 → 1.9.6

package/src/nile-command-menu-group/nile-command-menu-group.ts

@@ -0,0 +1,72 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './nile-command-menu-group.css';
+import { HasSlotController } from '../internal/slot';
+import NileElement from '../internal/nile-element';
+import type { CSSResultGroup } from 'lit';
+
+/**
+ * Groups related commands under an optional heading inside a `nile-command-menu`.
+ *
+ * @tag nile-command-menu-group
+ *
+ * @summary A labelled section of command items within a command menu.
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - The group's command items (`nile-command-menu-item`).
+ * @slot heading - The group heading. Takes precedence over the `heading` attribute when provided.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart heading - The group heading.
+ * @csspart items - The wrapper around the slotted items.
+ */
+@customElement('nile-command-menu-group')
+export class NileCommandMenuGroup extends NileElement {
+  static styles: CSSResultGroup = styles;
+
+  private readonly hasSlotController = new HasSlotController(this, 'heading');
+
+  /** The text heading shown above the group's items. Use the `heading` slot for richer content. */
+  @property() heading = '';
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'group');
+  }
+
+  render() {
+    const hasHeading = this.heading.length > 0 || this.hasSlotController.test('heading');
+
+    return html`
+      <div part="base" class="group">
+        <div
+          part="heading"
+          class=${classMap({
+            group__heading: true,
+            'group__heading--empty': !hasHeading,
+          })}
+        >
+          <slot name="heading">${this.heading}</slot>
+        </div>
+        <slot part="items" class="group__items"></slot>
+      </div>
+    `;
+  }
+}
+
+export default NileCommandMenuGroup;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-command-menu-group': NileCommandMenuGroup;
+  }
+}

package/src/nile-command-menu-item/index.ts

@@ -0,0 +1 @@
+export { NileCommandMenuItem } from './nile-command-menu-item';

package/src/nile-command-menu-item/nile-command-menu-item.css.ts

@@ -0,0 +1,129 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit';
+
+/**
+ * CommandMenuItem CSS
+ */
+export const styles = css`
+  :host {
+    box-sizing: border-box;
+    display: block;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  .item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    width: 100%;
+    margin-block: var(--nile-spacing-xxs, var(--ng-spacing-xxs));
+    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));
+    border-radius: var(--nile-radius-md, var(--ng-radius-md));
+    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    line-height: 1.4;
+    letter-spacing: normal;
+    color: var(--nile-color-dark-1, var(--ng-colors-text-secondary-700));
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 200ms ease, color 200ms ease;
+  }
+
+  /* size variants — small (default) vs medium */
+  :host([size='medium']) .item {
+    padding-block: var(--nile-spacing-lg, var(--ng-spacing-lg));
+  }
+
+  /* Active / selected (keyboard or hover) */
+  :host([active]:not([disabled])) .item,
+  .item:hover {
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary-hover));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));
+  }
+
+  :host([disabled]) .item {
+    cursor: not-allowed;
+    opacity: 0.4;
+    pointer-events: none;
+  }
+
+  .item__icon {
+    flex: 0 0 auto;
+    /* Reserve a fixed icon gutter so items with and without a leading icon
+       keep their labels aligned. */
+    width: 20px;
+    height: 20px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));
+  }
+
+  .item__icon::slotted(*) {
+    width: 20px;
+    height: 20px;
+  }
+
+  .item__label {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .item__suffix {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
+  }
+
+  .item__shortcut {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
+  }
+
+  .item__shortcut kbd {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 5px;
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    border: solid 1px var(--nile-colors-border-surface, var(--ng-colors-border-secondary-alt));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    font-family: inherit;
+    font-size: 11px;
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
+    line-height: 1;
+    color: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));
+  }
+`;
+
+export default [styles];

package/src/nile-command-menu-item/nile-command-menu-item.test.ts

@@ -0,0 +1,36 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import './nile-command-menu-item';
+import type { NileCommandMenuItem } from './nile-command-menu-item';
+
+describe('NileCommandMenuItem', () => {
+  it('1. renders', async () => { const el = await fixture<NileCommandMenuItem>(html`<nile-command-menu-item></nile-command-menu-item>`); expect(el).to.exist; });
+  it('2. shadow root', async () => { const el = await fixture<NileCommandMenuItem>(html`<nile-command-menu-item></nile-command-menu-item>`); expect(el.shadowRoot).to.not.be.null; });
+  it('3. tag name', async () => { const el = await fixture<NileCommandMenuItem>(html`<nile-command-menu-item></nile-command-menu-item>`); expect(el.tagName.toLowerCase()).to.equal('nile-command-menu-item'); });
+  it('4. size defaults small', async () => { const el = await fixture<NileCommandMenuItem>(html`<nile-command-menu-item></nile-command-menu-item>`); expect(el.size).to.equal('small'); });
+  it('5. value defaults empty', async () => { const el = await fixture<NileCommandMenuItem>(html`<nile-command-menu-item></nile-command-menu-item>`); expect(el.value).to.equal(''); });
+  it('6. disabled defaults false', async () => { const el = await fixture<NileCommandMenuItem>(html`<nile-command-menu-item></nile-command-menu-item>`); expect(el.disabled).to.be.false; });
+  it('7. active defaults false', async () => { const el = await fixture<NileCommandMenuItem>(html`<nile-command-menu-item></nile-command-menu-item>`); expect(el.active).to.be.false; });
+  it('8. keywords defaults empty', async () => { const el = await fixture<NileCommandMenuItem>(html`<nile-command-menu-item></nile-command-menu-item>`); expect(el.keywords).to.equal(''); });
+  it('9. shortcut defaults empty', async () => { const el = await fixture<NileCommandMenuItem>(html`<nile-command-menu-item></nile-command-menu-item>`); expect(el.shortcut).to.equal(''); });
+  it('10. set size medium', async () => { const el = await fixture<NileCommandMenuItem>(html`<nile-command-menu-item size="medium"></nile-command-menu-item>`); expect(el.size).to.equal('medium'); });
+  it('11. set value', async () => { const el = await fixture<NileCommandMenuItem>(html`<nile-command-menu-item value="open"></nile-command-menu-item>`); expect(el.value).to.equal('open'); });
+  it('12. set disabled', async () => { const el = await fixture<NileCommandMenuItem>(html`<nile-command-menu-item disabled></nile-command-menu-item>`); expect(el.disabled).to.be.true; });
+  it('13. role option', async () => { const el = await fixture<NileCommandMenuItem>(html`<nile-command-menu-item></nile-command-menu-item>`); expect(el.getAttribute('role')).to.equal('option'); });
+  it('14. base part', async () => { const el = await fixture<NileCommandMenuItem>(html`<nile-command-menu-item></nile-command-menu-item>`); expect(el.shadowRoot!.querySelector('[part="base"]')).to.exist; });
+  it('15. label part', async () => { const el = await fixture<NileCommandMenuItem>(html`<nile-command-menu-item></nile-command-menu-item>`); expect(el.shadowRoot!.querySelector('[part="label"]')).to.exist; });
+  it('16. icon slot', async () => { const el = await fixture<NileCommandMenuItem>(html`<nile-command-menu-item></nile-command-menu-item>`); expect(el.shadowRoot!.querySelector('slot[name="icon"]')).to.exist; });
+  it('17. suffix slot', async () => { const el = await fixture<NileCommandMenuItem>(html`<nile-command-menu-item></nile-command-menu-item>`); expect(el.shadowRoot!.querySelector('slot[name="suffix"]')).to.exist; });
+  it('18. default slot', async () => { const el = await fixture<NileCommandMenuItem>(html`<nile-command-menu-item></nile-command-menu-item>`); expect(el.shadowRoot!.querySelector('slot:not([name])')).to.exist; });
+  it('19. aria-disabled reflects', async () => { const el = await fixture<NileCommandMenuItem>(html`<nile-command-menu-item disabled></nile-command-menu-item>`); await el.updateComplete; expect(el.getAttribute('aria-disabled')).to.equal('true'); });
+  it('20. aria-selected reflects', async () => { const el = await fixture<NileCommandMenuItem>(html`<nile-command-menu-item active></nile-command-menu-item>`); await el.updateComplete; expect(el.getAttribute('aria-selected')).to.equal('true'); });
+  it('21. shortcut renders kbd', async () => { const el = await fixture<NileCommandMenuItem>(html`<nile-command-menu-item shortcut="⌘ K"></nile-command-menu-item>`); await el.updateComplete; expect(el.shadowRoot!.querySelectorAll('kbd').length).to.equal(2); });
+  it('22. no shortcut no kbd', async () => { const el = await fixture<NileCommandMenuItem>(html`<nile-command-menu-item></nile-command-menu-item>`); expect(el.shadowRoot!.querySelector('kbd')).to.be.null; });
+  it('23. getTextLabel', async () => { const el = await fixture<NileCommandMenuItem>(html`<nile-command-menu-item>Open file</nile-command-menu-item>`); expect(el.getTextLabel().trim()).to.equal('Open file'); });
+  it('24. getFilterText includes label', async () => { const el = await fixture<NileCommandMenuItem>(html`<nile-command-menu-item>Open file</nile-command-menu-item>`); expect(el.getFilterText()).to.contain('open file'); });
+  it('25. getFilterText includes keywords', async () => { const el = await fixture<NileCommandMenuItem>(html`<nile-command-menu-item keywords="document">File</nile-command-menu-item>`); expect(el.getFilterText()).to.contain('document'); });
+  it('26. getFilterText includes value', async () => { const el = await fixture<NileCommandMenuItem>(html`<nile-command-menu-item value="cmd-open">File</nile-command-menu-item>`); expect(el.getFilterText()).to.contain('cmd-open'); });
+  it('27. disabled click swallowed', async () => { const el = await fixture<NileCommandMenuItem>(html`<nile-command-menu-item disabled>X</nile-command-menu-item>`); let fired = false; el.addEventListener('click', () => (fired = true)); el.click(); expect(fired).to.be.false; });
+  it('28. enabled click bubbles', async () => { const el = await fixture<NileCommandMenuItem>(html`<nile-command-menu-item>X</nile-command-menu-item>`); let fired = false; el.addEventListener('click', () => (fired = true)); el.click(); expect(fired).to.be.true; });
+  it('29. dynamic active', async () => { const el = await fixture<NileCommandMenuItem>(html`<nile-command-menu-item></nile-command-menu-item>`); el.active = true; await el.updateComplete; expect(el.getAttribute('aria-selected')).to.equal('true'); });
+  it('30. is defined', async () => { expect(customElements.get('nile-command-menu-item')).to.exist; });
+});

package/src/nile-command-menu-item/nile-command-menu-item.ts

@@ -0,0 +1,172 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './nile-command-menu-item.css';
+import { getTextContent } from '../internal/slot';
+import { watch } from '../internal/watch';
+import NileElement from '../internal/nile-element';
+import type { CSSResultGroup } from 'lit';
+
+/**
+ * An individual selectable command inside a `nile-command-menu`.
+ *
+ * @tag nile-command-menu-item
+ *
+ * @summary Represents a single command/action entry within a command menu.
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - The item's label.
+ * @slot icon - Used to prepend an icon (or similar element) before the label.
+ * @slot suffix - Used to append content (e.g. a hint) after the label, before the shortcut.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart icon - The leading icon container.
+ * @csspart label - The item label.
+ * @csspart suffix - The trailing suffix container.
+ * @csspart shortcut - The keyboard-shortcut container.
+ */
+@customElement('nile-command-menu-item')
+export class NileCommandMenuItem extends NileElement {
+  static styles: CSSResultGroup = styles;
+
+  private cachedTextLabel: string;
+
+  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
+
+  /** Controls vertical padding of the item. */
+  @property({ reflect: true }) size: 'small' | 'medium' = 'small';
+
+  /** A unique value used to identify the item when it is selected. */
+  @property() value = '';
+
+  /** Draws the item in a disabled state, preventing selection. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /** Draws the item in an active/highlighted state. Managed by the parent menu for keyboard navigation. */
+  @property({ type: Boolean, reflect: true }) active = false;
+
+  /**
+   * Extra keywords used by the parent menu when filtering, in addition to the visible label.
+   * Useful for matching synonyms or abbreviations.
+   */
+  @property() keywords = '';
+
+  /**
+   * The search scope this item belongs to. When the menu has active scopes (the "Searching for" row),
+   * an item is shown only if it has no scope or its scope is among the active ones.
+   */
+  @property() scope = '';
+
+  /**
+   * A keyboard shortcut hint shown on the trailing edge of the item. Separate keys with a
+   * space to render each one in its own key box (e.g. `"⌘ K"`).
+   */
+  @property() shortcut = '';
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'option');
+    this.handleHostClick = this.handleHostClick.bind(this);
+    this.addEventListener('click', this.handleHostClick);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('click', this.handleHostClick);
+  }
+
+  private handleHostClick(event: MouseEvent) {
+    // Swallow clicks while disabled so the menu never selects a disabled item.
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
+  private handleDefaultSlotChange() {
+    const textLabel = this.getTextLabel();
+
+    if (typeof this.cachedTextLabel === 'undefined') {
+      this.cachedTextLabel = textLabel;
+      return;
+    }
+
+    if (textLabel !== this.cachedTextLabel) {
+      this.cachedTextLabel = textLabel;
+      this.emit('slotchange');
+    }
+  }
+
+  @watch('disabled')
+  handleDisabledChange() {
+    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+  }
+
+  @watch('active')
+  handleActiveChange() {
+    this.setAttribute('aria-selected', this.active ? 'true' : 'false');
+  }
+
+  /** Returns the plain-text label based on the default slot's content. */
+  getTextLabel() {
+    return getTextContent(this.defaultSlot);
+  }
+
+  /** Returns the string the parent menu uses to match this item against a search query. */
+  getFilterText() {
+    return `${this.getTextLabel()} ${this.keywords} ${this.value}`.toLowerCase();
+  }
+
+  private renderShortcut() {
+    if (!this.shortcut) {
+      return nothing;
+    }
+
+    const keys = this.shortcut.trim().split(/\s+/);
+    return html`
+      <span part="shortcut" class="item__shortcut">
+        ${keys.map(key => html`<kbd>${key}</kbd>`)}
+      </span>
+    `;
+  }
+
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+          item: true,
+          'item--active': this.active,
+          'item--disabled': this.disabled,
+        })}
+      >
+        <slot name="icon" part="icon" class="item__icon"></slot>
+
+        <span part="label" class="item__label">
+          <slot @slotchange=${this.handleDefaultSlotChange}></slot>
+        </span>
+
+        <span part="suffix" class="item__suffix">
+          <slot name="suffix"></slot>
+          ${this.renderShortcut()}
+        </span>
+      </div>
+    `;
+  }
+}
+
+export default NileCommandMenuItem;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-command-menu-item': NileCommandMenuItem;
+  }
+}

package/src/nile-dialog/nile-dialog.ts

@@ -322,7 +322,7 @@ export class NileDialog extends NileElement {
                       name="var(--nile-icon-close, var(--ng-icon-x-close))"
                       method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
                       label="close"
-                      color="var(--nile-dialog-remove-icon-color, var(--ng-colors-fg-quaternary-400))"
+                      color="var(--nile-dialog-remove-icon-color, var(--ng-colors-fg-secondary-700))"
                       @click="${() => this.requestClose('close-button')}"
                     ></nile-icon>
                   </div>

package/src/nile-dot-stepper/index.ts

@@ -0,0 +1 @@
+export { NileDotStepper } from './nile-dot-stepper';

package/src/nile-dot-stepper/nile-dot-stepper.css.ts

@@ -0,0 +1,90 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit';
+
+/**
+ * Dot Stepper CSS
+ */
+export const styles = css`
+  :host {
+    display: inline-block;
+    -webkit-font-smoothing: var(
+      --nile-webkit-font-smoothing,
+      var(--ng-webkit-font-smoothing)
+    );
+    -moz-osx-font-smoothing: var(
+      --nile-moz-osx-font-smoothing,
+      var(--ng-moz-osx-font-smoothing)
+    );
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  }
+
+  .dots {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--nile-spacing-10px, var(--ng-spacing-2-5));
+    align-items: center;
+  }
+
+  .dot {
+    background: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border: none;
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    cursor: pointer;
+    border-radius: 50%;
+    width: var(--nile-spacing-10px, var(--ng-spacing-2-5));
+    height: var(--nile-spacing-10px, var(--ng-spacing-2-5));
+    transition: background-color 0.2s ease-out, transform 0.2s ease-out;
+  }
+
+  .dot--active {
+    background: var(
+      --nile-colors-primary-600,
+      var(--ng-colors-text-brand-secondary-700)
+    );
+  }
+
+  /* Sizes */
+  .dot--sm {
+    width: var(--nile-spacing-4px, var(--ng-spacing-1));
+    height: var(--nile-spacing-4px, var(--ng-spacing-1));
+  }
+
+  .dot--md {
+    width: var(--nile-spacing-10px, var(--ng-spacing-2-5));
+    height: var(--nile-spacing-10px, var(--ng-spacing-2-5));
+  }
+
+  .dot--lg {
+    width: var(--nile-spacing-14px, var(--ng-spacing-3-5));
+    height: var(--nile-spacing-14px, var(--ng-spacing-3-5));
+  }
+
+  .dots:has(.dot--sm) {
+    gap: var(--nile-spacing-6px, var(--ng-spacing-1-5));
+  }
+
+  .dots:has(.dot--lg) {
+    gap: var(--nile-spacing-2-x, var(--ng-spacing-3));
+  }
+
+  .dot:focus-visible {
+    outline: var(--nile-spacing-2px, var(--ng-spacing-0-5)) solid
+      var(--nile-colors-stroke-strong-950, var(--ng-colors-border-secondary));
+    outline-offset: var(--nile-spacing-2px, var(--ng-spacing-0-5));
+  }
+
+  :host([disabled]) .dot,
+  .dot:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
+export default [styles];