@kubex/zinc 1.1.121 → 1.1.122

package/src/components/data-table-filter/data-table-filter.scss

@@ -1,22 +1,176 @@
 @use "../../wc";
 
+// Fields inside a panel that already draws its own edge
+@mixin flush-input {
+  --zn-input-box-shadow: none;
+  --zn-input-background-color: transparent;
+  --zn-input-background-color-hover: transparent;
+  --zn-input-background-color-focus: transparent;
+  --zn-input-border-color: transparent;
+  --zn-input-border-color-hover: transparent;
+  --zn-input-border-color-focus: transparent;
+  --zn-input-focus-ring-color: transparent;
+}
+
 :host {
   display: block;
 }
 
-.data-table-filter {
+.filter-bar {
   display: flex;
-  flex-direction: column;
-  gap: var(--zn-spacing-small);
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--zn-spacing-x-small);
+
+  &__clear::part(base) {
+    height: 32px;
+    min-height: 32px;
+    padding: 0 var(--zn-spacing-x-small);
+    font-weight: var(--zn-font-weight-normal);
+    text-transform: none;
+    white-space: nowrap;
+  }
+
+  &__clear::part(base) {
+    color: rgb(var(--zn-primary));
+  }
+
+  // The chip draws the outline so its trigger and remove button read as one control
+  &__chip {
+    display: inline-flex;
+    align-items: center;
+    height: 32px;
+    padding-right: var(--zn-spacing-x-small);
+    border: 1px solid rgb(var(--zn-border-color));
+    border-radius: var(--zn-border-radius-pill);
+    background-color: rgb(var(--zn-panel));
+
+    &:hover {
+      background-color: rgba(var(--zn-color-tab), 0.5);
+    }
+  }
+
+  // The X's own box carries the trailing gap, so the trigger adds none
+  &__pill::part(base),
+  &__pill::part(base):hover {
+    border-color: transparent;
+    background: transparent;
+    padding-right: 0;
+  }
+
+  // Same box as the trigger, so the X centres on the chip's axis rather than
+  // inside a smaller box centred within it. The hover tint is clipped to the
+  // padded content box so it reads as a disc on the icon, not a full-height bar
+  &__remove::part(base) {
+    width: 24px;
+    min-width: 24px;
+    height: 32px;
+    min-height: 32px;
+    max-height: 32px;
+    padding: 4px 0;
+    background: transparent;
+    background-clip: content-box;
+    border-radius: var(--zn-border-radius-circle);
+    color: var(--zn-text-color);
+  }
 
-  &__item {
+  &__remove::part(base):hover {
+    background: rgb(var(--zn-color-border));
+    background-clip: content-box;
+  }
+
+  // Value editors get their own panel: a calendar has no business inside a menu's
+  // scroll container. The panel draws the only edge, so the editor inside it runs
+  // flush to it
+  &__editor {
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
+    align-items: stretch;
+    overflow: hidden;
+    border: 1px solid rgb(var(--zn-border-color));
+    border-radius: var(--zn-border-radius);
+    background-color: rgb(var(--zn-panel));
+    filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
+
+    zn-datepicker {
+      --zn-datepicker-inline-border-color: transparent;
+    }
 
-    &__name {
-      font-weight: 500;
-      color: rgb(var(--zn-text-heading));
-      width: 100%;
+    zn-input {
+      @include flush-input;
+      min-width: 200px;
     }
   }
+
+  // A long option list has to scroll rather than run off the screen, and its search
+  // field stays put while it does
+  zn-menu {
+    --zn-menu-max-height: 320px;
+  }
+
+  // Full-bleed so the rows scrolling underneath never show around or above it
+  &__option-search {
+    @include flush-input;
+    position: sticky;
+    top: calc(-1 * var(--zn-spacing-2x-small));
+    z-index: 1;
+    margin: calc(-1 * var(--zn-spacing-2x-small)) calc(-1 * var(--zn-spacing-2x-small)) 0;
+    background-color: rgb(var(--zn-panel));
+    border-bottom: 1px solid rgb(var(--zn-border-color));
+  }
+
+  &__suggestions {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    max-height: 220px;
+    overflow-y: auto;
+    border-top: 1px solid rgb(var(--zn-border-color));
+    @include wc.scrollbars;
+  }
+
+  &__suggestion::part(base) {
+    justify-content: flex-start;
+    padding: var(--zn-spacing-x-small) var(--zn-spacing-small);
+    font-weight: var(--zn-font-weight-normal);
+    text-transform: none;
+    color: rgb(var(--zn-text));
+    text-align: left;
+  }
+
+  // Segmented operator picker at the top of a value editor
+  &__operators {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zn-spacing-2x-small);
+    padding: var(--zn-spacing-x-small);
+    border-bottom: 1px solid rgb(var(--zn-border-color));
+  }
+
+  &__operator::part(base) {
+    height: 26px;
+    min-height: 26px;
+    min-width: 30px;
+    padding: 0 var(--zn-spacing-x-small);
+    font-size: var(--zn-font-size-small);
+    font-weight: var(--zn-font-weight-normal);
+    text-transform: none;
+    color: rgb(var(--zn-text));
+    background-color: transparent;
+    border-color: rgb(var(--zn-border-color));
+  }
+
+  &__operator--selected::part(base) {
+    color: rgb(var(--zn-primary));
+    border-color: rgb(var(--zn-primary));
+    background-color: rgba(var(--zn-primary), 0.05);
+  }
+
+  &__separator {
+    flex: none;
+    height: 1px;
+    margin: var(--zn-spacing-2x-small) 0;
+    background-color: rgb(var(--zn-border-color));
+  }
 }

package/src/components/data-table-filter/data-table-filter.test.ts

@@ -1,10 +1,336 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import {expect, fixture, html, waitUntil} from '@open-wc/testing';
+import type ZnDataTableFilter from './data-table-filter.component';
+import type ZnDatepicker from '../datepicker/datepicker.component';
+import type ZnDropdown from '../dropdown/dropdown.component';
+import type ZnInput from '../input/input.component';
+
+const FILTERS = [
+  {id: 'role', name: 'role', operators: ['in'], options: {pm: 'Project Manager', eng: 'Engineer'}},
+  {id: 'status', name: 'status', operators: ['eq'], options: {active: 'Active', inactive: 'Inactive'}},
+  {id: 'email', name: 'email', operators: ['contains']},
+  {id: 'created', name: 'created', type: 'date', operators: ['eq'], dateSubmitFormat: 'timestamp'},
+  {id: 'age', name: 'age', type: 'number', operators: ['eq', 'gte']}
+];
+
+const clickOn = (el: Element | null | undefined) =>
+  el?.dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
+
+const decode = (value: string) => JSON.parse(atob(value)) as { key: string; comparator: string; value: string }[];
+
+async function filterBar(defaultFilters = '') {
+  const el = await fixture<ZnDataTableFilter>(html`
+    <zn-data-table-filter default-filters="${defaultFilters}" .filters="${FILTERS}"></zn-data-table-filter>`);
+  await el.updateComplete;
+  return el;
+}
+
+const pills = (el: ZnDataTableFilter) =>
+  [...el.shadowRoot!.querySelectorAll('.filter-bar__pill')].map(p => p.textContent!.trim());
 
 describe('<zn-data-table-filter>', () => {
   it('should render a component', async () => {
-    const el = await fixture(html` <zn-data-table-filter></zn-data-table-filter> `);
+    const el = await fixture(html`
+      <zn-data-table-filter></zn-data-table-filter>`);
 
     expect(el).to.exist;
   });
+
+  it('renders a pill for each default filter', async () => {
+    const el = await filterBar('role');
+
+    expect(pills(el)).to.deep.equal(['Role']);
+  });
+
+  it('offers the filters that are not already active', async () => {
+    const el = await filterBar('role');
+
+    const options = [...el.shadowRoot!.querySelectorAll('.filter-bar__add + zn-menu zn-menu-item, zn-menu zn-menu-item')]
+      .map(i => i.getAttribute('value'));
+
+    expect(options).to.include('status');
+    expect(options).to.include('email');
+  });
+
+  it('encodes a selected value as the query-builder payload', async () => {
+    const el = await filterBar('status');
+
+    clickOn(el.shadowRoot!.querySelector('zn-menu-item[value="active"]'));
+    await el.updateComplete;
+
+    expect(decode(el.value)).to.deep.equal([{key: 'status', comparator: 'eq', value: 'active'}]);
+  });
+
+  it('accumulates values for an `in` filter and counts them on the pill', async () => {
+    const el = await filterBar('role');
+
+    clickOn(el.shadowRoot!.querySelector('zn-menu-item[value="pm"]'));
+    await el.updateComplete;
+    clickOn(el.shadowRoot!.querySelector('zn-menu-item[value="eng"]'));
+    await el.updateComplete;
+
+    expect(decode(el.value)[0].value).to.equal('pm eng');
+    expect(pills(el)).to.deep.equal(['Role (2)']);
+  });
+
+  it('unsets a single-value filter when its selected option is picked again', async () => {
+    const el = await filterBar('status');
+
+    clickOn(el.shadowRoot!.querySelector('zn-menu-item[value="active"]'));
+    await el.updateComplete;
+    clickOn(el.shadowRoot!.querySelector('zn-menu-item[value="active"]'));
+    await el.updateComplete;
+
+    expect(el.value).to.equal('');
+  });
+
+  it('leaves valueless filters out of the payload', async () => {
+    const el = await filterBar('role,status');
+
+    clickOn(el.shadowRoot!.querySelector('zn-menu-item[value="active"]'));
+    await el.updateComplete;
+
+    expect(decode(el.value)).to.deep.equal([{key: 'status', comparator: 'eq', value: 'active'}]);
+  });
+
+  it('emits zn-filter-change when a value changes', async () => {
+    const el = await filterBar('status');
+    let emitted = 0;
+    el.addEventListener('zn-filter-change', () => emitted++);
+
+    clickOn(el.shadowRoot!.querySelector('zn-menu-item[value="active"]'));
+    await waitUntil(() => emitted > 0);
+
+    expect(emitted).to.equal(1);
+  });
+
+  it('keeps a multi-value filter open on select and closes a single-value one', async () => {
+    const el = await filterBar('role,status');
+    const dropdowns = [...el.shadowRoot!.querySelectorAll<ZnDropdown>('zn-dropdown')];
+
+    const multi = dropdowns.find(d => d.querySelector('zn-menu-item[value="pm"]'))!;
+    const single = dropdowns.find(d => d.querySelector('zn-menu-item[value="active"]'))!;
+
+    expect(multi.stayOpenOnSelect).to.be.true;
+    expect(single.stayOpenOnSelect).to.be.false;
+  });
+
+  it('counts a typed value as one, however many spaces it contains', async () => {
+    const el = await filterBar('email');
+
+    const input = el.shadowRoot!.querySelector<ZnInput>('zn-input')!;
+    input.value = 'thats really bad';
+    input.dispatchEvent(new Event('zn-input', {bubbles: true, composed: true}));
+    await waitUntil(() => el.value.length > 0);
+    await el.updateComplete;
+
+    expect(pills(el)).to.deep.equal(['Email: thats really bad']);
+  });
+
+  it('matches suggestions without regard to case', async () => {
+    const el = await filterBar('email');
+    el.suggestions = {email: ['Ada@example.com', 'grace@example.com']};
+
+    const input = el.shadowRoot!.querySelector<ZnInput>('zn-input')!;
+    input.value = 'ADA';
+    input.dispatchEvent(new Event('zn-input', {bubbles: true, composed: true}));
+    await waitUntil(() => el.shadowRoot!.querySelectorAll('.filter-bar__suggestion').length > 0);
+
+    const shown = [...el.shadowRoot!.querySelectorAll('.filter-bar__suggestion')].map(b => b.textContent!.trim());
+
+    expect(shown).to.deep.equal(['Ada@example.com']);
+  });
+
+  it('renders a text input for a filter with no options', async () => {
+    const el = await filterBar('email');
+
+    expect(el.shadowRoot!.querySelector('.filter-bar__editor zn-input')).to.exist;
+  });
+
+  it('renders an inline calendar for a date filter', async () => {
+    const el = await filterBar('created');
+
+    const picker = el.shadowRoot!.querySelector('.filter-bar__editor zn-datepicker');
+
+    expect(picker).to.exist;
+    expect(picker!.hasAttribute('inline')).to.be.true;
+  });
+
+  it('encodes a picked date and labels the pill with it', async () => {
+    const el = await filterBar('created');
+    const picker = el.shadowRoot!.querySelector<ZnDatepicker>('zn-datepicker')!;
+    await picker.updateComplete;
+
+    picker.shadowRoot!.querySelector<HTMLElement>('.air-datepicker-cell.-day-:not(.-other-month-)')!.click();
+    // AirDatepicker reports a selection on the next task, not synchronously
+    await waitUntil(() => el.value.length > 0);
+    await el.updateComplete;
+
+    const [filter] = decode(el.value);
+
+    expect(filter.key).to.equal('created');
+    expect(filter.comparator).to.equal('eq');
+    expect(Number(filter.value)).to.be.greaterThan(0);
+    expect(pills(el)[0]).to.equal(`Created: ${picker.value as string}`);
+  });
+
+  it('offers each operator when a filter defines more than one', async () => {
+    const el = await filterBar('age');
+
+    const operators = [...el.shadowRoot!.querySelectorAll('.filter-bar__operator')].map(o => o.textContent!.trim());
+
+    expect(operators).to.deep.equal(['is', '\u2265']);
+  });
+
+  it('re-encodes the value with the operator the user picks', async () => {
+    const el = await filterBar('age');
+
+    const input = el.shadowRoot!.querySelector<ZnInput>('zn-input')!;
+    input.value = '18';
+    input.dispatchEvent(new Event('zn-input', {bubbles: true, composed: true}));
+    await waitUntil(() => el.value.length > 0);
+
+    clickOn(el.shadowRoot!.querySelectorAll('.filter-bar__operator')[1]);
+    await el.updateComplete;
+
+    expect(decode(el.value)).to.deep.equal([{key: 'age', comparator: 'gte', value: '18'}]);
+    expect(pills(el)).to.deep.equal(['Age \u2265 18']);
+  });
+
+  it('lists operators above the options for a filter that has both', async () => {
+    const el = await fixture<ZnDataTableFilter>(html`
+      <zn-data-table-filter default-filters="state"
+                            .filters="${[{
+                              id: 'state',
+                              name: 'state',
+                              operators: ['eq', 'in'],
+                              options: {open: 'Open', closed: 'Closed'}
+                            }]}"></zn-data-table-filter>`);
+    await el.updateComplete;
+
+    const items = [...el.shadowRoot!.querySelectorAll('zn-menu-item')].map(i => i.textContent!.trim());
+
+    expect(items).to.deep.equal(['is', 'is any of', 'Open', 'Closed']);
+  });
+
+  it('opens the new pill so its value can be set without a second click', async () => {
+    const el = await filterBar();
+
+    clickOn(el.shadowRoot!.querySelector('zn-menu-item[value="status"]'));
+    await el.updateComplete;
+
+    const pill = [...el.shadowRoot!.querySelectorAll<ZnDropdown>('zn-dropdown')]
+      .find(dropdown => dropdown.dataset.key === 'status')!;
+
+    await waitUntil(() => pill.open, 'the new filter\'s panel never opened');
+    expect(pill.open).to.be.true;
+  });
+
+  it('keeps the panel open for an operator but closes it for a value', async () => {
+    const el = await fixture<ZnDataTableFilter>(html`
+      <zn-data-table-filter default-filters="state"
+                            .filters="${[{
+                              id: 'state',
+                              name: 'state',
+                              operators: ['eq', 'in'],
+                              options: {open: 'Open', closed: 'Closed'}
+                            }]}"></zn-data-table-filter>`);
+    await el.updateComplete;
+
+    const pill = el.shadowRoot!.querySelector<ZnDropdown>('zn-dropdown')!;
+    await pill.show();
+
+    const [operator] = [...pill.querySelectorAll('zn-menu-item')];
+    clickOn(operator);
+    await el.updateComplete;
+    expect(pill.open, 'picking an operator should leave the panel open').to.be.true;
+
+    clickOn(pill.querySelector('zn-menu-item[value="open"]'));
+    await waitUntil(() => !pill.open, 'picking a value should close the panel');
+    expect(pill.open).to.be.false;
+  });
+
+  describe('long option lists', () => {
+    const many = Object.fromEntries(
+      ['How To', 'Linux', 'Beta', 'Router', 'TV', 'Other', 'Mac Hotspot Shield', 'General', 'iOS', 'Tutorials']
+        .map((label, index) => [`c${index}`, label])
+    );
+
+    async function categoryBar() {
+      const el = await fixture<ZnDataTableFilter>(html`
+        <zn-data-table-filter default-filters="category"
+                              .filters="${[{
+                                id: 'category',
+                                name: 'category',
+                                operators: ['eq'],
+                                options: many
+                              }]}"></zn-data-table-filter>`);
+      await el.updateComplete;
+      return el;
+    }
+
+    const search = async (el: ZnDataTableFilter, term: string) => {
+      const input = el.shadowRoot!.querySelector<ZnInput>('.filter-bar__option-search')!;
+      input.value = term;
+      input.dispatchEvent(new Event('zn-input', {bubbles: true, composed: true}));
+      await el.updateComplete;
+    };
+
+    const labels = (el: ZnDataTableFilter) =>
+      [...el.shadowRoot!.querySelectorAll('zn-menu-item')].map(item => item.textContent!.trim());
+
+    it('offers a search above the options', async () => {
+      const el = await categoryBar();
+
+      expect(el.shadowRoot!.querySelector('.filter-bar__option-search')).to.exist;
+    });
+
+    it('leaves the search off a short list', async () => {
+      const el = await filterBar('status');
+
+      expect(el.shadowRoot!.querySelector('.filter-bar__option-search')).to.not.exist;
+    });
+
+    it('narrows the options without regard to case', async () => {
+      const el = await categoryBar();
+
+      await search(el, 'HOTSPOT');
+
+      expect(labels(el)).to.deep.equal(['Mac Hotspot Shield']);
+    });
+
+    it('says so when nothing matches', async () => {
+      const el = await categoryBar();
+
+      await search(el, 'nothing here');
+
+      expect(labels(el)).to.deep.equal(['No matches']);
+    });
+  });
+
+  it('drops a filter when its chip\'s remove button is clicked', async () => {
+    const el = await filterBar('role,status');
+    clickOn(el.shadowRoot!.querySelector('zn-menu-item[value="active"]'));
+    await el.updateComplete;
+
+    const chip = [...el.shadowRoot!.querySelectorAll('.filter-bar__chip')]
+      .find(item => item.querySelector('zn-dropdown')!.getAttribute('data-key') === 'status')!;
+    clickOn(chip.querySelector('.filter-bar__remove'));
+    await el.updateComplete;
+
+    expect(pills(el)).to.deep.equal(['Role']);
+    expect(el.value).to.equal('');
+  });
+
+  it('clear() removes every pill and empties the value', async () => {
+    const el = await filterBar('role,status');
+    clickOn(el.shadowRoot!.querySelector('zn-menu-item[value="active"]'));
+    await el.updateComplete;
+
+    el.clear();
+    await el.updateComplete;
+
+    expect(pills(el)).to.deep.equal([]);
+    expect(el.value).to.equal('');
+  });
 });

package/src/components/data-table-search/data-table-search.component.ts

@@ -187,7 +187,7 @@ export default class ZnDataTableSearch extends ZincElement implements ZincFormCo
           clearable
           @zn-input="${this.handleInput}"
           @zn-clear="${this.handleClear}">
-          <zn-icon slot="prefix" src="search" size="20"></zn-icon>
+          <zn-icon slot="suffix" src="search@lu" size="20"></zn-icon>
         </zn-input>
         <slot style="display: none"></slot>
       </div>

package/src/components/datepicker/datepicker.component.ts

@@ -53,6 +53,7 @@ import styles from './datepicker.scss';
  *   - yyyy/MM/dd (2024/12/31)
  *
  * @cssproperty --zn-input-* - Inherited input component CSS custom properties.
+ * @cssproperty --zn-datepicker-inline-border-color - Border colour of the calendar in `inline` mode.
  */
 export default class ZnDatepicker extends ZincElement implements ZincFormControl {
   static styles: CSSResultGroup = [unsafeCSS(formControlStyles), unsafeCSS(styles)];
@@ -120,6 +121,9 @@ export default class ZnDatepicker extends ZincElement implements ZincFormControl
 
   @property({type: Boolean, reflect: true}) flush = false;
 
+  /** Renders the calendar in place instead of a popup, hiding the text input. */
+  @property({type: Boolean, reflect: true}) inline = false;
+
   /** Makes the input a required field. */
   @property({type: Boolean, reflect: true}) required = false;
 
@@ -232,6 +236,7 @@ export default class ZnDatepicker extends ZincElement implements ZincFormControl
   @watch('disablePastDates', {waitUntilFirstUpdate: true})
   @watch('timePicker', {waitUntilFirstUpdate: true})
   @watch('timeFormat', {waitUntilFirstUpdate: true})
+  @watch('inline', {waitUntilFirstUpdate: true})
   handleDatepickerOptionsChange() {
     this.init();
   }
@@ -285,6 +290,7 @@ export default class ZnDatepicker extends ZincElement implements ZincFormControl
 
       const options: AirDatepickerOptions = {
         locale: enLocale,
+        inline: this.inline,
         dateFormat: this.format,
         range: this.range,
         toggleSelected: false,
@@ -296,6 +302,10 @@ export default class ZnDatepicker extends ZincElement implements ZincFormControl
         onSelect: ({date}) => {
         // Blur the input after selection to prevent invisible keyboard navigation
         if (this.timePicker || this.onlyTimepicker){
+          // An inline calendar never hides, so there's no later event to report the time on
+          if (this.inline) {
+            this.handleChange();
+          }
           return
         }
         if (date && !this.range) {
@@ -333,6 +343,10 @@ export default class ZnDatepicker extends ZincElement implements ZincFormControl
         options.buttons = ['clear'];
       }
 
+      if (this.inline) {
+        this.adoptCalendarStyles(this.shadowRoot!);
+      }
+
       this._instance = new AirDatepicker(inputElement, options);
     }
   }
@@ -361,13 +375,20 @@ export default class ZnDatepicker extends ZincElement implements ZincFormControl
 
     // Document-level calendar styles can't pierce a shadow root, so adopt them where needed
     const root = container.getRootNode();
-    if (root instanceof ShadowRoot && !root.adoptedStyleSheets.includes(getAirDatepickerSheet())) {
-      root.adoptedStyleSheets = [...root.adoptedStyleSheets, getAirDatepickerSheet()];
+    if (root instanceof ShadowRoot) {
+      this.adoptCalendarStyles(root);
     }
 
     return container;
   }
 
+  private adoptCalendarStyles(root: ShadowRoot) {
+    const sheet = getAirDatepickerSheet();
+    if (!root.adoptedStyleSheets.includes(sheet)) {
+      root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+    }
+  }
+
   /** Finds the closest `<dialog>` or popover ancestor, crossing shadow DOM boundaries. */
   private findTopLayerAncestor(): HTMLElement | null {
     let node: Node | null = this.assignedSlot ?? this.parentNode;

package/src/components/datepicker/datepicker.scss

@@ -225,3 +225,28 @@
   margin-inline-end: 0;
   margin-inline-start: 0;
 }
+
+// Inline mode keeps the input in the DOM to carry the value and format, but the
+// calendar is inserted as its sibling - so the input chrome has to stop clipping
+// and sizing the row
+:host([inline]) .input {
+  display: block;
+  height: auto;
+  overflow: visible;
+  border: none;
+  border-radius: 0;
+  background: none;
+  box-shadow: none;
+  cursor: default;
+}
+
+// Lets a host that already draws a panel edge suppress the calendar's own
+:host([inline]) .air-datepicker {
+  --adp-border-color-inline: var(--zn-datepicker-inline-border-color, rgb(var(--zn-border-color)));
+}
+
+:host([inline]) .input__control,
+:host([inline]) .input__prefix,
+:host([inline]) .input__suffix {
+  display: none;
+}

package/src/components/datepicker/datepicker.test.ts

@@ -1,5 +1,5 @@
 import '../../../dist/zn.min.js';
-import {expect, fixture, html} from '@open-wc/testing';
+import {expect, fixture, html, waitUntil} from '@open-wc/testing';
 import type ZnDatepicker from './datepicker.component';
 
 describe('<zn-datepicker>', () => {
@@ -9,6 +9,33 @@ describe('<zn-datepicker>', () => {
     expect(el).to.exist;
   });
 
+  describe('inline', () => {
+    it('renders the calendar in place and hides the text input', async () => {
+      const el = await fixture<ZnDatepicker>(html`<zn-datepicker inline></zn-datepicker>`);
+      await el.updateComplete;
+
+      const calendar = el.shadowRoot!.querySelector('.air-datepicker');
+
+      expect(calendar, 'calendar should live in the datepicker shadow root').to.exist;
+      expect(calendar!.classList.contains('-inline-')).to.be.true;
+      expect(getComputedStyle(el.input).display).to.equal('none');
+    });
+
+    it('emits zn-change when a day is picked', async () => {
+      const el = await fixture<ZnDatepicker>(html`<zn-datepicker inline></zn-datepicker>`);
+      await el.updateComplete;
+
+      let emitted = 0;
+      el.addEventListener('zn-change', () => emitted++);
+
+      const day = el.shadowRoot!.querySelector<HTMLElement>('.air-datepicker-cell.-day-:not(.-other-month-)')!;
+      day.click();
+      await waitUntil(() => emitted > 0);
+
+      expect(el.value).to.not.equal('');
+    });
+  });
+
   describe('Escape key', () => {
     it('blurs the inner input when focused and the calendar is closed', async () => {
       const el = await fixture<ZnDatepicker>(html`<zn-datepicker></zn-datepicker>`);

package/src/components/input/input.component.ts

@@ -68,6 +68,7 @@ import styles from './input.scss';
  * @csspart password-toggle-button - The password toggle button.
  * @csspart suffix - The container that wraps the suffix.
  *
+ * @cssproperty --zn-input-box-shadow - Shadow cast by the field; set to `none` inside a panel that draws its own edge.
  * @cssproperty --zn-range-track-height - The height of a range input's track.
  * @cssproperty --zn-range-track-color - The color of a range input's track.
  * @cssproperty --zn-range-thumb-size - The diameter of a range input's thumb.