@francofantomius/material-components 0.1.0 → 1.0.1

package/dist/chunks/table-aRTYzDyE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-aRTYzDyE.js","names":[],"sources":["../../src/components/table/table.css.ts","../../src/components/table/table.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const tableStyles = css`\n  :host {\n    display: block;\n    width: 100%;\n    position: relative;\n    box-sizing: border-box;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    background-color: var(--md-sys-color-surface, #FEF7FF);\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    border-radius: var(--md-sys-shape-corner-medium, 12px);\n    overflow: hidden;\n    transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),\n                background-color 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([bordered]) {\n    border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n  }\n\n  :host([elevated]) {\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n  }\n\n  .table-wrapper {\n    width: 100%;\n    overflow-x: auto;\n    -webkit-overflow-scrolling: touch;\n    position: relative;\n  }\n\n  .progress-container {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    z-index: 5;\n    height: 4px;\n  }\n\n  .table {\n    display: table;\n    width: 100%;\n    border-collapse: collapse;\n    border-spacing: 0;\n    text-align: left;\n    font-size: var(--md-sys-typescale-body-medium-size, 14px);\n    line-height: 20px;\n  }\n\n  /* Dense table variant */\n  :host([dense]) {\n    --md-table-cell-padding-y: 8px;\n    --md-table-cell-padding-x: 12px;\n    --md-table-header-padding-y: 10px;\n  }\n\n  /* Default cell padding variables */\n  :host {\n    --md-table-cell-padding-y: 14px;\n    --md-table-cell-padding-x: 16px;\n    --md-table-header-padding-y: 16px;\n    --md-table-header-padding-x: 16px;\n  }\n`;\n\nexport const tableHeadStyles = css`\n  :host {\n    display: table-header-group;\n    background-color: var(--md-sys-color-surface-container-low, #F7F2FA);\n    border-bottom: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n  }\n\n  :host-context([sticky-header]),\n  :host([sticky]) {\n    position: sticky;\n    top: 0;\n    z-index: 2;\n  }\n`;\n\nexport const tableBodyStyles = css`\n  :host {\n    display: table-row-group;\n  }\n`;\n\nexport const tableRowStyles = css`\n  :host {\n    display: table-row;\n    position: relative;\n    transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1);\n    border-bottom: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n  }\n\n  :host(:last-of-type) {\n    border-bottom: none;\n  }\n\n  /* Hoverable rows */\n  :host-context([hoverable]):hover,\n  :host([hoverable]:hover),\n  :host([interactive]:hover) {\n    background-color: var(--md-sys-color-surface-container-high, #ECE6F0);\n  }\n\n  /* Striped rows */\n  :host-context([striped]):host(:nth-of-type(even)) {\n    background-color: var(--md-sys-color-surface-container-lowest, #FFFFFF);\n  }\n\n  :host-context([striped]):host(:nth-of-type(odd)) {\n    background-color: var(--md-sys-color-surface-container-low, #F7F2FA);\n  }\n\n  /* Selected row */\n  :host([selected]) {\n    background-color: var(--md-sys-color-secondary-container, #E8DEF8) !important;\n  }\n\n  :host([interactive]) {\n    cursor: pointer;\n  }\n\n  :host([disabled]) {\n    opacity: 0.38;\n    pointer-events: none;\n  }\n`;\n\nexport const tableHeaderCellStyles = css`\n  :host {\n    display: table-cell;\n    vertical-align: middle;\n    padding: var(--md-table-header-padding-y, 16px) var(--md-table-header-padding-x, 16px);\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    font-size: var(--md-sys-typescale-title-small-size, 14px);\n    font-weight: 600;\n    letter-spacing: 0.1px;\n    border-bottom: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n    user-select: none;\n    box-sizing: border-box;\n    white-space: nowrap;\n  }\n\n  :host([sortable]) {\n    cursor: pointer;\n  }\n\n  :host([sortable]:hover) {\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    background-color: rgba(0, 0, 0, 0.04);\n  }\n\n  :host([align=\"start\"]),\n  :host([align=\"left\"]) {\n    text-align: left;\n  }\n\n  :host([align=\"center\"]) {\n    text-align: center;\n  }\n\n  :host([align=\"end\"]),\n  :host([align=\"right\"]) {\n    text-align: right;\n  }\n\n  .cell-content {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    width: 100%;\n  }\n\n  :host([align=\"center\"]) .cell-content {\n    justify-content: center;\n  }\n\n  :host([align=\"end\"]) .cell-content,\n  :host([align=\"right\"]) .cell-content {\n    justify-content: flex-end;\n  }\n\n  .sort-icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 18px;\n    color: var(--md-sys-color-primary, #6750A4);\n    opacity: 0;\n    transition: transform 200ms cubic-bezier(0.2, 0, 0, 1), opacity 150ms ease;\n  }\n\n  :host([sort-direction=\"asc\"]) .sort-icon {\n    opacity: 1;\n    transform: rotate(0deg);\n  }\n\n  :host([sort-direction=\"desc\"]) .sort-icon {\n    opacity: 1;\n    transform: rotate(180deg);\n  }\n\n  :host([sortable]:hover:not([sort-direction=\"asc\"]):not([sort-direction=\"desc\"])) .sort-icon {\n    opacity: 0.5;\n  }\n`;\n\nexport const tableCellStyles = css`\n  :host {\n    display: table-cell;\n    vertical-align: middle;\n    padding: var(--md-table-cell-padding-y, 14px) var(--md-table-cell-padding-x, 16px);\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    font-size: var(--md-sys-typescale-body-medium-size, 14px);\n    border-bottom: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n    box-sizing: border-box;\n  }\n\n  :host([align=\"start\"]),\n  :host([align=\"left\"]) {\n    text-align: left;\n  }\n\n  :host([align=\"center\"]) {\n    text-align: center;\n  }\n\n  :host([align=\"end\"]),\n  :host([align=\"right\"]) {\n    text-align: right;\n  }\n\n  :host([numeric]) {\n    font-variant-numeric: tabular-nums;\n    text-align: right;\n  }\n\n  :host([truncate]) {\n    max-width: 200px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n`;\n\nexport const tablePaginationStyles = css`\n  :host {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 16px;\n    padding: 8px 16px;\n    border-top: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n    background-color: var(--md-sys-color-surface, #FEF7FF);\n    font-size: var(--md-sys-typescale-body-small-size, 12px);\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    box-sizing: border-box;\n  }\n\n  .rows-per-page {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  select {\n    padding: 4px 8px;\n    border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n    border-radius: var(--md-sys-shape-corner-extra-small, 4px);\n    background-color: var(--md-sys-color-surface-container-low, #F7F2FA);\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    font-family: inherit;\n    font-size: inherit;\n    outline: none;\n    cursor: pointer;\n  }\n\n  select:focus {\n    border-color: var(--md-sys-color-primary, #6750A4);\n  }\n\n  .range-label {\n    user-select: none;\n  }\n\n  .actions {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n  }\n`;\n\n","import { html, nothing, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../progress/progress.js';\nimport '../icon/icon.js';\nimport '../icon-button/icon-button.js';\nimport '../checkbox/checkbox.js';\nimport {\n  tableStyles,\n  tableHeadStyles,\n  tableBodyStyles,\n  tableRowStyles,\n  tableHeaderCellStyles,\n  tableCellStyles,\n  tablePaginationStyles,\n} from './table.css.js';\n\nexport type SortDirection = 'asc' | 'desc' | 'none';\nexport type TableCellAlignment = 'start' | 'center' | 'end' | 'left' | 'right';\n\nexport interface TableColumn<T = any> {\n  key: string;\n  label: string;\n  sortable?: boolean;\n  align?: TableCellAlignment;\n  width?: string;\n  numeric?: boolean;\n  render?: (row: T, index: number) => unknown;\n}\n\nexport interface SortChangeEventDetail {\n  column: string;\n  direction: SortDirection;\n}\n\nexport interface PageChangeEventDetail {\n  page: number;\n  pageSize: number;\n}\n\nexport interface RowSelectEventDetail<T = any> {\n  row: T;\n  index: number;\n  selected: boolean;\n  selectedRows: T[];\n}\n\n/**\n * Material Design 3 Table Header Cell\n */\n@customElement('md-table-header-cell')\nexport class MdTableHeaderCell extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, tableHeaderCellStyles];\n\n  @property({ type: Boolean, reflect: true })\n  sortable = false;\n\n  @property({ type: String, reflect: true, attribute: 'sort-direction' })\n  sortDirection: SortDirection = 'none';\n\n  @property({ type: String, reflect: true })\n  align: TableCellAlignment = 'start';\n\n  @property({ type: String, attribute: 'column-key' })\n  columnKey = '';\n\n  @property({ type: String })\n  width = '';\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'columnheader');\n    this.addEventListener('click', this.handleClick);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.handleClick);\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties);\n    if (changedProperties.has('width') && this.width) {\n      this.style.width = this.width;\n    }\n    if (changedProperties.has('sortDirection')) {\n      if (this.sortDirection === 'asc') {\n        this.setAttribute('aria-sort', 'ascending');\n      } else if (this.sortDirection === 'desc') {\n        this.setAttribute('aria-sort', 'descending');\n      } else {\n        this.removeAttribute('aria-sort');\n      }\n    }\n  }\n\n  private handleClick = () => {\n    if (!this.sortable) return;\n    let nextDirection: SortDirection = 'asc';\n    if (this.sortDirection === 'asc') {\n      nextDirection = 'desc';\n    } else if (this.sortDirection === 'desc') {\n      nextDirection = 'none';\n    }\n    this.sortDirection = nextDirection;\n    this.emitEvent<SortChangeEventDetail>('sort-change', {\n      column: this.columnKey,\n      direction: this.sortDirection,\n    });\n  };\n\n  override render() {\n    return html`\n      <div class=\"cell-content\">\n        <slot></slot>\n        ${this.sortable\n          ? html`<span class=\"sort-icon\" aria-hidden=\"true\"><md-icon name=\"arrow_upward\" size=\"18\"></md-icon></span>`\n          : nothing}\n      </div>\n    `;\n  }\n}\n\n/**\n * Material Design 3 Table Cell\n */\n@customElement('md-table-cell')\nexport class MdTableCell extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, tableCellStyles];\n\n  @property({ type: String, reflect: true })\n  align: TableCellAlignment = 'start';\n\n  @property({ type: Boolean, reflect: true })\n  numeric = false;\n\n  @property({ type: Boolean, reflect: true })\n  truncate = false;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'cell');\n  }\n\n  override render() {\n    return html`<slot></slot>`;\n  }\n}\n\n/**\n * Material Design 3 Table Row\n */\n@customElement('md-table-row')\nexport class MdTableRow extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, tableRowStyles];\n\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  @property({ type: Boolean, reflect: true })\n  selectable = false;\n\n  @property({ type: Boolean, reflect: true })\n  interactive = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  hoverable = false;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'row');\n    this.addEventListener('click', this.handleClick);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.handleClick);\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties);\n    if (changedProperties.has('selected')) {\n      this.setAttribute('aria-selected', this.selected ? 'true' : 'false');\n    }\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      return;\n    }\n\n    this.emitEvent('row-click', { row: this });\n\n    if (this.selectable) {\n      this.selected = !this.selected;\n      this.emitEvent('row-select', { selected: this.selected, row: this });\n    }\n  };\n\n  override render() {\n    return html`<slot></slot>`;\n  }\n}\n\n/**\n * Material Design 3 Table Head\n */\n@customElement('md-table-head')\nexport class MdTableHead extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, tableHeadStyles];\n\n  @property({ type: Boolean, reflect: true })\n  sticky = false;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'rowgroup');\n  }\n\n  override render() {\n    return html`<slot></slot>`;\n  }\n}\n\n/**\n * Material Design 3 Table Body\n */\n@customElement('md-table-body')\nexport class MdTableBody extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, tableBodyStyles];\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'rowgroup');\n  }\n\n  override render() {\n    return html`<slot></slot>`;\n  }\n}\n\n/**\n * Material Design 3 Table Pagination\n */\n@customElement('md-table-pagination')\nexport class MdTablePagination extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, tablePaginationStyles];\n\n  @property({ type: Number })\n  page = 1;\n\n  @property({ type: Number, attribute: 'page-size' })\n  pageSize = 10;\n\n  @property({ type: Number })\n  total = 0;\n\n  @property({ type: Array, attribute: 'page-size-options' })\n  pageSizeOptions: number[] = [5, 10, 25, 50];\n\n  @property({ type: Boolean, attribute: 'show-first-last' })\n  showFirstLast = true;\n\n  get totalPages(): number {\n    return Math.max(1, Math.ceil(this.total / Math.max(1, this.pageSize)));\n  }\n\n  private handlePageSizeChange = (event: Event) => {\n    const select = event.target as HTMLSelectElement;\n    const newSize = Number(select.value);\n    this.pageSize = newSize;\n    this.page = 1;\n    this.emitEvent<PageChangeEventDetail>('page-size-change', {\n      page: this.page,\n      pageSize: this.pageSize,\n    });\n    this.emitEvent<PageChangeEventDetail>('page-change', {\n      page: this.page,\n      pageSize: this.pageSize,\n    });\n  };\n\n  public firstPage = () => {\n    if (this.page <= 1) return;\n    this.page = 1;\n    this.notifyPageChange();\n  };\n\n  public prevPage = () => {\n    if (this.page <= 1) return;\n    this.page -= 1;\n    this.notifyPageChange();\n  };\n\n  public nextPage = () => {\n    if (this.page >= this.totalPages) return;\n    this.page += 1;\n    this.notifyPageChange();\n  };\n\n  public lastPage = () => {\n    if (this.page >= this.totalPages) return;\n    this.page = this.totalPages;\n    this.notifyPageChange();\n  };\n\n  private notifyPageChange() {\n    this.emitEvent<PageChangeEventDetail>('page-change', {\n      page: this.page,\n      pageSize: this.pageSize,\n    });\n  }\n\n  override render() {\n    const start = this.total === 0 ? 0 : (this.page - 1) * this.pageSize + 1;\n    const end = Math.min(this.page * this.pageSize, this.total);\n    const rangeText = `${start}–${end} of ${this.total}`;\n\n    return html`\n      <div class=\"rows-per-page\">\n        <span>Rows per page:</span>\n        <select .value=${String(this.pageSize)} @change=${this.handlePageSizeChange}>\n          ${this.pageSizeOptions.map(\n            (opt) => html`<option value=${opt} ?selected=${opt === this.pageSize}>${opt}</option>`\n          )}\n        </select>\n      </div>\n\n      <div class=\"range-label\">${rangeText}</div>\n\n      <div class=\"actions\">\n        ${this.showFirstLast\n          ? html`\n              <md-icon-button\n                icon=\"first_page\"\n                aria-label=\"First page\"\n                ?disabled=${this.page <= 1}\n                @click=${this.firstPage}\n              ></md-icon-button>\n            `\n          : nothing}\n        <md-icon-button\n          icon=\"chevron_left\"\n          aria-label=\"Previous page\"\n          ?disabled=${this.page <= 1}\n          @click=${this.prevPage}\n        ></md-icon-button>\n        <md-icon-button\n          icon=\"chevron_right\"\n          aria-label=\"Next page\"\n          ?disabled=${this.page >= this.totalPages}\n          @click=${this.nextPage}\n        ></md-icon-button>\n        ${this.showFirstLast\n          ? html`\n              <md-icon-button\n                icon=\"last_page\"\n                aria-label=\"Last page\"\n                ?disabled=${this.page >= this.totalPages}\n                @click=${this.lastPage}\n              ></md-icon-button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\n/**\n * Material Design 3 Table / Data Table\n */\n@customElement('md-table')\nexport class MdTable extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, tableStyles];\n\n  @property({ type: Boolean, reflect: true })\n  bordered = false;\n\n  @property({ type: Boolean, reflect: true })\n  elevated = false;\n\n  @property({ type: Boolean, reflect: true })\n  striped = false;\n\n  @property({ type: Boolean, reflect: true })\n  hoverable = true;\n\n  @property({ type: Boolean, reflect: true })\n  dense = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'sticky-header' })\n  stickyHeader = false;\n\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  @property({ type: Boolean, reflect: true })\n  selectable = false;\n\n  @property({ type: Array })\n  columns: TableColumn[] = [];\n\n  @property({ type: Array })\n  rows: Record<string, any>[] = [];\n\n  @property({ type: Array })\n  selectedRows: Record<string, any>[] = [];\n\n  @property({ type: String, attribute: 'sort-column' })\n  sortColumn = '';\n\n  @property({ type: String, attribute: 'sort-direction' })\n  sortDirection: SortDirection = 'none';\n\n  @property({ type: Boolean })\n  paginated = false;\n\n  @property({ type: Number })\n  page = 1;\n\n  @property({ type: Number, attribute: 'page-size' })\n  pageSize = 10;\n\n  @property({ type: Array, attribute: 'page-size-options' })\n  pageSizeOptions: number[] = [5, 10, 25, 50];\n\n  @property({ type: Number })\n  total = 0;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'table');\n  }\n\n  private handleHeaderSortChange = (event: CustomEvent<SortChangeEventDetail>) => {\n    this.sortColumn = event.detail.column;\n    this.sortDirection = event.detail.direction;\n    this.emitEvent<SortChangeEventDetail>('sort-change', event.detail);\n  };\n\n  private handleSelectAllToggle = (event: CustomEvent<{ checked: boolean }>) => {\n    const isChecked = event.detail.checked;\n    const currentRows = this.getProcessedRows();\n    if (isChecked) {\n      const newSelections = [...this.selectedRows];\n      currentRows.forEach((r) => {\n        if (!newSelections.includes(r)) {\n          newSelections.push(r);\n        }\n      });\n      this.selectedRows = newSelections;\n    } else {\n      this.selectedRows = this.selectedRows.filter((r) => !currentRows.includes(r));\n    }\n\n    this.emitEvent('selection-change', {\n      selectedRows: this.selectedRows,\n      allSelected: isChecked,\n    });\n  };\n\n  private handleRowSelectToggle = (row: Record<string, any>, index: number) => {\n    const isSelected = this.selectedRows.includes(row);\n    if (isSelected) {\n      this.selectedRows = this.selectedRows.filter((r) => r !== row);\n    } else {\n      this.selectedRows = [...this.selectedRows, row];\n    }\n\n    this.emitEvent<RowSelectEventDetail>('row-select', {\n      row,\n      index,\n      selected: !isSelected,\n      selectedRows: this.selectedRows,\n    });\n    this.emitEvent('selection-change', {\n      selectedRows: this.selectedRows,\n    });\n  };\n\n  private handlePaginationChange = (event: CustomEvent<PageChangeEventDetail>) => {\n    this.page = event.detail.page;\n    this.pageSize = event.detail.pageSize;\n    this.emitEvent<PageChangeEventDetail>('page-change', event.detail);\n  };\n\n  private getProcessedRows(): Record<string, any>[] {\n    if (!this.rows || this.rows.length === 0) return [];\n    let processed = [...this.rows];\n\n    // Sorting\n    if (this.sortColumn && this.sortDirection !== 'none') {\n      const dir = this.sortDirection === 'asc' ? 1 : -1;\n      processed.sort((a, b) => {\n        const valA = a[this.sortColumn];\n        const valB = b[this.sortColumn];\n        if (valA == null && valB == null) return 0;\n        if (valA == null) return 1;\n        if (valB == null) return -1;\n        if (typeof valA === 'number' && typeof valB === 'number') {\n          return (valA - valB) * dir;\n        }\n        return String(valA).localeCompare(String(valB)) * dir;\n      });\n    }\n\n    // Pagination (if data-driven rows & paginated)\n    if (this.paginated) {\n      const startIndex = (this.page - 1) * this.pageSize;\n      processed = processed.slice(startIndex, startIndex + this.pageSize);\n    }\n\n    return processed;\n  }\n\n  override render() {\n    const isDataDriven = this.columns && this.columns.length > 0;\n    const currentRows = isDataDriven ? this.getProcessedRows() : [];\n    const totalCount = this.total || (this.rows ? this.rows.length : 0);\n\n    const allCurrentSelected =\n      currentRows.length > 0 && currentRows.every((r) => this.selectedRows.includes(r));\n    const someCurrentSelected =\n      !allCurrentSelected && currentRows.some((r) => this.selectedRows.includes(r));\n\n    return html`\n      <div class=\"table-wrapper\">\n        ${this.loading\n          ? html`<div class=\"progress-container\"><md-linear-progress indeterminate></md-linear-progress></div>`\n          : nothing}\n\n        <div class=\"table\" role=\"table\">\n          ${isDataDriven\n            ? html`\n                <md-table-head ?sticky=${this.stickyHeader}>\n                  <md-table-row>\n                    ${this.selectable\n                      ? html`\n                          <md-table-header-cell style=\"width: 48px; padding-right: 0;\">\n                            <md-checkbox\n                              .checked=${allCurrentSelected}\n                              .indeterminate=${someCurrentSelected}\n                              aria-label=\"Select all rows\"\n                              @change=${this.handleSelectAllToggle}\n                            ></md-checkbox>\n                          </md-table-header-cell>\n                        `\n                      : nothing}\n                    ${this.columns.map((col) => {\n                      const isSorted = this.sortColumn === col.key;\n                      const dir = isSorted ? this.sortDirection : 'none';\n                      return html`\n                        <md-table-header-cell\n                          column-key=${col.key}\n                          ?sortable=${Boolean(col.sortable)}\n                          sort-direction=${dir}\n                          align=${col.align || (col.numeric ? 'end' : 'start')}\n                          width=${col.width || ''}\n                          @sort-change=${this.handleHeaderSortChange}\n                        >\n                          ${col.label}\n                        </md-table-header-cell>\n                      `;\n                    })}\n                  </md-table-row>\n                </md-table-head>\n\n                <md-table-body>\n                  ${currentRows.map((row, index) => {\n                    const isSelected = this.selectedRows.includes(row);\n                    return html`\n                      <md-table-row\n                        ?selected=${isSelected}\n                        ?hoverable=${this.hoverable}\n                        @click=${() => this.emitEvent('row-click', { row, index })}\n                      >\n                        ${this.selectable\n                          ? html`\n                              <md-table-cell style=\"width: 48px; padding-right: 0;\">\n                                <md-checkbox\n                                  .checked=${isSelected}\n                                  aria-label=\"Select row\"\n                                  @change=${(e: Event) => {\n                                    e.stopPropagation();\n                                    this.handleRowSelectToggle(row, index);\n                                  }}\n                                ></md-checkbox>\n                              </md-table-cell>\n                            `\n                          : nothing}\n                        ${this.columns.map((col) => {\n                          const cellContent = col.render ? col.render(row, index) : row[col.key];\n                          return html`\n                            <md-table-cell\n                              align=${col.align || (col.numeric ? 'end' : 'start')}\n                              ?numeric=${Boolean(col.numeric)}\n                            >\n                              ${cellContent}\n                            </md-table-cell>\n                          `;\n                        })}\n                      </md-table-row>\n                    `;\n                  })}\n                </md-table-body>\n              `\n            : html`<slot></slot>`}\n        </div>\n      </div>\n\n      ${this.paginated || isDataDriven && this.rows.length > 0 && this.paginated\n        ? html`\n            <md-table-pagination\n              .page=${this.page}\n              .pageSize=${this.pageSize}\n              .total=${totalCount}\n              .pageSizeOptions=${this.pageSizeOptions}\n              @page-change=${this.handlePaginationChange}\n              @page-size-change=${this.handlePaginationChange}\n            ></md-table-pagination>\n          `\n        : nothing}\n      <slot name=\"pagination\"></slot>\n    `;\n  }\n}\n\n// Aliases\n@customElement('md-data-table')\nexport class MdDataTable extends MdTable {}\n\n@customElement('md-table-header')\nexport class MdTableHeader extends MdTableHead {}\n\n@customElement('md-table-head-cell')\nexport class MdTableHeadCell extends MdTableHeaderCell {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-table': MdTable;\n    'md-data-table': MdDataTable;\n    'md-table-head': MdTableHead;\n    'md-table-header': MdTableHeader;\n    'md-table-body': MdTableBody;\n    'md-table-row': MdTableRow;\n    'md-table-cell': MdTableCell;\n    'md-table-header-cell': MdTableHeaderCell;\n    'md-table-head-cell': MdTableHeadCell;\n    'md-table-pagination': MdTablePagination;\n  }\n}\n\n"],"mappings":"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"}

