@timlassiter11/yatl 1.0.18 → 1.2.0

package/dist/index.mjs

@@ -9,501 +9,6 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 
-// src/yatl-button/yatl-button.ts
-import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-// src/theme.ts
-import { css } from "lit";
-var theme_default = css`
-  /* Theme declarations */
-  :host {
-    /* Typography */
-    --yatl-font-family: var(
-      --yatl-table-font,
-      -apple-system,
-      BlinkMacSystemFont,
-      'Segoe UI',
-      Roboto,
-      Helvetica,
-      Arial,
-      sans-serif,
-      'Apple Color Emoji',
-      'Segoe UI Emoji'
-    );
-    --yatl-font-size: var(--yatl-table-font-size, 0.875rem);
-    --yatl-line-height: var(--yatl-table-line-height, 1.25rem);
-
-    /* Spacing */
-    --yatl-spacing-xs: var(--yatl-table-spacing-xs, 4px);
-    --yatl-spacing-s: var(--yatl-table-spacing-s, 8px);
-    --yatl-spacing-m: var(--yatl-table-spacing-m, 12px);
-    --yatl-spacing-l: var(--yatl-table-spacing-l, 16px);
-
-    --yatl-cell-padding: var(
-      --yatl-table-cell-padding,
-      var(--yatl-spacing-m) var(--yatl-spacing-m)
-    );
-    --yatl-header-padding: var(
-      --yatl-table-header-padding,
-      var(--yatl-spacing-m) var(--yatl-spacing-l)
-    );
-
-    --yatl-brand-color: var(--yatl-table-brand-light, #7531ae);
-
-    /* Light colors */
-    --yatl-bg-light: var(--yatl-table-bg-light, #ffffff);
-    --yatl-text-light: var(--yatl-table-text-light, #0f172a);
-    --yatl-text-muted-light: var(--yatl-table-text-muted-light, #64748b);
-    --yatl-border-color-light: var(--yatl-table-border-color-light, #e2e8f0);
-    --yatl-header-bg-light: var(
-      --yatl-table-header-bg-light,
-      color-mix(in srgb, black 5%, var(--yatl-bg))
-    );
-    --yatl-header-text-light: var(--yatl-table-header-text-light, #475569);
-    --yatl-header-drop-bg-light: var(
-      --yatl-table-drop-bg-light,
-      color-mix(in srgb, black 5%, transparent)
-    );
-    --yatl-row-hover-bg-light: var(
-      --yatl-table-row-hover-bg-light,
-      color-mix(in srgb, black 5%, transparent)
-    );
-    --yatl-row-selected-bg-light: var(
-      --yatl-table-row-selected-bg-light,
-      color-mix(in srgb, var(--yatl-brand-color) 20%, transparent)
-    );
-
-    /* Dark colors */
-    --yatl-bg-dark: var(--yatl-table-bg-dark, #101219);
-    --yatl-text-dark: var(--yatl-table-text-dark, #f1f5f9);
-    --yatl-text-muted-dark: var(--yatl-table-text-muted-dark, #94a3b8);
-    --yatl-border-color-dark: var(--yatl-table-border-color-dark, #1a1b1e);
-    --yatl-header-bg-dark: var(
-      --yatl-table-header-bg-dark,
-      color-mix(in srgb, white 5%, var(--yatl-bg))
-    );
-    --yatl-header-text-dark: var(--yatl-table-header-text-dark, #cbd5e1);
-    --yatl-header-drop-bg-dark: var(
-      --yatl-table-drop-bg-dark,
-      color-mix(in srgb, white 5%, transparent)
-    );
-    --yatl-row-hover-bg-dark: var(
-      --yatl-table-row-hover-bg-dark,
-      color-mix(in srgb, white 5%, transparent)
-    );
-    --yatl-row-selected-bg-dark: var(
-      --yatl-table-row-selected-bg-dark,
-      color-mix(in srgb, var(--yatl-brand-color) 20%, transparent)
-    );
-
-    /* Applied colors */
-    --yatl-bg: var(
-      --yatl-table-bg,
-      light-dark(var(--yatl-bg-light), var(--yatl-bg-dark))
-    );
-    --yatl-text: var(
-      --yatl-table-text,
-      light-dark(var(--yatl-text-light), var(--yatl-text-dark))
-    );
-    --yatl-text-muted: var(
-      --yatl-table-text-muted,
-      light-dark(var(--yatl-text-muted-light), var(--yatl-text-muted-dark))
-    );
-    --yatl-border-color: var(
-      --yatl-table-border-color,
-      light-dark(var(--yatl-border-color-light), var(--yatl-border-color-dark))
-    );
-    --yatl-header-bg: var(
-      --yatl-table-header-bg,
-      light-dark(var(--yatl-header-bg-light), var(--yatl-header-bg-dark))
-    );
-    --yatl-header-text: var(
-      --yatl-table-header-text,
-      light-dark(var(--yatl-header-text-light), var(--yatl-header-text-dark))
-    );
-    --yatl-header-drop-bg: var(
-      --yatl-table-header-drop-bg,
-      light-dark(
-        var(--yatl-header-drop-bg-light),
-        var(--yatl-header-drop-bg-dark)
-      )
-    );
-    --yatl-row-hover-bg: var(
-      --yatl-table-row-hover-bg,
-      light-dark(var(--yatl-row-hover-bg-light), var(--yatl-row-hover-bg-dark))
-    );
-    --yatl-row-selected-bg: var(
-      --yatl-table-row-selected-bg,
-      light-dark(
-        var(--yatl-row-selected-bg-light),
-        var(--yatl-row-selected-bg-dark)
-      )
-    );
-
-    --yatl-row-number-column-width: var(
-      --yatl-table-row-number-column-width,
-      48px
-    );
-    --yatl-row-selector-column-width: var(
-      --yatl-table-row-selector-column-width,
-      48px
-    );
-    --yatl-column-visibility-transition: var(
-      --yatl-table-column-visibility-transition,
-      100ms
-    );
-
-    --yatl-table-radius: var(--yatl-table-table-radius, 8px);
-    --yatl-input-radius: var(--yatl-table-input-radius, 8px);
-    --yatl-button-radius: var(--yatl-table-button-radius, 8px);
-    --yatl-button-group-radius: var(--yatl-table-button-group-radius, 8px);
-    --yatl-input-padding: var(
-      --yatl-table-input-padding,
-      var(--yatl-spacing-m)
-    );
-
-    font-family: var(--yatl-font-family);
-    font-size: var(--yatl-font-size);
-    color: var(--yatl-text);
-  }
-`;
-
-// src/yatl-button/yatl-button.styles.ts
-import { css as css2 } from "lit";
-var yatl_button_styles_default = css2`
-  :host {
-    --yatl-button-radius: var(--yatl-table-button-radius, 4px);
-
-    display: block;
-    box-sizing: border-box;
-    border-radius: var(--yatl-button-radius);
-    overflow: hidden;
-    padding: 0;
-    border: 1px solid var(--yatl-border-color);
-    background: var(--yatl-header-bg);
-    font-size: large;
-    font-weight: 500;
-    color: var(--yatl-text);
-  }
-
-  .button {
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-    padding: 8px;
-    border: none;
-    cursor: pointer;
-    background-color: transparent;
-    /* Helps center the icons */
-    display: flex;
-    align-items: center;
-  }
-
-  .button:not([disabled]):hover {
-    background: var(--yatl-brand-color);
-  }
-
-  .button:disabled,
-  .button[disabled] {
-    opacity: 0.5;
-    cursor: not-allowed;
-    filter: grayscale(100%);
-    pointer-events: none;
-  }
-`;
-
-// src/yatl-button/yatl-button.ts
-var YatlButton = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.disabled = false;
-    this.type = "button";
-  }
-  render() {
-    return html`
-      <button
-        class="button"
-        type=${this.type}
-        ?disabled=${this.disabled}
-        part="button"
-      >
-        <slot></slot>
-      </button>
-    `;
-  }
-};
-YatlButton.styles = [theme_default, yatl_button_styles_default];
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], YatlButton.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], YatlButton.prototype, "type", 2);
-YatlButton = __decorateClass([
-  customElement("yatl-button")
-], YatlButton);
-
-// src/yatl-button-group/yatl-button-group.ts
-import { LitElement as LitElement3, html as html3 } from "lit";
-import { customElement as customElement3 } from "lit/decorators.js";
-
-// src/yatl-dropdown/yatl-dropdown.ts
-import { html as html2, LitElement as LitElement2 } from "lit";
-import { customElement as customElement2, property as property2, query } from "lit/decorators.js";
-
-// src/yatl-dropdown/yatl-dropdown.styles.ts
-import { css as css3 } from "lit";
-var yatl_dropdown_styles_default = css3`
-  :host {
-    --yatl-dropdown-menu-bg: var(
-      --yatl-table-dropdown-menu-bg,
-      var(--yatl-header-bg)
-    );
-    --yatl-dropdown-menu-padding: var(
-      --yatl-table-dropdown-menu-padding,
-      0.25em
-    );
-    --yatl-dropdown-menu-radius: var(--yatl-table-dropdown-menu-radius, 8px);
-    --yatl-dropdown-menu-border: var(
-      --yatl-table-dropdown-menu-border,
-      var(--yatl-border-color)
-    );
-
-    overflow: visible !important;
-  }
-
-  .dropdown {
-    position: relative;
-    height: 100%;
-  }
-
-  .dropdown summary {
-    box-sizing: border-box;
-    /* Hides the dropdown arrow*/
-    list-style: none;
-    height: 100%;
-  }
-
-  :host([open]) ::slotted([slot='trigger']) {
-    background-color: var(--yatl-brand-color);
-  }
-
-  .dropdown-menu {
-    position: absolute;
-    top: 100%;
-    right: 0;
-    margin-top: 4px;
-    background: var(--yatl-dropdown-menu-bg);
-    border: 1px solid var(--yatl-dropdown-menu-border);
-    border-radius: var(--yatl-dropdown-menu-radius);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
-    padding: var(--yatl-dropdown-menu-padding);
-    z-index: 50;
-
-    display: flex;
-    flex-direction: column;
-  }
-`;
-
-// src/yatl-dropdown/yatl-dropdown.ts
-var YatlDropdown = class extends LitElement2 {
-  constructor() {
-    super(...arguments);
-    this.open = false;
-    this.handleDropdownTriggerClick = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      this.open = !this.open;
-      if (this.open) {
-        document.addEventListener("click", this.handleDocumentClick);
-      } else {
-        document.removeEventListener("click", this.handleDocumentClick);
-      }
-    };
-    // Check if the click happened inside or outside
-    this.handleDocumentClick = (event) => {
-      if (this.detailsElement && !event.composedPath().includes(this.detailsElement)) {
-        this.open = false;
-      }
-    };
-  }
-  render() {
-    return html2`
-      <details part="dropdown" class="dropdown" ?open=${this.open}>
-        <summary @click=${this.handleDropdownTriggerClick}>
-          <slot name="trigger"></slot>
-        </summary>
-        <div part="dropdown-menu" class="dropdown-menu">
-          <slot></slot>
-        </div>
-      </details>
-    `;
-  }
-};
-YatlDropdown.styles = [yatl_dropdown_styles_default];
-__decorateClass([
-  query("details")
-], YatlDropdown.prototype, "detailsElement", 2);
-__decorateClass([
-  property2({ type: Boolean, reflect: true })
-], YatlDropdown.prototype, "open", 2);
-YatlDropdown = __decorateClass([
-  customElement2("yatl-dropdown")
-], YatlDropdown);
-
-// src/yatl-button-group/yatl-button-group.styles.ts
-import { css as css4 } from "lit";
-var yatl_button_group_styles_default = css4`
-  :host {
-    display: inline-flex;
-    --yatl-button-group-radius: var(--yatl-table-button-group-radius, 8px);
-  }
-
-  .group-container {
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-  }
-
-  ::slotted(*:not(:first-child):not(:last-child)) {
-    --yatl-table-button-radius: 0;
-  }
-
-  ::slotted(:first-child) {
-    --yatl-table-button-radius: var(--yatl-button-group-radius) 0 0
-      var(--yatl-button-group-radius);
-  }
-
-  ::slotted(:last-child) {
-    --yatl-table-button-radius: 0 var(--yatl-button-group-radius)
-      var(--yatl-button-group-radius) 0;
-    margin-right: 0;
-  }
-
-  ::slotted(*) {
-    margin-right: -1px;
-  }
-`;
-
-// src/yatl-button-group/yatl-button-group.ts
-var YatlButtonGroup = class extends LitElement3 {
-  render() {
-    return html3`
-      <div class="group-container">
-        <slot @slotchange=${this.handleSlotChange}></slot>
-      </div>
-    `;
-  }
-  getFlattenedElements(slot) {
-    const elements = slot.assignedNodes({ flatten: true }).filter((node) => node.nodeType === Node.ELEMENT_NODE);
-    return elements.filter(
-      (element) => getComputedStyle(element).display !== "none"
-    );
-  }
-  handleSlotChange(event) {
-    const slot = event.target;
-    const elements = this.getFlattenedElements(slot);
-    elements.forEach((element, index) => {
-      if (element instanceof YatlDropdown) {
-        element = element.querySelector('[slot="trigger"]') ?? element;
-      }
-      element.classList.toggle("is-first", index === 0);
-      element.classList.toggle("is-last", index === elements.length - 1);
-    });
-  }
-};
-// FIXME: The column picker can't get the border radius
-YatlButtonGroup.styles = [yatl_button_group_styles_default];
-YatlButtonGroup = __decorateClass([
-  customElement3("yatl-button-group")
-], YatlButtonGroup);
-
-// src/yatl-dropdown-item/yatl-dropdown-item.ts
-import { html as html4, LitElement as LitElement4 } from "lit";
-import { customElement as customElement4, property as property3 } from "lit/decorators.js";
-
-// src/yatl-dropdown-item/yatl-dropdown-item.styles.ts
-import { css as css5 } from "lit";
-var yatl_dropdown_item_styles_default = css5`
-  :host {
-    --yatl-dropdown-item-padding: var(
-      --yatl-table-dropdown-item-padding,
-      0.5em 1em
-    );
-    --yatl-dropdown-item-font-size: var(
-      --yatl-table-dropdown-item-font-size,
-      16px
-    );
-  }
-
-  .dropdown-item {
-    display: flex;
-    align-items: center;
-    gap: var(--yatl-spacing-xs);
-    color: var(--yatl-text);
-    padding: var(--yatl-dropdown-item-padding);
-    cursor: pointer;
-    white-space: nowrap;
-    font-size: var(--yatl-dropdown-item-font-size);
-    user-select: none;
-    transition: background 0.1s ease;
-  }
-
-  .dropdown-item:hover {
-    background-color: var(--yatl-brand-color);
-    border-radius: 4px;
-  }
-
-  .dropdown-item input {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-
-  .check-container {
-    width: 18px;
-    height: 18px;
-    margin-right: 12px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid transparent;
-    border-radius: 3px;
-    transition: all 0.2s ease;
-  }
-
-  .check-icon {
-    width: 14px;
-    height: 14px;
-    fill: var(--yatl-text);
-    opacity: 0;
-    transform: scale(0.5);
-    transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46);
-  }
-
-  input:checked ~ .check-container .check-icon {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  input:focus-visible ~ .check-container {
-    border-color: var(--yatl-brand-color);
-    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
-  }
-
-  .label-text {
-    font-size: 14px;
-    color: var(--yatl-text);
-  }
-`;
-
 // src/events.ts
 var YatlEvent = class extends Event {
   constructor(name, options = {}) {
@@ -515,7 +20,7 @@ var YatlEvent = class extends Event {
     });
   }
 };
