@hypoth-ui/wc 0.1.1

package/dist/chunk-DNNI5BDE.js

@@ -0,0 +1,1842 @@
+import {
+  emitEvent
+} from "./chunk-YDQ434UH.js";
+import {
+  DSElement,
+  __decorateClass,
+  define
+} from "./chunk-H4GJJZ3N.js";
+
+// src/components/table/table.ts
+import { html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var DsTable = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.size = "default";
+    this.striped = false;
+    this.borderless = false;
+    this.fixed = false;
+    this.stickyHeader = false;
+    this.caption = "";
+  }
+  static {
+    this.styles = [];
+  }
+  render() {
+    const classes = {
+      "ds-table": true
+    };
+    return html`
+      <table
+        class=${classMap(classes)}
+        role="grid"
+        data-size=${this.size !== "default" ? this.size : nothing}
+        ?data-striped=${this.striped}
+        ?data-borderless=${this.borderless}
+        ?data-fixed=${this.fixed}
+        ?data-sticky-header=${this.stickyHeader}
+      >
+        ${this.caption ? html`<caption class="ds-table__caption">${this.caption}</caption>` : nothing}
+        <slot></slot>
+      </table>
+    `;
+  }
+};
+__decorateClass([
+  property({ type: String, reflect: true })
+], DsTable.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DsTable.prototype, "striped", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DsTable.prototype, "borderless", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DsTable.prototype, "fixed", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "sticky-header", reflect: true })
+], DsTable.prototype, "stickyHeader", 2);
+__decorateClass([
+  property({ type: String })
+], DsTable.prototype, "caption", 2);
+define("ds-table", DsTable);
+
+// src/components/table/table-header.ts
+import { html as html2 } from "lit";
+var DsTableHeader = class extends DSElement {
+  static {
+    this.styles = [];
+  }
+  render() {
+    return html2`
+      <thead class="ds-table__header" role="rowgroup">
+        <slot></slot>
+      </thead>
+    `;
+  }
+};
+define("ds-table-header", DsTableHeader);
+
+// src/components/table/table-body.ts
+import { html as html3 } from "lit";
+var DsTableBody = class extends DSElement {
+  static {
+    this.styles = [];
+  }
+  render() {
+    return html3`
+      <tbody class="ds-table__body" role="rowgroup">
+        <slot></slot>
+      </tbody>
+    `;
+  }
+};
+define("ds-table-body", DsTableBody);
+
+// src/components/table/table-row.ts
+import { html as html4, nothing as nothing2 } from "lit";
+import { property as property2 } from "lit/decorators.js";
+var DsTableRow = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.rowId = "";
+    this.selected = false;
+  }
+  static {
+    this.styles = [];
+  }
+  render() {
+    return html4`
+      <tr
+        class="ds-table__row"
+        role="row"
+        ?data-selected=${this.selected}
+        aria-selected=${this.selected ? "true" : nothing2}
+      >
+        <slot></slot>
+      </tr>
+    `;
+  }
+};
+__decorateClass([
+  property2({ type: String, attribute: "row-id" })
+], DsTableRow.prototype, "rowId", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], DsTableRow.prototype, "selected", 2);
+define("ds-table-row", DsTableRow);
+
+// src/components/table/table-head.ts
+import { html as html5, nothing as nothing3 } from "lit";
+import { property as property3 } from "lit/decorators.js";
+var sortIcon = html5`
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+    <path d="M12 5v14M5 12l7-7 7 7" />
+  </svg>
+`;
+var DsTableHead = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.column = "";
+    this.align = "left";
+    this.sortable = false;
+    this.sortDirection = "none";
+    this.width = "";
+  }
+  static {
+    this.styles = [];
+  }
+  handleClick() {
+    if (!this.sortable) return;
+    emitEvent(this, "sort", {
+      detail: {
+        column: this.column,
+        direction: this.getNextDirection()
+      }
+    });
+  }
+  handleKeyDown(event) {
+    if (!this.sortable) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.handleClick();
+    }
+  }
+  getNextDirection() {
+    if (this.sortDirection === "none") return "asc";
+    if (this.sortDirection === "asc") return "desc";
+    return "none";
+  }
+  /**
+   * Get the aria-sort attribute value.
+   * Per APG, sortable columns should always have aria-sort:
+   * - "ascending" for A-Z or low-high sort
+   * - "descending" for Z-A or high-low sort
+   * - "none" when sortable but not currently sorted
+   */
+  getAriaSort() {
+    if (this.sortDirection === "asc") return "ascending";
+    if (this.sortDirection === "desc") return "descending";
+    return "none";
+  }
+  render() {
+    const style = this.width ? `width: ${this.width}` : "";
+    return html5`
+      <th
+        class="ds-table__head"
+        role="columnheader"
+        scope="col"
+        data-align=${this.align !== "left" ? this.align : nothing3}
+        ?data-sortable=${this.sortable}
+        data-sort-direction=${this.sortable ? this.sortDirection : nothing3}
+        aria-sort=${this.sortable ? this.getAriaSort() : nothing3}
+        tabindex=${this.sortable ? 0 : nothing3}
+        style=${style || nothing3}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      >
+        <slot></slot>
+        ${this.sortable ? html5`<span class="ds-table__sort-icon">${sortIcon}</span>` : nothing3}
+      </th>
+    `;
+  }
+};
+__decorateClass([
+  property3({ type: String })
+], DsTableHead.prototype, "column", 2);
+__decorateClass([
+  property3({ type: String, reflect: true })
+], DsTableHead.prototype, "align", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], DsTableHead.prototype, "sortable", 2);
+__decorateClass([
+  property3({ type: String, attribute: "sort-direction", reflect: true })
+], DsTableHead.prototype, "sortDirection", 2);
+__decorateClass([
+  property3({ type: String })
+], DsTableHead.prototype, "width", 2);
+define("ds-table-head", DsTableHead);
+
+// src/components/table/table-cell.ts
+import { html as html6, nothing as nothing4 } from "lit";
+import { property as property4 } from "lit/decorators.js";
+var DsTableCell = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.align = "left";
+    this.colspan = 1;
+    this.rowspan = 1;
+  }
+  static {
+    this.styles = [];
+  }
+  render() {
+    return html6`
+      <td
+        class="ds-table__cell"
+        role="gridcell"
+        data-align=${this.align !== "left" ? this.align : nothing4}
+        colspan=${this.colspan > 1 ? this.colspan : nothing4}
+        rowspan=${this.rowspan > 1 ? this.rowspan : nothing4}
+      >
+        <slot></slot>
+      </td>
+    `;
+  }
+};
+__decorateClass([
+  property4({ type: String, reflect: true })
+], DsTableCell.prototype, "align", 2);
+__decorateClass([
+  property4({ type: Number })
+], DsTableCell.prototype, "colspan", 2);
+__decorateClass([
+  property4({ type: Number })
+], DsTableCell.prototype, "rowspan", 2);
+define("ds-table-cell", DsTableCell);
+
+// src/components/data-table/data-table.ts
+import { html as html7, nothing as nothing5 } from "lit";
+import { property as property5, state } from "lit/decorators.js";
+import { classMap as classMap2 } from "lit/directives/class-map.js";
+var chevronIcon = html7`
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+    <path d="M15 18l-6-6 6-6" />
+  </svg>
+`;
+var DsDataTable = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.virtualized = false;
+    this.rowHeight = 48;
+    this.overscan = 5;
+    this.totalRows = 0;
+    this.page = 1;
+    this.pageSize = 10;
+    this.pageSizes = "10,25,50,100";
+    this.selectable = false;
+    this.selectionMode = "multiple";
+    this.loading = false;
+    this.sortColumn = "";
+    this.sortDirection = "none";
+    this.filter = "";
+    this.emptyMessage = "No data available";
+    this.selectedRows = /* @__PURE__ */ new Set();
+    this.sortAnnouncement = "";
+  }
+  static {
+    this.styles = [];
+  }
+  get pageSizeOptions() {
+    return this.pageSizes.split(",").map((s) => Number(s.trim()));
+  }
+  get totalPages() {
+    return Math.ceil(this.totalRows / this.pageSize);
+  }
+  get startRow() {
+    return (this.page - 1) * this.pageSize + 1;
+  }
+  get endRow() {
+    return Math.min(this.page * this.pageSize, this.totalRows);
+  }
+  handleSort(column) {
+    let newDirection = "asc";
+    if (this.sortColumn === column) {
+      if (this.sortDirection === "asc") {
+        newDirection = "desc";
+      } else if (this.sortDirection === "desc") {
+        newDirection = "none";
+      }
+    }
+    this.sortColumn = newDirection === "none" ? "" : column;
+    this.sortDirection = newDirection;
+    this.announceSortChange(column, newDirection);
+    emitEvent(this, "sort", {
+      detail: {
+        column: this.sortColumn,
+        direction: this.sortDirection
+      }
+    });
+  }
+  /**
+   * Announce sort state changes to screen readers.
+   * Uses a live region to provide immediate feedback.
+   */
+  announceSortChange(column, direction) {
+    if (direction === "asc") {
+      this.sortAnnouncement = `Sorted by ${column}, ascending`;
+    } else if (direction === "desc") {
+      this.sortAnnouncement = `Sorted by ${column}, descending`;
+    } else {
+      this.sortAnnouncement = "Sort cleared";
+    }
+    setTimeout(() => {
+      this.sortAnnouncement = "";
+    }, 1e3);
+  }
+  handlePageChange(newPage) {
+    if (newPage < 1 || newPage > this.totalPages) return;
+    this.page = newPage;
+    emitEvent(this, "page-change", { detail: { page: newPage } });
+  }
+  handlePageSizeChange(event) {
+    const select = event.target;
+    const newSize = Number(select.value);
+    this.pageSize = newSize;
+    this.page = 1;
+    emitEvent(this, "page-size-change", { detail: { pageSize: newSize } });
+  }
+  toggleRowSelection(rowId) {
+    if (!this.selectable) return;
+    if (this.selectionMode === "single") {
+      this.selectedRows.clear();
+      this.selectedRows.add(rowId);
+    } else {
+      if (this.selectedRows.has(rowId)) {
+        this.selectedRows.delete(rowId);
+      } else {
+        this.selectedRows.add(rowId);
+      }
+    }
+    emitEvent(this, "selection-change", {
+      detail: { selectedRows: Array.from(this.selectedRows) }
+    });
+    this.requestUpdate();
+  }
+  clearSelection() {
+    this.selectedRows.clear();
+    emitEvent(this, "selection-change", { detail: { selectedRows: [] } });
+    this.requestUpdate();
+  }
+  isRowSelected(rowId) {
+    return this.selectedRows.has(rowId);
+  }
+  renderPagination() {
+    const pages = [];
+    const maxButtons = 5;
+    let start = Math.max(1, this.page - Math.floor(maxButtons / 2));
+    const end = Math.min(this.totalPages, start + maxButtons - 1);
+    if (end - start + 1 < maxButtons) {
+      start = Math.max(1, end - maxButtons + 1);
+    }
+    for (let i = start; i <= end; i++) {
+      pages.push(i);
+    }
+    return html7`
+      <div class="ds-data-table__pagination">
+        <button
+          type="button"
+          class="ds-data-table__page-button"
+          ?disabled=${this.page === 1}
+          @click=${() => this.handlePageChange(this.page - 1)}
+          aria-label="Previous page"
+        >
+          ${chevronIcon}
+        </button>
+
+        ${pages.map(
+      (p) => html7`
+            <button
+              type="button"
+              class="ds-data-table__page-button"
+              ?data-active=${p === this.page}
+              @click=${() => this.handlePageChange(p)}
+              aria-label="Page ${p}"
+              aria-current=${p === this.page ? "page" : nothing5}
+            >
+              ${p}
+            </button>
+          `
+    )}
+
+        <button
+          type="button"
+          class="ds-data-table__page-button"
+          ?disabled=${this.page === this.totalPages}
+          @click=${() => this.handlePageChange(this.page + 1)}
+          aria-label="Next page"
+          style="transform: rotate(180deg)"
+        >
+          ${chevronIcon}
+        </button>
+      </div>
+    `;
+  }
+  render() {
+    const classes = {
+      "ds-data-table": true
+    };
+    return html7`
+      <div
+        class=${classMap2(classes)}
+        role="region"
+        aria-label="Data table"
+        aria-busy=${this.loading ? "true" : nothing5}
+        ?data-loading=${this.loading}
+      >
+        <!-- Live region for sort announcements (APG compliance) -->
+        <div
+          class="ds-data-table__live-region"
+          role="status"
+          aria-live="polite"
+          aria-atomic="true"
+          style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;"
+        >
+          ${this.sortAnnouncement}
+        </div>
+        ${this.selectedRows.size > 0 ? html7`
+              <div class="ds-data-table__selection-info">
+                <span class="ds-data-table__selection-count">
+                  ${this.selectedRows.size} selected
+                </span>
+                <button
+                  type="button"
+                  class="ds-data-table__clear-selection"
+                  @click=${this.clearSelection}
+                >
+                  Clear
+                </button>
+              </div>
+            ` : nothing5}
+
+        <div
+          class=${this.virtualized ? "ds-data-table__virtualized" : "ds-data-table__container"}
+        >
+          <slot></slot>
+
+          ${this.loading ? html7`
+                <div class="ds-data-table__loading">
+                  <ds-spinner size="lg"></ds-spinner>
+                </div>
+              ` : nothing5}
+        </div>
+
+        ${this.totalRows > 0 ? html7`
+              <div class="ds-data-table__footer">
+                <div class="ds-data-table__info">
+                  Showing ${this.startRow}-${this.endRow} of ${this.totalRows}
+                </div>
+
+                <div class="ds-data-table__per-page">
+                  <span>Rows per page:</span>
+                  <select @change=${this.handlePageSizeChange}>
+                    ${this.pageSizeOptions.map(
+      (size) => html7`
+                        <option value=${size} ?selected=${size === this.pageSize}>
+                          ${size}
+                        </option>
+                      `
+    )}
+                  </select>
+                </div>
+
+                ${this.renderPagination()}
+              </div>
+            ` : nothing5}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property5({ type: Boolean, reflect: true })
+], DsDataTable.prototype, "virtualized", 2);
+__decorateClass([
+  property5({ type: Number, attribute: "row-height" })
+], DsDataTable.prototype, "rowHeight", 2);
+__decorateClass([
+  property5({ type: Number })
+], DsDataTable.prototype, "overscan", 2);
+__decorateClass([
+  property5({ type: Number, attribute: "total-rows" })
+], DsDataTable.prototype, "totalRows", 2);
+__decorateClass([
+  property5({ type: Number })
+], DsDataTable.prototype, "page", 2);
+__decorateClass([
+  property5({ type: Number, attribute: "page-size" })
+], DsDataTable.prototype, "pageSize", 2);
+__decorateClass([
+  property5({ type: String, attribute: "page-sizes" })
+], DsDataTable.prototype, "pageSizes", 2);
+__decorateClass([
+  property5({ type: Boolean, reflect: true })
+], DsDataTable.prototype, "selectable", 2);
+__decorateClass([
+  property5({ type: String, attribute: "selection-mode" })
+], DsDataTable.prototype, "selectionMode", 2);
+__decorateClass([
+  property5({ type: Boolean, reflect: true })
+], DsDataTable.prototype, "loading", 2);
+__decorateClass([
+  property5({ type: String, attribute: "sort-column" })
+], DsDataTable.prototype, "sortColumn", 2);
+__decorateClass([
+  property5({ type: String, attribute: "sort-direction" })
+], DsDataTable.prototype, "sortDirection", 2);
+__decorateClass([
+  property5({ type: String })
+], DsDataTable.prototype, "filter", 2);
+__decorateClass([
+  property5({ type: String, attribute: "empty-message" })
+], DsDataTable.prototype, "emptyMessage", 2);
+__decorateClass([
+  state()
+], DsDataTable.prototype, "selectedRows", 2);
+__decorateClass([
+  state()
+], DsDataTable.prototype, "sortAnnouncement", 2);
+define("ds-data-table", DsDataTable);
+
+// src/components/avatar/avatar.ts
+import { html as html8, nothing as nothing6 } from "lit";
+import { property as property6, state as state2 } from "lit/decorators.js";
+import { classMap as classMap3 } from "lit/directives/class-map.js";
+var defaultUserIcon = html8`
+  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+    <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
+  </svg>
+`;
+var DsAvatar = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.src = "";
+    this.alt = "";
+    this.name = "";
+    this.size = "md";
+    this.shape = "circle";
+    this.showStatus = false;
+    this.imageError = false;
+  }
+  static {
+    this.styles = [];
+  }
+  get initials() {
+    if (!this.name) return "";
+    const names = this.name.trim().split(/\s+/);
+    if (names.length === 0) return "";
+    if (names.length === 1) {
+      return (names[0] ?? "").charAt(0).toUpperCase();
+    }
+    const first = names[0] ?? "";
+    const last = names[names.length - 1] ?? "";
+    return (first.charAt(0) + last.charAt(0)).toUpperCase();
+  }
+  get showImage() {
+    return Boolean(this.src && !this.imageError);
+  }
+  get showInitials() {
+    return !this.showImage && Boolean(this.initials);
+  }
+  get showIcon() {
+    return !this.showImage && !this.showInitials;
+  }
+  handleImageError() {
+    this.imageError = true;
+  }
+  handleImageLoad() {
+    this.imageError = false;
+  }
+  render() {
+    const classes = {
+      "ds-avatar": true
+    };
+    return html8`
+      <span
+        class=${classMap3(classes)}
+        role="img"
+        aria-label=${this.alt || this.name || "Avatar"}
+        data-size=${this.size}
+        data-shape=${this.shape !== "circle" ? this.shape : nothing6}
+      >
+        ${this.showImage ? html8`
+              <img
+                part="image"
+                class="ds-avatar__image"
+                src=${this.src}
+                alt=""
+                @error=${this.handleImageError}
+                @load=${this.handleImageLoad}
+              />
+            ` : nothing6}
+        ${this.showInitials ? html8`
+              <span part="initials" class="ds-avatar__initials">
+                ${this.initials}
+              </span>
+            ` : nothing6}
+        ${this.showIcon ? html8`
+              <span part="icon" class="ds-avatar__icon">
+                ${defaultUserIcon}
+              </span>
+            ` : nothing6}
+        ${this.showStatus && this.status ? html8`
+              <span
+                part="status"
+                class="ds-avatar__status"
+                data-status=${this.status}
+                aria-label=${`Status: ${this.status}`}
+              ></span>
+            ` : nothing6}
+      </span>
+    `;
+  }
+};
+__decorateClass([
+  property6({ type: String })
+], DsAvatar.prototype, "src", 2);
+__decorateClass([
+  property6({ type: String })
+], DsAvatar.prototype, "alt", 2);
+__decorateClass([
+  property6({ type: String })
+], DsAvatar.prototype, "name", 2);
+__decorateClass([
+  property6({ type: String, reflect: true })
+], DsAvatar.prototype, "size", 2);
+__decorateClass([
+  property6({ type: String, reflect: true })
+], DsAvatar.prototype, "shape", 2);
+__decorateClass([
+  property6({ type: String })
+], DsAvatar.prototype, "status", 2);
+__decorateClass([
+  property6({ type: Boolean, attribute: "show-status" })
+], DsAvatar.prototype, "showStatus", 2);
+__decorateClass([
+  state2()
+], DsAvatar.prototype, "imageError", 2);
+define("ds-avatar", DsAvatar);
+
+// src/components/avatar/avatar-group.ts
+import { html as html9, nothing as nothing7 } from "lit";
+import { property as property7, state as state3 } from "lit/decorators.js";
+import { classMap as classMap4 } from "lit/directives/class-map.js";
+var DsAvatarGroup = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.max = 5;
+    this.size = "md";
+    this.overflowCount = 0;
+    this.visibleAvatars = [];
+  }
+  static {
+    this.styles = [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateAvatarVisibility();
+    const observer = new MutationObserver(() => this.updateAvatarVisibility());
+    observer.observe(this, { childList: true });
+  }
+  updateAvatarVisibility() {
+    const avatars = Array.from(this.querySelectorAll("ds-avatar"));
+    const total = avatars.length;
+    if (total <= this.max) {
+      this.visibleAvatars = avatars;
+      this.overflowCount = 0;
+    } else {
+      this.visibleAvatars = avatars.slice(0, this.max);
+      this.overflowCount = total - this.max;
+    }
+    avatars.forEach((avatar, index) => {
+      if (index >= this.max) {
+        avatar.style.display = "none";
+      } else {
+        avatar.style.display = "";
+      }
+    });
+    this.requestUpdate();
+  }
+  render() {
+    const classes = {
+      "ds-avatar-group": true
+    };
+    return html9`
+      <div
+        class=${classMap4(classes)}
+        role="group"
+        aria-label="Avatar group"
+        data-size=${this.size}
+      >
+        ${this.overflowCount > 0 ? html9`
+              <span
+                part="overflow"
+                class="ds-avatar-group__overflow"
+                aria-label="${this.overflowCount} more users"
+              >
+                +${this.overflowCount}
+              </span>
+            ` : nothing7}
+        <slot @slotchange=${this.updateAvatarVisibility}></slot>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property7({ type: Number })
+], DsAvatarGroup.prototype, "max", 2);
+__decorateClass([
+  property7({ type: String, reflect: true })
+], DsAvatarGroup.prototype, "size", 2);
+__decorateClass([
+  state3()
+], DsAvatarGroup.prototype, "overflowCount", 2);
+__decorateClass([
+  state3()
+], DsAvatarGroup.prototype, "visibleAvatars", 2);
+define("ds-avatar-group", DsAvatarGroup);
+
+// src/components/badge/badge.ts
+import { html as html10, nothing as nothing8 } from "lit";
+import { property as property8 } from "lit/decorators.js";
+import { classMap as classMap5 } from "lit/directives/class-map.js";
+var DsBadge = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.content = "";
+    this.variant = "primary";
+    this.size = "md";
+    this.outline = false;
+    this.dot = false;
+    this.position = "top-right";
+    this.pulse = false;
+  }
+  static {
+    this.styles = [];
+  }
+  get displayContent() {
+    if (this.dot) return "";
+    if (this.max !== void 0 && !Number.isNaN(Number(this.content))) {
+      const count = Number(this.content);
+      if (count > this.max) {
+        return `${this.max}+`;
+      }
+    }
+    return this.content;
+  }
+  render() {
+    const classes = {
+      "ds-badge": true
+    };
+    return html10`
+      <span
+        class=${classMap5(classes)}
+        role="status"
+        data-variant=${this.variant}
+        data-size=${this.size !== "md" ? this.size : nothing8}
+        ?data-outline=${this.outline}
+        ?data-dot=${this.dot}
+        data-position=${this.position}
+        ?data-pulse=${this.pulse}
+        aria-label=${this.dot ? "Notification indicator" : `${this.displayContent} notifications`}
+      >
+        ${this.dot ? nothing8 : this.displayContent}
+      </span>
+    `;
+  }
+};
+__decorateClass([
+  property8({ type: String })
+], DsBadge.prototype, "content", 2);
+__decorateClass([
+  property8({ type: Number })
+], DsBadge.prototype, "max", 2);
+__decorateClass([
+  property8({ type: String, reflect: true })
+], DsBadge.prototype, "variant", 2);
+__decorateClass([
+  property8({ type: String, reflect: true })
+], DsBadge.prototype, "size", 2);
+__decorateClass([
+  property8({ type: Boolean, reflect: true })
+], DsBadge.prototype, "outline", 2);
+__decorateClass([
+  property8({ type: Boolean, reflect: true })
+], DsBadge.prototype, "dot", 2);
+__decorateClass([
+  property8({ type: String, reflect: true })
+], DsBadge.prototype, "position", 2);
+__decorateClass([
+  property8({ type: Boolean, reflect: true })
+], DsBadge.prototype, "pulse", 2);
+define("ds-badge", DsBadge);
+
+// src/components/tag/tag.ts
+import { html as html11, nothing as nothing9 } from "lit";
+import { property as property9 } from "lit/decorators.js";
+import { classMap as classMap6 } from "lit/directives/class-map.js";
+var closeIcon = html11`
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+    <path d="M18 6L6 18M6 6l12 12" />
+  </svg>
+`;
+var DsTag = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "neutral";
+    this.size = "md";
+    this.solid = false;
+    this.removable = false;
+    this.clickable = false;
+    this.disabled = false;
+    this.value = "";
+  }
+  static {
+    this.styles = [];
+  }
+  handleRemove(event) {
+    event.stopPropagation();
+    if (this.disabled) return;
+    emitEvent(this, "remove", {
+      detail: { value: this.value }
+    });
+  }
+  handleClick() {
+    if (!this.clickable || this.disabled) return;
+    emitEvent(this, "click", {
+      detail: { value: this.value }
+    });
+  }
+  handleKeyDown(event) {
+    if (this.disabled) return;
+    if (event.key === "Enter" || event.key === " ") {
+      if (this.clickable) {
+        event.preventDefault();
+        this.handleClick();
+      }
+    } else if (event.key === "Backspace" || event.key === "Delete") {
+      if (this.removable) {
+        event.preventDefault();
+        emitEvent(this, "remove", { detail: { value: this.value } });
+      }
+    }
+  }
+  render() {
+    const classes = {
+      "ds-tag": true
+    };
+    return html11`
+      <span
+        class=${classMap6(classes)}
+        role=${this.clickable ? "button" : "status"}
+        tabindex=${this.clickable && !this.disabled ? 0 : nothing9}
+        data-variant=${this.variant}
+        data-size=${this.size !== "md" ? this.size : nothing9}
+        ?data-solid=${this.solid}
+        ?data-clickable=${this.clickable}
+        ?data-disabled=${this.disabled}
+        aria-disabled=${this.disabled ? "true" : nothing9}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      >
+        <slot name="icon"></slot>
+        <slot></slot>
+        ${this.removable ? html11`
+              <button
+                type="button"
+                class="ds-tag__remove"
+                aria-label="Remove"
+                ?disabled=${this.disabled}
+                @click=${this.handleRemove}
+              >
+                ${closeIcon}
+              </button>
+            ` : nothing9}
+      </span>
+    `;
+  }
+};
+__decorateClass([
+  property9({ type: String, reflect: true })
+], DsTag.prototype, "variant", 2);
+__decorateClass([
+  property9({ type: String, reflect: true })
+], DsTag.prototype, "size", 2);
+__decorateClass([
+  property9({ type: Boolean, reflect: true })
+], DsTag.prototype, "solid", 2);
+__decorateClass([
+  property9({ type: Boolean, reflect: true })
+], DsTag.prototype, "removable", 2);
+__decorateClass([
+  property9({ type: Boolean, reflect: true })
+], DsTag.prototype, "clickable", 2);
+__decorateClass([
+  property9({ type: Boolean, reflect: true })
+], DsTag.prototype, "disabled", 2);
+__decorateClass([
+  property9({ type: String })
+], DsTag.prototype, "value", 2);
+define("ds-tag", DsTag);
+
+// src/components/calendar/calendar.ts
+import { html as html12, nothing as nothing10 } from "lit";
+import { property as property10, state as state4 } from "lit/decorators.js";
+import { classMap as classMap7 } from "lit/directives/class-map.js";
+var chevronLeftIcon = html12`
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+    <path d="M15 18l-6-6 6-6" />
+  </svg>
+`;
+var chevronRightIcon = html12`
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+    <path d="M9 18l6-6-6-6" />
+  </svg>
+`;
+var DsCalendar = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.min = "";
+    this.max = "";
+    this.disabledDates = "";
+    this.locale = "en-US";
+    this.size = "default";
+    this.firstDayOfWeek = 0;
+    this.viewDate = /* @__PURE__ */ new Date();
+  }
+  static {
+    this.styles = [];
+  }
+  get selectedDate() {
+    return this.value ? new Date(this.value) : null;
+  }
+  get minDate() {
+    return this.min ? new Date(this.min) : null;
+  }
+  get maxDate() {
+    return this.max ? new Date(this.max) : null;
+  }
+  get disabledDateSet() {
+    if (!this.disabledDates) return /* @__PURE__ */ new Set();
+    return new Set(this.disabledDates.split(",").map((d) => d.trim()));
+  }
+  get weekdayNames() {
+    const formatter = new Intl.DateTimeFormat(this.locale, { weekday: "short" });
+    const days = [];
+    const baseDate = new Date(2024, 0, 7);
+    for (let i = 0; i < 7; i++) {
+      const day = new Date(baseDate);
+      day.setDate(baseDate.getDate() + (i + this.firstDayOfWeek) % 7);
+      days.push(formatter.format(day));
+    }
+    return days;
+  }
+  get monthYearLabel() {
+    const formatter = new Intl.DateTimeFormat(this.locale, {
+      month: "long",
+      year: "numeric"
+    });
+    return formatter.format(this.viewDate);
+  }
+  get calendarDays() {
+    const days = [];
+    const year = this.viewDate.getFullYear();
+    const month = this.viewDate.getMonth();
+    const firstOfMonth = new Date(year, month, 1);
+    const startDayOfWeek = firstOfMonth.getDay();
+    const daysFromPrevMonth = (startDayOfWeek - this.firstDayOfWeek + 7) % 7;
+    for (let i = daysFromPrevMonth; i > 0; i--) {
+      const date = new Date(year, month, 1 - i);
+      days.push({ date, isOutside: true });
+    }
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    for (let i = 1; i <= daysInMonth; i++) {
+      days.push({ date: new Date(year, month, i), isOutside: false });
+    }
+    const remaining = 42 - days.length;
+    for (let i = 1; i <= remaining; i++) {
+      const date = new Date(year, month + 1, i);
+      days.push({ date, isOutside: true });
+    }
+    return days;
+  }
+  isToday(date) {
+    const today = /* @__PURE__ */ new Date();
+    return date.getDate() === today.getDate() && date.getMonth() === today.getMonth() && date.getFullYear() === today.getFullYear();
+  }
+  isSelected(date) {
+    if (!this.selectedDate) return false;
+    return date.getDate() === this.selectedDate.getDate() && date.getMonth() === this.selectedDate.getMonth() && date.getFullYear() === this.selectedDate.getFullYear();
+  }
+  isDisabled(date) {
+    const dateStr = date.toISOString().split("T")[0] ?? "";
+    if (dateStr && this.disabledDateSet.has(dateStr)) return true;
+    if (this.minDate && date < this.minDate) return true;
+    if (this.maxDate && date > this.maxDate) return true;
+    return false;
+  }
+  formatDateISO(date) {
+    return date.toISOString().split("T")[0] ?? "";
+  }
+  handlePrevMonth() {
+    const newDate = new Date(this.viewDate);
+    newDate.setMonth(newDate.getMonth() - 1);
+    this.viewDate = newDate;
+    emitEvent(this, "month-change", {
+      detail: {
+        month: newDate.getMonth() + 1,
+        year: newDate.getFullYear()
+      }
+    });
+  }
+  handleNextMonth() {
+    const newDate = new Date(this.viewDate);
+    newDate.setMonth(newDate.getMonth() + 1);
+    this.viewDate = newDate;
+    emitEvent(this, "month-change", {
+      detail: {
+        month: newDate.getMonth() + 1,
+        year: newDate.getFullYear()
+      }
+    });
+  }
+  handleDateSelect(date) {
+    if (this.isDisabled(date)) return;
+    this.value = this.formatDateISO(date);
+    emitEvent(this, "change", {
+      detail: {
+        value: this.value,
+        date: date.toISOString()
+      }
+    });
+  }
+  handleKeyDown(event, date) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.handleDateSelect(date);
+    }
+  }
+  render() {
+    const classes = {
+      "ds-calendar": true
+    };
+    return html12`
+      <div
+        class=${classMap7(classes)}
+        role="application"
+        aria-label="Calendar"
+        data-size=${this.size !== "default" ? this.size : nothing10}
+      >
+        <div class="ds-calendar__header">
+          <button
+            type="button"
+            class="ds-calendar__nav-button"
+            aria-label="Previous month"
+            @click=${this.handlePrevMonth}
+          >
+            ${chevronLeftIcon}
+          </button>
+          <span class="ds-calendar__title" aria-live="polite">
+            ${this.monthYearLabel}
+          </span>
+          <button
+            type="button"
+            class="ds-calendar__nav-button"
+            aria-label="Next month"
+            @click=${this.handleNextMonth}
+          >
+            ${chevronRightIcon}
+          </button>
+        </div>
+
+        <div class="ds-calendar__weekdays" role="row">
+          ${this.weekdayNames.map(
+      (day) => html12`
+              <div class="ds-calendar__weekday" role="columnheader">${day}</div>
+            `
+    )}
+        </div>
+
+        <div class="ds-calendar__grid" role="grid">
+          ${this.calendarDays.map(({ date, isOutside }) => {
+      const disabled = this.isDisabled(date);
+      const selected = this.isSelected(date);
+      const today = this.isToday(date);
+      return html12`
+              <button
+                type="button"
+                class="ds-calendar__day"
+                role="gridcell"
+                tabindex=${selected ? 0 : -1}
+                aria-selected=${selected ? "true" : "false"}
+                aria-disabled=${disabled ? "true" : nothing10}
+                ?data-outside=${isOutside}
+                ?data-selected=${selected}
+                ?data-today=${today}
+                ?data-disabled=${disabled}
+                @click=${() => this.handleDateSelect(date)}
+                @keydown=${(e) => this.handleKeyDown(e, date)}
+              >
+                ${date.getDate()}
+              </button>
+            `;
+    })}
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property10({ type: String })
+], DsCalendar.prototype, "value", 2);
+__decorateClass([
+  property10({ type: String })
+], DsCalendar.prototype, "min", 2);
+__decorateClass([
+  property10({ type: String })
+], DsCalendar.prototype, "max", 2);
+__decorateClass([
+  property10({ type: String, attribute: "disabled-dates" })
+], DsCalendar.prototype, "disabledDates", 2);
+__decorateClass([
+  property10({ type: String })
+], DsCalendar.prototype, "locale", 2);
+__decorateClass([
+  property10({ type: String, reflect: true })
+], DsCalendar.prototype, "size", 2);
+__decorateClass([
+  property10({ type: Number, attribute: "first-day-of-week" })
+], DsCalendar.prototype, "firstDayOfWeek", 2);
+__decorateClass([
+  state4()
+], DsCalendar.prototype, "viewDate", 2);
+define("ds-calendar", DsCalendar);
+
+// src/components/tree/tree.ts
+import { html as html13, nothing as nothing11 } from "lit";
+import { property as property11, state as state5 } from "lit/decorators.js";
+import { classMap as classMap8 } from "lit/directives/class-map.js";
+var DsTree = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.selectionMode = "single";
+    this.size = "default";
+    this.lines = false;
+    this.label = "Tree";
+    this.loading = false;
+    this.loadingText = "Loading...";
+    this.loadingNodes = /* @__PURE__ */ new Set();
+    this.selectedItems = /* @__PURE__ */ new Set();
+  }
+  static {
+    this.styles = [];
+  }
+  /**
+   * Checks if a specific node is currently loading.
+   */
+  isNodeLoading(nodeId) {
+    if (this.loadingNodes instanceof Set) {
+      return this.loadingNodes.has(nodeId);
+    }
+    return this.loadingNodes.includes(nodeId);
+  }
+  handleItemSelect(itemId) {
+    if (this.loading) return;
+    if (this.selectionMode === "none") return;
+    if (this.selectionMode === "single") {
+      this.selectedItems.clear();
+      this.selectedItems.add(itemId);
+    } else {
+      if (this.selectedItems.has(itemId)) {
+        this.selectedItems.delete(itemId);
+      } else {
+        this.selectedItems.add(itemId);
+      }
+    }
+    emitEvent(this, "selection-change", {
+      detail: { selectedItems: Array.from(this.selectedItems) }
+    });
+    this.requestUpdate();
+  }
+  isItemSelected(itemId) {
+    return this.selectedItems.has(itemId);
+  }
+  render() {
+    const classes = {
+      "ds-tree": true
+    };
+    return html13`
+      <ul
+        class=${classMap8(classes)}
+        role="tree"
+        aria-label=${this.label}
+        aria-multiselectable=${this.selectionMode === "multiple" ? "true" : nothing11}
+        aria-busy=${this.loading ? "true" : nothing11}
+        data-size=${this.size !== "default" ? this.size : nothing11}
+        ?data-lines=${this.lines}
+        ?data-loading=${this.loading}
+      >
+        <slot></slot>
+      </ul>
+    `;
+  }
+};
+__decorateClass([
+  property11({ type: String, attribute: "selection-mode", reflect: true })
+], DsTree.prototype, "selectionMode", 2);
+__decorateClass([
+  property11({ type: String, reflect: true })
+], DsTree.prototype, "size", 2);
+__decorateClass([
+  property11({ type: Boolean, reflect: true })
+], DsTree.prototype, "lines", 2);
+__decorateClass([
+  property11({ type: String })
+], DsTree.prototype, "label", 2);
+__decorateClass([
+  property11({ type: Boolean, reflect: true })
+], DsTree.prototype, "loading", 2);
+__decorateClass([
+  property11({ type: String, attribute: "loading-text" })
+], DsTree.prototype, "loadingText", 2);
+__decorateClass([
+  property11({ attribute: false })
+], DsTree.prototype, "loadingNodes", 2);
+__decorateClass([
+  state5()
+], DsTree.prototype, "selectedItems", 2);
+define("ds-tree", DsTree);
+
+// src/components/tree/tree-item.ts
+import { html as html14, nothing as nothing12 } from "lit";
+import { property as property12, state as state6 } from "lit/decorators.js";
+import { classMap as classMap9 } from "lit/directives/class-map.js";
+
+// src/components/tree/tree-utils.ts
+function calculateTreeItemPosition(element) {
+  let level = 1;
+  let parent = element.parentElement;
+  while (parent) {
+    if (parent.tagName?.toLowerCase() === "ds-tree-item") {
+      level++;
+    }
+    if (parent.tagName?.toLowerCase() === "ds-tree") {
+      break;
+    }
+    parent = parent.parentElement;
+  }
+  const siblings = getSiblingTreeItems(element);
+  const setSize = siblings.length;
+  const posInSet = siblings.indexOf(element) + 1;
+  return { level, setSize, posInSet };
+}
+function getSiblingTreeItems(element) {
+  let container = element.parentElement;
+  if (container?.tagName?.toLowerCase() === "slot") {
+    container = container.parentElement;
+  }
+  if (container?.getAttribute("role") === "group") {
+    container = container.parentElement;
+  }
+  if (!container) {
+    return [element];
+  }
+  const items = [];
+  const checkChildren = (parent) => {
+    for (const child of parent.children) {
+      if (child.tagName?.toLowerCase() === "ds-tree-item") {
+        items.push(child);
+      } else if (child.tagName?.toLowerCase() === "slot") {
+        const slot = child;
+        for (const assigned of slot.assignedElements()) {
+          if (assigned.tagName?.toLowerCase() === "ds-tree-item") {
+            items.push(assigned);
+          }
+        }
+      }
+    }
+  };
+  if (container.tagName?.toLowerCase() === "ds-tree") {
+    checkChildren(container);
+  } else if (container.tagName?.toLowerCase() === "ds-tree-item") {
+    const childrenSlot = container.querySelector('[slot="children"]');
+    if (childrenSlot) {
+      for (const child of childrenSlot.children) {
+        if (child.tagName?.toLowerCase() === "ds-tree-item") {
+          items.push(child);
+        }
+      }
+    }
+  }
+  return items.length > 0 ? items : [element];
+}
+
+// src/components/tree/tree-item.ts
+var chevronIcon2 = html14`
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+    <path d="M9 18l6-6-6-6" />
+  </svg>
+`;
+var DsTreeItem = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.itemId = "";
+    this.expanded = false;
+    this.selected = false;
+    this.disabled = false;
+    this.loading = false;
+    this.hasChildren = false;
+    this._level = 1;
+    this._setSize = 1;
+    this._posInSet = 1;
+  }
+  static {
+    this.styles = [];
+  }
+  get treeRoot() {
+    return this.closest("ds-tree");
+  }
+  /**
+   * Returns true if this item is loading (either directly or via tree's loadingNodes).
+   */
+  get isLoading() {
+    if (this.loading) return true;
+    const tree = this.treeRoot;
+    if (tree && this.itemId) {
+      return tree.isNodeLoading(this.itemId);
+    }
+    return false;
+  }
+  /**
+   * Returns true if the tree root is in a loading state.
+   */
+  get isTreeLoading() {
+    return this.treeRoot?.loading ?? false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateHasChildren();
+    requestAnimationFrame(() => {
+      this.updateAriaPosition();
+    });
+  }
+  /**
+   * Update ARIA position attributes for APG compliance.
+   * Provides screen readers with context like "Item 3 of 5, level 2".
+   */
+  updateAriaPosition() {
+    const position = calculateTreeItemPosition(this);
+    this._level = position.level;
+    this._setSize = position.setSize;
+    this._posInSet = position.posInSet;
+  }
+  updateHasChildren() {
+    const childrenSlot = this.querySelector("[slot=children]");
+    this.hasChildren = childrenSlot !== null && childrenSlot.querySelector("ds-tree-item") !== null;
+  }
+  handleExpandClick(event) {
+    event.stopPropagation();
+    if (this.disabled || this.isTreeLoading || this.isLoading || !this.hasChildren) return;
+    this.expanded = !this.expanded;
+    emitEvent(this, "expand", {
+      detail: {
+        itemId: this.itemId,
+        expanded: this.expanded
+      }
+    });
+  }
+  handleContentClick() {
+    if (this.disabled || this.isTreeLoading) return;
+    const tree = this.treeRoot;
+    if (tree) {
+      tree.handleItemSelect(this.itemId);
+      this.selected = tree.isItemSelected(this.itemId);
+    }
+    emitEvent(this, "select", {
+      detail: {
+        itemId: this.itemId,
+        selected: this.selected
+      }
+    });
+  }
+  handleKeyDown(event) {
+    if (this.disabled || this.isTreeLoading) return;
+    switch (event.key) {
+      case "ArrowRight":
+        if (this.hasChildren && !this.expanded) {
+          event.preventDefault();
+          this.expanded = true;
+          emitEvent(this, "expand", {
+            detail: {
+              itemId: this.itemId,
+              expanded: true
+            }
+          });
+        }
+        break;
+      case "ArrowLeft":
+        if (this.hasChildren && this.expanded) {
+          event.preventDefault();
+          this.expanded = false;
+          emitEvent(this, "expand", {
+            detail: {
+              itemId: this.itemId,
+              expanded: false
+            }
+          });
+        }
+        break;
+      case "Enter":
+        event.preventDefault();
+        emitEvent(this, "activate", { detail: { itemId: this.itemId } });
+        break;
+      case " ":
+        event.preventDefault();
+        this.handleContentClick();
+        break;
+    }
+  }
+  render() {
+    const classes = {
+      "ds-tree-item": true
+    };
+    this.updateHasChildren();
+    const itemLoading = this.isLoading;
+    return html14`
+      <li
+        class=${classMap9(classes)}
+        role="treeitem"
+        aria-expanded=${this.hasChildren ? this.expanded ? "true" : "false" : nothing12}
+        aria-selected=${this.selected ? "true" : "false"}
+        aria-busy=${itemLoading ? "true" : nothing12}
+        aria-level=${this._level}
+        aria-setsize=${this._setSize}
+        aria-posinset=${this._posInSet}
+        ?data-expanded=${this.expanded}
+        ?data-selected=${this.selected}
+        ?data-disabled=${this.disabled}
+        ?data-loading=${itemLoading}
+      >
+        <div
+          class="ds-tree-item__content"
+          tabindex=${this.disabled ? -1 : 0}
+          @click=${this.handleContentClick}
+          @keydown=${this.handleKeyDown}
+        >
+          ${this.hasChildren ? html14`
+                <button
+                  type="button"
+                  class="ds-tree-item__expand"
+                  aria-label=${this.expanded ? "Collapse" : "Expand"}
+                  tabindex="-1"
+                  @click=${this.handleExpandClick}
+                >
+                  ${chevronIcon2}
+                </button>
+              ` : html14`<span class="ds-tree-item__spacer"></span>`}
+          <slot name="icon"></slot>
+          <span class="ds-tree-item__label">
+            <slot></slot>
+          </span>
+        </div>
+        ${this.hasChildren ? html14`
+              <ul
+                class="ds-tree-item__children ds-tree"
+                role="group"
+                ?hidden=${!this.expanded}
+              >
+                <slot name="children" @slotchange=${this.updateHasChildren}></slot>
+              </ul>
+            ` : nothing12}
+      </li>
+    `;
+  }
+};
+__decorateClass([
+  property12({ type: String, attribute: "item-id" })
+], DsTreeItem.prototype, "itemId", 2);
+__decorateClass([
+  property12({ type: Boolean, reflect: true })
+], DsTreeItem.prototype, "expanded", 2);
+__decorateClass([
+  property12({ type: Boolean, reflect: true })
+], DsTreeItem.prototype, "selected", 2);
+__decorateClass([
+  property12({ type: Boolean, reflect: true })
+], DsTreeItem.prototype, "disabled", 2);
+__decorateClass([
+  property12({ type: Boolean, reflect: true })
+], DsTreeItem.prototype, "loading", 2);
+__decorateClass([
+  state6()
+], DsTreeItem.prototype, "hasChildren", 2);
+__decorateClass([
+  state6()
+], DsTreeItem.prototype, "_level", 2);
+__decorateClass([
+  state6()
+], DsTreeItem.prototype, "_setSize", 2);
+__decorateClass([
+  state6()
+], DsTreeItem.prototype, "_posInSet", 2);
+define("ds-tree-item", DsTreeItem);
+
+// src/components/list/list.ts
+import { html as html15, nothing as nothing13 } from "lit";
+import { property as property13, state as state7 } from "lit/decorators.js";
+import { classMap as classMap10 } from "lit/directives/class-map.js";
+var DsList = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.selectionMode = "single";
+    this.orientation = "vertical";
+    this.size = "default";
+    this.bordered = false;
+    this.label = "List";
+    this.selectedItems = /* @__PURE__ */ new Set();
+  }
+  static {
+    this.styles = [];
+  }
+  handleItemSelect(itemId) {
+    if (this.selectionMode === "none") return;
+    if (this.selectionMode === "single") {
+      this.selectedItems.clear();
+      this.selectedItems.add(itemId);
+    } else {
+      if (this.selectedItems.has(itemId)) {
+        this.selectedItems.delete(itemId);
+      } else {
+        this.selectedItems.add(itemId);
+      }
+    }
+    emitEvent(this, "selection-change", {
+      detail: { selectedItems: Array.from(this.selectedItems) }
+    });
+    this.requestUpdate();
+  }
+  isItemSelected(itemId) {
+    return this.selectedItems.has(itemId);
+  }
+  render() {
+    const classes = {
+      "ds-list": true
+    };
+    return html15`
+      <ul
+        class=${classMap10(classes)}
+        role="listbox"
+        aria-label=${this.label}
+        aria-multiselectable=${this.selectionMode === "multiple" ? "true" : nothing13}
+        aria-orientation=${this.orientation}
+        data-size=${this.size !== "default" ? this.size : nothing13}
+        data-orientation=${this.orientation !== "vertical" ? this.orientation : nothing13}
+        ?data-bordered=${this.bordered}
+      >
+        <slot></slot>
+      </ul>
+    `;
+  }
+};
+__decorateClass([
+  property13({ type: String, attribute: "selection-mode", reflect: true })
+], DsList.prototype, "selectionMode", 2);
+__decorateClass([
+  property13({ type: String, reflect: true })
+], DsList.prototype, "orientation", 2);
+__decorateClass([
+  property13({ type: String, reflect: true })
+], DsList.prototype, "size", 2);
+__decorateClass([
+  property13({ type: Boolean, reflect: true })
+], DsList.prototype, "bordered", 2);
+__decorateClass([
+  property13({ type: String })
+], DsList.prototype, "label", 2);
+__decorateClass([
+  state7()
+], DsList.prototype, "selectedItems", 2);
+define("ds-list", DsList);
+
+// src/components/list/list-item.ts
+import { html as html16, nothing as nothing14 } from "lit";
+import { property as property14 } from "lit/decorators.js";
+import { classMap as classMap11 } from "lit/directives/class-map.js";
+var DsListItem = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.itemId = "";
+    this.selected = false;
+    this.disabled = false;
+    this.value = "";
+  }
+  static {
+    this.styles = [];
+  }
+  get listRoot() {
+    return this.closest("ds-list");
+  }
+  handleClick() {
+    if (this.disabled) return;
+    const list = this.listRoot;
+    if (list) {
+      list.handleItemSelect(this.itemId || this.value);
+      this.selected = list.isItemSelected(this.itemId || this.value);
+    }
+    emitEvent(this, "select", {
+      detail: {
+        itemId: this.itemId,
+        value: this.value,
+        selected: this.selected
+      }
+    });
+  }
+  handleKeyDown(event) {
+    if (this.disabled) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.handleClick();
+      if (event.key === "Enter") {
+        emitEvent(this, "activate", {
+          detail: {
+            itemId: this.itemId,
+            value: this.value
+          }
+        });
+      }
+    }
+  }
+  render() {
+    const classes = {
+      "ds-list-item": true
+    };
+    return html16`
+      <li
+        class=${classMap11(classes)}
+        role="option"
+        tabindex=${this.disabled ? -1 : 0}
+        aria-selected=${this.selected ? "true" : "false"}
+        ?data-selected=${this.selected}
+        ?data-disabled=${this.disabled}
+        aria-disabled=${this.disabled ? "true" : nothing14}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      >
+        <slot name="leading"></slot>
+        <div class="ds-list-item__content">
+          <span class="ds-list-item__primary">
+            <slot></slot>
+          </span>
+          <slot name="secondary"></slot>
+        </div>
+        <slot name="trailing"></slot>
+      </li>
+    `;
+  }
+};
+__decorateClass([
+  property14({ type: String, attribute: "item-id" })
+], DsListItem.prototype, "itemId", 2);
+__decorateClass([
+  property14({ type: Boolean, reflect: true })
+], DsListItem.prototype, "selected", 2);
+__decorateClass([
+  property14({ type: Boolean, reflect: true })
+], DsListItem.prototype, "disabled", 2);
+__decorateClass([
+  property14({ type: String })
+], DsListItem.prototype, "value", 2);
+define("ds-list-item", DsListItem);
+
+// src/components/card/card.ts
+import { html as html17 } from "lit";
+var DsCard = class extends DSElement {
+  render() {
+    return html17`<slot></slot>`;
+  }
+};
+define("ds-card", DsCard);
+
+// src/components/card/card-header.ts
+import { html as html18 } from "lit";
+var DsCardHeader = class extends DSElement {
+  render() {
+    return html18`<slot></slot>`;
+  }
+};
+define("ds-card-header", DsCardHeader);
+
+// src/components/card/card-content.ts
+import { html as html19 } from "lit";
+var DsCardContent = class extends DSElement {
+  render() {
+    return html19`<slot></slot>`;
+  }
+};
+define("ds-card-content", DsCardContent);
+
+// src/components/card/card-footer.ts
+import { html as html20 } from "lit";
+var DsCardFooter = class extends DSElement {
+  render() {
+    return html20`<slot></slot>`;
+  }
+};
+define("ds-card-footer", DsCardFooter);
+
+// src/components/separator/separator.ts
+import { html as html21 } from "lit";
+import { property as property15 } from "lit/decorators.js";
+var DsSeparator = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.orientation = "horizontal";
+    this.decorative = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateAccessibility();
+  }
+  updated() {
+    this.updateAccessibility();
+  }
+  updateAccessibility() {
+    if (this.decorative) {
+      this.setAttribute("role", "none");
+      this.removeAttribute("aria-orientation");
+    } else {
+      this.setAttribute("role", "separator");
+      this.setAttribute("aria-orientation", this.orientation);
+    }
+  }
+  render() {
+    return html21``;
+  }
+};
+__decorateClass([
+  property15({ reflect: true })
+], DsSeparator.prototype, "orientation", 2);
+__decorateClass([
+  property15({ type: Boolean, reflect: true })
+], DsSeparator.prototype, "decorative", 2);
+define("ds-separator", DsSeparator);
+
+// src/components/aspect-ratio/aspect-ratio.ts
+import { html as html22 } from "lit";
+import { property as property16 } from "lit/decorators.js";
+var DsAspectRatio = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.ratio = "1/1";
+  }
+  updated() {
+    this.updateCssVariable();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateCssVariable();
+  }
+  updateCssVariable() {
+    const ratioValue = this.parseRatio(this.ratio);
+    this.style.setProperty("--ds-aspect-ratio", String(ratioValue));
+  }
+  parseRatio(ratio) {
+    if (ratio.includes("/")) {
+      const parts = ratio.split("/").map(Number);
+      const width = parts[0];
+      const height = parts[1];
+      if (width !== void 0 && height !== void 0 && !Number.isNaN(width) && !Number.isNaN(height) && height !== 0) {
+        return width / height;
+      }
+    }
+    const parsed = Number.parseFloat(ratio);
+    return Number.isNaN(parsed) ? 1 : parsed;
+  }
+  render() {
+    return html22`<slot></slot>`;
+  }
+};
+__decorateClass([
+  property16({ reflect: true })
+], DsAspectRatio.prototype, "ratio", 2);
+define("ds-aspect-ratio", DsAspectRatio);
+
+export {
+  DsTable,
+  DsTableHeader,
+  DsTableBody,
+  DsTableRow,
+  DsTableHead,
+  DsTableCell,
+  DsDataTable,
+  DsAvatar,
+  DsAvatarGroup,
+  DsBadge,
+  DsTag,
+  DsCalendar,
+  DsTree,
+  DsTreeItem,
+  DsList,
+  DsListItem,
+  DsCard,
+  DsCardHeader,
+  DsCardContent,
+  DsCardFooter,
+  DsSeparator,
+  DsAspectRatio
+};
+//# sourceMappingURL=chunk-DNNI5BDE.js.map