package/dist/chunks/tabs-BfOtoeir.js

@@ -0,0 +1,191 @@
+import { n as h, t as s } from "./decorate-DXuynaiA.js";
+import "./ripple-squbKHhj.js";
+import "./focus-ring-CuiJuM-y.js";
+import "./icon-DrNqcNEL.js";
+import { css as b, html as p, nothing as m } from "lit";
+import { customElement as v, property as c, query as u, queryAssignedElements as y } from "lit/decorators.js";
+var x = b`
+  :host {
+    display: flex;
+    position: relative;
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--md-sys-color-surface-variant, #E7E0EC);
+    overflow-x: auto;
+    scrollbar-width: none; /* Firefox */
+  }
+
+  :host::-webkit-scrollbar {
+    display: none; /* Safari and Chrome */
+  }
+
+  .tabs-container {
+    display: flex;
+    position: relative;
+    width: 100%;
+  }
+
+  .indicator {
+    position: absolute;
+    bottom: 0;
+    height: 3px;
+    background-color: var(--md-sys-color-primary, #6750A4);
+    border-radius: 3px 3px 0 0;
+    transition: transform 250ms cubic-bezier(0.2, 0, 0, 1),
+                width 250ms cubic-bezier(0.2, 0, 0, 1);
+    pointer-events: none;
+  }
+`, g = b`
+  :host {
+    display: inline-flex;
+    flex: 1;
+    min-width: 90px;
+    height: 48px;
+    outline: none;
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+
+  .tab {
+    position: relative;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    padding: 0 16px;
+    gap: 8px;
+    font-family: var(--md-sys-typescale-font-family, inherit);
+    font-size: var(--md-sys-typescale-title-small-size, 14px);
+    font-weight: 500;
+    line-height: 20px;
+    letter-spacing: 0.1px;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    transition: color 150ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  :host([active]) .tab {
+    color: var(--md-sys-color-primary, #6750A4);
+  }
+
+  .content {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    position: relative;
+    z-index: 1;
+  }
+`, r = class extends h {
+  constructor(...t) {
+    super(...t), this.active = !1, this.disabled = !1, this.icon = "", this.label = "";
+  }
+  static {
+    this.styles = [h.styles, g];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "tab"), this.setAttribute("aria-selected", this.active ? "true" : "false"), this.tabIndex = this.active ? 0 : -1;
+  }
+  updated(t) {
+    super.updated(t), t.has("active") && (this.setAttribute("aria-selected", this.active ? "true" : "false"), this.tabIndex = this.active ? 0 : -1);
+  }
+  render() {
+    return p`
+      <div class="tab">
+        <md-ripple ?disabled=${this.disabled}></md-ripple>
+        <md-focus-ring></md-focus-ring>
+        <span class="content">
+          <slot name="icon">
+            ${this.icon ? p`<md-icon name=${this.icon}></md-icon>` : m}
+          </slot>
+          <slot>${this.label}</slot>
+        </span>
+      </div>
+    `;
+  }
+};
+s([c({
+  type: Boolean,
+  reflect: !0
+})], r.prototype, "active", void 0);
+s([c({
+  type: Boolean,
+  reflect: !0
+})], r.prototype, "disabled", void 0);
+s([c({ type: String })], r.prototype, "icon", void 0);
+s([c({ type: String })], r.prototype, "label", void 0);
+r = s([v("md-tab")], r);
+var l = class extends h {
+  constructor(...t) {
+    super(...t), this.activeIndex = 0, this.handleSlotChange = () => {
+      this.syncActiveTab();
+    }, this.handleClick = (e) => {
+      const i = e.target.closest("md-tab");
+      if (i && !i.disabled) {
+        const a = this.tabs.indexOf(i);
+        a !== -1 && a !== this.activeIndex && (this.activeIndex = a, this.syncActiveTab(), this.emitEvent("change", { activeIndex: this.activeIndex }));
+      }
+    }, this.handleKeyDown = (e) => {
+      const i = this.tabs.filter((d) => !d.disabled);
+      if (i.length === 0) return;
+      const a = this.tabs[this.activeIndex], o = i.indexOf(a);
+      let n = -1;
+      if (e.key === "ArrowRight" ? (e.preventDefault(), n = o < i.length - 1 ? o + 1 : 0) : e.key === "ArrowLeft" ? (e.preventDefault(), n = o > 0 ? o - 1 : i.length - 1) : e.key === "Home" ? (e.preventDefault(), n = 0) : e.key === "End" && (e.preventDefault(), n = i.length - 1), n !== -1 && i[n]) {
+        const d = i[n];
+        this.activeIndex = this.tabs.indexOf(d), this.syncActiveTab(), d.focus(), this.emitEvent("change", { activeIndex: this.activeIndex });
+      }
+    };
+  }
+  static {
+    this.styles = [h.styles, x];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "tablist"), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeyDown);
+  }
+  updated(t) {
+    super.updated(t), t.has("activeIndex") && this.syncActiveTab();
+  }
+  syncActiveTab() {
+    !this.tabs || this.tabs.length === 0 || (this.tabs.forEach((t, e) => {
+      t.active = e === this.activeIndex;
+    }), this.updateIndicator());
+  }
+  updateIndicator() {
+    if (!this.indicatorElement || !this.tabs || this.tabs.length === 0) return;
+    const t = this.tabs[this.activeIndex];
+    if (t) {
+      const e = this.getBoundingClientRect(), i = t.getBoundingClientRect(), a = i.left - e.left, o = i.width;
+      this.indicatorElement.style.transform = `translateX(${a}px)`, this.indicatorElement.style.width = `${o}px`;
+    }
+  }
+  render() {
+    return p`
+      <div class="tabs-container">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+        <div class="indicator"></div>
+      </div>
+    `;
+  }
+};
+s([c({
+  type: Number,
+  reflect: !0,
+  attribute: "active-index"
+})], l.prototype, "activeIndex", void 0);
+s([y({ selector: "md-tab" })], l.prototype, "tabs", void 0);
+s([u(".indicator")], l.prototype, "indicatorElement", void 0);
+l = s([v("md-tabs")], l);
+export {
+  l as n,
+  r as t
+};
+
+//# sourceMappingURL=tabs-BfOtoeir.js.map