-var _YatlRowClickEvent = class _YatlRowClickEvent extends YatlEvent {
+var YatlRowClickEvent = class _YatlRowClickEvent extends YatlEvent {
   constructor(row, rowId, index, field, originalEvent) {
     super(_YatlRowClickEvent.EVENT_NAME);
     this.row = row;
@@ -524,196 +29,195 @@ var _YatlRowClickEvent = class _YatlRowClickEvent extends YatlEvent {
     this.field = field;
     this.originalEvent = originalEvent;
   }
+  static {
+    this.EVENT_NAME = "yatl-row-click";
+  }
+  clone() {
+    return new _YatlRowClickEvent(
+      this.row,
+      this.rowId,
+      this.index,
+      this.field,
+      this.originalEvent
+    );
+  }
 };
-_YatlRowClickEvent.EVENT_NAME = "yatl-row-click";
-var YatlRowClickEvent = _YatlRowClickEvent;
-var _YatlRowSelectRequestEvent = class _YatlRowSelectRequestEvent extends YatlEvent {
+var YatlRowSelectRequest = class _YatlRowSelectRequest extends YatlEvent {
   constructor(rowId, selected, currentlySelectedRows) {
-    super(_YatlRowSelectRequestEvent.EVENT_NAME, { cancelable: true });
+    super(_YatlRowSelectRequest.EVENT_NAME, { cancelable: true });
     this.rowId = rowId;
     this.selected = selected;
     this.currentlySelectedRows = currentlySelectedRows;
   }
+  static {
+    this.EVENT_NAME = "yatl-row-select-request";
+  }
+  clone() {
+    return new _YatlRowSelectRequest(
+      this.rowId,
+      this.selected,
+      this.currentlySelectedRows
+    );
+  }
 };
-_YatlRowSelectRequestEvent.EVENT_NAME = "yatl-row-select-request";
-var YatlRowSelectRequestEvent = _YatlRowSelectRequestEvent;
-var _YatlRowSelectEvent = class _YatlRowSelectEvent extends YatlEvent {
+var YatlRowSelectEvent = class _YatlRowSelectEvent extends YatlEvent {
   constructor(selectedIds, previouslySelectedRows) {
     super(_YatlRowSelectEvent.EVENT_NAME);
     this.selectedIds = selectedIds;
     this.previouslySelectedRows = previouslySelectedRows;
   }
+  static {
+    this.EVENT_NAME = "yatl-row-select";
+  }
+  clone() {
+    return new _YatlRowSelectEvent(
+      this.selectedIds,
+      this.previouslySelectedRows
+    );
+  }
 };
-_YatlRowSelectEvent.EVENT_NAME = "yatl-row-select";
-var YatlRowSelectEvent = _YatlRowSelectEvent;
-var _YatlColumnSortRequestEvent = class _YatlColumnSortRequestEvent extends YatlEvent {
+var YatlColumnSortRequest = class _YatlColumnSortRequest extends YatlEvent {
   constructor(field, order, multisort) {
-    super(_YatlColumnSortRequestEvent.EVENT_NAME, { cancelable: true });
+    super(_YatlColumnSortRequest.EVENT_NAME, { cancelable: true });
     this.field = field;
     this.order = order;
     this.multisort = multisort;
   }
+  static {
+    this.EVENT_NAME = "yatl-column-sort-request";
+  }
+  clone() {
+    return new _YatlColumnSortRequest(this.field, this.order, this.multisort);
+  }
 };
-_YatlColumnSortRequestEvent.EVENT_NAME = "yatl-column-sort-request";
-var YatlColumnSortRequestEvent = _YatlColumnSortRequestEvent;
-var _YatlColumnSortEvent = class _YatlColumnSortEvent extends YatlEvent {
+var YatlColumnSortEvent = class _YatlColumnSortEvent extends YatlEvent {
   constructor(field, order, multisort) {
     super(_YatlColumnSortEvent.EVENT_NAME);
     this.field = field;
     this.order = order;
     this.multisort = multisort;
   }
+  static {
+    this.EVENT_NAME = "yatl-column-sort";
+  }
+  clone() {
+    return new _YatlColumnSortEvent(this.field, this.order, this.multisort);
+  }
 };
-_YatlColumnSortEvent.EVENT_NAME = "yatl-column-sort";
-var YatlColumnSortEvent = _YatlColumnSortEvent;
-var _YatlColumnToggleRequestEvent = class _YatlColumnToggleRequestEvent extends YatlEvent {
+var YatlColumnToggleRequest = class _YatlColumnToggleRequest extends YatlEvent {
   constructor(field, visibility) {
-    super(_YatlColumnToggleRequestEvent.EVENT_NAME, { cancelable: true });
+    super(_YatlColumnToggleRequest.EVENT_NAME, { cancelable: true });
     this.field = field;
     this.visibility = visibility;
   }
+  static {
+    this.EVENT_NAME = "yatl-column-toggle-request";
+  }
+  clone() {
+    return new _YatlColumnToggleRequest(this.field, this.visibility);
+  }
 };
-_YatlColumnToggleRequestEvent.EVENT_NAME = "yatl-column-toggle-request";
-var YatlColumnToggleRequestEvent = _YatlColumnToggleRequestEvent;
-var _YatlColumnToggleEvent = class _YatlColumnToggleEvent extends YatlEvent {
+var YatlColumnToggleEvent = class _YatlColumnToggleEvent extends YatlEvent {
   constructor(field, visible) {
     super(_YatlColumnToggleEvent.EVENT_NAME);
     this.field = field;
     this.visible = visible;
   }
+  static {
+    this.EVENT_NAME = "yatl-column-toggle";
+  }
+  clone() {
+    return new _YatlColumnToggleEvent(this.field, this.visible);
+  }
 };
-_YatlColumnToggleEvent.EVENT_NAME = "yatl-column-toggle";
-var YatlColumnToggleEvent = _YatlColumnToggleEvent;
-var _YatlColumnResizeEvent = class _YatlColumnResizeEvent extends YatlEvent {
+var YatlColumnResizeEvent = class _YatlColumnResizeEvent extends YatlEvent {
   constructor(field, width) {
     super(_YatlColumnResizeEvent.EVENT_NAME);
     this.field = field;
     this.width = width;
   }
+  static {
+    this.EVENT_NAME = "yatl-column-resize";
+  }
+  clone() {
+    return new _YatlColumnResizeEvent(this.field, this.width);
+  }
 };
-_YatlColumnResizeEvent.EVENT_NAME = "yatl-column-resize";
-var YatlColumnResizeEvent = _YatlColumnResizeEvent;
-var _YatlColumnReorderRequestEvent = class _YatlColumnReorderRequestEvent extends YatlEvent {
+var YatlColumnReorderRequest = class _YatlColumnReorderRequest extends YatlEvent {
   constructor(movedColumn, originalIndex, newIndex) {
-    super(_YatlColumnReorderRequestEvent.EVENT_NAME, { cancelable: true });
+    super(_YatlColumnReorderRequest.EVENT_NAME, { cancelable: true });
     this.movedColumn = movedColumn;
     this.originalIndex = originalIndex;
     this.newIndex = newIndex;
   }
+  static {
+    this.EVENT_NAME = "yatl-column-reorder-request";
+  }
+  clone() {
+    return new _YatlColumnReorderRequest(
+      this.movedColumn,
+      this.originalIndex,
+      this.newIndex
+    );
+  }
 };
-_YatlColumnReorderRequestEvent.EVENT_NAME = "yatl-column-reorder-request";
-var YatlColumnReorderRequestEvent = _YatlColumnReorderRequestEvent;
-var _YatlColumnReorderEvent = class _YatlColumnReorderEvent extends YatlEvent {
+var YatlColumnReorderEvent = class _YatlColumnReorderEvent extends YatlEvent {
   constructor(order) {
     super(_YatlColumnReorderEvent.EVENT_NAME);
     this.order = order;
   }
+  static {
+    this.EVENT_NAME = "yatl-column-reorder";
+  }
+  clone() {
+    return new _YatlColumnReorderEvent(this.order);
+  }
 };
-_YatlColumnReorderEvent.EVENT_NAME = "yatl-column-reorder";
-var YatlColumnReorderEvent = _YatlColumnReorderEvent;
-var _YatlTableSearchEvent = class _YatlTableSearchEvent extends YatlEvent {
-  constructor(query3) {
+var YatlTableSearchEvent = class _YatlTableSearchEvent extends YatlEvent {
+  constructor(query2) {
     super(_YatlTableSearchEvent.EVENT_NAME);
-    this.query = query3;
+    this.query = query2;
+  }
+  static {
+    this.EVENT_NAME = "yatl-table-search";
+  }
+  clone() {
+    return new _YatlTableSearchEvent(this.query);
   }
 };
-_YatlTableSearchEvent.EVENT_NAME = "yatl-table-search";
-var YatlTableSearchEvent = _YatlTableSearchEvent;
-var _YatlTableViewChangeEvent = class _YatlTableViewChangeEvent extends YatlEvent {
+var YatlTableViewChangeEvent = class _YatlTableViewChangeEvent extends YatlEvent {
   constructor(data) {
     super(_YatlTableViewChangeEvent.EVENT_NAME);
     this.data = data;
   }
-};
-_YatlTableViewChangeEvent.EVENT_NAME = "yatl-table-view-change";
-var YatlTableViewChangeEvent = _YatlTableViewChangeEvent;
-var _YatlTableStateChangeEvent = class _YatlTableStateChangeEvent extends YatlEvent {
-  constructor(state, triggers) {
-    super(_YatlTableStateChangeEvent.EVENT_NAME);
-    this.state = state;
-    this.triggers = triggers;
+  static {
+    this.EVENT_NAME = "yatl-table-view-change";
   }
-};
-_YatlTableStateChangeEvent.EVENT_NAME = "yatl-table-state-change";
-var YatlTableStateChangeEvent = _YatlTableStateChangeEvent;
-var _YatlDropdownToggleEvent = class _YatlDropdownToggleEvent extends YatlEvent {
-  constructor(value, checked) {
-    super(_YatlDropdownToggleEvent.EVENT_NAME);
-    this.value = value;
-    this.checked = checked;
+  clone() {
+    return new _YatlTableViewChangeEvent(this.data);
   }
 };
-_YatlDropdownToggleEvent.EVENT_NAME = "yatl-dropdown-toggle";
-var YatlDropdownToggleEvent = _YatlDropdownToggleEvent;
-var _YatlToolbarSearchInput = class _YatlToolbarSearchInput extends YatlEvent {
-  constructor(value) {
-    super(_YatlToolbarSearchInput.EVENT_NAME);
-    this.value = value;
+var YatlTableStateChangeEvent = class _YatlTableStateChangeEvent extends YatlEvent {
+  constructor(state2, triggers) {
+    super(_YatlTableStateChangeEvent.EVENT_NAME);
+    this.state = state2;
+    this.triggers = triggers;
   }
-};
-_YatlToolbarSearchInput.EVENT_NAME = "yatl-toolbar-search-input";
-var YatlToolbarSearchInput = _YatlToolbarSearchInput;
-var _YatlToolbarSearchChange = class _YatlToolbarSearchChange extends YatlEvent {
-  constructor(value) {
-    super(_YatlToolbarSearchChange.EVENT_NAME);
-    this.value = value;
+  static {
+    this.EVENT_NAME = "yatl-table-state-change";
   }
-};
-_YatlToolbarSearchChange.EVENT_NAME = "yatl-toolbar-search-change";
-var YatlToolbarSearchChange = _YatlToolbarSearchChange;
-var _YatlToolbarExportClick = class _YatlToolbarExportClick extends YatlEvent {
-  constructor() {
-    super(_YatlToolbarExportClick.EVENT_NAME);
+  clone() {
+    return new _YatlTableStateChangeEvent(this.state, this.triggers);
   }
 };
-_YatlToolbarExportClick.EVENT_NAME = "yatl-toolbar-export-click";
-var YatlToolbarExportClick = _YatlToolbarExportClick;
-
-// src/yatl-dropdown-item/yatl-dropdown-item.ts
-var YatlDropdownItem = class extends LitElement4 {
-  constructor() {
-    super(...arguments);
-    this.value = "on";
-    this.checked = false;
-    this.handleCheckboxChanged = (event) => {
-      const input = event.target;
-      this.checked = input.checked;
-      this.dispatchEvent(new YatlDropdownToggleEvent(input.value, input.checked));
-    };
-  }
-  render() {
-    return html4`
-      <label part="dropdown-item" class="dropdown-item">
-        <input
-          type="checkbox"
-          value=${this.value}
-          .checked=${this.checked}
-          @change=${this.handleCheckboxChanged}
-        />
-        <div class="check-container">
-          <svg class="check-icon" viewBox="0 0 16 16">
-            <path
-              d="M13.485 1.929l-8.485 8.485-3.536-3.536-1.414 1.414 4.95 4.95 9.9-9.9z"
-            />
-          </svg>
-        </div>
-        <span part="label-text" class="label-text"><slot></slot></span>
-      </label>
-    `;
-  }
-};
-YatlDropdownItem.styles = [yatl_dropdown_item_styles_default];
-__decorateClass([
-  property3({ type: String, reflect: true })
-], YatlDropdownItem.prototype, "value", 2);
-__decorateClass([
-  property3({ type: Boolean, reflect: true })
-], YatlDropdownItem.prototype, "checked", 2);
-YatlDropdownItem = __decorateClass([
-  customElement4("yatl-dropdown-item")
-], YatlDropdownItem);
 
 // src/utils/columns.ts
+function findColumn(columns, field) {
+  return columns.find((c) => c.field === field);
+}
+function isInternalColumn(col) {
+  return col?.role === "internal";
+}
 function isDisplayColumn(col) {
   return col?.role !== "internal";
 }
@@ -766,6 +270,24 @@ function getNestedValue(obj, path) {
   }
   return current;
 }
+function setNestedValue(obj, path, value) {
+  const keys = path.split(".");
+  const finalProp = keys.at(-1);
+  if (!finalProp) {
+    throw new Error("Cannot set nested value with empty path");
+  }
+  let current = obj;
+  for (const key of keys.slice(0, -1)) {
+    if (!isValidKey(key, current)) {
+      const newObj = {};
+      Object.assign(current, { [key]: newObj });
+      current = newObj;
+    } else {
+      current = current[key];
+    }
+  }
+  Object.assign(current, { [finalProp]: value });
+}
 
 // src/utils/tokenizer.ts
 var createRegexTokenizer = (exp = "\\S+") => {
@@ -783,8 +305,25 @@ var createRegexTokenizer = (exp = "\\S+") => {
 };
 var whitespaceTokenizer = createRegexTokenizer();
 
-// src/yatl-table/utils.ts
-import { html as html5 } from "lit";
+// src/utils/typed-event-target.ts
+var TypedEventTarget = class extends EventTarget {
+  addEventListener(type, listener, options) {
+    super.addEventListener(
+      type,
+      listener,
+      options
+    );
+  }
+  removeEventListener(type, listener, options) {
+    super.removeEventListener(type, listener, options);
+  }
+  dispatchEvent(event) {
+    return super.dispatchEvent(event);
+  }
+};
+
+// src/table/utils.ts
+import { html } from "lit";
 function highlightText(text, ranges) {
   if (!text || !ranges || ranges.length === 0) {
     return text;
@@ -811,47 +350,29 @@ function highlightText(text, ranges) {
       result.push(text.slice(lastIndex, safeStart));
     }
     result.push(
-      html5`<mark class="highlight">${text.slice(safeStart, safeEnd)}</mark>`
+      html`<mark class="highlight">${text.slice(safeStart, safeEnd)}</mark>`
     );
     lastIndex = safeEnd;
   }
   if (lastIndex < text.length) {
     result.push(text.slice(lastIndex));
   }
-  return html5`${result}`;
+  return html`${result}`;
 }
 var toHumanReadable = (str) => {
   return str.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (char) => char.toUpperCase());
 };
 
-// src/yatl-table/yatl-table.ts
-import { html as html6, LitElement as LitElement5, nothing } from "lit";
-import { customElement as customElement5, property as property4, query as query2 } from "lit/decorators.js";
+// src/table/table.ts
+import { html as html2, LitElement, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { repeat } from "lit/directives/repeat.js";
 import { styleMap } from "lit/directives/style-map.js";
 import "@lit-labs/virtualizer";
 
-// src/yatl-table-controller/utils.ts
-function getColumnStateChanges2(oldState, newState) {
-  if (oldState && oldState.field !== newState.field) {
-    throw Error(
-      `attempting to compare states for different fields: ${oldState.field}, ${newState.field}`
-    );
-  }
-  const changes = [];
-  if (oldState?.visible !== newState.visible) {
-    changes.push("visible");
-  }
-  if (oldState?.width !== newState.width) {
-    changes.push("width");
-  }
-  if (oldState?.sort !== newState.sort || oldState.sort?.order !== newState.sort?.order || oldState.sort?.priority !== newState.sort?.priority) {
-    changes.push("sort");
-  }
-  return changes;
-}
+// src/table-controller/utils.ts
 function getCompareableValue(value) {
   if (typeof value === "string" || typeof value === "number" || typeof value === "bigint") {
     return value;
@@ -887,7 +408,7 @@ function createRankMap(values, locale) {
   return rankMap;
 }
 
-// src/yatl-table-controller/yatl-table-controller.ts
+// src/table-controller/table-controller.ts
 var STATE_SAVE_DEBOUNCE = 1e3;
 var DEFAULT_STORAGE_OPTIONS = {
   storage: "local",
@@ -902,10 +423,11 @@ var MATCH_WEIGHTS = {
   PREFIX: 50,
   SUBSTRING: 10
 };
-var YatlTableController = class {
+var YatlTableController = class extends TypedEventTarget {
   // #endregion
   // #region Public Methods
   constructor(host, options) {
+    super();
     // #region State Data
     // Property data
     this.hosts = /* @__PURE__ */ new Set();
@@ -928,6 +450,11 @@ var YatlTableController = class {
     };
     this._data = [];
     this._filteredData = [];
+    // The last time the data was updated.
+    // This is just provided as a convience so the
+    // table element can display it in the footer.
+    // The controller needs to own it so it is always accurate.
+    this._dataUpdateTimestamp = null;
     this._searchQuery = "";
     this._searchTokenizer = whitespaceTokenizer;
     this._filters = null;
@@ -1024,22 +551,22 @@ var YatlTableController = class {
   }
   get columnStates() {
     return this.columns.map((column) => {
-      const state = this.getColumnState(column.field);
-      return createState(column.field, state);
+      const state2 = this.getColumnState(column.field);
+      return createState(column.field, state2);
     });
   }
   set columnStates(states) {
     let changed = false;
-    for (const state of states) {
-      const oldState = this.getColumnState(state.field);
-      const stateChanges = getColumnStateChanges2(oldState, state);
+    for (const state2 of states) {
+      const oldState = this.getColumnState(state2.field);
+      const stateChanges = getColumnStateChanges(oldState, state2);
       if (stateChanges.length) {
         changed = true;
         if (stateChanges.includes("sort")) {
           this.sortDirty = true;
         }
-        const newState = createState(state.field, state);
-        this._columnStateMap.set(state.field, newState);
+        const newState = createState(state2.field, state2);
+        this._columnStateMap.set(state2.field, newState);
       }
     }
     if (!changed) {
@@ -1054,11 +581,11 @@ var YatlTableController = class {
   get searchQuery() {
     return this._searchQuery;
   }
-  set searchQuery(query3) {
-    if (this._searchQuery === query3) {
+  set searchQuery(query2) {
+    if (this._searchQuery === query2) {
       return;
     }
-    this._searchQuery = query3;
+    this._searchQuery = query2;
     this.updateInternalQuery();
     this.filterDirty = true;
     this.requestUpdate("searchQuery");
@@ -1183,6 +710,7 @@ var YatlTableController = class {
   set data(data) {
     this._data = [...data];
     this.createMetadata();
+    this._dataUpdateTimestamp = /* @__PURE__ */ new Date();
     this.filterDirty = true;
     this.requestUpdate("data");
   }
@@ -1196,6 +724,9 @@ var YatlTableController = class {
     this.sortDirty = false;
     return [...this._filteredData];
   }
+  get dataUpdateTimestamp() {
+    return this._dataUpdateTimestamp;
+  }
   attach(host) {
     this.hosts.add(host);
     host.addController(this);
@@ -1222,8 +753,8 @@ var YatlTableController = class {
       searchQuery: this.searchQuery,
       selectedRows: this.selectedRowIds,
       columns: this.columnStates.map((column) => {
-        const state = this.getColumnState(column.field);
-        return createState(column.field, state);
+        const state2 = this.getColumnState(column.field);
+        return createState(column.field, state2);
       })
     };
   }
@@ -1231,15 +762,15 @@ var YatlTableController = class {
    * Restores the table to the provided state.
    * @param state - The state to restore the table to.
    */
-  updateTableState(state) {
-    if ("searchQuery" in state && state.searchQuery !== void 0) {
-      this.searchQuery = state.searchQuery;
+  updateTableState(state2) {
+    if ("searchQuery" in state2 && state2.searchQuery !== void 0) {
+      this.searchQuery = state2.searchQuery;
     }
-    if ("selectedRows" in state && state.selectedRows) {
-      this.selectedRowIds = state.selectedRows;
+    if ("selectedRows" in state2 && state2.selectedRows) {
+      this.selectedRowIds = state2.selectedRows;
     }
-    if ("columns" in state && state.columns !== void 0) {
-      for (const newState of state.columns) {
+    if ("columns" in state2 && state2.columns !== void 0) {
+      for (const newState of state2.columns) {
         this.updateColumnState(newState.field, newState);
       }
     }
@@ -1254,14 +785,29 @@ var YatlTableController = class {
     }
     return createState(field, currentState);
   }
-  updateColumnState(field, state) {
+  updateColumnState(field, state2) {
     const currentState = this._columnStateMap.get(field);
-    const newState = createState(field, { ...currentState, ...state });
+    const newState = createState(field, { ...currentState, ...state2 });
     this.columnStates = [newState];
   }
-  search(query3) {
-    this.searchQuery = query3;
-    this.dispatchEvent(new YatlTableSearchEvent(query3));
+  search(query2) {
+    this.searchQuery = query2;
+    this.dispatchEvent(new YatlTableSearchEvent(query2));
+  }
+  getColumnFilterValues(field, includeNull = false) {
+    const column = this.getDisplayColumn(field);
+    const values = /* @__PURE__ */ new Map();
+    for (const row of this.filteredData) {
+      let value = getNestedValue(row, field);
+      if (column?.valueFormatter) {
+        value = column.valueFormatter(value, row);
+      }
+      if (value != null || includeNull) {
+        const valueCount = values.get(value) ?? 0;
+        values.set(value, valueCount + 1);
+      }
+    }
+    return values;
   }
   /**
    * Sorts the table by a specified column and order.
@@ -1271,24 +817,24 @@ var YatlTableController = class {
    * @param clear - Clear all other sorting
    */
   sort(field, order, clear = true) {
-    const state = this.getColumnState(field);
-    if (state === void 0) {
+    const state2 = this.getColumnState(field);
+    if (state2 === void 0) {
       throw new Error(`Cannot get options for non-existent column "${field}"`);
     }
-    if (order === state?.sort?.order) {
+    if (order === state2?.sort?.order) {
       return;
     }
-    if (order && !state.sort) {
-      const priorities = [...this._columnStateMap.values()].map((state2) => state2.sort?.priority).filter((priority2) => priority2 !== void 0);
+    if (order && !state2.sort) {
+      const priorities = [...this._columnStateMap.values()].map((state3) => state3.sort?.priority).filter((priority2) => priority2 !== void 0);
       const maxPriority = this.columns.length + 1;
       const priority = Math.min(maxPriority, ...priorities) - 1;
-      state.sort = { order, priority };
-    } else if (order && state.sort) {
-      state.sort.order = order;
+      state2.sort = { order, priority };
+    } else if (order && state2.sort) {
+      state2.sort.order = order;
     } else {
-      state.sort = null;
+      state2.sort = null;
     }
-    const newStates = [state];
+    const newStates = [state2];
     if (clear) {
       for (const otherColumn of this.columns) {
         if (otherColumn.field !== field) {
@@ -1308,13 +854,13 @@ var YatlTableController = class {
    * @param visible - Optionally force the visibility state.
    */
   toggleColumnVisibility(field, visible) {
-    const state = this.getColumnState(field);
-    const newVisibility = visible !== void 0 ? visible : !state.visible;
-    if (newVisibility === state.visible) {
+    const state2 = this.getColumnState(field);
+    const newVisibility = visible !== void 0 ? visible : !state2.visible;
+    if (newVisibility === state2.visible) {
       return;
     }
-    state.visible = newVisibility;
-    this.columnStates = [state];
+    state2.visible = newVisibility;
+    this.columnStates = [state2];
     const event = new YatlColumnToggleEvent(field, newVisibility);
     this.dispatchEvent(event);
   }
@@ -1351,9 +897,9 @@ var YatlTableController = class {
     }
   }
   resizeColumn(field, width) {
-    const state = this.getColumnState(field);
-    state.width = width;
-    this.updateColumnState(field, state);
+    const state2 = this.getColumnState(field);
+    state2.width = width;
+    this.updateColumnState(field, state2);
     this.dispatchEvent(new YatlColumnResizeEvent(field, width));
   }
   isRowSelected(row) {
@@ -1363,10 +909,10 @@ var YatlTableController = class {
   /**
    * Toggles the selection state of a specific row.
    */
-  toggleRowSelection(row, state) {
+  toggleRowSelection(row, state2) {
     const rowId = this.getRowId(row);
     const isSelected = this.isRowSelected(row);
-    const newSelectionState = state !== void 0 ? state : isSelected;
+    const newSelectionState = state2 !== void 0 ? state2 : isSelected;
     if (newSelectionState === isSelected) {
       return;
     }
@@ -1411,8 +957,7 @@ var YatlTableController = class {
   }
   /**
    * Export the current visible table data to a CSV file.
-   * @param filename - The name of the file to save.
-   * @param all - If `true`, exports all original data (ignoring filters). If `false` (default), exports only the currently visible (filtered and sorted) rows.
+   * @param options - Options for configuring what should be exported.
    */
   export(options = {
     includeAllRows: false,
@@ -1435,9 +980,9 @@ var YatlTableController = class {
     const csvRows = data.map((row) => {
       const list = [];
       for (const column of columnData) {
-        const state = this.getColumnState(column.field);
+        const state2 = this.getColumnState(column.field);
         let value = getNestedValue(row, column.field);
-        if (options.includeHiddenColumns || state.visible) {
+        if (options.includeHiddenColumns || state2.visible) {
           if (isDisplayColumn(column) && typeof column.valueFormatter === "function") {
             value = column.valueFormatter(value, row);
           }
@@ -1520,7 +1065,7 @@ var YatlTableController = class {
   }
   /**
    * Deletes the row with the matching ID.
-   * @param id - The ID of the row to delete
+   * @param rowIds - The IDs rows to delete
    */
   deleteRow(...rowIds) {
     for (const rowId of rowIds) {
@@ -1533,7 +1078,7 @@ var YatlTableController = class {
   }
   /**
    * Deletes a row at a specific original index from the table.
-   * @param index - The original index of the row to delete.
+   * @param indexes - The original indexes of rows to delete.
    */
   deleteRowAtIndex(...indexes) {
     const newSelectedRows = new Set(this.selectedRowIds);
@@ -1571,13 +1116,6 @@ var YatlTableController = class {
     return metadata.highlightIndices;
   }
   // #endregion
-  dispatchEvent(event) {
-    for (const host of this.hosts) {
-      if (host instanceof YatlTable) {
-        host.dispatchEvent(event);
-      }
-    }
-  }
   // #region Lifecycle Methods
   hostConnected() {
   }
@@ -1622,41 +1160,41 @@ var YatlTableController = class {
    * @param target The string to be searched (e.g., "Apple" or "Application").
    * @returns A numerical score representing the relevance of the match. Higher is better. Returns 0 if no match is found.
    */
-  calculateSearchScore(query3, target) {
+  calculateSearchScore(query2, target) {
     const results = { score: 0, ranges: [] };
-    if (!query3 || !target) {
+    if (!query2 || !target) {
       return results;
     }
     let baseScore = 0;
     let matchTypeWeight = 0;
-    if (target === query3) {
+    if (target === query2) {
       matchTypeWeight = MATCH_WEIGHTS.EXACT;
-      baseScore = query3.length;
+      baseScore = query2.length;
       results.ranges.push([0, target.length]);
-    } else if (target.startsWith(query3)) {
+    } else if (target.startsWith(query2)) {
       matchTypeWeight = MATCH_WEIGHTS.PREFIX;
-      baseScore = query3.length;
-      results.ranges.push([0, query3.length]);
+      baseScore = query2.length;
+      results.ranges.push([0, query2.length]);
     } else {
-      const index = target.indexOf(query3);
+      const index = target.indexOf(query2);
       if (index !== -1) {
         matchTypeWeight = MATCH_WEIGHTS.SUBSTRING;
-        baseScore = query3.length;
+        baseScore = query2.length;
         let cursor = index;
         while (cursor !== -1) {
-          results.ranges.push([cursor, cursor + query3.length]);
-          cursor = target.indexOf(query3, cursor + 1);
+          results.ranges.push([cursor, cursor + query2.length]);
+          cursor = target.indexOf(query2, cursor + 1);
         }
       } else {
         return results;
       }
     }
-    const lengthDifference = target.length - query3.length;
+    const lengthDifference = target.length - query2.length;
     const specificityBonus = 1 / (1 + lengthDifference);
     results.score = baseScore * matchTypeWeight * specificityBonus;
     return results;
   }
-  searchField(query3, value, tokens) {
+  searchField(query2, value, tokens) {
     const result = { score: 0, ranges: [] };
     const addRangesFromValue = (searchTerm) => {
       let idx = value.indexOf(searchTerm);
@@ -1665,32 +1203,32 @@ var YatlTableController = class {
         idx = value.indexOf(searchTerm, idx + 1);
       }
     };
-    if (query3.quoted || !tokens) {
+    if (query2.quoted || !tokens) {
       if (!this.enableSearchScoring) {
-        if (value.includes(query3.value)) {
+        if (value.includes(query2.value)) {
           result.score = 1;
-          addRangesFromValue(query3.value);
+          addRangesFromValue(query2.value);
         }
       } else {
-        const calculation = this.calculateSearchScore(query3.value, value);
+        const calculation = this.calculateSearchScore(query2.value, value);
         result.score = calculation.score;
         result.ranges = calculation.ranges;
       }
       return result;
     }
     if (!this.enableSearchScoring) {
-      const isMatch = tokens.some((token) => token.includes(query3.value));
+      const isMatch = tokens.some((token) => token.includes(query2.value));
       if (isMatch) {
         result.score = 1;
-        addRangesFromValue(query3.value);
+        addRangesFromValue(query2.value);
       }
       return result;
     }
     for (const token of tokens) {
-      const calculation = this.calculateSearchScore(query3.value, token);
+      const calculation = this.calculateSearchScore(query2.value, token);
       if (calculation.score > 0) {
         result.score += calculation.score;
-        addRangesFromValue(query3.value);
+        addRangesFromValue(query2.value);
       }
     }
     return result;
@@ -1734,7 +1272,7 @@ var YatlTableController = class {
         if (!filter(value)) {
           return false;
         }
-      } else {
+      } else if (filter !== void 0) {
         const column = this.getColumn(field);
         const filterCallback = column ? column.filter : void 0;
         if (!this.filterField(value, filter, filterCallback)) {
@@ -1785,21 +1323,21 @@ var YatlTableController = class {
   // #region Sort Methods
   compareRows(a, b, field) {
     let aValue, bValue;
-    const state = this.getColumnState(field);
-    if (!state.sort) {
+    const state2 = this.getColumnState(field);
+    if (!state2.sort) {
       return 0;
     }
     const aMetadata = this.rowMetadata.get(a);
     const bMetadata = this.rowMetadata.get(b);
-    if (state.sort?.order === "asc") {
+    if (state2.sort?.order === "asc") {
       aValue = aMetadata.sortValues[field];
       bValue = bMetadata.sortValues[field];
     } else {
       aValue = bMetadata.sortValues[field];
       bValue = aMetadata.sortValues[field];
     }
-    aValue ?? (aValue = Number.MIN_SAFE_INTEGER);
-    bValue ?? (bValue = Number.MIN_SAFE_INTEGER);
+    aValue ??= Number.MIN_SAFE_INTEGER;
+    bValue ??= Number.MIN_SAFE_INTEGER;
     if (aValue < bValue) return -1;
     if (aValue > bValue) return 1;
     return 0;
@@ -1809,7 +1347,7 @@ var YatlTableController = class {
       this.filterRows();
       return;
     }
-    const sortedStates = [...this._columnStateMap.values()].filter((state) => state.visible && state.sort).sort((a, b) => b.sort.priority - a.sort.priority);
+    const sortedStates = [...this._columnStateMap.values()].filter((state2) => state2.visible && state2.sort).sort((a, b) => b.sort.priority - a.sort.priority);
     this._filteredData = this._filteredData.toSorted((a, b) => {
       const aMetadata = this.rowMetadata.get(a);
       const bMetadata = this.rowMetadata.get(b);
@@ -1819,8 +1357,8 @@ var YatlTableController = class {
         if (aValue > bValue) return -1;
         if (aValue < bValue) return 1;
       }
-      for (const state of sortedStates) {
-        const comp = this.compareRows(a, b, state.field);
+      for (const state2 of sortedStates) {
+        const comp = this.compareRows(a, b, state2.field);
         if (comp !== 0) {
           return comp;
         }
@@ -2002,127 +1540,195 @@ function warnInvalidIdFunction(index, rowId, row) {
   console.debug(row);
 }
 
-// src/yatl-table/yatl-table.styles.ts
-import { css as css6 } from "lit";
-var yatl_table_styles_default = css6`
-  :host {
-    /* Resize grab handle width */
-    --yatl-resizer-width: var(--yatl-table-resizer-width, 10px);
-    /* z-index for the header */
-    --header-z-index: 2;
+// src/table/table.styles.ts
+import { css } from "lit";
+var table_styles_default = css`
+  @layer base, striped, hover, selected;
 
-    overflow: hidden;
-    border-radius: 6px;
-  }
+  :host {
+    --table-cell-padding: var(
+      --yatl-table-cell-padding,
+      var(--yatl-spacing-m) var(--yatl-spacing-m)
+    );
+    --table-header-padding: var(
+      --yatl-table-header-padding,
+      var(--yatl-spacing-m) var(--yatl-spacing-l)
+    );
 
-  .scroller {
-    border: 1px solid var(--yatl-border-color);
-    background-color: var(--yatl-header-bg);
-  }
+    --table-text: var(--yatl-table-text, var(--yatl-text-1));
+    --table-bg: var(--yatl-table-bg, var(--yatl-surface-1));
+    --table-radius: var(--yatl-table-radius, var(--yatl-radius-m));
+    --table-border-width: var(--yatl-table-border-width, 1px);
+    --table-border-color: var(
+      --yatl-table-border-color,
+      var(--yatl-border-color)
+    );
 
-  .row {
-    background-color: var(--yatl-bg);
-    border-bottom: 1px solid var(--yatl-border-color);
-    transition: background-color 50ms;
-    position: relative;
-  }
+    --table-header-text: var(--yatl-table-header-text, var(--yatl-text-1));
+    --table-header-bg: var(
+      --yatl-table-header-bg,
+      color-mix(in srgb, var(--yatl-color-mix) 4%, var(--table-bg))
+    );
+    --table-header-hover-bg: var(
+      --yatl-table-header-hover-bg,
+      color-mix(in srgb, var(--yatl-color-mix) 4%, var(--table-header-bg))
+    );
+    --table-header-drop-bg: var(
+      --yatl-table-header-drop-bg,
+      color-mix(in srgb, var(--yatl-color-mix) 4%, var(--table-header-bg))
+    );
 
-  .row.header-row {
-    background-color: var(--yatl-header-bg);
-    border-bottom: 1px solid var(--yatl-border-color);
-    font-weight: 600;
-    color: var(--yatl-header-text);
-  }
+    --table-row-text: var(--yatl-table-row-text, var(--yatl-text-1));
+    --table-row-bg: var(
+      --yatl-table-row-bg,
+      color-mix(in srgb, var(--yatl-color-mix) 2%, var(--table-bg))
+    );
+    --table-row-hover-bg: var(
+      --yatl-table-row-hover-bg,
+      var(--table-header-bg)
+    );
+    --table-row-stripe-bg: var(
+      --yatl-table-row-stripe-bg,
+      color-mix(in srbg, var(--yatl-color-mix) 3%, var(--table-bg))
+        var(--table-header-bg)
+    );
+    --table-row-selected-bg: var(
+      --yatl-table-row-selected-bg,
+      color-mix(in srgb, var(--yatl-color-brand) 20%, transparent)
+    );
+    --table-footer-text: var(--yatl-table-footer-text, var(--yatl-text-3));
+    --table-selector-color: var(
+      --yatl-table-selector-color,
+      color-mix(in srgb, var(--table-row-bg), var(--yatl-color-brand, black) 5%)
+    );
 
-  .table:not(.resizing) .row {
-    transition: grid-template-columns var(--yatl-column-visibility-transition);
-  }
+    --table-row-number-column-width: var(
+      --yatl-table-row-number-column-width,
+      48px
+    );
+    --table-row-selector-column-width: var(
+      --yatl-table-row-selector-column-width,
+      48px
+    );
+    --table-column-visibility-transition: var(
+      --yatl-table-column-visibility-transition,
+      100ms
+    );
 
-  .row:last-child {
-    border-bottom: none;
-  }
+    /* Resize grab handle width */
+    --resizer-width: var(--yatl-table-column-resizer-width, 10px);
 
-  /* Use after element for row and header hover */
-  .header.reorderable .cell::after,
-  .header .cell.sortable::after,
-  .row:not(.header)::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    background-color: transparent;
-    transition: background-color 50ms;
-    z-index: 1;
+    /* z-index for the header */
+    --header-z-index: 2;
   }
 
-  .table:not(.resizing) .header .cell:hover::after,
-  .row:not(.header):hover::after {
-    background-color: var(--yatl-row-hover-bg);
-  }
+  @layer base {
+    .table {
+      border-radius: var(--table-radius);
+      background-color: var(--table-bg);
+      border: var(--table-border-width) solid var(--table-border-color);
+    }
 
-  .row:not(.header).selected::after {
-    background-color: var(--yatl-row-selected-bg);
-  }
+    .row {
+      position: relative;
+      background-color: var(--table-row-bg);
+      border-bottom: 1px solid var(--table-border-color);
+      transition: background-color 50ms;
+    }
 
-  .cell {
-    align-items: center;
-    padding: var(--yatl-cell-padding);
-  }
+    .row.header-row {
+      background-color: var(--table-header-bg);
+      border-bottom: 1px solid var(--table-border-color);
+      font-weight: 600;
+      color: var(--table-header-text);
+    }
 
-  .table.resizing * {
-    cursor: col-resize !important;
-  }
+    .body .row {
+      background-color: var(--table-row-bg);
+    }
 
-  .header .cell {
-    padding: var(--yatl-header-padding);
-  }
+    .row:last-child {
+      border-bottom: none;
+    }
 
-  .footer {
-    padding: 8px 12px;
-    background-color: var(--yatl-header-bg);
-    border-top: 1px solid var(--yatl-border-color);
-    color: var(--yatl-text-muted);
-    font-size: 0.8em;
-  }
+    .table:not(.resizing) .row {
+      transition: grid-template-columns
+        var(--table-column-visibility-transition);
+    }
 
-  .resizer::after {
-    height: 60%;
-    width: 1px;
-    background-color: color-mix(in srgb, currentColor 30%, transparent);
-    transition: background-color 0.2s;
-  }
+    .cell {
+      align-items: center;
+      padding: var(--table-cell-padding);
+    }
 
-  .resizer:hover::after {
-    background-color: currentColor;
-    width: 2px;
-  }
+    .table.resizing * {
+      cursor: col-resize !important;
+    }
 
-  .row-number-cell {
-    background-color: var(--yatl-header-bg);
-  }
+    .header .cell {
+      padding: var(--table-header-padding);
+    }
 
-  .row-checkbox {
-    width: 1.125rem;
-    height: 1.125rem;
+    .footer {
+      padding: 8px 12px;
+      background-color: var(--table-header-bg);
+      border-top: 1px solid var(--table-border-color);
+      color: var(--table-footer-text);
+      font-size: 0.8em;
+    }
 
-    cursor: pointer;
-    margin: 0;
+    .resizer::after {
+      height: 60%;
+      width: 1px;
+      background-color: color-mix(in srgb, currentcolor 30%, transparent);
+      transition: background-color 0.2s;
+    }
 
-    accent-color: var(--yatl-brand-color, var(--yatl-text));
+    .row-number-cell {
+      background-color: var(--table-header-bg);
+    }
 
-    transition: transform 0.1s ease-in-out;
+    .message {
+      font-size: large;
+    }
   }
 
-  .row-checkbox:active {
-    transform: scale(0.9);
+  @layer striped {
+    :host([striped]) .body .row:nth-child(even) {
+      background-color: var(--table-row-stripe-bg);
+    }
   }
 
-  .drop-indicator {
-    background: var(--yatl-header-drop-bg);
+  @layer hover {
+    .table:not(.resizing) .header .cell:hover {
+      background-color: var(--table-header-hover-bg);
+    }
+
+    .body .row:hover {
+      background-color: var(--table-row-hover-bg);
+    }
+
+    .resizer:hover::after {
+      background-color: currentcolor;
+      width: 2px;
+    }
+
+    .drop-indicator {
+      background: var(--table-header-drop-bg);
+    }
   }
 
-  .message {
-    font-size: large;
+  @layer selected {
+    /* Use after element to blend selection color */
+    .body .row.selected::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      transition: background-color 50ms;
+      z-index: 1;
+      background-color: var(--table-row-selected-bg);
+    }
   }
 
   /* Layout stuff
@@ -2130,19 +1736,21 @@ var yatl_table_styles_default = css6`
   * for the table to work properly. 
   * Modify with caution!
   */
+  /* stylelint-disable-next-line no-duplicate-selectors */
   :host {
     display: block;
     width: 100%;
     height: 100%;
   }
 
-  .wrapper {
+  .table {
     display: flex;
     flex-direction: column;
     width: 100%;
     height: 100%;
     position: relative;
     overflow: hidden;
+    box-sizing: border-box;
   }
 
   .scroller {
@@ -2152,14 +1760,9 @@ var yatl_table_styles_default = css6`
     height: 100%;
   }
 
-  .table {
-    box-sizing: border-box;
-  }
-
   .body {
     min-width: 100%;
     width: fit-content;
-    min-height: 100%;
     height: fit-content;
   }
 
@@ -2212,7 +1815,7 @@ var yatl_table_styles_default = css6`
     top: 0;
     bottom: 0;
     right: 0;
-    width: var(--yatl-resizer-width);
+    width: var(--resizer-width);
     cursor: col-resize;
     display: flex;
     justify-content: center;
@@ -2227,10 +1830,7 @@ var yatl_table_styles_default = css6`
   .drop-indicator {
     display: none;
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
     pointer-events: none;
     z-index: calc(var(--header-z-index) + 1);
   }
@@ -2249,7 +1849,6 @@ var yatl_table_styles_default = css6`
     align-items: center;
     justify-content: space-between;
     flex-shrink: 0;
-
     position: sticky;
     bottom: 0;
     left: 0;
@@ -2261,6 +1860,7 @@ var yatl_table_styles_default = css6`
   .row {
     display: grid;
     grid-template-columns: var(--grid-template);
+
     /* This is required! Don't remove it. */
     min-width: 100%;
     width: fit-content;
@@ -2296,7 +1896,7 @@ var yatl_table_styles_default = css6`
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    padding: var(--yatl-cell-padding);
+    padding: var(--table-cell-padding);
     height: 100%;
     width: 100%;
     box-sizing: border-box;
@@ -2319,33 +1919,49 @@ var yatl_table_styles_default = css6`
   }
 `;
 
-// src/yatl-table/yatl-table.ts
-var YatlTable = class extends LitElement5 {
+// src/table/table.ts
+var YatlTable = class extends LitElement {
   constructor() {
     super(...arguments);
     // #region --- State Data ---
     // Property data
-    // The last time the data was updated.
-    // For displaying in the footer only.
-    this.dataLastUpdate = null;
     this.resizeState = null;
     // Column drag & drop state
     this.dragColumn = null;
+    this.useYatlUi = false;
     // #endregion
     // #region --- Properties ---
     this._controller = new YatlTableController(this);
-    this.sortable = false;
-    this.resizable = false;
+    this.striped = true;
+    this.sortable = true;
+    this.resizable = true;
     this.enableVirtualScroll = false;
     this.enableSearchHighlight = true;
     this.enableColumnReorder = true;
-    this.enableRowNumberColumn = false;
-    this.enableFooter = false;
+    this.enableRowNumberColumn = true;
+    this.enableFooter = true;
     this.nullValuePlaceholder = "-";
     this.emptyMessage = "No records to display";
     this.noResultsMessage = "No matching records found";
     this.rowParts = null;
     // #endregion
+    // #region Utilities
+    this.eventNames = [
+      "yatl-column-reorder",
+      "yatl-column-resize",
+      "yatl-column-sort",
+      "yatl-column-toggle",
+      "yatl-row-select",
+      "yatl-table-search",
+      "yatl-table-state-change",
+      "yatl-table-view-change"
+    ];
+    this.redispatchControllerEvent = (event) => {
+      if (event instanceof YatlEvent) {
+        this.dispatchEvent(event.clone());
+      }
+    };
+    // #endregion
     // #region --- Event Handlers ---
     this.handleHeaderClicked = (event, column) => {
       const cell = event.currentTarget;
@@ -2353,14 +1969,14 @@ var YatlTable = class extends LitElement5 {
         return;
       }
       const multiSort = event.shiftKey;
-      const state = this.getColumnState(column.field);
+      const state2 = this.getColumnState(column.field);
       let sortOrder = null;
-      if (!state?.sort) {
+      if (!state2?.sort) {
         sortOrder = "asc";
-      } else if (state.sort.order === "asc") {
+      } else if (state2.sort.order === "asc") {
         sortOrder = "desc";
       }
-      const requestEvent = new YatlColumnSortRequestEvent(
+      const requestEvent = new YatlColumnSortRequest(
         column.field,
         sortOrder,
         multiSort
@@ -2450,7 +2066,7 @@ var YatlTable = class extends LitElement5 {
         (col) => col.field === this.dragColumn
       );
       const newIndex = newColumns.findIndex((col) => col.field === field);
-      const requestEvent = new YatlColumnReorderRequestEvent(
+      const requestEvent = new YatlColumnReorderRequest(
         this.dragColumn,
         originalIndex,
         newIndex
@@ -2470,7 +2086,7 @@ var YatlTable = class extends LitElement5 {
       const selected = inputElement.checked;
       const rowId = this.controller.getRowId(row);
       const selectedRows = this.selectedRowIds;
-      const requestEvent = new YatlRowSelectRequestEvent(
+      const requestEvent = new YatlRowSelectRequest(
         rowId,
         selected,
         selectedRows
@@ -2488,11 +2104,15 @@ var YatlTable = class extends LitElement5 {
     if (this._controller === controller) {
       return;
     }
-    if (this._controller) {
-      this._controller.detach(this);
+    const oldController = this._controller;
+    if (this.isConnected) {
+      this.removeControllerListeners(oldController);
+      this.addControllerListeners(controller);
     }
-    this._controller = controller;
+    oldController.detach(this);
     controller.attach(this);
+    this._controller = controller;
+    this.requestUpdate("controller", oldController);
   }
   get enableSearchTokenization() {
     return this.controller.enableSearchTokenization;
@@ -2545,9 +2165,9 @@ var YatlTable = class extends LitElement5 {
   set columnStates(states) {
     const oldValue = this.columnStates;
     let changed = false;
-    for (const state of states) {
-      const oldState = this.getColumnState(state.field);
-      const stateChanges = getColumnStateChanges(oldState, state);
+    for (const state2 of states) {
+      const oldState = this.getColumnState(state2.field);
+      const stateChanges = getColumnStateChanges(oldState, state2);
       if (stateChanges.length) {
         changed = true;
         break;
@@ -2562,12 +2182,12 @@ var YatlTable = class extends LitElement5 {
   get searchQuery() {
     return this.controller.searchQuery;
   }
-  set searchQuery(query3) {
+  set searchQuery(query2) {
     const oldValue = this.searchQuery;
-    if (oldValue === query3) {
+    if (oldValue === query2) {
       return;
     }
-    this.controller.searchQuery = query3;
+    this.controller.searchQuery = query2;
     this.requestUpdate("searchQuery", oldValue);
   }
   get searchTokenizer() {
@@ -2639,12 +2259,14 @@ var YatlTable = class extends LitElement5 {
   set data(value) {
     const oldValue = this.data;
     this.controller.data = value;
-    this.dataLastUpdate = /* @__PURE__ */ new Date();
     this.requestUpdate("data", oldValue);
   }
   get filteredData() {
     return this.controller.filteredData;
   }
+  get dataUpdateTimestamp() {
+    return this.controller.dataUpdateTimestamp;
+  }
   // #endregion
   // #region --- Public Methods ---
   getColumn(field) {
@@ -2666,14 +2288,14 @@ var YatlTable = class extends LitElement5 {
    * Restores the table to the provided state.
    * @param state - The state to restore the table to.
    */
-  updateTableState(state) {
-    return this.controller.updateTableState(state);
+  updateTableState(state2) {
+    return this.controller.updateTableState(state2);
   }
   getColumnState(field) {
     return this.controller.getColumnState(field);
   }
-  updateColumnState(field, state) {
-    return this.controller.updateColumnState(field, state);
+  updateColumnState(field, state2) {
+    return this.controller.updateColumnState(field, state2);
   }
   /**
    * Sorts the table by a specified column and order.
@@ -2722,8 +2344,8 @@ var YatlTable = class extends LitElement5 {
   /**
    * Toggles the selection state of a specific row.
    */
-  toggleRowSelection(row, state) {
-    return this.controller.toggleRowSelection(row, state);
+  toggleRowSelection(row, state2) {
+    return this.controller.toggleRowSelection(row, state2);
   }
   /**
    * Selects a specific row.
@@ -2752,7 +2374,7 @@ var YatlTable = class extends LitElement5 {
   /**
    * Export the current visible table data to a CSV file.
    * @param filename - The name of the file to save.
-   * @param all - If `true`, exports all original data (ignoring filters). If `false` (default), exports only the currently visible (filtered and sorted) rows.
+   * @param options - Options for configuring what should be exported.
    */
   export(filename, options = {
     includeAllRows: false,
@@ -2877,7 +2499,7 @@ var YatlTable = class extends LitElement5 {
   }
   /**
    * Deletes the row with the matching ID.
-   * @param id - The ID of the row to delete
+   * @param rowIds - The IDs rows to delete
    */
   deleteRow(...rowIds) {
     return this.controller.deleteRow(...rowIds);
@@ -2891,18 +2513,18 @@ var YatlTable = class extends LitElement5 {
   }
   // #endregion
   // #region Render Methods
-  renderColumnSortIcon(column, state) {
-    return column.sortable ?? this.sortable ? html6`<div
+  renderColumnSortIcon(column, state2) {
+    return column.sortable ?? this.sortable ? html2`<div
           part="header-sort-icon"
           class=${classMap({
       "sort-icon": true,
-      ascending: state.sort?.order === "asc",
-      descending: state.sort?.order === "desc"
+      ascending: state2.sort?.order === "asc",
+      descending: state2.sort?.order === "desc"
     })}
         ></div>` : nothing;
   }
   renderColumnResizer(column, _state) {
-    return column.resizable ?? this.resizable ? html6`
+    return column.resizable ?? this.resizable ? html2`
           <div
             part="header-resizer"
             class="resizer"
@@ -2915,18 +2537,18 @@ var YatlTable = class extends LitElement5 {
     if (!column) {
       return nothing;
     }
-    const state = this.getColumnState(column.field);
+    const state2 = this.getColumnState(column.field);
     const title = column.title ?? column.field;
     let ariaSort = "none";
-    if (state.sort?.order === "asc") ariaSort = "ascending";
-    if (state.sort?.order === "desc") ariaSort = "descending";
-    const role = state.visible ? "columnheader" : void 0;
-    const hidden = state.visible ? false : void 0;
+    if (state2.sort?.order === "asc") ariaSort = "ascending";
+    if (state2.sort?.order === "desc") ariaSort = "descending";
+    const role = state2.visible ? "columnheader" : void 0;
+    const hidden = state2.visible ? false : void 0;
     const classes = {
       cell: true,
       sortable: column.sortable ?? this.sortable
     };
-    return this.renderCellWrapper(html6`
+    return this.renderCellWrapper(html2`
       <div
         role=${ifDefined(role)}
         aria-hidden=${ifDefined(hidden)}
@@ -2948,21 +2570,21 @@ var YatlTable = class extends LitElement5 {
           <span class="header-title truncate" part="header-title">
             ${title}
           </span>
-          ${this.renderColumnSortIcon(column, state)}
+          ${this.renderColumnSortIcon(column, state2)}
         </div>
-        ${this.renderColumnResizer(column, state)}
+        ${this.renderColumnResizer(column, state2)}
         <div part="drop-indicator" class="drop-indicator"></div>
       </div>
     `);
   }
   renderRowNumberHeader() {
     return this.renderCellWrapper(
-      html6`<div part="cell-index" class="cell-index"></div>`
+      html2`<div part="cell-index" class="cell-index"></div>`
     );
   }
   renderSelectionHeader() {
     return this.renderCellWrapper(
-      html6`<div part="cell-selector" class="cell-selector"></div>`
+      html2`<div part="cell-selector" class="cell-selector"></div>`
     );
   }
   renderHeader() {
@@ -2970,7 +2592,7 @@ var YatlTable = class extends LitElement5 {
       header: true,
       reorderable: this.enableColumnReorder
     };
-    return html6`
+    return html2`
       <div role="rowgroup" part="header" class=${classMap(classes)}>
         <div role="row" class="row header-row" part="row header-row">
           ${this.renderRowNumberHeader()} ${this.renderSelectionHeader()}
@@ -2998,7 +2620,7 @@ var YatlTable = class extends LitElement5 {
     if (typeof column.valueFormatter === "function") {
       value = column.valueFormatter(value, row);
     }
-    return this.renderCellWrapper(html6`
+    return this.renderCellWrapper(html2`
       <div
         role="cell"
         part="cell body-cell cell-${column.field} ${userParts}"
@@ -3013,25 +2635,31 @@ var YatlTable = class extends LitElement5 {
       </div>
     `);
   }
+  renderCheckbox(row, selected) {
+    return this.useYatlUi ? html2`<yatl-checkbox
+          part="row-checkbox"
+          class="row-checkbox"
+          .checked=${selected}
+          @change=${(event) => this.handleRowSelectionClicked(event, row)}
+        ></yatl-checkbox>` : html2`<input
+          part="row-checkbox"
+          class="row-checkbox"
+          type="checkbox"
+          .checked=${selected}
+          @change=${(event) => this.handleRowSelectionClicked(event, row)}
+        />`;
+  }
   renderRowSelectorCell(row, selected) {
-    return this.renderCellWrapper(html6`
+    return this.renderCellWrapper(html2`
       <div part="cell body-cell" class="cell body-cell">
         <div part="row-selector-cell" class="row-selector-cell">
-          <label>
-            <input
-              part="row-checkbox"
-              class="row-checkbox"
-              type="checkbox"
-              .checked=${selected}
-              @change=${(event) => this.handleRowSelectionClicked(event, row)}
-            />
-          </label>
+          <label> ${this.renderCheckbox(row, selected)} </label>
         </div>
       </div>
     `);
   }
   renderRowNumberCell(rowNumber) {
-    return this.renderCellWrapper(html6`
+    return this.renderCellWrapper(html2`
       <div part="cell body-cell" class="cell body-cell">
         <div part="row-number-cell" class="row-number-cell">${rowNumber}</div>
       </div>
@@ -3045,7 +2673,7 @@ var YatlTable = class extends LitElement5 {
     }
     const classes = { row: true, selected };
     const rowIndex = renderIndex + 1;
-    return html6`
+    return html2`
       <div
         role="row"
         aria-rowindex=${rowIndex}
@@ -3061,22 +2689,22 @@ var YatlTable = class extends LitElement5 {
   }
   renderBodyContents() {
     if (!this.hasVisibleColumn()) {
-      return html6`
+      return html2`
         <div part="message" class="message">No visible columns.</div>
       `;
     }
     if (this.data.length === 0) {
-      return html6`
+      return html2`
         <div part="message" class="message">${this.emptyMessage}</div>
       `;
     }
     if (this.filteredData.length === 0) {
-      return html6`
+      return html2`
         <div part="message" class="message">${this.noResultsMessage}</div>
       `;
     }
     if (this.enableVirtualScroll) {
-      return html6`
+      return html2`
         <lit-virtualizer
           .items=${this.filteredData}
           .renderItem=${(item, index) => this.renderRow(item, index)}
@@ -3084,7 +2712,7 @@ var YatlTable = class extends LitElement5 {
         </lit-virtualizer>
       `;
     }
-    return html6`
+    return html2`
       ${repeat(
       this.filteredData,
       (item) => this.controller.getRowId(item),
@@ -3106,8 +2734,8 @@ var YatlTable = class extends LitElement5 {
       dateStyle: "short",
       timeStyle: "short"
     });
-    const lastUpdateText = this.dataLastUpdate ? formatter.format(this.dataLastUpdate) : "Never";
-    return html6`
+    const lastUpdateText = this.dataUpdateTimestamp ? formatter.format(this.dataUpdateTimestamp) : "Never";
+    return html2`
       <div part="footer" class="footer">
         <slot name="footer">
           <span part="row-count">${rowCountText}</span>
@@ -3121,21 +2749,19 @@ var YatlTable = class extends LitElement5 {
     const style = {
       "--grid-template": gridTemplate
     };
-    return html6`
-      <div class="wrapper">
+    return html2`
+      <div
+        role="table"
+        aria-label="Data Table"
+        aria-rowcount=${this.filteredData.length}
+        part="table"
+        class="table"
+        style=${styleMap(style)}
+      >
         <div class="scroller">
-          <div
-            role="table"
-            aria-label="Data Table"
-            aria-rowcount=${this.filteredData.length}
-            part="table"
-            class="table"
-            style=${styleMap(style)}
-          >
-            ${this.renderHeader()}
-            <div class="body" role="rowgroup">
-              <slot name="body">${this.renderBodyContents()}</slot>
-            </div>
+          ${this.renderHeader()}
+          <div class="body" role="rowgroup">
+            <slot name="body">${this.renderBodyContents()}</slot>
           </div>
         </div>
         ${this.renderFooter()}
@@ -3143,19 +2769,37 @@ var YatlTable = class extends LitElement5 {
     `;
   }
   renderCellWrapper(content) {
-    return html6` <div class="cell-wrapper">${content}</div> `;
+    return html2` <div class="cell-wrapper">${content}</div> `;
   }
   // #endregion
   // #region --- Lifecycle Methods ---
+  connectedCallback() {
+    super.connectedCallback();
+    this.addControllerListeners(this.controller);
+    if (!this.useYatlUi) {
+      customElements.whenDefined("yatl-checkbox").then(() => {
+        this.useYatlUi = true;
+      });
+    }
+  }
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.removeControllerListeners(this.controller);
     window.addEventListener("mousemove", this.handleResizeMouseMove);
     window.addEventListener("mouseup", this.handleResizeMouseUp);
   }
-  // #endregion
-  // #region Utilities
+  addControllerListeners(controller) {
+    for (const name of this.eventNames) {
+      controller.addEventListener(name, this.redispatchControllerEvent);
+    }
+  }
+  removeControllerListeners(controller) {
+    for (const name of this.eventNames) {
+      controller.removeEventListener(name, this.redispatchControllerEvent);
+    }
+  }
   hasVisibleColumn() {
-    return this.displayColumns.map((column) => this.getColumnState(column.field)).filter((state) => state.visible).length > 0;
+    return this.displayColumns.map((column) => this.getColumnState(column.field)).filter((state2) => state2.visible).length > 0;
   }
   /**
    * Gets the width of each column in the
@@ -3174,11 +2818,11 @@ var YatlTable = class extends LitElement5 {
       widths.push("0");
     }
     for (const column of this.displayColumns) {
-      const state = this.getColumnState(column.field);
-      const hasPixelWidth = state.width != null;
-      if (state.visible) {
+      const state2 = this.getColumnState(column.field);
+      const hasPixelWidth = state2.width != null;
+      if (state2.visible) {
         if (hasPixelWidth) {
-          widths.push(`${state.width}px`);
+          widths.push(`${state2.width}px`);
         } else {
           widths.push("minmax(0, 1fr)");
         }
@@ -3200,25 +2844,19 @@ var YatlTable = class extends LitElement5 {
     if (!header) {
       return;
     }
-    let columnIndex = this.displayColumns.findIndex(
+    const columnIndex = this.displayColumns.findIndex(
       (column) => column.field === field
     );
     if (columnIndex < 0) {
       return;
     }
-    if (this.enableRowNumberColumn) {
-      columnIndex++;
-    }
-    if (this.rowSelectionMethod) {
-      columnIndex++;
-    }
     this.tableElement.classList.add("resizing");
     this.tableElement.querySelectorAll(".header .cell").forEach((element) => {
       const field2 = element.dataset.field;
       if (field2) {
-        const state = this.getColumnState(field2);
-        state.width = element.getBoundingClientRect().width;
-        this.updateColumnState(field2, state);
+        const state2 = this.getColumnState(field2);
+        state2.width = element.getBoundingClientRect().width;
+        this.updateColumnState(field2, state2);
       }
     });
     const gridWidths = this.getGridWidths();
@@ -3226,7 +2864,8 @@ var YatlTable = class extends LitElement5 {
       active: true,
       startX: event.pageX,
       startWidth: header.getBoundingClientRect().width,
-      columnIndex,
+      columnIndex: columnIndex + 2,
+      // row number column + selector column
       columnField: field,
       currentWidths: gridWidths
     };
@@ -3239,359 +2878,122 @@ var YatlTable = class extends LitElement5 {
   }
   // #endregion
 };
-YatlTable.styles = [theme_default, yatl_table_styles_default];
+YatlTable.styles = [table_styles_default];
 __decorateClass([
-  query2(".table")
+  query(".table")
 ], YatlTable.prototype, "tableElement", 2);
 __decorateClass([
-  query2("lit-virtualizer")
+  query("lit-virtualizer")
 ], YatlTable.prototype, "virtualizer", 2);
 __decorateClass([
-  property4({ attribute: false })
+  state()
+], YatlTable.prototype, "useYatlUi", 2);
+__decorateClass([
+  property({ attribute: false })
 ], YatlTable.prototype, "controller", 1);
 __decorateClass([
-  property4({ type: Boolean, attribute: "sortable" })
+  property({ type: Boolean, reflect: true })
+], YatlTable.prototype, "striped", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "sortable" })
 ], YatlTable.prototype, "sortable", 2);
 __decorateClass([
-  property4({ type: Boolean, attribute: "resizable" })
+  property({ type: Boolean, attribute: "resizable" })
 ], YatlTable.prototype, "resizable", 2);
 __decorateClass([
-  property4({ type: Boolean, attribute: "enable-virtual-scroll" })
+  property({ type: Boolean, attribute: "enable-virtual-scroll" })
 ], YatlTable.prototype, "enableVirtualScroll", 2);
 __decorateClass([
-  property4({ type: Boolean, attribute: "enable-search-highlight" })
+  property({ type: Boolean, attribute: "enable-search-highlight" })
 ], YatlTable.prototype, "enableSearchHighlight", 2);
 __decorateClass([
-  property4({ type: Boolean, attribute: "enable-search-tokenization" })
+  property({ type: Boolean, attribute: "enable-search-tokenization" })
 ], YatlTable.prototype, "enableSearchTokenization", 1);
 __decorateClass([
-  property4({ type: Boolean, attribute: "enable-search-scoring" })
+  property({ type: Boolean, attribute: "enable-search-scoring" })
 ], YatlTable.prototype, "enableSearchScoring", 1);
 __decorateClass([
-  property4({ type: Boolean, attribute: "enable-column-reorder" })
+  property({ type: Boolean, attribute: "enable-column-reorder" })
 ], YatlTable.prototype, "enableColumnReorder", 2);
 __decorateClass([
-  property4({ type: Boolean })
+  property({ type: Boolean })
 ], YatlTable.prototype, "enableRowNumberColumn", 2);
 __decorateClass([
-  property4({ type: Boolean, attribute: "enable-footer" })
+  property({ type: Boolean, attribute: "enable-footer" })
 ], YatlTable.prototype, "enableFooter", 2);
 __decorateClass([
-  property4({ type: String, attribute: "null-value-placeholder" })
+  property({ type: String, attribute: "null-value-placeholder" })
 ], YatlTable.prototype, "nullValuePlaceholder", 2);
 __decorateClass([
-  property4({ type: String, attribute: "empty-message" })
+  property({ type: String, attribute: "empty-message" })
 ], YatlTable.prototype, "emptyMessage", 2);
 __decorateClass([
-  property4({ type: String, attribute: "no-results-message" })
+  property({ type: String, attribute: "no-results-message" })
 ], YatlTable.prototype, "noResultsMessage", 2);
 __decorateClass([
-  property4({ attribute: false })
+  property({ attribute: false })
 ], YatlTable.prototype, "columns", 1);
 __decorateClass([
-  property4({ attribute: false })
+  property({ attribute: false })
 ], YatlTable.prototype, "columnStates", 1);
 __decorateClass([
-  property4({ type: String, attribute: "search-query" })
+  property({ type: String, attribute: "search-query" })
 ], YatlTable.prototype, "searchQuery", 1);
 __decorateClass([
-  property4({ attribute: false })
+  property({ attribute: false })
 ], YatlTable.prototype, "searchTokenizer", 1);
 __decorateClass([
-  property4({ attribute: false })
+  property({ attribute: false })
 ], YatlTable.prototype, "filters", 1);
 __decorateClass([
-  property4({ attribute: false })
+  property({ attribute: false })
 ], YatlTable.prototype, "rowParts", 2);
 __decorateClass([
-  property4({ type: String })
+  property({ type: String })
 ], YatlTable.prototype, "rowSelectionMethod", 1);
 __decorateClass([
-  property4({ attribute: false })
+  property({ attribute: false })
 ], YatlTable.prototype, "selectedRowIds", 1);
 __decorateClass([
-  property4({ type: Object, attribute: "storage-options" })
+  property({ type: Object, attribute: "storage-options" })
 ], YatlTable.prototype, "storageOptions", 1);
 __decorateClass([
-  property4({ attribute: false })
+  property({ attribute: false })
 ], YatlTable.prototype, "rowIdCallback", 1);
 __decorateClass([
-  property4({ attribute: false })
+  property({ attribute: false })
 ], YatlTable.prototype, "data", 1);
 YatlTable = __decorateClass([
-  customElement5("yatl-table")
+  customElement("yatl-table")
 ], YatlTable);
-
-// src/yatl-table-ui/yatl-table-ui.ts
-import { html as html7 } from "lit";
-import { customElement as customElement6, property as property5 } from "lit/decorators.js";
-
-// src/yatl-table-ui/yatl-table-ui.styles.ts
-import { css as css7 } from "lit";
-var yatl_table_ui_styles_default = css7`
-  :host {
-    border-radius: 0;
-  }
-
-  .ui-wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: var(--yatl-spacing-m);
-    height: 100%;
-    width: 100%;
-  }
-
-  .wrapper {
-    border-radius: var(--yatl-table-radius);
-  }
-`;
-
-// src/yatl-table-ui/yatl-table-ui.ts
-var YatlTableUi = class extends YatlTable {
-  constructor() {
-    super(...arguments);
-    this.showColumnPicker = true;
-    this.showExportButton = true;
-    this.handleTableExportClicked = () => {
-      this.export(document.title);
-    };
-  }
-  render() {
-    return html7`
-      <div class="ui-wrapper">
-        <yatl-toolbar
-          ?showColumnPicker=${this.showColumnPicker}
-          ?showExportButton=${this.showExportButton}
-          .controller=${this.controller}
-          @yatl-toolbar-export-click=${this.handleTableExportClicked}
-          ><slot name="toolbar-button-group" slot="button-group"></slot
-          ><slot name="toolbar"></slot
-        ></yatl-toolbar>
-        ${super.render()}
-      </div>
-    `;
-  }
-};
-YatlTableUi.styles = [...YatlTable.styles, yatl_table_ui_styles_default];
-__decorateClass([
-  property5({ type: Boolean })
-], YatlTableUi.prototype, "showColumnPicker", 2);
-__decorateClass([
-  property5({ type: Boolean })
-], YatlTableUi.prototype, "showExportButton", 2);
-YatlTableUi = __decorateClass([
-  customElement6("yatl-table-ui")
-], YatlTableUi);
-
-// src/yatl-toolbar/yatl-toolbar.ts
-import { html as html8, LitElement as LitElement6, nothing as nothing2 } from "lit";
-import { customElement as customElement7, property as property6 } from "lit/decorators.js";
-import { repeat as repeat2 } from "lit/directives/repeat.js";
-
-// src/yatl-toolbar/yatl-toolbar.styles.ts
-import { css as css8 } from "lit";
-var yatl_toolbar_styles_default = css8`
-  :host {
-    box-sizing: border-box;
-  }
-
-  .toolbar {
-    display: flex;
-    flex-direction: row;
-    gap: 10px;
-  }
-
-  .search {
-    flex-grow: 1;
-    border-radius: var(--yatl-input-radius);
-    background-color: var(--bg-subtle);
-    line-height: 1;
-    border: none;
-    font-size: large;
-    padding: var(--yatl-input-padding);
-  }
-
-  .search:focus,
-  .search:focus-visible {
-    outline: 3px solid var(--yatl-brand-color);
-    outline-offset: -3px;
-  }
-
-  yatl-button-group yatl-button {
-    height: 100%;
-  }
-`;
-
-// src/yatl-toolbar/yatl-toolbar.ts
-import { ifDefined as ifDefined2 } from "lit/directives/if-defined.js";
-var YatlToolbar = class extends LitElement6 {
-  constructor() {
-    super(...arguments);
-    this.showColumnPicker = true;
-    this.showExportButton = true;
-    this.handleDropdownToggle = (event) => {
-      this.controller?.toggleColumnVisibility(
-        event.value,
-        event.checked
-      );
-    };
-    this.onSearchInput = (event) => {
-      const input = event.currentTarget;
-      this.controller?.search(input.value);
-      this.dispatchEvent(new YatlToolbarSearchInput(input.value));
-    };
-    this.onSearchChange = (event) => {
-      const input = event.currentTarget;
-      this.dispatchEvent(new YatlToolbarSearchChange(input.value));
-    };
-    this.onExportClick = (_event) => {
-      this.dispatchEvent(new YatlToolbarExportClick());
-    };
-  }
-  get controller() {
-    return this._controller;
-  }
-  set controller(controller) {
-    if (this._controller === controller) {
-      return;
-    }
-    this._controller = controller;
-    controller?.attach(this);
-  }
-  render() {
-    return html8`
-      <div class="toolbar">
-        <input
-          part="search"
-          class="search"
-          type="search"
-          placeholder="Search"
-          value=${ifDefined2(this.controller?.searchQuery)}
-          @input=${this.onSearchInput}
-          @change=${this.onSearchChange}
-        />
-        <yatl-button-group>
-          ${this.showColumnPicker ? this.renderColumnPicker() : nothing2}
-          ${this.showExportButton ? this.renderExportButton() : nothing2}
-          <slot name="button-group"></slot>
-        </yatl-button-group>
-        <slot></slot>
-      </div>
-    `;
-  }
-  renderColumnPicker() {
-    return html8`
-      <yatl-dropdown
-        part="column-picker"
-        @yatl-dropdown-toggle=${this.handleDropdownToggle}
-      >
-        <yatl-button
-          part="column-picker-trigger"
-          slot="trigger"
-          title="Show/hide columns"
-        >
-          <svg
-            width="20"
-            height="20"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-          >
-            <path
-              d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"
-            />
-          </svg>
-        </yatl-button>
-        ${repeat2(
-      this.controller?.displayColumns ?? [],
-      (s) => s.field,
-      (s) => this.renderColumnVisibilityToggle(s)
-    )}
-      </yatl-dropdown>
-    `;
-  }
-  renderColumnVisibilityToggle(column) {
-    const state = this.controller.getColumnState(column.field);
-    return html8`
-      <yatl-dropdown-item
-        part="column-picker-item"
-        .checked=${state.visible}
-        .value=${state.field}
-        >${column.title}</yatl-dropdown-item
-      >
-    `;
-  }
-  renderExportButton() {
-    return html8`
-      <yatl-button type="button" @click=${this.onExportClick}>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
-          <polyline points="7 10 12 15 17 10"></polyline>
-          <line x1="12" y1="15" x2="12" y2="3"></line>
-        </svg>
-      </yatl-button>
-    `;
-  }
-};
-YatlToolbar.styles = [theme_default, yatl_toolbar_styles_default];
-__decorateClass([
-  property6({ attribute: false })
-], YatlToolbar.prototype, "controller", 1);
-__decorateClass([
-  property6({ type: Boolean })
-], YatlToolbar.prototype, "showColumnPicker", 2);
-__decorateClass([
-  property6({ type: Boolean })
-], YatlToolbar.prototype, "showExportButton", 2);
-YatlToolbar = __decorateClass([
-  customElement7("yatl-toolbar")
-], YatlToolbar);
-
-// src/index.ts
-import { html as html9, svg, nothing as nothing3, noChange } from "lit";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
 export {
-  YatlButton,
-  YatlButtonGroup,
+  TypedEventTarget,
   YatlColumnReorderEvent,
-  YatlColumnReorderRequestEvent,
+  YatlColumnReorderRequest,
   YatlColumnResizeEvent,
   YatlColumnSortEvent,
-  YatlColumnSortRequestEvent,
+  YatlColumnSortRequest,
   YatlColumnToggleEvent,
-  YatlColumnToggleRequestEvent,
-  YatlDropdown,
-  YatlDropdownItem,
-  YatlDropdownToggleEvent,
+  YatlColumnToggleRequest,
   YatlEvent,
   YatlRowClickEvent,
   YatlRowSelectEvent,
-  YatlRowSelectRequestEvent,
+  YatlRowSelectRequest,
   YatlTable,
   YatlTableController,
   YatlTableSearchEvent,
   YatlTableStateChangeEvent,
-  YatlTableUi,
   YatlTableViewChangeEvent,
-  YatlToolbar,
-  YatlToolbarExportClick,
-  YatlToolbarSearchChange,
-  YatlToolbarSearchInput,
-  html9 as html,
-  noChange,
-  nothing3 as nothing,
-  svg,
-  unsafeHTML
+  createRegexTokenizer,
+  createState,
+  findColumn,
+  getColumnStateChanges,
+  getNestedValue,
+  isDisplayColumn,
+  isInternalColumn,
+  isRowIdType,
+  isRowSelectionMethod,
+  setNestedValue,
+  whitespaceTokenizer
 };
 //# sourceMappingURL=index.mjs.map