@timlassiter11/yatl-ui 0.0.1

package/dist/index.mjs

@@ -0,0 +1,4599 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getProtoOf = Object.getPrototypeOf;
+var __reflectGet = Reflect.get;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var __superGet = (cls, obj, key) => __reflectGet(__getProtoOf(cls), key, obj);
+
+// src/setup-context.ts
+import { ContextRoot } from "@lit/context";
+var root = new ContextRoot();
+root.attach(document.documentElement);
+
+// src/components/button/button.ts
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+// src/components/base/base.ts
+import { LitElement } from "lit";
+
+// src/styles/components/host.styles.ts
+import { css } from "lit";
+var host_styles_default = css`
+  :host {
+    box-sizing: border-box;
+  }
+
+  :host([data-group-position]) {
+    margin-right: -1px;
+  }
+
+  :host([data-group-position='middle']) {
+    --button-radius: 0 !important;
+  }
+
+  :host([data-group-position='first']) {
+    --button-radius: var(--button-group-radius) 0 0 var(--button-group-radius);
+  }
+
+  :host([data-group-position='last']) {
+    --button-radius: 0 var(--button-group-radius) var(--button-group-radius) 0;
+    margin-right: 0;
+  }
+`;
+
+// src/components/base/base.ts
+var YatlBase = class extends LitElement {
+  static {
+    this.styles = [host_styles_default];
+  }
+};
+
+// src/components/button/button.styles.ts
+import { css as css2 } from "lit";
+var button_styles_default = css2`
+  :host {
+    --button-border-style: var(--yatl-button-border-style, solid);
+    --button-radius: var(--yatl-button-radius, var(--yatl-radius-s));
+    --button-padding: var(--yatl-button-padding, var(--yatl-spacing-s));
+    --button-hover-bg: var(
+      --yatl-button-hover-bg,
+      color-mix(in srgb, var(--yatl-color-mix) 10%, var(--button-bg))
+    );
+
+    display: inline-block;
+
+    /* Appearance sets color, variant decides how to use it */
+    --appearance-text: var(--yatl-text-inverse);
+    --appearance-color: var(--yatl-color-neutral);
+
+    --button-text: var(--yatl-button-text, var(--appearance-text));
+    --button-bg: var(--yatl-button-bg, var(--appearance-color));
+    --button-border-width: var(--yatl-button-border-width, 1px);
+    --button-border-color: var(--yatl-button-border, var(--appearance-color));
+  }
+
+  [part='base'] {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding: var(--button-padding);
+    border-radius: var(--button-radius);
+    color: var(--button-text);
+    font-size: large;
+    font-weight: 500;
+    background-color: var(--button-bg);
+    border: var(--button-border-width) solid var(--button-border-color);
+  }
+
+  :host([disabled]) [part='base'] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    filter: grayscale(100%);
+  }
+
+  :host(:not([disabled])) [part='base']:hover {
+    background-color: var(--button-hover-bg);
+  }
+
+  :host([color='brand']) {
+    --appearance-color: var(--yatl-color-brand);
+    --appearance-text: var(--yatl-text-brand);
+  }
+
+  :host([color='danger']) {
+    --appearance-color: var(--yatl-color-danger);
+    --appearance-text: white;
+  }
+
+  :host([color='warning']) {
+    --appearance-color: var(--yatl-color-warning);
+    --appearance-text: white;
+  }
+
+  :host([color='success']) {
+    --appearance-color: var(--yatl-color-success);
+    --appearance-text: white;
+  }
+
+  :host([color='raised']) {
+    --appearance-color: var(--yatl-surface-2);
+    --appearance-text: var(--yatl-text-1);
+  }
+
+  :host([color='muted']) {
+    --appearance-color: var(--yatl-text-3);
+    --appearance-text: white;
+  }
+
+  :host([variant='outline']) {
+    --button-bg: transparent;
+    --button-text: var(--appearance-color);
+    --button-border-color: var(--appearance-color);
+  }
+
+  :host([variant='plain']) {
+    --button-text: var(--appearance-color);
+    --button-bg: transparent;
+    --button-border-width: 0;
+  }
+`;
+
+// src/components/button/button.ts
+var YatlButton = class extends YatlBase {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.type = "button";
+    this.variant = "neutral";
+    this.color = "neutral";
+  }
+  render() {
+    return html`
+      <button part="base" type=${this.type} ?disabled=${this.disabled}>
+        <slot name="start"></slot>
+        <slot></slot>
+        <slot name="end"></slot>
+      </button>
+    `;
+  }
+};
+YatlButton.styles = [...__superGet(YatlButton, YatlButton, "styles"), button_styles_default];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], YatlButton.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], YatlButton.prototype, "type", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], YatlButton.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], YatlButton.prototype, "color", 2);
+YatlButton = __decorateClass([
+  customElement("yatl-button")
+], YatlButton);
+
+// src/components/button-group/button-group.ts
+import { html as html4 } from "lit";
+import { customElement as customElement4 } from "lit/decorators.js";
+
+// src/utils/common.ts
+function getEffectiveChildren(node) {
+  if (node instanceof HTMLSlotElement) {
+    const assigned = node.assignedElements({ flatten: true });
+    if (assigned.length > 0) {
+      return assigned.flatMap(getEffectiveChildren);
+    }
+    const fallback = Array.from(node.children);
+    return fallback.flatMap(getEffectiveChildren);
+  }
+  if (node instanceof Element) {
+    return [node];
+  }
+  return [];
+}
+var DateConverter = class {
+  fromAttribute(value) {
+    if (!value) return void 0;
+    const [year, month, day] = value.split("-").map(Number);
+    const date = new Date(year, month - 1, day);
+    return isNaN(date.getTime()) ? void 0 : date;
+  }
+  toAttribute(value) {
+    if (typeof value === "string") {
+      value = this.fromAttribute(value);
+    }
+    if (!value || isNaN(value.getTime())) return null;
+    const year = value.getFullYear();
+    const month = String(value.getMonth() + 1).padStart(2, "0");
+    const day = String(value.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  }
+};
+var dateConverter = new DateConverter();
+function* activeElements(activeElement = document.activeElement) {
+  if (activeElement === null || activeElement === void 0) return;
+  yield activeElement;
+  if ("shadowRoot" in activeElement && activeElement.shadowRoot && activeElement.shadowRoot.mode !== "closed") {
+    yield* activeElements(activeElement.shadowRoot.activeElement);
+  }
+}
+async function animateWithClass(element, className, timeout = 350) {
+  await new Promise((resolve) => {
+    const controller = new AbortController();
+    const { signal } = controller;
+    if (element.classList.contains(className)) {
+      return;
+    }
+    element.classList.remove(className);
+    element.classList.add(className);
+    let timer = 0;
+    const onEnd = () => {
+      clearTimeout(timer);
+      element.classList.remove(className);
+      resolve();
+      controller.abort();
+    };
+    timer = window.setTimeout(() => {
+      onEnd();
+    }, timeout);
+    element.addEventListener("animationend", onEnd, { once: true, signal });
+    element.addEventListener("animationcancel", onEnd, { once: true, signal });
+  });
+}
+
+// src/utils/slot-controller.ts
+var HasSlotController = class {
+  constructor(host, ...slotNames) {
+    this.slotNames = [];
+    this.handleSlotChange = (event) => {
+      const slot = event.target;
+      if (this.slotNames.includes("[default]") && !slot.name || slot.name && this.slotNames.includes(slot.name)) {
+        this.host.requestUpdate();
+      }
+    };
+    (this.host = host).addController(this);
+    this.slotNames = slotNames;
+  }
+  hasDefaultSlot() {
+    return [...this.host.childNodes].some((node) => {
+      if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== "") {
+        return true;
+      }
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const el = node;
+        const tagName = el.tagName.toLowerCase();
+        if (tagName === "wa-visually-hidden") {
+          return false;
+        }
+        if (!el.hasAttribute("slot")) {
+          return true;
+        }
+      }
+      return false;
+    });
+  }
+  hasNamedSlot(name) {
+    return this.host.querySelector(`:scope > [slot="${name}"]`) !== null;
+  }
+  test(slotName) {
+    return slotName === "[default]" ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);
+  }
+  hostConnected() {
+    this.host.shadowRoot.addEventListener("slotchange", this.handleSlotChange);
+  }
+  hostDisconnected() {
+    this.host.shadowRoot.removeEventListener(
+      "slotchange",
+      this.handleSlotChange
+    );
+  }
+};
+function getInnerHTML(nodes, callback) {
+  let html28 = "";
+  for (const node of nodes) {
+    if (callback) {
+      const customHTML = callback(node);
+      if (customHTML !== void 0) {
+        html28 += customHTML;
+        continue;
+      }
+    }
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      html28 += node.outerHTML;
+    }
+    if (node.nodeType === Node.TEXT_NODE) {
+      html28 += node.textContent;
+    }
+  }
+  return html28;
+}
+
+// src/components/dropdown/dropdown.ts
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  offset,
+  shift,
+  size
+} from "@floating-ui/dom";
+import { html as html3 } from "lit";
+import { customElement as customElement3, property as property3, query } from "lit/decorators.js";
+
+// src/events/dialog.ts
+import { YatlEvent } from "@timlassiter11/yatl";
+var YatlDialogShowRequest = class _YatlDialogShowRequest extends YatlEvent {
+  static {
+    this.EVENT_NAME = "yatl-dialog-show-request";
+  }
+  constructor() {
+    super(_YatlDialogShowRequest.EVENT_NAME, { cancelable: true });
+  }
+  clone() {
+    return new _YatlDialogShowRequest();
+  }
+};
+var YatlDialogShowEvent = class _YatlDialogShowEvent extends YatlEvent {
+  static {
+    this.EVENT_NAME = "yatl-dialog-show";
+  }
+  constructor() {
+    super(_YatlDialogShowEvent.EVENT_NAME);
+  }
+  clone() {
+    return new _YatlDialogShowEvent();
+  }
+};
+var YatlDialogHideRequest = class _YatlDialogHideRequest extends YatlEvent {
+  constructor(source) {
+    super(_YatlDialogHideRequest.EVENT_NAME, { cancelable: true });
+    this.source = source;
+  }
+  static {
+    this.EVENT_NAME = "yatl-dialog-hide-request";
+  }
+  clone() {
+    return new _YatlDialogHideRequest(this.source);
+  }
+};
+var YatlDialogHideEvent = class _YatlDialogHideEvent extends YatlEvent {
+  static {
+    this.EVENT_NAME = "yatl-dialog-hide";
+  }
+  constructor() {
+    super(_YatlDialogHideEvent.EVENT_NAME);
+  }
+  clone() {
+    return new _YatlDialogHideEvent();
+  }
+};
+
+// src/events/dropdown.ts
+import { YatlEvent as YatlEvent2 } from "@timlassiter11/yatl";
+var YatlDropdownOpenRequest = class _YatlDropdownOpenRequest extends YatlEvent2 {
+  static {
+    this.EVENT_NAME = "yatl-dropdown-open-request";
+  }
+  constructor() {
+    super(_YatlDropdownOpenRequest.EVENT_NAME, { cancelable: true });
+  }
+  clone() {
+    return new _YatlDropdownOpenRequest();
+  }
+};
+var YatlDropdownOpenEvent = class _YatlDropdownOpenEvent extends YatlEvent2 {
+  static {
+    this.EVENT_NAME = "yatl-dropdown-open";
+  }
+  constructor() {
+    super(_YatlDropdownOpenEvent.EVENT_NAME);
+  }
+  clone() {
+    return new _YatlDropdownOpenEvent();
+  }
+};
+var YatlDropdownCloseRequest = class _YatlDropdownCloseRequest extends YatlEvent2 {
+  static {
+    this.EVENT_NAME = "yatl-dropdown-close-request";
+  }
+  constructor() {
+    super(_YatlDropdownCloseRequest.EVENT_NAME, { cancelable: true });
+  }
+  clone() {
+    return new _YatlDropdownCloseRequest();
+  }
+};
+var YatlDropdownCloseEvent = class _YatlDropdownCloseEvent extends YatlEvent2 {
+  static {
+    this.EVENT_NAME = "yatl-dropdown-close";
+  }
+  constructor() {
+    super(_YatlDropdownCloseEvent.EVENT_NAME);
+  }
+  clone() {
+    return new _YatlDropdownCloseEvent();
+  }
+};
+var YatlDropdownSelectEvent = class _YatlDropdownSelectEvent extends YatlEvent2 {
+  constructor(item) {
+    super(_YatlDropdownSelectEvent.EVENT_NAME, { cancelable: true });
+    this.item = item;
+  }
+  static {
+    this.EVENT_NAME = "yatl-dropdown-select";
+  }
+  clone() {
+    return new _YatlDropdownSelectEvent(this.item);
+  }
+};
+
+// src/events/table-toolbar.ts
+import { YatlEvent as YatlEvent3 } from "@timlassiter11/yatl";
+var YatlToolbarSearchInput = class _YatlToolbarSearchInput extends YatlEvent3 {
+  constructor(value) {
+    super(_YatlToolbarSearchInput.EVENT_NAME);
+    this.value = value;
+  }
+  static {
+    this.EVENT_NAME = "yatl-toolbar-search-input";
+  }
+  clone() {
+    return new _YatlToolbarSearchInput(this.value);
+  }
+};
+var YatlToolbarSearchChange = class _YatlToolbarSearchChange extends YatlEvent3 {
+  constructor(value) {
+    super(_YatlToolbarSearchChange.EVENT_NAME);
+    this.value = value;
+  }
+  static {
+    this.EVENT_NAME = "yatl-toolbar-search-change";
+  }
+  clone() {
+    return new _YatlToolbarSearchChange(this.value);
+  }
+};
+var YatlToolbarExportClick = class _YatlToolbarExportClick extends YatlEvent3 {
+  static {
+    this.EVENT_NAME = "yatl-toolbar-export-click";
+  }
+  constructor() {
+    super(_YatlToolbarExportClick.EVENT_NAME);
+  }
+  clone() {
+    return new _YatlToolbarExportClick();
+  }
+};
+
+// src/events/tag.ts
+import { YatlEvent as YatlEvent4 } from "@timlassiter11/yatl";
+var YatlTagDismissEvent = class _YatlTagDismissEvent extends YatlEvent4 {
+  static {
+    this.EVENT_NAME = "yatl-tag-dismiss";
+  }
+  constructor() {
+    super(_YatlTagDismissEvent.EVENT_NAME);
+  }
+  clone() {
+    return new _YatlTagDismissEvent();
+  }
+};
+
+// src/components/option/option.ts
+import { html as html2, nothing } from "lit";
+import { customElement as customElement2, property as property2 } from "lit/decorators.js";
+
+// src/components/option/option.styles.ts
+import { css as css3 } from "lit";
+var option_styles_default = css3`
+  :host {
+    --option-color: var(--yatl-option-color, var(--yatl-text-1));
+    --option-font-size: var(--yatl-option-font-size, 16px);
+    --option-bg: var(--yatl-option-bg, transparent);
+    --option-hover-bg: var(--yatl-option-hover-bg, var(--yatl-color-brand));
+    --option-padding: var(--yatl-option-padding, var(--yatl-spacing-s));
+    --option-gap: var(--yatl-option-gap, var(--yatl-spacing-xs));
+    --option-radius: var(--yatl-option-radius, var(--yatl-radius-s));
+    --option-focus-ring: var(
+      --yatl-option-focus-ring,
+      3px solid var(--yatl-color-brand)
+    );
+    --option-focus-bg: var(
+      --yatl-option-focus-bg,
+      color-mix(in srgb, var(--yatl-color-mix), 5%, transparent)
+    );
+    --option-disabled-color: var(
+      --yatl-option-disabled-color,
+      var(--yatl-text-3)
+    );
+
+    border-radius: var(--option-radius);
+  }
+
+  :host(:focus-visible) {
+    z-index: 1;
+    outline: var(--option-focus-ring);
+    background-color: var(--option-focus-bg);
+  }
+
+  [part='base'] {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    white-space: nowrap;
+    user-select: none;
+    color: var(--option-color);
+    font-size: var(--option-font-size);
+    background-color: var(--option-bg);
+    padding: var(--option-padding);
+    border-radius: var(--option-radius);
+    transition: background 0.1s ease;
+  }
+
+  :host([disabled]) [part='base'] {
+    color: var(--option-disabled-color);
+    cursor: not-allowed;
+  }
+
+  :host(:not([disabled])) [part='base']:hover {
+    background-color: var(--option-hover-bg);
+  }
+
+  [part='label'] {
+    flex: 1 1 100%;
+    display: inline-flex;
+    align-items: center;
+    line-height: normal;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
+
+  [part='start'],
+  [part='end'] {
+    flex: 0 0 0%;
+  }
+
+  [part='check'] {
+    width: 18px;
+    height: 18px;
+    margin-right: var(--yatl-spacing-s);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid transparent;
+    border-radius: 3px;
+    opacity: 0;
+    transform: scale(0.5);
+    transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46);
+  }
+
+  :host([checked]) [part='check'] {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
+
+// src/components/option/option.ts
+var YatlOption = class extends YatlBase {
+  constructor() {
+    super(...arguments);
+    this.value = "on";
+    this.checkable = false;
+    this.checked = false;
+    this.disabled = false;
+    this.label = "";
+    this.handleItemClicked = (event) => {
+      if (this.disabled) {
+        event.stopPropagation();
+        event.preventDefault();
+        return;
+      }
+      if (this.checkable) {
+        this.checked = !this.checked;
+      }
+    };
+  }
+  render() {
+    return html2`
+      <span part="base">
+        <slot part="start" name="start"></slot>
+        ${this.renderCheck()} ${this.renderLabel()}
+        <slot part="end" name="end"></slot>
+      </span>
+    `;
+  }
+  renderLabel() {
+    return html2`<span part="label">${this.label}</span>`;
+  }
+  renderCheck() {
+    return this.checkable ? html2`<yatl-icon part="check" name="check"></yatl-icon>` : nothing;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", this.handleItemClicked);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleItemClicked);
+  }
+};
+YatlOption.styles = [...__superGet(YatlOption, YatlOption, "styles"), option_styles_default];
+__decorateClass([
+  property2({ type: String, reflect: true })
+], YatlOption.prototype, "value", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], YatlOption.prototype, "checkable", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], YatlOption.prototype, "checked", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], YatlOption.prototype, "disabled", 2);
+__decorateClass([
+  property2({ type: String, reflect: true })
+], YatlOption.prototype, "label", 2);
+YatlOption = __decorateClass([
+  customElement2("yatl-option")
+], YatlOption);
+
+// src/components/dropdown/dropdown.styles.ts
+import { css as css4 } from "lit";
+var dropdown_styles_default = css4`
+  :host {
+    --dropdown-menu-bg: var(--yatl-dropdown-menu-bg, var(--yatl-surface-3));
+    --dropdown-menu-padding: var(
+      --yatl-dropdown-menu-padding,
+      var(--yatl-spacing-s)
+    );
+    --dropdown-menu-radius: var(
+      --yatl-dropdown-menu-radius,
+      var(--yatl-radius-m)
+    );
+    --dropdown-menu-border: var(
+      --yatl-dropdown-menu-border,
+      var(--yatl-border-color)
+    );
+    --dropdown-menu-open-bg: var(
+      --yatl-dropdown-menu-open-bg,
+      var(--yatl-color-brand)
+    );
+
+    overflow: visible !important;
+  }
+
+  [part='base'] {
+    position: relative;
+    height: 100%;
+  }
+
+  [part='menu'] {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: max-content;
+    box-sizing: border-box;
+    z-index: 1000;
+    background: var(--dropdown-menu-bg);
+    border: 1px solid var(--dropdown-menu-border);
+    border-radius: var(--dropdown-menu-radius);
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 50%);
+    padding: var(--dropdown-menu-padding);
+    display: none;
+    flex-direction: column;
+    overflow-y: auto;
+  }
+
+  :host([open]) ::slotted(yatl-button[slot='trigger']) {
+    --yatl-button-bg: var(--dropdown-menu-open-bg);
+  }
+
+  [part='trigger'] {
+    display: contents;
+  }
+
+  :host([open]) [part='menu'] {
+    display: flex;
+  }
+`;
+
+// src/components/dropdown/dropdown.ts
+var YatlDropdown = class extends YatlBase {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.matchWidth = false;
+    this.handleKeydown = (event) => {
+      if (this.open) {
+        if (event.key === "Escape") {
+          this.open = false;
+          this.referenceElement?.focus();
+        } else if (["ArrowUp", "ArrowDown", "Home", "End", " "].includes(event.key)) {
+          const items = this.getItems();
+          const activeItem = this.getActiveItem(items);
+          if (activeItem) {
+            activeItem.tabIndex = -1;
+          }
+          let itemToFocus;
+          const activeItemIndex = activeItem ? items.indexOf(activeItem) : -1;
+          if (event.key === "ArrowUp") {
+            if (activeItemIndex > 0) {
+              itemToFocus = items[activeItemIndex - 1];
+            } else {
+              itemToFocus = items[items.length - 1];
+            }
+          } else if (event.key === "ArrowDown") {
+            if (activeItemIndex !== -1 && activeItemIndex < items.length - 1) {
+              itemToFocus = items[activeItemIndex + 1];
+            } else {
+              itemToFocus = items[0];
+            }
+          } else if (event.key === "Home" || event.key === "End") {
+            const composedPath = event.composedPath();
+            const trigger = this.referenceElement;
+            if (trigger && composedPath.includes(trigger)) {
+              return;
+            }
+            itemToFocus = event.key === "Home" ? items[0] : items[items.length - 1];
+          } else if (event.key === " ") {
+            event.preventDefault();
+            event.stopPropagation();
+            activeItem?.click();
+          }
+          if (itemToFocus) {
+            event.preventDefault();
+            event.stopPropagation();
+            itemToFocus.tabIndex = 0;
+            itemToFocus.focus();
+            return;
+          }
+        }
+      }
+    };
+    this.handleDocumentFocusin = (event) => {
+      const path = event.composedPath();
+      if (!path.includes(this)) {
+        this.open = false;
+      }
+    };
+  }
+  // #region Render
+  render() {
+    return html3`
+      <div part="base">
+        <div part="trigger">
+          <slot
+            name="trigger"
+            @click=${this.handleTriggerClick}
+            @keydown=${this.handleTriggerKeydown}
+          ></slot>
+        </div>
+        <div part="menu" @click=${this.handleItemClick}>
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+  // #endregion
+  // #region Lifecycle
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("open")) {
+      if (this.open) {
+        this.addListeners();
+        this.dispatchEvent(new YatlDropdownOpenEvent());
+      } else {
+        this.removeListeners();
+        this.dispatchEvent(new YatlDropdownCloseEvent());
+      }
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeListeners();
+  }
+  // #endregion
+  // #region Event Handlers
+  handleTriggerClick(event) {
+    if (event.pointerId === -1 && this.open) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    const requestEvent = this.open ? new YatlDropdownCloseRequest() : new YatlDropdownOpenRequest();
+    if (!this.dispatchEvent(requestEvent)) {
+      return;
+    }
+    this.open = !this.open;
+  }
+  handleItemClick(event) {
+    const item = event.target;
+    if (!(item instanceof YatlOption)) {
+      return;
+    }
+    const selectEvent = new YatlDropdownSelectEvent(item);
+    if (this.dispatchEvent(selectEvent)) {
+      this.open = false;
+    }
+  }
+  handleTriggerKeydown(event) {
+    if (!this.open && event.key === " ") {
+      this.open = true;
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+  // #endregion
+  // #region Utilities
+  addListeners() {
+    this.startPositioning();
+    document.addEventListener("click", this.handleDocumentFocusin);
+    document.addEventListener("focusin", this.handleDocumentFocusin);
+    document.addEventListener("keydown", this.handleKeydown);
+  }
+  removeListeners() {
+    this.autoUpdateCleanup?.();
+    document.removeEventListener("click", this.handleDocumentFocusin);
+    document.removeEventListener("focusin", this.handleDocumentFocusin);
+    document.removeEventListener("keydown", this.handleKeydown);
+  }
+  getItems(includeDisabled = false) {
+    const items = this.defaultSlot?.assignedElements({ flatten: true }).filter((i) => i instanceof YatlOption) ?? [];
+    return includeDisabled ? items : items.filter((i) => !i.disabled);
+  }
+  getActiveItem(items) {
+    const activeElement = [...activeElements()].find(
+      (i) => i instanceof YatlOption
+    );
+    return items.find((item) => item === activeElement);
+  }
+  async startPositioning() {
+    const menu = this.menuElement;
+    const trigger = this.referenceElement;
+    if (!trigger) {
+      return;
+    }
+    this.autoUpdateCleanup = autoUpdate(trigger, menu, () => {
+      computePosition(trigger, menu, {
+        placement: "bottom-start",
+        strategy: "fixed",
+        middleware: [
+          offset(4),
+          size({
+            apply: ({ rects, availableHeight, elements }) => {
+              const maxHeight = 400;
+              const screenBuffer = 10;
+              const actualMaxHeight = Math.min(
+                maxHeight,
+                availableHeight - screenBuffer
+              );
+              const styles = {
+                "max-height": `${actualMaxHeight}px`
+              };
+              if (this.matchWidth) {
+                styles["width"] = `${rects.reference.width}px`;
+              } else {
+                styles["min-width"] = `${rects.reference.width}px`;
+              }
+              Object.assign(elements.floating.style, styles);
+            },
+            padding: 10
+          }),
+          flip(),
+          shift({ padding: 5 })
+        ]
+      }).then(({ x, y }) => {
+        Object.assign(menu.style, {
+          left: `${x}px`,
+          top: `${y}px`
+        });
+      });
+    });
+  }
+  get referenceElement() {
+    return this.triggerSlot?.assignedElements({ flatten: true }).at(0);
+  }
+  // #endregion
+};
+YatlDropdown.styles = [...__superGet(YatlDropdown, YatlDropdown, "styles"), dropdown_styles_default];
+__decorateClass([
+  query('[part="menu"]')
+], YatlDropdown.prototype, "menuElement", 2);
+__decorateClass([
+  query('slot[name="trigger"]')
+], YatlDropdown.prototype, "triggerSlot", 2);
+__decorateClass([
+  query("slot:not([name])")
+], YatlDropdown.prototype, "defaultSlot", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], YatlDropdown.prototype, "open", 2);
+__decorateClass([
+  property3({ type: Boolean, attribute: "match-width" })
+], YatlDropdown.prototype, "matchWidth", 2);
+YatlDropdown = __decorateClass([
+  customElement3("yatl-dropdown")
+], YatlDropdown);
+
+// src/components/button-group/button-group.styles.ts
+import { css as css5 } from "lit";
+var button_group_styles_default = css5`
+  :host {
+    display: inline-flex;
+  }
+
+  [part='base'] {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+  }
+
+  ::slotted(*) {
+    --button-group-radius: var(
+      --yatl-button-group-radius,
+      var(--yatl-radius-m)
+    );
+  }
+`;
+
+// src/components/button-group/button-group.ts
+var YatlButtonGroup = class extends YatlBase {
+  render() {
+    return html4`
+      <div part="base">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+  handleSlotChange(event) {
+    const slot = event.target;
+    const elements = getEffectiveChildren(slot);
+    const count = elements.length;
+    elements.forEach((element, index) => {
+      if (element instanceof YatlDropdown) {
+        const trigger = element.querySelector('[slot="trigger"]');
+        if (trigger) {
+          const children = getEffectiveChildren(trigger);
+          element = children.find((c) => c instanceof YatlButton) ?? element;
+        }
+      }
+      let position = "middle";
+      if (count === 1) position = "single";
+      else if (index === 0) position = "first";
+      else if (index === count - 1) position = "last";
+      element.setAttribute("data-group-position", position);
+    });
+  }
+};
+YatlButtonGroup.styles = [...__superGet(YatlButtonGroup, YatlButtonGroup, "styles"), button_group_styles_default];
+YatlButtonGroup = __decorateClass([
+  customElement4("yatl-button-group")
+], YatlButtonGroup);
+
+// src/components/card/card.ts
+import { html as html5 } from "lit";
+import { customElement as customElement5 } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+
+// src/components/card/card.styles.ts
+import { css as css6 } from "lit";
+var card_styles_default = css6`
+  :host {
+    --card-bg: var(--yatl-card-bg, var(--yatl-surface-1));
+    --card-text: var(--yatl-card-text, var(--yatl-text-1));
+
+    --card-border-width: var(--yatl-card-border-width, 1px);
+    --card-border-style: var(--yatl-card-border-style, solid);
+    --card-border-color: var(
+      --yatl-card-border-color,
+      var(--yatl-border-color)
+    );
+    --card-border-radius: var(--yatl-card-border-radius, var(--yatl-radius-l));
+
+    --card-header-font-size: var(--yatl-card-header-font-size, x-large);
+    --card-header-font-wieght: var(--yatl-card-header-font-weight, 700);
+    --card-header-padding: var(
+      --yatl-card-header-padding,
+      var(--yatl-spacing-m)
+    );
+    --card-header-border-width: var(
+      --yatl-card-header-border-width,
+      var(--card-border-width)
+    );
+
+    --card-footer-font-size: var(--yatl-card-footer-font-size, medium);
+    --card-footer-font-weight: var(--yatl-card-footer-font-weight, normal);
+    --card-footer-padding: var(
+      --yatl-card-footer-padding,
+      var(--yatl-spacing-m)
+    );
+    --card-footer-border-width: var(
+      --yatl-card-footer-border-width,
+      var(--card-border-width)
+    );
+
+    display: flex;
+    flex-direction: column;
+    color: var(--card-text);
+    background-color: var(--card-bg);
+    border-width: var(--card-border-width);
+    border-style: var(--card-border-style);
+    border-color: var(--card-border-color);
+    border-radius: var(--card-border-radius);
+  }
+
+  [part='header'],
+  [part='footer'] {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  [part='header'] {
+    font-size: var(--card-header-font-size);
+    font-weight: var(--card-header-font-wieght);
+    padding: var(--card-header-padding);
+    border-block-end: var(--card-header-border-width) var(--card-border-style)
+      var(--card-border-color);
+  }
+
+  [part='footer'] {
+    font-size: var(--card-footer-font-size);
+    font-weight: var(--card-footer-font-weight);
+    padding: var(--card-footer-padding);
+    border-block-start: var(--card-footer-border-width) var(--card-border-style)
+      var(--card-border-color);
+  }
+
+  [part='header']:not(.has-header),
+  [part='footer']:not(.has-footer) {
+    display: none;
+  }
+
+  .divider {
+    flex-grow: 1;
+  }
+`;
+
+// src/components/card/card.ts
+var YatlCard = class extends YatlBase {
+  constructor() {
+    super(...arguments);
+    this.slotController = new HasSlotController(
+      this,
+      "header-start",
+      "header-end",
+      "footer-start",
+      "footer-end"
+    );
+  }
+  render() {
+    const hasHeader = this.slotController.test("header-start") || this.slotController.test("header-end");
+    const hasFooter = this.slotController.test("footer-start") || this.slotController.test("footer-end");
+    return html5`
+      <header part="header" class=${classMap({ "has-header": hasHeader })}>
+        <slot name="header-start"></slot>
+        <slot name="header">
+          <div class="divider"></div>
+        </slot>
+        <slot name="header-end"></slot>
+      </header>
+
+      <slot part="body"></slot>
+
+      <footer part="footer" class=${classMap({ "has-footer": hasFooter })}>
+        <slot name="footer-start"></slot>
+        <slot name="footer">
+          <div class="divider"></div>
+        </slot>
+        <slot name="footer-end"></slot>
+      </footer>
+    `;
+  }
+};
+YatlCard.styles = [...__superGet(YatlCard, YatlCard, "styles"), card_styles_default];
+YatlCard = __decorateClass([
+  customElement5("yatl-card")
+], YatlCard);
+
+// src/components/confirmation-dialog/confirmation-dialog.ts
+import { html as html6 } from "lit";
+import { customElement as customElement6, property as property4, query as query2 } from "lit/decorators.js";
+
+// src/components/confirmation-dialog/confirmation-dialog.styles.ts
+import { css as css7 } from "lit";
+var confirmation_dialog_styles_default = css7``;
+
+// src/events/confirmation-dialog.ts
+import { YatlEvent as YatlEvent5 } from "@timlassiter11/yatl";
+var YatlConfirmationDialogAcceptEvent = class _YatlConfirmationDialogAcceptEvent extends YatlEvent5 {
+  static {
+    this.EVENT_NAME = "yatl-confirmation-dialog-accept";
+  }
+  constructor() {
+    super(_YatlConfirmationDialogAcceptEvent.EVENT_NAME);
+  }
+  clone() {
+    return new _YatlConfirmationDialogAcceptEvent();
+  }
+};
+var YatlConfirmationDialogRejectEvent = class _YatlConfirmationDialogRejectEvent extends YatlEvent5 {
+  static {
+    this.EVENT_NAME = "yatl-confirmation-dialog-reject";
+  }
+  constructor() {
+    super(_YatlConfirmationDialogRejectEvent.EVENT_NAME);
+  }
+  clone() {
+    return new _YatlConfirmationDialogRejectEvent();
+  }
+};
+
+// src/components/confirmation-dialog/confirmation-dialog.ts
+var YatlConfirmationDialog = class extends YatlBase {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.modal = false;
+    this.label = "";
+    this.acceptText = "Yes";
+    this.rejectText = "No";
+  }
+  async show() {
+    if (!this.hasUpdated) {
+      await this.updateComplete;
+    }
+    this.open = true;
+    await this.dialogElement.show();
+  }
+  async hide() {
+    if (!this.hasUpdated) {
+      return;
+    }
+    this.open = false;
+    await this.dialogElement.hide();
+  }
+  async confirm() {
+    await this.show();
+    const ret = await new Promise((resolve, _reject) => {
+      this.addEventListener(
+        "yatl-confirmation-dialog-accept",
+        () => resolve(true),
+        { once: true }
+      );
+      this.addEventListener(
+        "yatl-confirmation-dialog-reject",
+        () => resolve(false),
+        { once: true }
+      );
+    });
+    return ret;
+  }
+  async accept() {
+    const event = new YatlConfirmationDialogAcceptEvent();
+    this.dispatchEvent(event);
+    await this.hide();
+  }
+  async reject() {
+    const event = new YatlConfirmationDialogRejectEvent();
+    this.dispatchEvent(event);
+    await this.hide();
+  }
+  render() {
+    return html6`
+      <yatl-dialog
+        label=${this.label}
+        ?open=${this.open}
+        ?modal=${this.modal}
+        @yatl-dialog-show-request=${this.handleDialogShow}
+        @yatl-dialog-hide-request=${this.handleDialogHide}
+      >
+        <slot></slot>
+        <slot name="actions" slot="footer-actions">
+          <yatl-button @click=${this.reject}> ${this.rejectText} </yatl-button>
+          <yatl-button @click=${this.accept}> ${this.acceptText} </yatl-button>
+        </slot>
+      </yatl-dialog>
+    `;
+  }
+  handleDialogShow() {
+    this.open = true;
+  }
+  handleDialogHide() {
+    if (this.open) {
+      this.open = false;
+      this.reject();
+    }
+  }
+};
+YatlConfirmationDialog.styles = [...__superGet(YatlConfirmationDialog, YatlConfirmationDialog, "styles"), confirmation_dialog_styles_default];
+__decorateClass([
+  query2("yatl-dialog")
+], YatlConfirmationDialog.prototype, "dialogElement", 2);
+__decorateClass([
+  property4({ type: Boolean })
+], YatlConfirmationDialog.prototype, "open", 2);
+__decorateClass([
+  property4({ type: Boolean })
+], YatlConfirmationDialog.prototype, "modal", 2);
+__decorateClass([
+  property4({ type: String })
+], YatlConfirmationDialog.prototype, "label", 2);
+__decorateClass([
+  property4({ type: String, attribute: "accept-text" })
+], YatlConfirmationDialog.prototype, "acceptText", 2);
+__decorateClass([
+  property4({ type: String, attribute: "reject-text" })
+], YatlConfirmationDialog.prototype, "rejectText", 2);
+YatlConfirmationDialog = __decorateClass([
+  customElement6("yatl-confirmation-dialog")
+], YatlConfirmationDialog);
+
+// src/components/dialog/dialog.ts
+import { html as html7 } from "lit";
+import { customElement as customElement7, property as property5, query as query3 } from "lit/decorators.js";
+
+// src/components/dialog/dialog.styles.ts
+import { css as css8 } from "lit";
+var dialog_styles_default = css8`
+  :host {
+    --dialog-bg: var(--yatl-dialog-bg, var(--yatl-surface-3));
+    --dialog-text: var(--yatl-dialog-text, var(--yatl-text-1));
+    --dialog-radius: var(--yatl-dialog-radius, var(--yatl-radius-l));
+    --dialog-border-width: var(--yatl-dialog-border-width, 1px);
+    --dialog-border-style: var(--yatl-dialog-border-style, solid);
+    --dialog-border-color: var(
+      --yatl-dialog-border-color,
+      var(--yatl-border-color)
+    );
+    --dialog-width: var(--yatl-dialog-width, 500px);
+    --dialog-padding: var(--yatl-dialog-padding, var(--yatl-spacing-s));
+    --dialog-header-font-size: var(--yatl-dialog-header-font-size, medium);
+    --dialog-header-font-weight: var(--yatl-dialog-header-font-weight, 700);
+    --dialog-header-padding: var(
+      --yatl-dialog-header-padding,
+      var(--yatl-spacing-m)
+    );
+    --dialog-body-padding: var(
+      --yatl-dialog-body-padding,
+      var(--yatl-spacing-l)
+    );
+
+    --dialog-show-duration: var(--yatl-dialog-show-duration, 250ms);
+    --dialog-hide-duration: var(--yatl-dialog-hide-duration, 250ms);
+    --dialog-pulse-duration: var(--yatl-dialog-pulse-duration, 250ms);
+  }
+
+  dialog {
+    border: none;
+    background: none;
+
+    &.show {
+      animation: show-dialog var(--dialog-show-duration) ease;
+
+      &::backdrop {
+        animation: show-backdrop var(--dialog-show-duration, 200ms) ease;
+      }
+    }
+
+    &.hide {
+      animation: show-dialog var(--dialog-hide-duration) ease reverse;
+
+      &::backdrop {
+        animation: show-backdrop var(--dialog-hide-duration, 200ms) ease reverse;
+      }
+    }
+
+    &.pulse {
+      animation: pulse var(--dialog-pulse-duration) ease;
+    }
+  }
+
+  dialog:focus-visible {
+    outline: none;
+  }
+
+  dialog::backdrop {
+    background-color: color-mix(in oklab, black 60%, transparent);
+  }
+
+  yatl-card {
+    --card-bg: var(--dialog-bg);
+    --card-text: var(--dialog-text);
+    --card-border-radius: var(--dialog-radius);
+    --card-border-width: var(--dialog-border-width);
+    --card-border-style: var(--dialog-border-style);
+    --card-border-color: var(--dialog-border-color);
+    --card-header-font-size: var(--dialog-header-font-size);
+    --card-header-font-weight: var(--dialog-header-font-weight);
+    --card-header-padding: var(--dialog-header-padding);
+
+    padding: var(--dialog-padding);
+  }
+
+  [part='header'] {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  [part='label'] {
+    margin: 0;
+  }
+
+  [part='header-actions'],
+  [part='footer-actions'] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--yatl-spacing-s);
+  }
+
+  [part='body'] {
+    padding: var(--dialog-body-padding);
+  }
+
+  @keyframes pulse {
+    0% {
+      scale: 1;
+    }
+    50% {
+      scale: 1.02;
+    }
+    100% {
+      scale: 1;
+    }
+  }
+
+  @keyframes show-dialog {
+    from {
+      opacity: 0;
+      scale: 0.8;
+    }
+    to {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
+  @keyframes show-backdrop {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+
+// src/components/dialog/dialog.ts
+var YatlDialog = class extends YatlBase {
+  constructor() {
+    super(...arguments);
+    this._open = false;
+    this.label = "";
+    this.modal = false;
+  }
+  get transitionComplete() {
+    return this._transitionPromise;
+  }
+  set transitionComplete(promise) {
+    promise?.then(() => this._transitionPromise = void 0);
+    this._transitionPromise = promise;
+  }
+  get isTransitioning() {
+    return !!this._transitionPromise;
+  }
+  get open() {
+    return this._open;
+  }
+  set open(value) {
+    if (this._open === value) {
+      return;
+    }
+    const oldValue = this._open;
+    this._open = value;
+    if (this.hasUpdated) {
+      if (this.open && !this.dialogElement.open) {
+        this.show();
+      } else if (!this.open && this.dialogElement.open) {
+        this.hide();
+      }
+    }
+    this.requestUpdate("open", oldValue);
+  }
+  async show() {
+    if (this.isTransitioning) {
+      return this.transitionComplete;
+    }
+    const requestEvent = new YatlDialogShowRequest();
+    this.dispatchEvent(requestEvent);
+    if (requestEvent.defaultPrevented) {
+      this.open = false;
+      return;
+    }
+    if (!this.hasUpdated) {
+      await this.updateComplete;
+    }
+    this.dialogElement.showModal();
+    this.open = true;
+    this.transitionComplete = animateWithClass(this.dialogElement, "show");
+    await this.transitionComplete;
+    const event = new YatlDialogShowEvent();
+    this.dispatchEvent(event);
+  }
+  async hide() {
+    await this.requestClose(this.dialogElement);
+  }
+  firstUpdated(_changedProperties) {
+    if (this.open) {
+      this.dialogElement?.showModal();
+    }
+  }
+  render() {
+    return html7`
+      <dialog
+        popover
+        @cancel=${this.handleDialogCancel}
+        @pointerdown=${this.handleDialogPointerdown}
+      >
+        <yatl-card part="base">
+          <slot part="header" name="header" slot="header-start">
+            <h2 part="label">
+              ${this.label || " "}
+            </h2>
+          </slot>
+          <slot
+            part="header-actions"
+            name="header-actions"
+            slot="header-end"
+          ></slot>
+          <yatl-button
+            slot="header-end"
+            variant="plain"
+            @click=${this.handleCloseClick}
+            ><yatl-icon name="close"></yatl-icon
+          ></yatl-button>
+          <div part="body">
+            <slot></slot>
+          </div>
+          <slot part="footer" name="footer" slot="footer-start"></slot>
+          <slot
+            part="footer-actions"
+            name="footer-actions"
+            slot="footer-end"
+          ></slot>
+        </yatl-card>
+      </dialog>
+    `;
+  }
+  async requestClose(source) {
+    if (!this.hasUpdated) {
+      return;
+    }
+    if (this.isTransitioning) {
+      return this.transitionComplete;
+    }
+    const requestEvent = new YatlDialogHideRequest(source);
+    this.dispatchEvent(requestEvent);
+    if (requestEvent.defaultPrevented) {
+      this.open = true;
+      animateWithClass(this.dialogElement, "pulse");
+      return;
+    }
+    this.transitionComplete = animateWithClass(this.dialogElement, "hide");
+    this.open = false;
+    await this.transitionComplete;
+    this.dialogElement.close();
+    const event = new YatlDialogHideEvent();
+    this.dispatchEvent(event);
+  }
+  handleCloseClick(event) {
+    const target = event.target;
+    this.requestClose(target);
+  }
+  handleDialogPointerdown(event) {
+    if (event.target === this.dialogElement) {
+      if (!this.modal) {
+        this.requestClose(this.dialogElement);
+      } else {
+        animateWithClass(this.dialogElement, "pulse");
+      }
+    }
+  }
+  handleDialogCancel(event) {
+    event.preventDefault();
+    if (!this.isTransitioning && event.target === this.dialogElement) {
+      this.requestClose(this.dialogElement);
+    }
+  }
+};
+YatlDialog.styles = [...__superGet(YatlDialog, YatlDialog, "styles"), dialog_styles_default];
+__decorateClass([
+  query3("dialog")
+], YatlDialog.prototype, "dialogElement", 2);
+__decorateClass([
+  property5({ type: String })
+], YatlDialog.prototype, "label", 2);
+__decorateClass([
+  property5({ type: Boolean })
+], YatlDialog.prototype, "modal", 2);
+__decorateClass([
+  property5({ type: Boolean })
+], YatlDialog.prototype, "open", 1);
+YatlDialog = __decorateClass([
+  customElement7("yatl-dialog")
+], YatlDialog);
+
+// src/components/icon/icon.ts
+import { html as html8, nothing as nothing2 } from "lit";
+import { customElement as customElement8, property as property6 } from "lit/decorators.js";
+
+// src/icons.ts
+import { svg } from "lit";
+var sunIcon = svg`
+  <circle cx="12" cy="12" r="5" />
+  <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
+`;
+var moonIcon = svg`
+  <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+`;
+var trashIcon = svg`
+  <path d="M3 6h18" />
+  <path d="M19 6v14c0 1.1-.9 2-2 2H7c-1.1 0-2-.9-2-2V6" />
+  <path d="M8 6V4c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2v2" />
+  <line x1="10" y1="11" x2="10" y2="17" />
+  <line x1="14" y1="11" x2="14" y2="17" />
+`;
+var closeIcon = svg`
+  <path d="M18 6L6 18M6 6l12 12" stroke-linecap="round" stroke-linejoin="round" />
+`;
+var chevronDownIcon = svg`
+  <path d="M6 9l6 6 6-6" />
+`;
+var checkIcon = svg`
+  <path fill="currentColor" d="M18.7,7.2c-0.4-0.4-1-0.4-1.4,0l-7.5,7.5l-3.1-3.1c0,0,0,0,0,0c-0.4-0.4-1-0.4-1.4,0c-0.4,0.4-0.4,1,0,1.4l3.8,3.8c0.2,0.2,0.4,0.3,0.7,0.3c0.3,0,0.5-0.1,0.7-0.3l8.2-8.2C19.1,8.2,19.1,7.6,18.7,7.2z"/>
+`;
+var columnsIcon = svg`
+  <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"/>
+`;
+var downloadIcon = svg`
+  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+  <polyline points="7 10 12 15 17 10" />
+  <line x1="12" y1="15" x2="12" y2="3" />
+`;
+var icons = {
+  sun: sunIcon,
+  moon: moonIcon,
+  trash: trashIcon,
+  close: closeIcon,
+  "chevron-down": chevronDownIcon,
+  check: checkIcon,
+  columns: columnsIcon,
+  download: downloadIcon
+};
+
+// src/components/icon/icon.styles.ts
+import { css as css9 } from "lit";
+var icon_styles_default = css9`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1em;
+    height: 1em;
+    color: inherit;
+    flex-shrink: 0;
+  }
+
+  svg {
+    width: 100%;
+    height: 100%;
+
+    fill: none;
+    stroke: currentColor;
+    stroke-width: var(--icon-stroke-width, 2px);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+`;
+
+// src/components/icon/icon.ts
+var YatlIcon = class extends YatlBase {
+  constructor() {
+    super(...arguments);
+    this.name = "";
+    this.viewBox = "0 0 24 24";
+    this.label = "";
+  }
+  render() {
+    const svg3 = icons[this.name];
+    return html8`
+      <svg
+        part="svg"
+        viewBox=${this.viewBox}
+        aria-hidden=${this.label ? "false" : "true"}
+        aria-label=${this.label || void 0}
+        role=${this.label ? "img" : "presentation"}
+      >
+        ${svg3 ?? nothing2}
+      </svg>
+    `;
+  }
+};
+YatlIcon.styles = [...__superGet(YatlIcon, YatlIcon, "styles"), icon_styles_default];
+__decorateClass([
+  property6({ type: String })
+], YatlIcon.prototype, "name", 2);
+__decorateClass([
+  property6({ type: String })
+], YatlIcon.prototype, "viewBox", 2);
+__decorateClass([
+  property6({ type: String })
+], YatlIcon.prototype, "label", 2);
+YatlIcon = __decorateClass([
+  customElement8("yatl-icon")
+], YatlIcon);
+
+// src/components/table-ui/table-ui.ts
+import { html as html9 } from "lit";
+import { customElement as customElement9, property as property7 } from "lit/decorators.js";
+import { YatlTable } from "@timlassiter11/yatl";
+
+// src/components/table-ui/table-ui.styles.ts
+import { css as css10 } from "lit";
+var table_ui_styles_default = css10`
+  [part='shell'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--yatl-spacing-m);
+    height: 100%;
+    width: 100%;
+  }
+`;
+
+// src/components/table-ui/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 html9`
+      <div part="shell">
+        <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 = [...__superGet(YatlTableUi, YatlTableUi, "styles"), table_ui_styles_default];
+__decorateClass([
+  property7({ type: Boolean })
+], YatlTableUi.prototype, "showColumnPicker", 2);
+__decorateClass([
+  property7({ type: Boolean })
+], YatlTableUi.prototype, "showExportButton", 2);
+YatlTableUi = __decorateClass([
+  customElement9("yatl-table-ui")
+], YatlTableUi);
+
+// src/components/table-view/table-view.ts
+import { html as html10 } from "lit";
+import { customElement as customElement10 } from "lit/decorators.js";
+import { ContextProvider } from "@lit/context";
+
+// src/context.ts
+import { createContext } from "@lit/context";
+var tableContext = createContext(
+  /* @__PURE__ */ Symbol("table-controller")
+);
+
+// src/components/table-view/table-view.styles.ts
+import { css as css11 } from "lit";
+var table_view_styles_default = css11`
+  main {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  [part='view'] {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    width: 100%;
+  }
+
+  [part='sidebar'] {
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    padding-right: var(--yatl-spacing-m);
+    margin-right: var(--yatl-spacing-m);
+    min-width: 300px;
+    gap: var(--yatl-spacing-l);
+  }
+`;
+
+// src/components/table-view/table-view.ts
+var YatlTableView = class extends YatlTableUi {
+  constructor() {
+    super(...arguments);
+    this.tableContext = new ContextProvider(this, {
+      context: tableContext,
+      initialValue: this.controller
+    });
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("controller")) {
+      this.tableContext.setValue(this.controller);
+    }
+  }
+  render() {
+    return html10`
+      <div part="view">
+        <aside part="sidebar">
+          <slot name="sidebar-start"></slot>
+          <slot part="filters" name="filters"></slot>
+          <slot name="sidebar-end"></slot>
+        </aside>
+        <main>${super.render()}</main>
+      </div>
+    `;
+  }
+};
+YatlTableView.styles = [...__superGet(YatlTableView, YatlTableView, "styles"), table_view_styles_default];
+YatlTableView = __decorateClass([
+  customElement10("yatl-table-view")
+], YatlTableView);
+
+// src/components/tag/tag.ts
+import { html as html11, nothing as nothing3 } from "lit";
+import { customElement as customElement11, property as property8 } from "lit/decorators.js";
+
+// src/components/tag/tag.styles.ts
+import { css as css12 } from "lit";
+var tag_styles_default = css12`
+  :host {
+    --tag-radius: var(--yatl-tag-border-radius, var(--yatl-radius-s));
+    --tag-border-color: var(--yatl-tag-border-color, var(--yatl-border-color));
+    --tag-padding: var(--yatl-tag-padding, var(--yatl-spacing-s));
+    --tag-color: var(--yatl-tag-color, var(--yatl-text-3));
+
+    border-radius: var(--tag-radius);
+    border: 1px solid var(--tag-border-color);
+    display: flex;
+    align-items: center;
+    padding: var(--tag-padding);
+    font-size: 0.85rem;
+    color: var(--tag-color);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    user-select: none;
+  }
+
+  [part='dismiss-button'] {
+    appearance: none;
+    background: none;
+    border: none;
+    margin: 0;
+    padding: 0;
+    flex-shrink: 0;
+    margin-left: var(--yatl-spacing-xs);
+  }
+
+  yatl-button {
+    border: none;
+  }
+
+  yatl-button[part='dismiss-button']::part(base) {
+    padding: 0;
+    margin: 0;
+  }
+
+  yatl-button[part='dismiss-button']::part(base):hover {
+    color: var(--yatl-text-1);
+    background: none;
+  }
+`;
+
+// src/components/tag/tag.ts
+var YatlTag = class extends YatlBase {
+  constructor() {
+    super(...arguments);
+    this.dismissable = false;
+  }
+  render() {
+    return html11`<slot></slot>${this.renderClearIcon()}`;
+  }
+  renderClearIcon() {
+    if (!this.dismissable) {
+      return nothing3;
+    }
+    return html11`
+      <yatl-button
+        variant="plain"
+        color="muted"
+        part="dismiss-button"
+        @click=${this.dismissClick}
+      >
+        <yatl-icon name="close"></yatl-icon>
+      </yatl-button>
+    `;
+  }
+  dismissClick(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    this.dispatchEvent(new YatlTagDismissEvent());
+  }
+};
+YatlTag.styles = [...__superGet(YatlTag, YatlTag, "styles"), tag_styles_default];
+__decorateClass([
+  property8({ type: Boolean, reflect: true })
+], YatlTag.prototype, "dismissable", 2);
+YatlTag = __decorateClass([
+  customElement11("yatl-tag")
+], YatlTag);
+
+// src/components/toolbar/toolbar.ts
+import { html as html12, nothing as nothing4 } from "lit";
+import { customElement as customElement12, property as property9 } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+
+// src/components/toolbar/toolbar.styles.ts
+import { css as css13 } from "lit";
+var toolbar_styles_default = css13`
+  :host {
+    box-sizing: border-box;
+    --toolbar-search-radius: var(
+      --yatl-toolbar-search-radius,
+      var(--yatl-radius-m)
+    );
+    --toolbar-search-padding: var(
+      --yatl-toolbar-search-padding,
+      var(--yatl-spacing-m)
+    );
+    --toolbar-search-bg: var(--yatl-toolbar-search-bg, var(--yatl-surface-2));
+    --toolbar-search-outline-color: var(
+      --yatl-toolbar-search-outline-color,
+      var(--yatl-color-brand)
+    );
+    --toolbar-search-outline-width: var(
+      --yatl-toolbar-search-outline-width,
+      3px
+    );
+  }
+
+  [part='base'] {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+  }
+
+  [part='search'] {
+    flex-grow: 1;
+    line-height: 1;
+    font-size: large;
+  }
+
+  yatl-button-group yatl-button {
+    height: 100%;
+  }
+`;
+
+// src/components/toolbar/toolbar.ts
+var YatlToolbar = class extends YatlBase {
+  constructor() {
+    super(...arguments);
+    this.showColumnPicker = true;
+    this.showExportButton = true;
+    this.handleDropdownSelect = (event) => {
+      event.preventDefault();
+      this.controller?.toggleColumnVisibility(
+        event.item.value,
+        event.item.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 html12`
+      <div part="base">
+        <yatl-input
+          part="search"
+          type="search"
+          placeholder="Search"
+          .value=${this.controller?.searchQuery ?? ""}
+          @input=${this.onSearchInput}
+          @change=${this.onSearchChange}
+        ></yatl-input>
+        <yatl-button-group>
+          ${this.showColumnPicker ? this.renderColumnPicker() : nothing4}
+          ${this.showExportButton ? this.renderExportButton() : nothing4}
+          <slot name="button-group"></slot>
+        </yatl-button-group>
+        <slot></slot>
+      </div>
+    `;
+  }
+  renderColumnPicker() {
+    return html12`
+      <yatl-dropdown
+        part="column-picker"
+        @yatl-dropdown-select=${this.handleDropdownSelect}
+      >
+        <yatl-button
+          slot="trigger"
+          part="column-picker-trigger"
+          title="Show/hide columns"
+          color="raised"
+        >
+          <slot name="column-picker-icon">
+            <yatl-icon name="columns"></yatl-icon>
+          </slot>
+        </yatl-button>
+        ${repeat(
+      this.controller?.displayColumns ?? [],
+      (s) => s.field,
+      (s) => this.renderColumnVisibilityToggle(s)
+    )}
+      </yatl-dropdown>
+    `;
+  }
+  renderColumnVisibilityToggle(column) {
+    const state6 = this.controller.getColumnState(column.field);
+    return html12`
+      <yatl-option
+        part="column-picker-item"
+        checkable
+        label=${column.title ?? column.field}
+        .checked=${state6.visible}
+        .value=${state6.field}
+      ></yatl-option>
+    `;
+  }
+  renderExportButton() {
+    return html12`
+      <yatl-button type="button" color="raised" @click=${this.onExportClick}>
+        <slot name="export-button-icon">
+          <yatl-icon name="download"></yatl-icon>
+        </slot>
+      </yatl-button>
+    `;
+  }
+};
+YatlToolbar.styles = [...__superGet(YatlToolbar, YatlToolbar, "styles"), toolbar_styles_default];
+__decorateClass([
+  property9({ attribute: false })
+], YatlToolbar.prototype, "controller", 1);
+__decorateClass([
+  property9({ type: Boolean })
+], YatlToolbar.prototype, "showColumnPicker", 2);
+__decorateClass([
+  property9({ type: Boolean })
+], YatlToolbar.prototype, "showExportButton", 2);
+YatlToolbar = __decorateClass([
+  customElement12("yatl-toolbar")
+], YatlToolbar);
+
+// src/components/filter-components/base-filter/base-filter.ts
+import { consume } from "@lit/context";
+import { property as property10 } from "lit/decorators.js";
+import {
+  getNestedValue,
+  setNestedValue
+} from "@timlassiter11/yatl";
+var YatlBaseFilter = class extends YatlBase {
+  constructor() {
+    super(...arguments);
+    this.field = "";
+    this.label = "";
+  }
+  get controller() {
+    return this._controller;
+  }
+  set controller(controller) {
+    const oldValue = this._controller;
+    if (oldValue === controller) {
+      return;
+    }
+    oldValue?.detach(this);
+    controller?.attach(this);
+    this._controller = controller;
+    this.updateFilterOptions();
+    this.updateFilters();
+    this.requestUpdate("controller", oldValue);
+  }
+  get value() {
+    return this._value;
+  }
+  set value(value) {
+    const oldValue = this._value;
+    if (oldValue === value) {
+      return;
+    }
+    this._value = value;
+    this.updateFilterOptions();
+    this.updateFilters();
+    this.requestUpdate("value", oldValue);
+  }
+  get filters() {
+    if (!this.controller || typeof this.controller.filters === "function") {
+      return void 0;
+    }
+    return structuredClone(this.controller.filters);
+  }
+  set filters(filters) {
+    if (filters === void 0 || !this.controller || typeof this.controller.filters === "function") {
+      return;
+    }
+    this.controller.filters = filters;
+  }
+  get options() {
+    return this._filterOptions ?? this.controller?.getColumnFilterValues(this.field) ?? /* @__PURE__ */ new Map();
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    const filters = this.filters;
+    if (filters === void 0) {
+      return;
+    }
+    const filtersValue = getNestedValue(filters ?? {}, this.field);
+    if (!filtersValue) {
+      this.value = void 0;
+    }
+  }
+  updateFilters() {
+    if (!this.controller || !this.field) {
+      return;
+    }
+    const filters = this.filters ?? {};
+    setNestedValue(filters, this.field, this.value);
+    this.filters = filters;
+  }
+  updateFilterOptions() {
+    if (this.value === void 0) {
+      this._filterOptions = void 0;
+    } else if (this._filterOptions === void 0) {
+      this._filterOptions = this.controller?.getColumnFilterValues(
+        this.field
+      );
+    }
+  }
+};
+__decorateClass([
+  consume({ context: tableContext, subscribe: true }),
+  property10({ attribute: false })
+], YatlBaseFilter.prototype, "controller", 1);
+__decorateClass([
+  property10({ attribute: false })
+], YatlBaseFilter.prototype, "value", 1);
+__decorateClass([
+  property10({ type: String })
+], YatlBaseFilter.prototype, "field", 2);
+__decorateClass([
+  property10({ type: String })
+], YatlBaseFilter.prototype, "label", 2);
+
+// src/components/filter-components/date-filter/date-filter.ts
+import { html as html13 } from "lit";
+import { customElement as customElement13 } from "lit/decorators.js";
+
+// src/components/filter-components/date-filter/date-filter.styles.ts
+import { css as css14 } from "lit";
+var date_filter_styles_default = css14``;
+
+// src/components/filter-components/date-filter/date-filter.ts
+import { live } from "lit/directives/live.js";
+var YatlDateFilter = class extends YatlBaseFilter {
+  render() {
+    return html13`
+      <yatl-date-input
+        name=${this.field}
+        label=${this.label}
+        .value=${live(this.value)}
+        @change=${this.handleChange}
+      >
+      </yatl-date-input>
+    `;
+  }
+  handleChange(event) {
+    event.stopPropagation();
+    const target = event.target;
+    this.value = target.value ? new Date(target.value) : void 0;
+  }
+};
+YatlDateFilter.styles = [...__superGet(YatlDateFilter, YatlDateFilter, "styles"), date_filter_styles_default];
+YatlDateFilter = __decorateClass([
+  customElement13("yatl-date-filter")
+], YatlDateFilter);
+
+// src/components/filter-components/search-filter/search-filter.ts
+import { html as html14, nothing as nothing5 } from "lit";
+import { customElement as customElement14, property as property11 } from "lit/decorators.js";
+import { repeat as repeat2 } from "lit/directives/repeat.js";
+
+// src/components/filter-components/search-filter/search-filter.styles.ts
+import { css as css15 } from "lit";
+var search_filter_styles_default = css15`
+  [part='option-count'] {
+    font-size: small;
+    color: var(--yatl-text-3);
+  }
+`;
+
+// src/components/filter-components/search-filter/search-filter.ts
+var YatlSearchFilter = class extends YatlBaseFilter {
+  constructor() {
+    super(...arguments);
+    this.size = 4;
+  }
+  render() {
+    return html14`
+      <yatl-search-select
+        name=${this.field}
+        label=${this.label}
+        size=${this.size}
+        .value=${this.value ?? []}
+        @change=${this.handleSelectChange}
+      >
+        ${this.renderSelectOptions()}
+      </yatl-search-select>
+    `;
+  }
+  renderSelectOptions() {
+    if (!this.controller || !this.field) {
+      return nothing5;
+    }
+    return repeat2(
+      this.options.entries(),
+      ([value, _count]) => value,
+      ([value, count]) => this.renderDropdownOption(String(value ?? ""), count)
+    );
+  }
+  renderDropdownOption(value, count) {
+    return html14`
+      <yatl-option value=${value} label=${value} checkable>
+        <span part="option-count" slot="end">${count}</span>
+      </yatl-option>
+    `;
+  }
+  handleSelectChange(event) {
+    const target = event.target;
+    this.value = target.value.length ? target.value : void 0;
+  }
+};
+YatlSearchFilter.styles = [...__superGet(YatlSearchFilter, YatlSearchFilter, "styles"), search_filter_styles_default];
+__decorateClass([
+  property11({ type: Number })
+], YatlSearchFilter.prototype, "size", 2);
+YatlSearchFilter = __decorateClass([
+  customElement14("yatl-search-filter")
+], YatlSearchFilter);
+
+// src/components/filter-components/select-filter/select-filter.ts
+import { html as html15, nothing as nothing6 } from "lit";
+import { customElement as customElement15, property as property12 } from "lit/decorators.js";
+import { repeat as repeat3 } from "lit/directives/repeat.js";
+
+// src/components/filter-components/select-filter/select-filter.styles.ts
+import { css as css16 } from "lit";
+var select_filter_styles_default = css16`
+  [part='option-count'] {
+    font-size: small;
+    color: var(--yatl-text-3);
+  }
+`;
+
+// src/components/filter-components/select-filter/select-filter.ts
+var YatlSelectFilter = class extends YatlBaseFilter {
+  constructor() {
+    super(...arguments);
+    this.placeholder = "";
+    this.maxTags = 3;
+    this.multi = false;
+    this.clearable = false;
+  }
+  render() {
+    return html15`
+      <yatl-select
+        name=${this.field}
+        label=${this.label}
+        placeholder=${this.placeholder}
+        max-tags=${this.maxTags}
+        ?multi=${this.multi}
+        ?clearable=${this.clearable}
+        .value=${this.value ?? []}
+        @change=${this.handleSelectChange}
+      >
+        ${this.renderSelectOptions()}
+      </yatl-select>
+    `;
+  }
+  renderSelectOptions() {
+    if (!this.controller || !this.field) {
+      return nothing6;
+    }
+    return repeat3(
+      this.options.entries(),
+      ([value, _count]) => value,
+      ([value, count]) => this.renderDropdownOption(String(value ?? ""), count)
+    );
+  }
+  renderDropdownOption(value, count) {
+    return html15`
+      <yatl-option value=${value} label=${value} checkable>
+        <span part="option-count" slot="end">${count}</span>
+      </yatl-option>
+    `;
+  }
+  handleSelectChange(event) {
+    const target = event.target;
+    this.value = target.value.length ? target.value : void 0;
+  }
+};
+YatlSelectFilter.styles = [...__superGet(YatlSelectFilter, YatlSelectFilter, "styles"), select_filter_styles_default];
+__decorateClass([
+  property12({ type: String })
+], YatlSelectFilter.prototype, "placeholder", 2);
+__decorateClass([
+  property12({ type: Number, attribute: "max-tags" })
+], YatlSelectFilter.prototype, "maxTags", 2);
+__decorateClass([
+  property12({ type: Boolean, reflect: true })
+], YatlSelectFilter.prototype, "multi", 2);
+__decorateClass([
+  property12({ type: Boolean, reflect: true })
+], YatlSelectFilter.prototype, "clearable", 2);
+YatlSelectFilter = __decorateClass([
+  customElement15("yatl-select-filter")
+], YatlSelectFilter);
+
+// src/components/form-controls/form-control/form-control.ts
+import { html as html16, LitElement as LitElement2 } from "lit";
+import { property as property13, query as query4 } from "lit/decorators.js";
+import { classMap as classMap2 } from "lit/directives/class-map.js";
+
+// src/components/form-controls/form-control/form-control.styles.ts
+import { css as css17 } from "lit";
+var form_control_styles_default = css17`
+  :host {
+    --input-radius: var(--yatl-input-radius, var(--yatl-radius-m));
+    --input-padding: var(--yatl-input-padding, var(--yatl-spacing-m));
+    --input-bg: var(--yatl-input-bg, var(--yatl-surface-2));
+    --input-text: var(--yatl-input-text, var(--yatl-text-1));
+    --input-line-height: var(--yatl-input-line-height, 1.2);
+    --input-min-height: var(
+      --yatl-input-min-height,
+      round(
+        calc(2 * var(--input-padding) + 1em * var(--input-line-height)),
+        1px
+      )
+    );
+    --input-outline-color: var(
+      --yatl-input-outline-color,
+      var(--yatl-color-brand)
+    );
+    --input-outline-width: var(--yatl-input-outline-width, 3px);
+    --input-label-text: var(--yatl-input-label-text, var(--yatl-text-1));
+    --input-label-font-size: var(--yatl-input-label-font-size, large);
+    --input-label-font-weight: var(--yatl-input-label-font-weight, 700);
+
+    --input-hint-text: var(--yatl-input-hint-text, var(--yatl-text-3));
+    --input-hint-font-size: var(--yatl-input-hint-font-size, small);
+    --input-error-text: var(--yatl-input-error-text, var(--yatl-color-danger));
+    --input-error-font-size: var(--yatl-input-error-font-size, small);
+    --input-placeholder-color: var(
+      --yatl-input-placeholder-color,
+      var(--yatl-text-2)
+    );
+
+    display: flex;
+    flex-direction: column;
+  }
+
+  :host([inline]) {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--yatl-spacing-s);
+  }
+
+  .text-input {
+    display: flex;
+    flex-direction: row;
+    gap: 0;
+
+    box-sizing: border-box;
+    border-radius: var(--input-radius);
+    color: var(--input-text);
+    background-color: var(--input-bg);
+    line-height: var(--input-line-height);
+    border: none;
+    font-size: large;
+    padding: var(--input-padding);
+    width: 100%;
+    min-height: var(--input-min-height);
+    justify-content: center;
+  }
+
+  .text-input:focus,
+  .text:focus-visible {
+    outline: var(--input-outline-width) solid var(--input-outline-color);
+    outline-offset: calc(var(--input-outline-width) * -1);
+  }
+
+  [part='label'] {
+    color: var(--input-label-text);
+    font-size: var(--input-label-font-size);
+    font-weight: var(--input-label-font-weight);
+  }
+
+  [part='label']:not(.has-label) {
+    display: none;
+  }
+
+  :host(:not([inline])) [part='label'] {
+    margin-block-end: var(--yatl-spacing-s);
+  }
+
+  input:not([type='checkbox']):not([type='radio']) {
+    height: 100%;
+    min-width: 0px;
+    flex: 1 1 auto;
+
+    margin: 0px;
+    padding: 0px;
+    padding-block: 0px;
+
+    border: none;
+    outline: none;
+    box-shadow: none;
+
+    color: inherit;
+    background-color: transparent;
+    appearance: none;
+
+    cursor: inherit;
+    font: inherit;
+    transition: inherit;
+  }
+
+  [part='hint'] {
+    color: var(--input-hint-text);
+    font-size: var(--input-hint-font-size);
+  }
+
+  [part='hint']:not(.has-hint) {
+    display: none;
+  }
+
+  [part='error'] {
+    color: var(--input-error-text);
+    font-size: var(--input-error-font-size);
+  }
+
+  [part='error']:not(.has-error) {
+    display: none;
+  }
+
+  [part='start'],
+  [part='end'] {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    cursor: default;
+  }
+
+  input::placeholder {
+    color: var(--input-placeholder-color);
+  }
+`;
+
+// src/components/form-controls/form-control/form-control.ts
+var YatlFormControl = class extends YatlBase {
+  constructor() {
+    super();
+    this.slotController = new HasSlotController(
+      this,
+      "hint",
+      "label",
+      "error"
+    );
+    /**
+     * Used to associate the label with the control element
+     */
+    this.inputId = "input";
+    this.name = "";
+    this.label = "";
+    this.hint = "";
+    this.disabled = false;
+    this.readonly = false;
+    this.required = false;
+    this.inline = false;
+    this._errorText = "";
+    this.requiredText = "This field is required";
+    this.handleInputChange = (event) => {
+      if (this.onValueChange?.(event)) {
+        return;
+      }
+      event.stopPropagation();
+      this.setFormValue(this.formValue);
+      this.dispatchEvent(
+        new Event(event.type, { bubbles: true, composed: true })
+      );
+    };
+    this.internals = this.attachInternals();
+  }
+  static {
+    this.formAssociated = true;
+  }
+  static {
+    this.shadowRootOptions = {
+      ...LitElement2.shadowRootOptions,
+      delegatesFocus: true
+    };
+  }
+  static {
+    this.styles = [...super.styles, form_control_styles_default];
+  }
+  onValueChange(_event) {
+  }
+  get errorText() {
+    return this._errorText || this.validationMessage;
+  }
+  set errorText(newValue) {
+    const oldValue = this.errorText;
+    if (newValue === oldValue) return;
+    this._errorText = newValue;
+    this.updateValidity();
+    this.requestUpdate("errorText", oldValue);
+  }
+  get hasLabel() {
+    return this.label ? true : this.slotController.test("label");
+  }
+  get hasHint() {
+    return this.hint ? true : this.slotController.test("hint");
+  }
+  get hasError() {
+    return this.errorText ? true : this.slotController.test("error");
+  }
+  createRenderRoot() {
+    const root2 = super.createRenderRoot();
+    root2.addEventListener("input", this.handleInputChange);
+    root2.addEventListener("change", this.handleInputChange);
+    return root2;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.value && this.defaultValue) {
+      this.value = this.defaultValue;
+    }
+    this.setFormValue(this.formValue);
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("required")) {
+      if (this.formControl && this.formControl.required !== this.required) {
+        this.formControl.required = this.required;
+      }
+      this.updateValidity();
+    }
+    if (changedProperties.has("requiredText")) {
+      this.updateValidity();
+    }
+    if (changedProperties.has("disabled")) {
+      this.setFormValue(this.formValue);
+      this.toggleState("disabled", this.disabled);
+    }
+  }
+  render() {
+    return html16`
+      ${this.renderLabel()} ${this.renderBase(this.renderInput())}
+      ${this.renderHint()} ${this.renderErrorText()}
+    `;
+  }
+  renderBase(contents) {
+    return html16`
+      <div part="base" class="text-input">
+        <slot part="start" name="start"></slot>
+        ${contents}
+        <slot part="end" name="end"></slot>
+      </div>
+    `;
+  }
+  renderLabel() {
+    return html16`
+      <label for="input">
+        <slot name="label">
+          <div part="label" class=${classMap2({ "has-label": this.hasLabel })}>
+            ${this.label}
+          </div>
+        </slot>
+      </label>
+    `;
+  }
+  renderHint() {
+    return html16`
+      <slot
+        name="hint"
+        class=${classMap2({ "has-hint": this.hasHint && !this.hasError })}
+      >
+        <span part="hint">${this.hint}</span>
+      </slot>
+    `;
+  }
+  renderErrorText() {
+    return html16`
+      <slot name="error" class=${classMap2({ "has-error": this.hasError })}>
+        <span part="error">${this.errorText}</span>
+      </slot>
+    `;
+  }
+  get hasErrorText() {
+    return !!this.errorText;
+  }
+  get labels() {
+    return this.internals.labels;
+  }
+  get states() {
+    return this.internals.states;
+  }
+  get validity() {
+    return this.internals.validity;
+  }
+  get validationMessage() {
+    return this.internals.validationMessage;
+  }
+  get willValidate() {
+    return this.internals.willValidate;
+  }
+  get form() {
+    return this.internals.form;
+  }
+  setFormValue(value) {
+    value ||= null;
+    this.internals.setFormValue(this.disabled ? null : value);
+    this.updateValidity();
+  }
+  setValidity(flags, message, anchor) {
+    this.internals.setValidity(flags, message, anchor);
+  }
+  checkValidity() {
+    this.updateValidity();
+    return this.internals.checkValidity();
+  }
+  reportValidity() {
+    const valid = this.checkValidity();
+    if (!valid) {
+      this.focus();
+    }
+    return valid;
+  }
+  formResetCallback() {
+    this.value = this.defaultValue;
+  }
+  updateValidity() {
+    if (this._errorText) {
+      this.setValidity({ customError: true }, this._errorText);
+    } else if (this.required && !this.value) {
+      this.setValidity({ valueMissing: true }, this.requiredText);
+    } else if (this.formControl && !this.formControl.checkValidity()) {
+      this.setValidity(
+        this.formControl.validity,
+        this.formControl.validationMessage
+      );
+    } else {
+      this.setValidity({});
+    }
+  }
+  toggleState(name, state6) {
+    state6 ??= !this.states.has(name);
+    if (state6) {
+      this.states.add(name);
+    } else {
+      this.states.delete(name);
+    }
+  }
+};
+__decorateClass([
+  query4("input")
+], YatlFormControl.prototype, "formControl", 2);
+__decorateClass([
+  query4('slot[name="label"]')
+], YatlFormControl.prototype, "labelSlot", 2);
+__decorateClass([
+  query4('slot[name=""]'),
+  property13({ type: String })
+], YatlFormControl.prototype, "name", 2);
+__decorateClass([
+  property13({ type: String })
+], YatlFormControl.prototype, "label", 2);
+__decorateClass([
+  property13({ type: String })
+], YatlFormControl.prototype, "hint", 2);
+__decorateClass([
+  property13({ type: Boolean, reflect: true })
+], YatlFormControl.prototype, "disabled", 2);
+__decorateClass([
+  property13({ type: Boolean, reflect: true })
+], YatlFormControl.prototype, "readonly", 2);
+__decorateClass([
+  property13({ type: Boolean, reflect: true })
+], YatlFormControl.prototype, "required", 2);
+__decorateClass([
+  property13({ type: Boolean, reflect: true })
+], YatlFormControl.prototype, "inline", 2);
+__decorateClass([
+  property13({ type: String, attribute: "error-text" })
+], YatlFormControl.prototype, "errorText", 1);
+__decorateClass([
+  property13({ type: String, attribute: "required-text" })
+], YatlFormControl.prototype, "requiredText", 2);
+
+// src/components/form-controls/checkbox/checkbox.ts
+import { html as html17 } from "lit";
+import { customElement as customElement16, property as property14, state } from "lit/decorators.js";
+import { live as live2 } from "lit/directives/live.js";
+
+// src/components/form-controls/checkbox/checkbox.styles.ts
+import { css as css18 } from "lit";
+var checkbox_styles_default = css18`
+  :host {
+    --checkbox-accent-color: var(
+      --yatl-checkbox-accent-color,
+      var(--yatl-color-brand)
+    );
+    --checkbox-label-font-weight: var(--yatl-checkbox-font-weight, 600);
+    --checkbox-label-font-szie: var(--yatl-checkbox-font-size, 1rem);
+    --checkbox-size: var(--yatl-checkbox-size, 1.25rem);
+    --checkbox-bg: var(--yatl-checkbox-bg, var(--yatl-surface-1));
+    --checkbox-border: var(--yatl-checkbox-border, var(--yatl-border-color));
+
+    display: inline-flex;
+    align-items: center;
+    gap: var(--yatl-spacing-xs);
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  [part='base'] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--checkbox-size);
+    height: var(--checkbox-size);
+    flex-shrink: 0;
+  }
+
+  [part='input'] {
+    appearance: none;
+    -webkit-appearance: none;
+    margin: 0;
+
+    width: 100%;
+    height: 100%;
+
+    border: 1px solid var(--checkbox-border);
+    border-radius: 4px;
+    background-color: var(--checkbox-bg);
+    cursor: pointer;
+    position: relative;
+    transition: all 0.1s ease-in-out;
+  }
+
+  [part='input']:checked {
+    background-color: var(--checkbox-accent-color);
+    border-color: var(--checkbox-accent-color);
+  }
+
+  [part='input']::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 45%;
+    width: 25%;
+    height: 55%;
+
+    border: solid white;
+    border-width: 0 2px 2px 0;
+
+    transform: translate(-50%, -50%) rotate(45deg) scale(0);
+    transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+
+  [part='input']:checked::after {
+    transform: translate(-50%, -50%) rotate(45deg) scale(1);
+  }
+
+  [part='label'] {
+    font-size: var(--checkbox-label-font-size);
+    font-weight: var(--checkbox-label-font-weight);
+    color: var(--checkbox-label-color);
+    line-height: 1.4;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  [part='input']:focus-visible {
+    outline: 2px solid var(--checkbox-accent-color);
+    outline-offset: 2px;
+  }
+
+  :host(:hover) [part='input'] {
+    border-color: var(--checkbox-accent-color);
+  }
+
+  :host([disabled]) {
+    opacity: 0.6;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+`;
+
+// src/components/form-controls/checkbox/checkbox.ts
+var YatlCheckbox = class extends YatlFormControl {
+  constructor() {
+    super();
+    this._value = this.getAttribute("value") ?? "on";
+    this.defaultChecked = this.hasAttribute("checked");
+    this.alwaysInclude = false;
+    this.inline = true;
+    this._checked = this.hasAttribute("checked");
+    this.handleClick = (event) => {
+      const path = event.composedPath();
+      if (!this.formControl || path.includes(this.formControl)) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      this.formControl.click();
+    };
+    this.addEventListener("click", (event) => this.handleClick(event));
+  }
+  get value() {
+    return this._value;
+  }
+  set value(value) {
+    if (this._value === value) {
+      return;
+    }
+    const oldValue = this._value;
+    this._value = value;
+    this.updateFormValue();
+    this.requestUpdate("value", oldValue);
+  }
+  get defaultValue() {
+    return this.value;
+  }
+  get uncheckedValue() {
+    return this._uncheckedValue;
+  }
+  set uncheckedValue(value) {
+    const oldValue = this.uncheckedValue;
+    this._uncheckedValue = value;
+    this.updateFormValue();
+    this.requestUpdate("uncheckedValue", oldValue);
+  }
+  get checked() {
+    return this._checked;
+  }
+  set checked(value) {
+    this._checked = value;
+    this.toggleState("checked", value);
+    this.updateFormValue();
+  }
+  get formValue() {
+    if (this._checked) {
+      return this.value || "on";
+    } else if (this.alwaysInclude) {
+      return this.uncheckedValue ?? "off";
+    }
+    return null;
+  }
+  formResetCallback() {
+    this.checked = this.defaultChecked;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateFormValue();
+  }
+  render() {
+    return html17`
+      <div part="base">${this.renderInput()}</div>
+      ${this.renderLabel()} ${this.renderHint()} ${this.renderErrorText()}
+    `;
+  }
+  renderInput() {
+    return html17`
+      <input
+        part="input"
+        id=${this.inputId}
+        name=${this.name}
+        type="checkbox"
+        value=${this.value}
+        .checked=${live2(this.checked)}
+        ?readonly=${this.readonly}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+      />
+    `;
+  }
+  updateFormValue() {
+    this.setFormValue(this.formValue);
+  }
+  onValueChange(event) {
+    this.checked = event.target.checked;
+  }
+};
+YatlCheckbox.styles = [...__superGet(YatlCheckbox, YatlCheckbox, "styles"), checkbox_styles_default];
+__decorateClass([
+  property14({ type: String, reflect: true })
+], YatlCheckbox.prototype, "value", 1);
+__decorateClass([
+  property14({ type: String, attribute: "unchecked-value" })
+], YatlCheckbox.prototype, "uncheckedValue", 1);
+__decorateClass([
+  property14({ type: Boolean, attribute: "checked" })
+], YatlCheckbox.prototype, "defaultChecked", 2);
+__decorateClass([
+  property14({ type: Boolean, attribute: "always-include" })
+], YatlCheckbox.prototype, "alwaysInclude", 2);
+__decorateClass([
+  state()
+], YatlCheckbox.prototype, "_checked", 2);
+YatlCheckbox = __decorateClass([
+  customElement16("yatl-checkbox")
+], YatlCheckbox);
+
+// src/components/form-controls/date-input/date-input.ts
+import { html as html18 } from "lit";
+import { customElement as customElement17, property as property15 } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live as live3 } from "lit/directives/live.js";
+
+// src/components/form-controls/date-input/date-input.styles.ts
+import { css as css19 } from "lit";
+var date_input_styles_default = css19``;
+
+// src/components/form-controls/date-input/date-input.ts
+var YatlDateInput = class extends YatlFormControl {
+  constructor() {
+    super(...arguments);
+    this.placeholder = "";
+    this.size = 10;
+  }
+  get value() {
+    return this._value ? new Date(this._value) : void 0;
+  }
+  set value(value) {
+    const oldValue = this._value;
+    if (oldValue?.getTime() === value?.getTime()) {
+      return;
+    }
+    this._value = value ? new Date(value) : void 0;
+    this.requestUpdate("value", oldValue);
+  }
+  get formValue() {
+    return dateConverter.toAttribute(this.value);
+  }
+  renderInput() {
+    const min = dateConverter.toAttribute(this.min) ?? void 0;
+    const max = dateConverter.toAttribute(this.max) ?? void 0;
+    return html18`
+      <input
+        part="input"
+        name=${this.name}
+        type="date"
+        size=${this.size}
+        .value=${live3(this.formValue ?? "")}
+        min=${ifDefined(min)}
+        max=${ifDefined(max)}
+        placeholder=${this.placeholder}
+        ?readonly=${this.readonly}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+      />
+    `;
+  }
+  onValueChange(event) {
+    const input = event.target;
+    this.value = dateConverter.fromAttribute(input.value);
+  }
+};
+YatlDateInput.styles = [...__superGet(YatlDateInput, YatlDateInput, "styles"), date_input_styles_default];
+__decorateClass([
+  property15({ type: String })
+], YatlDateInput.prototype, "placeholder", 2);
+__decorateClass([
+  property15({ type: Number })
+], YatlDateInput.prototype, "size", 2);
+__decorateClass([
+  property15({ converter: dateConverter, reflect: true })
+], YatlDateInput.prototype, "min", 2);
+__decorateClass([
+  property15({ converter: dateConverter, reflect: true })
+], YatlDateInput.prototype, "max", 2);
+__decorateClass([
+  property15({ converter: dateConverter, attribute: "value" })
+], YatlDateInput.prototype, "defaultValue", 2);
+__decorateClass([
+  property15({ attribute: false })
+], YatlDateInput.prototype, "value", 1);
+YatlDateInput = __decorateClass([
+  customElement17("yatl-date-input")
+], YatlDateInput);
+
+// src/components/form-controls/input/input.ts
+import { html as html19, nothing as nothing7 } from "lit";
+import { customElement as customElement18, property as property16 } from "lit/decorators.js";
+import { ifDefined as ifDefined2 } from "lit/directives/if-defined.js";
+import { live as live4 } from "lit/directives/live.js";
+
+// src/components/form-controls/input/input.styles.ts
+import { css as css20 } from "lit";
+var input_styles_default = css20`
+  :host {
+    --input-count-text: var(--yatl-input-count-text, var(--yatl-text-3));
+    --input-count-font-size: var(--yatl-input-count-font-size, small);
+  }
+
+  [part='label-row'] {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: baseline;
+  }
+
+  [part='label-spacer'] {
+    flex-grow: 1;
+  }
+
+  [part='label-count'] {
+    color: var(--input-count-text);
+    font-size: var(--input-count-font-size);
+  }
+`;
+
+// src/components/form-controls/input/input.ts
+var YatlInput = class extends YatlFormControl {
+  constructor() {
+    super(...arguments);
+    this.type = "text";
+    this.size = 15;
+    this.placeholder = "";
+    this.passwordToggle = false;
+    this.showCount = false;
+    this.defaultValue = "";
+    this.value = "";
+  }
+  get formValue() {
+    return this.value;
+  }
+  renderInput() {
+    return html19`
+      <input
+        part="input"
+        name=${this.name}
+        type=${this.type}
+        size=${this.size}
+        .value=${live4(this.value)}
+        value=${this.defaultValue}
+        placeholder=${this.placeholder}
+        minlength=${ifDefined2(this.minlength)}
+        maxlength=${ifDefined2(this.maxlength)}
+        pattern=${ifDefined2(this.pattern)}
+        ?readonly=${this.readonly}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+      />
+    `;
+  }
+  renderLabel() {
+    if (!this.label && !this.showCount) {
+      return nothing7;
+    }
+    return html19`
+      <label part="label">
+        <slot>
+          <span part="label-row">
+            ${super.renderLabel()}
+            <span part="label-spacer"></span>
+            ${this.renderCount()}
+          </span>
+        </slot>
+      </label>
+    `;
+  }
+  renderCount() {
+    const count = this.maxlength ? `${this.value.length}/${this.maxlength}` : `${this.value.length}`;
+    return html19`<span part="label-count">${count}</span>`;
+  }
+  onValueChange(event) {
+    this.value = event.target.value;
+  }
+};
+YatlInput.styles = [...__superGet(YatlInput, YatlInput, "styles"), input_styles_default];
+__decorateClass([
+  property16({ type: String })
+], YatlInput.prototype, "type", 2);
+__decorateClass([
+  property16({ type: Number })
+], YatlInput.prototype, "size", 2);
+__decorateClass([
+  property16()
+], YatlInput.prototype, "pattern", 2);
+__decorateClass([
+  property16({ type: String })
+], YatlInput.prototype, "placeholder", 2);
+__decorateClass([
+  property16({ type: Boolean, attribute: "password-toggle" })
+], YatlInput.prototype, "passwordToggle", 2);
+__decorateClass([
+  property16({ type: Number })
+], YatlInput.prototype, "minlength", 2);
+__decorateClass([
+  property16({ type: Number })
+], YatlInput.prototype, "maxlength", 2);
+__decorateClass([
+  property16({ type: Boolean, attribute: "show-count" })
+], YatlInput.prototype, "showCount", 2);
+__decorateClass([
+  property16({ type: String, attribute: "value" })
+], YatlInput.prototype, "defaultValue", 2);
+__decorateClass([
+  property16({ attribute: false })
+], YatlInput.prototype, "value", 2);
+YatlInput = __decorateClass([
+  customElement18("yatl-input")
+], YatlInput);
+
+// src/components/form-controls/number-input/number-input.ts
+import { html as html20 } from "lit";
+import { customElement as customElement19, property as property17 } from "lit/decorators.js";
+import { ifDefined as ifDefined3 } from "lit/directives/if-defined.js";
+import { live as live5 } from "lit/directives/live.js";
+
+// src/components/form-controls/number-input/number-input.styles.ts
+import { css as css21 } from "lit";
+var number_input_styles_default = css21``;
+
+// src/components/form-controls/number-input/number-input.ts
+var YatlNumberInput = class extends YatlFormControl {
+  constructor() {
+    super(...arguments);
+    this.placeholder = "";
+    this.size = 4;
+  }
+  get formValue() {
+    return this.value ? String(this.value) : "";
+  }
+  renderInput() {
+    return html20`
+      <input
+        part="input"
+        name=${this.name}
+        type="number"
+        size=${this.size}
+        .value=${live5(this.formValue)}
+        min=${ifDefined3(this.min)}
+        max=${ifDefined3(this.max)}
+        ?readonly=${this.readonly}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+      />
+    `;
+  }
+  onValueChange(event) {
+    const input = event.target;
+    this.value = Number(input.value);
+  }
+};
+YatlNumberInput.styles = [...__superGet(YatlNumberInput, YatlNumberInput, "styles"), number_input_styles_default];
+__decorateClass([
+  property17({ type: String })
+], YatlNumberInput.prototype, "placeholder", 2);
+__decorateClass([
+  property17({ type: Number })
+], YatlNumberInput.prototype, "size", 2);
+__decorateClass([
+  property17({ type: Number })
+], YatlNumberInput.prototype, "min", 2);
+__decorateClass([
+  property17({ type: Number })
+], YatlNumberInput.prototype, "max", 2);
+__decorateClass([
+  property17({ type: Number, attribute: "value" })
+], YatlNumberInput.prototype, "defaultValue", 2);
+__decorateClass([
+  property17({ attribute: false })
+], YatlNumberInput.prototype, "value", 2);
+YatlNumberInput = __decorateClass([
+  customElement19("yatl-number-input")
+], YatlNumberInput);
+
+// src/components/form-controls/radio/radio.ts
+import { html as html21 } from "lit";
+import { customElement as customElement20, property as property18, state as state2 } from "lit/decorators.js";
+import { live as live6 } from "lit/directives/live.js";
+
+// src/components/form-controls/radio/radio.styles.ts
+import { css as css22 } from "lit";
+var radio_styles_default = css22`
+  :host {
+    --radio-color: var(--yatl-radio-color, var(--yatl-text-1));
+    --radio-bg: var(--yatl-radio-bg, var(--yatl-surface-1));
+    --radio-accent-color: var(
+      --yatl-checkbox-accent-color,
+      var(--yatl-color-brand)
+    );
+    --radio-label-font-weight: var(--yatl-radio-font-weight, 600);
+    --radio-label-font-szie: var(--yatl-radio-font-size, 1rem);
+    --radio-size: var(--yatl-radio-size, 1.25rem);
+    --radio-scale: var(--yatl-radio-scale, 0.7);
+    --radio-border-width: var(--yatl-radio-border-width, 1px);
+    --radio-border-style: var(--yatl-radio-border-style, solid);
+    --radio-border-color: var(
+      --yatl-radio-border-color,
+      var(--yatl-border-color)
+    );
+    --radio-focus-color: var(--yatl-radio-focus-color, var(--yatl-color-brand));
+    --radio-transition: var(--yatl-radio-transition, 0.2s ease-in-out);
+
+    display: inline-flex;
+    align-items: center;
+    gap: var(--yatl-spacing-xs);
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  [part='base'] {
+    flex: 0 0 auto;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--radio-size);
+    height: var(--radio-size);
+    border-width: var(--radio-border-width);
+    border-style: var(--radio-border-style);
+    border-color: var(--radio-border-color);
+    border-radius: 50%;
+    background-color: var(--radio-bg);
+    color: transparent;
+    transition:
+      background 250ms,
+      border-color 250ms,
+      box-shadow 250ms,
+      color 250ms;
+    transition-timing-function: ease;
+    margin-inline-end: 0.5em;
+  }
+
+  [part='input'] {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    position: absolute;
+    margin: 0;
+  }
+
+  [part='radio'] {
+    display: flex;
+    fill: currentColor;
+    width: var(--radio-size);
+    height: var(--radio-size);
+    scale: var(--radio-scale);
+  }
+
+  :host(:not(:state(checked))) svg circle {
+    opacity: 0;
+  }
+
+  :host(:state(checked)) [part='base'] {
+    color: var(--radio-accent-color);
+    border-color: var(--radio-accent-color);
+  }
+
+  :host(:focus-visible) [part='base'] {
+    outline: var(--radio-focus-color);
+    outline-offset: 3px;
+  }
+
+  :host(:hover) [part='base'] {
+    border-color: var(--radio-accent-color);
+  }
+
+  :host([disabled]) {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  :host([disabled]) [part='radio'] {
+    pointer-events: none;
+  }
+
+  [part='label'] {
+    font-size: var(--checkbox-label-font-size);
+    font-weight: var(--checkbox-label-font-weight);
+    color: var(--checkbox-label-color);
+    line-height: 1;
+    cursor: pointer;
+    user-select: none;
+  }
+`;
+
+// src/components/form-controls/radio/radio.ts
+var YatlRadio = class extends YatlFormControl {
+  constructor() {
+    super();
+    this._value = this.getAttribute("value") ?? "on";
+    this.defaultChecked = this.hasAttribute("checked");
+    this.alwaysInclude = false;
+    this.inline = true;
+    this._checked = this.hasAttribute("checked");
+    this.handleClick = (event) => {
+      const path = event.composedPath();
+      if (!this.formControl || path.includes(this.formControl)) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      this.formControl.click();
+    };
+    this.addEventListener("click", (event) => this.handleClick(event));
+  }
+  get value() {
+    return this._value;
+  }
+  set value(value) {
+    if (this._value === value) {
+      return;
+    }
+    const oldValue = this._value;
+    this._value = value;
+    this.updateFormValue();
+    this.requestUpdate("value", oldValue);
+  }
+  get defaultValue() {
+    return this.value;
+  }
+  get uncheckedValue() {
+    return this._uncheckedValue;
+  }
+  set uncheckedValue(value) {
+    const oldValue = this.uncheckedValue;
+    this._uncheckedValue = value;
+    this.updateFormValue();
+    this.requestUpdate("uncheckedValue", oldValue);
+  }
+  get checked() {
+    return this._checked;
+  }
+  set checked(value) {
+    this._checked = value;
+    this.toggleState("checked", value);
+    this.updateFormValue();
+  }
+  get formValue() {
+    if (this._checked) {
+      return this.value || "on";
+    } else if (this.alwaysInclude) {
+      return this.uncheckedValue ?? "off";
+    }
+    return null;
+  }
+  formResetCallback() {
+    this.checked = this.defaultChecked;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.checked = this.defaultChecked;
+    this.updateFormValue();
+  }
+  render() {
+    return html21`
+      <div part="base">${this.renderInput()}</div>
+      ${this.renderLabel()} ${this.renderHint()} ${this.renderErrorText()}
+    `;
+  }
+  renderInput() {
+    return html21`
+      <input
+        part="input"
+        id=${this.inputId}
+        name=${this.name}
+        type="radio"
+        value=${this.value}
+        .checked=${live6(this.checked)}
+        ?readonly=${this.readonly}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+      />
+      <svg viewBox="0 0 16 16" part="radio">
+        <circle cx="8" cy="8" r="8" />
+      </svg>
+    `;
+  }
+  updateFormValue() {
+    this.setFormValue(this.formValue);
+  }
+  onValueChange(event) {
+    this.checked = event.target.checked;
+  }
+};
+YatlRadio.styles = [...__superGet(YatlRadio, YatlRadio, "styles"), radio_styles_default];
+__decorateClass([
+  property18({ type: String, reflect: true })
+], YatlRadio.prototype, "value", 1);
+__decorateClass([
+  property18({ type: String, attribute: "unchecked-value" })
+], YatlRadio.prototype, "uncheckedValue", 1);
+__decorateClass([
+  property18({ type: Boolean, attribute: "checked" })
+], YatlRadio.prototype, "defaultChecked", 2);
+__decorateClass([
+  property18({ type: Boolean, attribute: "always-include" })
+], YatlRadio.prototype, "alwaysInclude", 2);
+__decorateClass([
+  state2()
+], YatlRadio.prototype, "_checked", 2);
+YatlRadio = __decorateClass([
+  customElement20("yatl-radio")
+], YatlRadio);
+
+// src/components/form-controls/radio-group/radio-group.ts
+import { html as html22 } from "lit";
+import { customElement as customElement21, property as property19 } from "lit/decorators.js";
+
+// src/components/form-controls/radio-group/radio-group.styles.ts
+import { css as css23 } from "lit";
+var radio_group_styles_default = css23`
+  [part='base'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--yatl-radio-group-gap, var(--yatl-spacing-s));
+  }
+`;
+
+// src/components/form-controls/radio-group/radio-group.ts
+var YatlRadioGroup = class extends YatlFormControl {
+  constructor() {
+    super(...arguments);
+    this.defaultValue = this.getAttribute("value") ?? "";
+    this.value = this.getAttribute("value") ?? "";
+  }
+  get formValue() {
+    return this.value;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.value) {
+      const children = this.getAllChildren();
+      let defaultChild = children.find((c) => c.hasAttribute("checked"));
+      if (!defaultChild && this.required) {
+        defaultChild = children.at(0);
+      }
+      const defaultValue = defaultChild?.getAttribute("value");
+      if (defaultValue) {
+        this.value = defaultValue;
+      }
+      for (const child of children) {
+        const childValue = child.getAttribute("value");
+        child.toggleAttribute("checked", childValue === this.value);
+      }
+    }
+  }
+  render() {
+    return html22`
+      ${this.renderLabel()}
+      <div part="base">${this.renderInput()}</div>
+      ${this.renderHint()} ${this.renderErrorText()}
+    `;
+  }
+  renderInput() {
+    return html22`<slot
+      part="group"
+      @slotchange=${this.syncChildStates}
+    ></slot> `;
+  }
+  onValueChange(event) {
+    event.stopPropagation();
+    if (event.type === "change") {
+      const target = event.target;
+      this.value = target.value;
+      this.syncChildStates();
+      return false;
+    }
+    return true;
+  }
+  syncChildStates() {
+    for (const element of this.getAllChildren()) {
+      element.checked = element.value === this.value;
+    }
+  }
+  getAllChildren(includeDisabled = false) {
+    const elements = [...this.querySelectorAll("*")];
+    if (includeDisabled) {
+      return elements;
+    }
+    return elements.filter((c) => !c.disabled);
+  }
+};
+YatlRadioGroup.styles = [...__superGet(YatlRadioGroup, YatlRadioGroup, "styles"), radio_group_styles_default];
+__decorateClass([
+  property19({ type: String, attribute: "value" })
+], YatlRadioGroup.prototype, "defaultValue", 2);
+__decorateClass([
+  property19({ type: String, attribute: false })
+], YatlRadioGroup.prototype, "value", 2);
+YatlRadioGroup = __decorateClass([
+  customElement21("yatl-radio-group")
+], YatlRadioGroup);
+
+// src/components/form-controls/search-select/search-select.ts
+import { html as html23, LitElement as LitElement3 } from "lit";
+import { customElement as customElement22, property as property20, state as state3 } from "lit/decorators.js";
+import { repeat as repeat4 } from "lit/directives/repeat.js";
+
+// src/components/form-controls/search-select/search-select.styles.ts
+import { css as css24 } from "lit";
+var search_select_styles_default = css24`
+  :host {
+    --option-height: var(--yatl-select-option-height, 35px);
+    --options-gap: var(--yatl-select-options-gap, 0);
+    /* We need individual padding variables to calculate text-input height */
+    --input-padding-left: var(
+      --yatl-select-input-padding-left,
+      var(--yatl-spacing-m)
+    );
+    --input-padding-right: var(
+      --yatl-select-input-padding-right,
+      var(--yatl-spacing-m)
+    );
+    --input-padding-top: var(
+      --yatl-select-input-padding-top,
+      var(--yatl-spacing-m)
+    );
+    --input-padding-bottom: var(
+      --yatl-select-input-padding-bottom,
+      var(--yatl-spacing-m)
+    );
+
+    --input-separator-width: var(--yatl-select-input-separator-width, 1px);
+    --input-separator-color: var(
+      --yatl-select-input-separator-color,
+      var(--yatl-border-color)
+    );
+  }
+
+  [part='options'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--options-gap);
+    overflow-y: auto;
+  }
+
+  .text-input {
+    display: flex;
+    flex-direction: column;
+    height: calc(
+      var(--option-height) * var(--size, 4) + var(--input-padding-top) +
+        var(--input-padding-bottom)
+    );
+    overflow: auto;
+    justify-content: flex-start;
+    padding: 0;
+  }
+
+  /* Need the specificity to override form control styles */
+  .text-input > input[part='search'] {
+    flex: 0 0 0%;
+    padding-left: var(--input-padding-left);
+    padding-right: var(--input-padding-right);
+    padding-top: var(--input-padding-top);
+    padding-bottom: var(--input-padding-bottom);
+    border-bottom-width: var(--input-separator-width);
+    border-bottom-style: solid;
+    border-bottom-color: var(--input-separator-color);
+  }
+
+  [part='selected-trash-icon'] {
+    opacity: 0;
+    transition: opacity 0.1s ease;
+  }
+
+  [part='empty-options'] {
+    padding: var(--yatl-spacing-m);
+  }
+
+  /* Make all options the same size */
+  yatl-option,
+  ::slotted(yatl-option) {
+    flex-shrink: 0;
+    height: var(--option-height);
+  }
+
+  yatl-option::part(check) {
+    opacity: 0;
+  }
+
+  yatl-option {
+    --yatl-option-hover-bg: var(--yatl-color-danger);
+  }
+
+  yatl-option:hover [part='selected-trash-icon'] {
+    opacity: 1;
+  }
+`;
+
+// src/components/form-controls/search-select/search-select.ts
+var YatlSearchSelect = class extends YatlFormControl {
+  constructor() {
+    super();
+    this.noMatch = false;
+    this.hasFocus = false;
+    this.placeholder = "Search";
+    this.noResultsText = "No matching options...";
+    this.matchWidth = true;
+    this.size = 4;
+    this.defaultValue = [];
+    this._value = [];
+    this.handleOptionClick = (event) => {
+      if (event.target instanceof YatlOption) {
+        this.hasFocus = true;
+        event.preventDefault();
+        event.stopPropagation();
+        this.toggleOption(event.target.value, event.target.checked);
+        this.dispatchChange();
+      }
+    };
+    this.handleFocus = (event) => {
+      const path = event.composedPath();
+      if (!path.includes(this)) {
+        this.hasFocus = false;
+      } else if (this.formControl && path.includes(this.formControl)) {
+        this.hasFocus = true;
+      }
+    };
+    this.addEventListener("click", this.handleOptionClick);
+  }
+  get value() {
+    return [...this._value];
+  }
+  set value(value) {
+    const oldValue = this._value;
+    this._value = [...value];
+    this.setFormValue(this.formValue);
+    this.updateSelectedOptions();
+    this.requestUpdate("value", oldValue);
+  }
+  get formValue() {
+    const data = new FormData();
+    for (const value of this.value) {
+      data.append(this.name, value);
+    }
+    return data;
+  }
+  get hasSelection() {
+    return this.value.length > 0;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("focusin", this.handleFocus);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("focusin", this.handleFocus);
+  }
+  toggleOption(value, state6) {
+    const newValue = new Set(this.value);
+    if (state6 === void 0) {
+      state6 = !this.value.includes(value);
+    }
+    if (state6) {
+      newValue.add(value);
+    } else {
+      newValue.delete(value);
+    }
+    this.value = [...newValue];
+  }
+  render() {
+    return html23`
+      ${this.renderLabel()}
+      <div part="base">${this.renderInput()}</div>
+      ${this.renderHint()}${this.renderErrorText()}
+    `;
+  }
+  renderInput() {
+    return html23`
+      <div class="text-input" style=${`--size: ${this.size + 1}`}>
+        <input
+          part="search"
+          type="search"
+          placeholder=${this.placeholder}
+          @input=${this.handleInput}
+        />
+        ${this.renderContents()}
+      </div>
+    `;
+  }
+  renderContents() {
+    if ((this.hasFocus || !this.hasSelection) && !this.noMatch) {
+      return html23`<slot
+        part="options"
+        @slotchange=${this.handleSlotChange}
+      ></slot>`;
+    } else if (this.noMatch) {
+      return html23`<span part="empty-options">${this.noResultsText}</span>`;
+    }
+    return this.renderSelectedOptions();
+  }
+  renderSelectedOptions() {
+    const options = this.getSelectedOptions();
+    return repeat4(
+      options,
+      (option) => option.value,
+      (option) => this.renderOption(option)
+    );
+  }
+  renderOption(option) {
+    return html23`
+      <yatl-option
+        value=${option.value}
+        label=${option.label}
+        checkable
+        @click=${this.handleSelectedOptionClick}
+      >
+        <yatl-icon
+          part="selected-trash-icon"
+          slot="end"
+          name="trash"
+        ></yatl-icon>
+      </yatl-option>
+    `;
+  }
+  handleInput(event) {
+    event.stopPropagation();
+    const query5 = event.target.value.toLocaleLowerCase();
+    this.updateVisibleOptions(query5);
+  }
+  handleSlotChange() {
+    this.updateSelectedOptions();
+  }
+  handleSelectedOptionClick(event) {
+    event.stopPropagation();
+    const target = event.currentTarget;
+    this.toggleOption(target.value, false);
+    target.remove();
+    this.dispatchChange();
+  }
+  updateVisibleOptions(query5) {
+    let noMatch = query5 ? true : false;
+    for (const option of this.getAllOptions()) {
+      if (!query5) {
+        option.hidden = false;
+        continue;
+      }
+      const text = option.label.toLocaleLowerCase();
+      const match = text?.includes(query5) ?? false;
+      option.hidden = !match;
+      if (match) {
+        noMatch = false;
+      }
+    }
+    this.noMatch = noMatch;
+  }
+  updateSelectedOptions() {
+    for (const option of this.getAllOptions()) {
+      option.checkable = true;
+      option.checked = this.value.includes(option.value);
+    }
+  }
+  getSelectedOptions() {
+    const options = this.getAllOptions().filter((o) => o.checked);
+    const optionMap = new Map(options.map((o) => [o.value, o]));
+    return this.value.map((v) => optionMap.get(v)).filter((o) => o !== void 0);
+  }
+  getAllOptions(includeDisabled = false) {
+    const options = [...this.querySelectorAll(":not([slot])")];
+    return includeDisabled ? options : options.filter((o) => !o.disabled);
+  }
+  dispatchChange() {
+    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+  }
+};
+YatlSearchSelect.styles = [...__superGet(YatlSearchSelect, YatlSearchSelect, "styles"), search_select_styles_default];
+YatlSearchSelect.shadowRootOptions = {
+  ...LitElement3.shadowRootOptions,
+  // We have to use manual focus delegation for this one
+  // or else when the user tries to clear a selection option
+  // it sends focus to the input and shows all the options.
+  delegatesFocus: false
+};
+__decorateClass([
+  state3()
+], YatlSearchSelect.prototype, "noMatch", 2);
+__decorateClass([
+  state3()
+], YatlSearchSelect.prototype, "hasFocus", 2);
+__decorateClass([
+  property20({ type: String })
+], YatlSearchSelect.prototype, "placeholder", 2);
+__decorateClass([
+  property20({ type: String, attribute: "no-results-text" })
+], YatlSearchSelect.prototype, "noResultsText", 2);
+__decorateClass([
+  property20({ type: Boolean, attribute: "match-width" })
+], YatlSearchSelect.prototype, "matchWidth", 2);
+__decorateClass([
+  property20({ type: Number, reflect: true })
+], YatlSearchSelect.prototype, "size", 2);
+__decorateClass([
+  property20({ type: Array, attribute: "value" })
+], YatlSearchSelect.prototype, "defaultValue", 2);
+__decorateClass([
+  property20({ attribute: false })
+], YatlSearchSelect.prototype, "value", 1);
+YatlSearchSelect = __decorateClass([
+  customElement22("yatl-search-select")
+], YatlSearchSelect);
+
+// src/components/form-controls/select/select.ts
+import { html as html24, nothing as nothing8 } from "lit";
+import { customElement as customElement23, property as property21 } from "lit/decorators.js";
+import { repeat as repeat5 } from "lit/directives/repeat.js";
+
+// src/components/form-controls/select/select.styles.ts
+import { css as css25 } from "lit";
+var select_styles_default = css25`
+  :host {
+    --select-arrow-color: var(--yatl-select-arrow-color, var(--yatl-text-3));
+    --select-arrow-hover-color: var(
+      --yatl-select-arrow-hover-color,
+      var(--yatl-text-1)
+    );
+    --select-clear-color: var(--yatl-select-clear-color, var(--yatl-text-3));
+    --select-clear-hover-color: var(
+      --yatl-select-clear-hover-color,
+      var(--yatl-text-1)
+    );
+  }
+
+  .text-input {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    position: relative;
+    padding: 0 var(--input-padding);
+  }
+
+  [part='input'] {
+    width: 100%;
+  }
+
+  .input-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+  }
+
+  [part='tags'] {
+    display: flex;
+    flex-direction: row;
+    gap: var(--yatl-spacing-xs);
+    flex-wrap: wrap;
+    margin-left: calc(var(--yatl-spacing-s) * -1);
+    flex-grow: 1;
+    padding: var(--yatl-spacing-xs) 0;
+  }
+
+  :host(:not([multi])) [part='tags'] {
+    display: none;
+  }
+
+  [part='clear-icon'],
+  [part='arrow-icon'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.15rem;
+    height: 1.15rem;
+    background-color: inherit;
+    margin-left: var(--yatl-spacing-xs);
+    z-index: 1;
+    flex-shrink: 0;
+  }
+
+  yatl-button[part='clear-icon'] {
+    border: none;
+  }
+
+  yatl-button[part='clear-icon']::part(base) {
+    appearance: none;
+    background: none;
+    border: none;
+    margin: 0;
+    padding: 0;
+    color: var(--select-clear-color);
+    margin-right: var(--yatl-spacing-xs);
+  }
+
+  [part='arrow-icon'] {
+    transition: transform 0.2s ease-in-out;
+    pointer-events: none;
+    color: var(--select-arrow-color);
+  }
+
+  :host(:hover) [part='arrow-icon'] {
+    color: var(--select-arrow-hover-color);
+  }
+
+  [part='clear-icon']:hover ~ [part='arrow-icon'] {
+    color: var(--select-arrow-color, gray);
+  }
+
+  [part='clear-icon']:hover {
+    color: var(--select-clear-hover-color);
+  }
+
+  :host(:state(open)) [part='arrow-icon'],
+  :host([open]) [part='arrow-icon'] {
+    transform: rotate(-180deg);
+  }
+`;
+
+// src/components/form-controls/select/select.ts
+var YatlSelect = class extends YatlFormControl {
+  constructor() {
+    super(...arguments);
+    this.placeholder = "";
+    this.multi = false;
+    this.maxTags = 3;
+    this.defaultValue = [];
+    this.open = false;
+    this.clearable = false;
+    // Mutable value types need to be copied
+    // so the user's changes don't mess things up.
+    this._value = [];
+  }
+  get value() {
+    return [...this._value];
+  }
+  set value(value) {
+    const oldValue = this._value;
+    this._value = [...value];
+    this.updateSelectedOptions();
+    this.setFormValue(this.formValue);
+    this.requestUpdate("value", oldValue);
+  }
+  get formValue() {
+    const data = new FormData();
+    for (const value of this.value) {
+      data.append(this.name, value);
+    }
+    return data;
+  }
+  toggleOption(value, state6) {
+    const newValue = new Set(this.multi ? this.value : []);
+    if (state6 === void 0) {
+      state6 = !this.value.includes(value);
+    }
+    if (state6) {
+      newValue.add(value);
+    } else {
+      newValue.delete(value);
+    }
+    this.value = [...newValue];
+  }
+  render() {
+    return html24`
+      ${this.renderLabel()}
+      <div part="base">${this.renderInput()}</div>
+      ${this.renderHint()}${this.renderErrorText()}
+    `;
+  }
+  renderInput() {
+    return html24`
+      <yatl-dropdown
+        .open=${this.open}
+        @yatl-dropdown-select=${this.handleDropdownSelect}
+        @yatl-dropdown-open=${this.handleDropdownToggle}
+        @yatl-dropdown-close=${this.handleDropdownToggle}
+      >
+        <div class="text-input" slot="trigger" tabindex="0">
+          <div class="input-row">
+            ${this.renderDisplayValue()}${this.renderTags()}
+            ${this.renderClearIcon()} ${this.renderArrowIcon()}
+          </div>
+        </div>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </yatl-dropdown>
+    `;
+  }
+  renderDisplayValue() {
+    if (this.multi) {
+      return nothing8;
+    }
+    const selectedOption = this.getSelectedOptions().at(0);
+    const displayValue = selectedOption?.label;
+    return html24`
+      <span part="input">${displayValue ?? this.placeholder}</span>
+    `;
+  }
+  renderTags() {
+    if (!this.multi) {
+      return nothing8;
+    }
+    let extraTag = nothing8;
+    const selectedOptions = this.getSelectedOptions();
+    if (selectedOptions.length > this.maxTags) {
+      extraTag = html24`<yatl-tag
+        >+${selectedOptions.length - this.maxTags}</yatl-tag
+      >`;
+    }
+    return html24`
+      <div part="tags">
+        ${repeat5(
+      selectedOptions.slice(0, this.maxTags),
+      (option) => option.value,
+      (option) => this.renderTag(option)
+    )}
+        ${extraTag}
+      </div>
+    `;
+  }
+  renderTag(option) {
+    return html24`<yatl-tag
+      dismissable
+      @yatl-tag-dismiss=${(event) => this.handleTagDissmiss(option, event)}
+      >${option.label}</yatl-tag
+    >`;
+  }
+  renderClearIcon() {
+    if (!this.clearable || this.value.length === 0) {
+      return nothing8;
+    }
+    return html24`
+      <yatl-button
+        part="clear-icon"
+        slot="end"
+        @click=${this.handleClearButtonClick}
+      >
+        <yatl-icon name="close"></yatl-icon>
+      </yatl-button>
+    `;
+  }
+  renderArrowIcon() {
+    return html24`
+      <yatl-icon part="arrow-icon" name="chevron-down"></yatl-icon>
+    `;
+  }
+  handleTagDissmiss(option, event) {
+    event.target.remove();
+    this.toggleOption(option.value, false);
+    this.dispatchChange();
+  }
+  handleSlotChange() {
+    this.updateSelectedOptions();
+  }
+  handleClearButtonClick(event) {
+    event.stopPropagation();
+    this.value = [];
+    this.dispatchChange();
+  }
+  handleDropdownToggle(event) {
+    const target = event.target;
+    if (target.open) {
+      this.states.add("open");
+    } else {
+      this.states.delete("open");
+    }
+    this.open = target.open;
+  }
+  handleDropdownSelect(event) {
+    if (this.multi) {
+      event.preventDefault();
+    }
+    const item = event.item;
+    this.toggleOption(item.value, item.checked);
+    this.dispatchChange();
+  }
+  updateSelectedOptions() {
+    for (const option of this.getAllOptions()) {
+      option.checkable = true;
+      option.checked = this.value.includes(option.value);
+    }
+  }
+  getSelectedOptions() {
+    const options = this.getAllOptions().filter((o) => o.checked);
+    const optionMap = new Map(options.map((o) => [o.value, o]));
+    return this.value.map((v) => optionMap.get(v)).filter((o) => o !== void 0);
+  }
+  getAllOptions() {
+    return [...this.querySelectorAll("yatl-option")];
+  }
+  dispatchChange() {
+    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+  }
+};
+YatlSelect.styles = [...__superGet(YatlSelect, YatlSelect, "styles"), select_styles_default];
+__decorateClass([
+  property21({ type: String })
+], YatlSelect.prototype, "placeholder", 2);
+__decorateClass([
+  property21({ type: Boolean, reflect: true })
+], YatlSelect.prototype, "multi", 2);
+__decorateClass([
+  property21({ type: Number, attribute: "max-tags" })
+], YatlSelect.prototype, "maxTags", 2);
+__decorateClass([
+  property21({ type: Array, attribute: "value" })
+], YatlSelect.prototype, "defaultValue", 2);
+__decorateClass([
+  property21({ type: Boolean, reflect: true })
+], YatlSelect.prototype, "open", 2);
+__decorateClass([
+  property21({ type: Boolean, reflect: true })
+], YatlSelect.prototype, "clearable", 2);
+__decorateClass([
+  property21({ attribute: false })
+], YatlSelect.prototype, "value", 1);
+YatlSelect = __decorateClass([
+  customElement23("yatl-select")
+], YatlSelect);
+
+// src/components/form-controls/switch/switch.ts
+import { html as html25 } from "lit";
+import { customElement as customElement24, property as property22, state as state4 } from "lit/decorators.js";
+import { live as live7 } from "lit/directives/live.js";
+
+// src/components/form-controls/switch/switch.styles.ts
+import { css as css26 } from "lit";
+var switch_styles_default = css26`
+  :host {
+    --switch-color: var(--yatl-switch-color, var(--yatl-text-1));
+    --switch-bg: var(--yatl-switch-bg, var(--yatl-surface-1));
+    --switch-accent: var(--yatl-switch-accent, var(--yatl-color-brand));
+    --switch-border-color: var(
+      --yatl-switch-border-color,
+      var(--yatl-border-color)
+    );
+
+    --height: var(--yatl-switch-size, 1rem);
+    --width: calc(var(--height) * 1.75);
+    --thumb-size: 0.75em;
+
+    display: inline-flex;
+    line-height: var(--yatl-switch-line-height, 1);
+    cursor: pointer;
+  }
+
+  [part='base'] {
+    position: relative;
+    width: fit-content;
+  }
+
+  [part='label'] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    font: inherit;
+    color: var(--wa-form-control-value-color);
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  .switch {
+    flex: 0 0 auto;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--width);
+    height: var(--height);
+    background-color: var(--switch-bg);
+    border: 1px solid var(--switch-border-color);
+    border-radius: var(--height);
+    transition-property: translate, background, border-color, box-shadow;
+    transition-duration: 150ms;
+    transition-timing-function: ease;
+  }
+
+  .switch .thumb {
+    aspect-ratio: 1 / 1;
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    background-color: var(--switch-border-color);
+    border-radius: 50%;
+    translate: calc((var(--width) - var(--height)) / -2);
+    transition: inherit;
+  }
+
+  .input {
+    position: absolute;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  label:not(.disabled) .input:focus-visible ~ .switch .thumb {
+    outline: var(--wa-focus-ring);
+    outline-offset: var(--wa-focus-ring-offset);
+  }
+
+  :host(:hover) .switch {
+    border-color: var(--switch-accent);
+  }
+
+  :host(:state(checked)) .switch {
+    background-color: var(--switch-accent);
+    border-color: var(--switch-accent);
+  }
+
+  :host(:state(checked)) .switch .thumb {
+    background-color: var(--switch-bg);
+    translate: calc((var(--width) - var(--height)) / 2);
+  }
+
+  [part~='label'] {
+    display: inline-block;
+    line-height: var(--height);
+    margin-inline-start: 0.5em;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+`;
+
+// src/components/form-controls/switch/switch.ts
+var YatlSwitch = class extends YatlFormControl {
+  constructor() {
+    super();
+    this._value = this.getAttribute("value") ?? "on";
+    this.defaultChecked = this.hasAttribute("checked");
+    this.alwaysInclude = false;
+    this.inline = true;
+    this._checked = this.hasAttribute("checked");
+    this.handleClick = (event) => {
+      const path = event.composedPath();
+      if (!this.formControl || path.includes(this.formControl)) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      this.formControl.click();
+    };
+    this.addEventListener("click", (event) => this.handleClick(event));
+  }
+  get value() {
+    return this._value;
+  }
+  set value(value) {
+    if (this._value === value) {
+      return;
+    }
+    const oldValue = this._value;
+    this._value = value;
+    this.updateFormValue();
+    this.requestUpdate("value", oldValue);
+  }
+  get defaultValue() {
+    return this.value;
+  }
+  get uncheckedValue() {
+    return this._uncheckedValue;
+  }
+  set uncheckedValue(value) {
+    const oldValue = this.uncheckedValue;
+    this._uncheckedValue = value;
+    this.updateFormValue();
+    this.requestUpdate("uncheckedValue", oldValue);
+  }
+  get checked() {
+    return this._checked;
+  }
+  set checked(value) {
+    this._checked = value;
+    this.toggleState("checked", value);
+    this.updateFormValue();
+  }
+  get formValue() {
+    if (this._checked) {
+      return this.value || "on";
+    } else if (this.alwaysInclude) {
+      return this.uncheckedValue ?? "off";
+    }
+    return null;
+  }
+  formResetCallback() {
+    this.checked = this.defaultChecked;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.checked = this.defaultChecked;
+    this.updateFormValue();
+  }
+  render() {
+    return html25`
+      <div part="base">${this.renderInput()}</div>
+      ${this.renderLabel()} ${this.renderHint()} ${this.renderErrorText()}
+    `;
+  }
+  renderInput() {
+    return html25`
+      <input
+        class="input"
+        id=${this.inputId}
+        name=${this.name}
+        type="checkbox"
+        value=${this.value}
+        .checked=${live7(this.checked)}
+        ?readonly=${this.readonly}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+        role="switch"
+      />
+      <span part="control" class="switch">
+        <span part="thumb" class="thumb"></span>
+      </span>
+    `;
+  }
+  updateFormValue() {
+    this.setFormValue(this.formValue);
+  }
+  onValueChange(event) {
+    this.checked = event.target.checked;
+  }
+};
+YatlSwitch.styles = [...__superGet(YatlSwitch, YatlSwitch, "styles"), switch_styles_default];
+__decorateClass([
+  property22({ type: String, reflect: true })
+], YatlSwitch.prototype, "value", 1);
+__decorateClass([
+  property22({ type: String, attribute: "unchecked-value" })
+], YatlSwitch.prototype, "uncheckedValue", 1);
+__decorateClass([
+  property22({ type: Boolean, attribute: "checked" })
+], YatlSwitch.prototype, "defaultChecked", 2);
+__decorateClass([
+  property22({ type: Boolean, attribute: "always-include" })
+], YatlSwitch.prototype, "alwaysInclude", 2);
+__decorateClass([
+  state4()
+], YatlSwitch.prototype, "_checked", 2);
+YatlSwitch = __decorateClass([
+  customElement24("yatl-switch")
+], YatlSwitch);
+
+// src/components/form-controls/typeahead/typeahead.ts
+import { html as html26, nothing as nothing9 } from "lit";
+import { customElement as customElement25, property as property23, state as state5 } from "lit/decorators.js";
+import { live as live8 } from "lit/directives/live.js";
+import { repeat as repeat6 } from "lit/directives/repeat.js";
+
+// src/components/form-controls/typeahead/typeahead.styles.ts
+import { css as css27 } from "lit";
+var typeahead_styles_default = css27``;
+
+// src/components/form-controls/typeahead/typeahead.ts
+var YatlTypeahead = class extends YatlFormControl {
+  constructor() {
+    super(...arguments);
+    this._uri = "";
+    this._minQueryLength = 3;
+    this._searchParam = "search";
+    this._debounceTimer = 0;
+    this.loading = false;
+    this.error = false;
+    this.options = /* @__PURE__ */ new Set();
+    this.open = false;
+    this.placeholder = "";
+    this.defaultValue = "";
+    this.value = "";
+    this.searchDebounce = 200;
+  }
+  get formValue() {
+    return this.value;
+  }
+  get uri() {
+    return this._uri;
+  }
+  set uri(uri) {
+    if (this._uri === uri) {
+      return;
+    }
+    const oldValue = this._uri;
+    this._uri = uri;
+    this.scheduleUpdate();
+    this.requestUpdate("uri", oldValue);
+  }
+  get minQueryLength() {
+    return this._minQueryLength;
+  }
+  set minQueryLength(value) {
+    if (this._minQueryLength === value) {
+      return;
+    }
+    const oldValue = this._minQueryLength;
+    const wasSearching = this.canSearch;
+    this._minQueryLength = value;
+    if (!wasSearching && this.canSearch) {
+      this.scheduleUpdate();
+    }
+    this.requestUpdate("minQueryLength", oldValue);
+  }
+  get searchParam() {
+    return this._searchParam;
+  }
+  set searchParam(value) {
+    if (this._searchParam === value) {
+      return;
+    }
+    const oldValue = this._searchParam;
+    this._searchParam = value;
+    this.scheduleUpdate();
+    this.requestUpdate("searchParam", oldValue);
+  }
+  get hasOptions() {
+    return this.options.size > 0;
+  }
+  get canSearch() {
+    return !!this.uri && this.value.length >= this.minQueryLength;
+  }
+  render() {
+    return html26`
+      ${this.renderLabel()}
+      <yatl-dropdown
+        .open=${live8(this.open)}
+        @yatl-dropdown-select=${this.handleDropdownSelect}
+        @yatl-dropdown-open-request=${this.handleDropdownRequest}
+        @yatl-dropdown-close-request=${this.handleDropdownRequest}
+        @yatl-dropdown-close=${this.handleDropdownClose}
+      >
+        <div slot="trigger" part="base" class="text-input">
+          <slot part="start" name="start"></slot>
+          <input
+            slot="trigger"
+            part="input"
+            id="input"
+            name=${this.name}
+            type="text"
+            .value=${live8(this.value)}
+            value=${this.defaultValue}
+            placeholder=${this.placeholder}
+            ?readonly=${this.readonly}
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+          />
+          <slot part="end" name="end"></slot>
+        </div>
+        ${this.renderDropdownContent()}
+      </yatl-dropdown>
+      ${this.renderHint()} ${this.renderErrorText()}
+    `;
+  }
+  renderInput() {
+  }
+  renderDropdownContent() {
+    if (this.error) {
+      return html26`<span class="message" part="error"
+        >Failed to get results</span
+      >`;
+    }
+    if (this.loading) {
+      return html26`<span class="message" part="loading">Loading...</span>`;
+    }
+    if (this.canSearch && !this.hasOptions) {
+      return html26`<span class="message" part="empty-options"
+        >No results found...</span
+      >`;
+    }
+    if (this.hasOptions) {
+      return repeat6(this.options, (option) => this.renderOption(option));
+    }
+    return nothing9;
+  }
+  renderOption(option) {
+    return html26`<yatl-option value=${option} label=${option}></yatl-option>`;
+  }
+  onValueChange(event) {
+    if (event.type === "change") {
+      return true;
+    }
+    const target = event.target;
+    if (this.value !== target.value) {
+      this.value = target.value;
+      this.scheduleFetch();
+      this.open = this.canSearch;
+    }
+  }
+  handleDropdownSelect(event) {
+    this.value = event.item.value;
+  }
+  handleDropdownRequest(event) {
+    event.preventDefault();
+  }
+  handleDropdownClose() {
+    this.open = false;
+  }
+  scheduleFetch() {
+    if (!this.canSearch) {
+      return;
+    }
+    this.loading = true;
+    clearTimeout(this._debounceTimer);
+    this._debounceTimer = window.setTimeout(
+      () => this.updateOptions(),
+      this.searchDebounce
+    );
+  }
+  async updateOptions() {
+    if (!this.canSearch) {
+      return;
+    }
+    let url;
+    try {
+      url = new URL(this.uri);
+    } catch {
+      url = new URL(this.uri, window.location.toString());
+    }
+    let json;
+    url.searchParams.set(this.searchParam, this.value);
+    try {
+      const response = await fetch(url);
+      if (!response.ok) {
+        this.error = true;
+        return;
+      }
+      json = await response.json();
+    } catch {
+      this.error = true;
+      return;
+    } finally {
+      this.loading = false;
+    }
+    let options;
+    if (this.parser) {
+      options = this.parser(json);
+    } else if (Array.isArray(json)) {
+      options = json.map((o) => String(o));
+    } else {
+      options = [String(json)];
+    }
+    this.options = new Set(options);
+  }
+};
+YatlTypeahead.styles = [...__superGet(YatlTypeahead, YatlTypeahead, "styles"), typeahead_styles_default];
+__decorateClass([
+  state5()
+], YatlTypeahead.prototype, "loading", 2);
+__decorateClass([
+  state5()
+], YatlTypeahead.prototype, "error", 2);
+__decorateClass([
+  state5()
+], YatlTypeahead.prototype, "options", 2);
+__decorateClass([
+  state5()
+], YatlTypeahead.prototype, "open", 2);
+__decorateClass([
+  property23({ type: String })
+], YatlTypeahead.prototype, "placeholder", 2);
+__decorateClass([
+  property23({ type: String, attribute: "value" })
+], YatlTypeahead.prototype, "defaultValue", 2);
+__decorateClass([
+  property23({ attribute: false })
+], YatlTypeahead.prototype, "value", 2);
+__decorateClass([
+  property23({ type: String })
+], YatlTypeahead.prototype, "uri", 1);
+__decorateClass([
+  property23({ type: Number, attribute: "min-query-length" })
+], YatlTypeahead.prototype, "minQueryLength", 1);
+__decorateClass([
+  property23({ type: String, attribute: "search-param" })
+], YatlTypeahead.prototype, "searchParam", 1);
+__decorateClass([
+  property23({ type: Number, attribute: "search-debounce" })
+], YatlTypeahead.prototype, "searchDebounce", 2);
+__decorateClass([
+  property23({ attribute: false })
+], YatlTypeahead.prototype, "parser", 2);
+YatlTypeahead = __decorateClass([
+  customElement25("yatl-typeahead")
+], YatlTypeahead);
+
+// src/index.ts
+import { html as html27, noChange, nothing as nothing10, svg as svg2 } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+export {
+  HasSlotController,
+  YatlBaseFilter,
+  YatlButton,
+  YatlButtonGroup,
+  YatlCard,
+  YatlCheckbox,
+  YatlConfirmationDialog,
+  YatlDateFilter,
+  YatlDateInput,
+  YatlDialog,
+  YatlDropdown,
+  YatlFormControl,
+  YatlIcon,
+  YatlInput,
+  YatlNumberInput,
+  YatlOption,
+  YatlRadio,
+  YatlRadioGroup,
+  YatlSearchFilter,
+  YatlSearchSelect,
+  YatlSelect,
+  YatlSelectFilter,
+  YatlSwitch,
+  YatlTableUi,
+  YatlTableView,
+  YatlTag,
+  YatlToolbar,
+  YatlTypeahead,
+  activeElements,
+  animateWithClass,
+  dateConverter,
+  getEffectiveChildren,
+  getInnerHTML,
+  html27 as html,
+  noChange,
+  nothing10 as nothing,
+  svg2 as svg,
+  unsafeHTML
+};
+//# sourceMappingURL=index.mjs.map