package/dist/chunks/tabs-BfOtoeir.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-BfOtoeir.js","names":[],"sources":["../../src/components/tabs/tabs.css.ts","../../src/components/tabs/tabs.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const tabsStyles = css`\n  :host {\n    display: flex;\n    position: relative;\n    box-sizing: border-box;\n    border-bottom: 1px solid var(--md-sys-color-surface-variant, #E7E0EC);\n    overflow-x: auto;\n    scrollbar-width: none; /* Firefox */\n  }\n\n  :host::-webkit-scrollbar {\n    display: none; /* Safari and Chrome */\n  }\n\n  .tabs-container {\n    display: flex;\n    position: relative;\n    width: 100%;\n  }\n\n  .indicator {\n    position: absolute;\n    bottom: 0;\n    height: 3px;\n    background-color: var(--md-sys-color-primary, #6750A4);\n    border-radius: 3px 3px 0 0;\n    transition: transform 250ms cubic-bezier(0.2, 0, 0, 1),\n                width 250ms cubic-bezier(0.2, 0, 0, 1);\n    pointer-events: none;\n  }\n`;\n\nexport const tabStyles = css`\n  :host {\n    display: inline-flex;\n    flex: 1;\n    min-width: 90px;\n    height: 48px;\n    outline: none;\n    cursor: pointer;\n    user-select: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  .tab {\n    position: relative;\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    padding: 0 16px;\n    gap: 8px;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    font-size: var(--md-sys-typescale-title-small-size, 14px);\n    font-weight: 500;\n    line-height: 20px;\n    letter-spacing: 0.1px;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    transition: color 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([active]) .tab {\n    color: var(--md-sys-color-primary, #6750A4);\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    position: relative;\n    z-index: 1;\n  }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport { tabsStyles, tabStyles } from './tabs.css.js';\n\n@customElement('md-tab')\nexport class MdTab extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, tabStyles];\n\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: String })\n  label = '';\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'tab');\n    this.setAttribute('aria-selected', this.active ? 'true' : 'false');\n    this.tabIndex = this.active ? 0 : -1;\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('active')) {\n      this.setAttribute('aria-selected', this.active ? 'true' : 'false');\n      this.tabIndex = this.active ? 0 : -1;\n    }\n  }\n\n  override render() {\n    return html`\n      <div class=\"tab\">\n        <md-ripple ?disabled=${this.disabled}></md-ripple>\n        <md-focus-ring></md-focus-ring>\n        <span class=\"content\">\n          <slot name=\"icon\">\n            ${this.icon ? html`<md-icon name=${this.icon}></md-icon>` : nothing}\n          </slot>\n          <slot>${this.label}</slot>\n        </span>\n      </div>\n    `;\n  }\n}\n\n@customElement('md-tabs')\nexport class MdTabs extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, tabsStyles];\n\n  @property({ type: Number, reflect: true, attribute: 'active-index' })\n  activeIndex = 0;\n\n  @queryAssignedElements({ selector: 'md-tab' })\n  private tabs!: MdTab[];\n\n  @query('.indicator')\n  private indicatorElement?: HTMLElement;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'tablist');\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.handleClick);\n    this.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('activeIndex')) {\n      this.syncActiveTab();\n    }\n  }\n\n  private handleSlotChange = () => {\n    this.syncActiveTab();\n  };\n\n  private syncActiveTab() {\n    if (!this.tabs || this.tabs.length === 0) return;\n\n    this.tabs.forEach((tab, index) => {\n      tab.active = index === this.activeIndex;\n    });\n\n    this.updateIndicator();\n  }\n\n  private updateIndicator() {\n    if (!this.indicatorElement || !this.tabs || this.tabs.length === 0) return;\n\n    const activeTab = this.tabs[this.activeIndex];\n    if (activeTab) {\n      const parentRect = this.getBoundingClientRect();\n      const tabRect = activeTab.getBoundingClientRect();\n      const left = tabRect.left - parentRect.left;\n      const width = tabRect.width;\n\n      this.indicatorElement.style.transform = `translateX(${left}px)`;\n      this.indicatorElement.style.width = `${width}px`;\n    }\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    const target = (event.target as HTMLElement).closest('md-tab') as MdTab | null;\n    if (target && !target.disabled) {\n      const index = this.tabs.indexOf(target);\n      if (index !== -1 && index !== this.activeIndex) {\n        this.activeIndex = index;\n        this.syncActiveTab();\n        this.emitEvent('change', { activeIndex: this.activeIndex });\n      }\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const enabledTabs = this.tabs.filter((t) => !t.disabled);\n    if (enabledTabs.length === 0) return;\n\n    const currentTab = this.tabs[this.activeIndex];\n    const currentIndex = enabledTabs.indexOf(currentTab!);\n\n    let nextIndex = -1;\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      nextIndex = currentIndex < enabledTabs.length - 1 ? currentIndex + 1 : 0;\n    } else if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabs.length - 1;\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      nextIndex = 0;\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      nextIndex = enabledTabs.length - 1;\n    }\n\n    if (nextIndex !== -1 && enabledTabs[nextIndex]) {\n      const targetTab = enabledTabs[nextIndex]!;\n      this.activeIndex = this.tabs.indexOf(targetTab);\n      this.syncActiveTab();\n      targetTab.focus();\n      this.emitEvent('change', { activeIndex: this.activeIndex });\n    }\n  };\n\n  override render() {\n    return html`\n      <div class=\"tabs-container\">\n        <slot @slotchange=${this.handleSlotChange}></slot>\n        <div class=\"indicator\"></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-tab': MdTab;\n    'md-tabs': MdTabs;\n  }\n}\n\n"],"mappings":"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"}

package/dist/chunks/text-field-hN6-2HQy.js

@@ -0,0 +1,338 @@
+import { t as e } from "./decorate-DXuynaiA.js";
+import { t as s } from "./form-associated-Cty_ZaS9.js";
+import "./ripple-squbKHhj.js";
+import "./icon-DrNqcNEL.js";
+import { css as h, html as o, nothing as a } from "lit";
+import { customElement as d, property as i, query as p, queryAssignedElements as c, state as u } from "lit/decorators.js";
+var f = h`
+  :host {
+    display: inline-flex;
+    flex-direction: column;
+    min-width: 240px;
+    vertical-align: top;
+    align-self: flex-start;
+    box-sizing: border-box;
+    font-family: var(--md-sys-typescale-font-family, inherit);
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+
+  .container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: 56px;
+    padding: 0 16px;
+    box-sizing: border-box;
+    transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),
+                border-color 150ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  /* --- Filled Variant (Default) --- */
+  :host(:not([variant])) .container,
+  :host([variant="filled"]) .container {
+    background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);
+    border-radius: var(--md-sys-shape-corner-extra-small, 4px) var(--md-sys-shape-corner-extra-small, 4px) 0 0;
+    border-bottom: 1px solid var(--md-sys-color-on-surface-variant, #49454F);
+  }
+
+  :host(:not([variant])[focused]) .container,
+  :host([variant="filled"][focused]) .container {
+    border-bottom: 2px solid var(--md-sys-color-primary, #6750A4);
+  }
+
+  :host(:not([variant])[error]) .container,
+  :host([variant="filled"][error]) .container {
+    border-bottom-color: var(--md-sys-color-error, #B3261E);
+  }
+
+  /* --- Outlined Variant --- */
+  :host([variant="outlined"]) .container {
+    background-color: transparent;
+    border: 1px solid var(--md-sys-color-outline, #79747E);
+    border-radius: var(--md-sys-shape-corner-extra-small, 4px);
+  }
+
+  :host([variant="outlined"][focused]) .container {
+    border: 2px solid var(--md-sys-color-primary, #6750A4);
+    padding: 0 15px; /* Offset for 2px border */
+  }
+
+  :host([variant="outlined"][error]) .container {
+    border-color: var(--md-sys-color-error, #B3261E);
+  }
+
+  /* Floating Label */
+  .label {
+    position: absolute;
+    left: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 16px;
+    line-height: 16px;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    pointer-events: none;
+    transition: transform 150ms cubic-bezier(0.2, 0, 0, 1),
+                font-size 150ms cubic-bezier(0.2, 0, 0, 1),
+                color 150ms cubic-bezier(0.2, 0, 0, 1),
+                left 150ms cubic-bezier(0.2, 0, 0, 1),
+                top 150ms cubic-bezier(0.2, 0, 0, 1);
+    transform-origin: top left;
+    white-space: nowrap;
+    max-width: calc(100% - 32px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  :host([has-leading-icon]) .label {
+    left: 52px;
+    max-width: calc(100% - 68px);
+  }
+
+  /* Filled Variant Floating Label */
+  :host(:not([variant])[focused]) .label,
+  :host(:not([variant])[has-value]) .label,
+  :host(:not([variant])[has-placeholder]) .label,
+  :host([variant="filled"][focused]) .label,
+  :host([variant="filled"][has-value]) .label,
+  :host([variant="filled"][has-placeholder]) .label {
+    top: 8px;
+    transform: translateY(0) scale(0.75);
+    transform-origin: top left;
+  }
+
+  /* Outlined Variant Floating Label */
+  :host([variant="outlined"][focused]) .label,
+  :host([variant="outlined"][has-value]) .label,
+  :host([variant="outlined"][has-placeholder]) .label {
+    top: 0;
+    left: 12px;
+    transform: translateY(-50%) scale(0.75);
+    transform-origin: left center;
+    background-color: var(--md-sys-color-surface, #FEF7FF);
+    padding: 0 4px;
+    max-width: calc(100% - 24px);
+    z-index: 1;
+  }
+
+  :host([focused]) .label {
+    color: var(--md-sys-color-primary, #6750A4);
+  }
+
+  :host([error]) .label {
+    color: var(--md-sys-color-error, #B3261E);
+  }
+
+  .input-wrapper {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    height: 100%;
+    min-width: 0;
+  }
+
+  :host(:not([variant])) .input-wrapper,
+  :host([variant="filled"]) .input-wrapper {
+    padding-top: 18px;
+  }
+
+  input {
+    flex: 1;
+    width: 100%;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-family: inherit;
+    font-size: 16px;
+    line-height: 24px;
+    color: var(--md-sys-color-on-surface, #1D1B20);
+    padding: 0;
+  }
+
+  input::placeholder {
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    opacity: 0.6;
+  }
+
+  .affix {
+    font-size: 16px;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    user-select: none;
+    transition: opacity 150ms ease;
+  }
+
+  :host(:not([focused]):not([has-value]):not([has-placeholder])) .affix {
+    opacity: 0;
+  }
+
+  .prefix { margin-right: 4px; }
+  .suffix { margin-left: 4px; }
+
+  .icon-slot {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    flex-shrink: 0;
+  }
+
+  .leading-icon { margin-right: 12px; }
+  .trailing-icon { margin-left: 12px; }
+
+  :host([error]) .trailing-icon {
+    color: var(--md-sys-color-error, #B3261E);
+  }
+
+  /* Supporting / Error text */
+  .supporting-text {
+    display: flex;
+    justify-content: space-between;
+    padding: 4px 16px 0;
+    font-size: 12px;
+    line-height: 16px;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+  }
+
+  :host([error]) .supporting-text {
+    color: var(--md-sys-color-error, #B3261E);
+  }
+`, t = class extends s {
+  constructor(...r) {
+    super(...r), this.variant = "filled", this.label = "", this.value = "", this.placeholder = "", this.type = "text", this.readonly = !1, this.error = !1, this.errorText = "", this.supportingText = "", this.prefixText = "", this.suffixText = "", this.maxLength = -1, this.pattern = "", this.leadingIcon = "", this.trailingIcon = "", this.focused = !1, this.handleFocus = () => {
+      this.focused = !0, this.toggleAttribute("focused", !0);
+    }, this.handleBlur = () => {
+      this.focused = !1, this.toggleAttribute("focused", !1), this.validateInput();
+    }, this.handleInput = (l) => {
+      const n = l.target;
+      this.value = n.value, this.setFormValue(this.value), this.emitEvent("input", { value: this.value });
+    }, this.handleChange = () => {
+      this.emitEvent("change", { value: this.value });
+    };
+  }
+  static {
+    this.styles = [s.styles, f];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setFormValue(this.value), this.toggleAttribute("has-value", !!this.value), this.toggleAttribute("has-placeholder", !!this.placeholder), this.toggleAttribute("has-leading-icon", !!this.leadingIcon);
+  }
+  firstUpdated(r) {
+    super.firstUpdated(r), this.handleSlotChange();
+  }
+  willUpdate(r) {
+    super.willUpdate(r), r.has("value") && (this.setFormValue(this.value), this.toggleAttribute("has-value", !!this.value), this.validateInput()), r.has("placeholder") && this.toggleAttribute("has-placeholder", !!this.placeholder), r.has("leadingIcon") && this.toggleAttribute("has-leading-icon", !!this.leadingIcon);
+  }
+  formResetCallback() {
+    this.value = "", this.error = !1, this.toggleAttribute("has-value", !1), this.setFormValue(null);
+  }
+  validateInput() {
+    this.inputElement && (this.required && !this.value ? (this.setValidity({ valueMissing: !0 }, this.errorText || "This field is required"), this.error = !0) : this.pattern && !new RegExp(this.pattern).test(this.value) ? (this.setValidity({ patternMismatch: !0 }, this.errorText || "Invalid format"), this.error = !0) : (this.setValidity({}), this.errorText || (this.error = !1)));
+  }
+  handleSlotChange() {
+    const r = !!(this.leadingIcon || this.assignedLeadingIcons && this.assignedLeadingIcons.length > 0);
+    this.toggleAttribute("has-leading-icon", r);
+  }
+  render() {
+    const r = this.error ? this.errorText || this.supportingText : this.supportingText;
+    return o`
+      <div class="container" @click=${() => this.inputElement?.focus()}>
+        ${this.variant === "filled" ? o`<md-ripple ?disabled=${this.disabled}></md-ripple>` : a}
+
+        <span class="icon-slot leading-icon">
+          <slot name="leading-icon" @slotchange=${this.handleSlotChange}>
+            ${this.leadingIcon ? o`<md-icon name=${this.leadingIcon}></md-icon>` : a}
+          </slot>
+        </span>
+
+        <div class="input-wrapper">
+          ${this.label ? o`<label class="label">${this.label}</label>` : a}
+          ${this.prefixText ? o`<span class="affix prefix">${this.prefixText}</span>` : a}
+          <input
+            type=${this.type}
+            .value=${this.value}
+            placeholder=${this.focused || !this.label ? this.placeholder : ""}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            ?required=${this.required}
+            maxlength=${this.maxLength > 0 ? this.maxLength : a}
+            @focus=${this.handleFocus}
+            @blur=${this.handleBlur}
+            @input=${this.handleInput}
+            @change=${this.handleChange}
+          />
+          ${this.suffixText ? o`<span class="affix suffix">${this.suffixText}</span>` : a}
+        </div>
+
+        <span class="icon-slot trailing-icon">
+          <slot name="trailing-icon">
+            ${this.error ? o`<md-icon name="error" filled></md-icon>` : this.trailingIcon ? o`<md-icon name=${this.trailingIcon}></md-icon>` : a}
+          </slot>
+        </span>
+      </div>
+
+      ${r || this.maxLength > 0 ? o`
+            <div class="supporting-text">
+              <span>${r}</span>
+              ${this.maxLength > 0 ? o`<span>${this.value.length} / ${this.maxLength}</span>` : a}
+            </div>
+          ` : a}
+    `;
+  }
+};
+e([i({
+  type: String,
+  reflect: !0
+})], t.prototype, "variant", void 0);
+e([i({ type: String })], t.prototype, "label", void 0);
+e([i({ type: String })], t.prototype, "value", void 0);
+e([i({ type: String })], t.prototype, "placeholder", void 0);
+e([i({ type: String })], t.prototype, "type", void 0);
+e([i({
+  type: Boolean,
+  reflect: !0
+})], t.prototype, "readonly", void 0);
+e([i({
+  type: Boolean,
+  reflect: !0
+})], t.prototype, "error", void 0);
+e([i({
+  type: String,
+  attribute: "error-text"
+})], t.prototype, "errorText", void 0);
+e([i({
+  type: String,
+  attribute: "supporting-text"
+})], t.prototype, "supportingText", void 0);
+e([i({
+  type: String,
+  attribute: "prefix-text"
+})], t.prototype, "prefixText", void 0);
+e([i({
+  type: String,
+  attribute: "suffix-text"
+})], t.prototype, "suffixText", void 0);
+e([i({
+  type: Number,
+  attribute: "maxlength"
+})], t.prototype, "maxLength", void 0);
+e([i({ type: String })], t.prototype, "pattern", void 0);
+e([i({
+  type: String,
+  attribute: "leading-icon"
+})], t.prototype, "leadingIcon", void 0);
+e([i({
+  type: String,
+  attribute: "trailing-icon"
+})], t.prototype, "trailingIcon", void 0);
+e([u()], t.prototype, "focused", void 0);
+e([p("input")], t.prototype, "inputElement", void 0);
+e([c({ slot: "leading-icon" })], t.prototype, "assignedLeadingIcons", void 0);
+t = e([d("md-text-field")], t);
+export {
+  t
+};
+
+//# sourceMappingURL=text-field-hN6-2HQy.js.map