@boostdev/design-system-components 1.1.2 → 1.2.1

package/src/web-components/ui/bds-table.ts

@@ -0,0 +1,96 @@
+import { LitElement, css, html } from 'lit';
+
+/**
+ * `<bds-table>` — scrollable table wrapper with design-system styles.
+ *
+ * Slotted content should be a standard `<table>` with `<thead>` / `<tbody>`.
+ * Design-token styles are applied to the table and its cells via `::slotted`.
+ *
+ * Attributes:
+ *   sticky-header — freezes `<thead>` at the top when the table overflows vertically
+ *
+ * Slots:
+ *   (default) — a `<table>` element
+ *
+ * @example
+ * <bds-table sticky-header>
+ *   <table>
+ *     <thead><tr><th>Name</th><th>Value</th></tr></thead>
+ *     <tbody><tr><td>Alpha</td><td>1</td></tr></tbody>
+ *   </table>
+ * </bds-table>
+ */
+export class BdsTable extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    .wrapper {
+      overflow-inline: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    ::slotted(table) {
+      inline-size: 100%;
+      border-collapse: collapse;
+      font-size: var(--bds-font_size--body);
+      font-family: var(--bds-font_family--body);
+      color: var(--bds-color_on-bg);
+    }
+
+    ::slotted(thead) {
+      background-color: var(--bds-color_bg--subtle);
+    }
+
+    ::slotted(th) {
+      padding: var(--bds-space_xs) var(--bds-space_s);
+      font-weight: var(--bds-font_weight--semibold);
+      font-size: var(--bds-font_size--body--s);
+      text-align: start;
+      color: var(--bds-color_on-bg--subtle);
+      border-block-end: 1px solid var(--bds-color_bg--subtle);
+      white-space: nowrap;
+    }
+
+    ::slotted(td) {
+      padding: var(--bds-space_xs) var(--bds-space_s);
+      border-block-end: 1px solid var(--bds-color_bg--subtle);
+      vertical-align: middle;
+    }
+
+    ::slotted(tr:last-child td) {
+      border-block-end: none;
+    }
+  `;
+
+  static properties = {
+    stickyHeader: { type: Boolean, attribute: 'sticky-header', reflect: true },
+  };
+
+  declare stickyHeader: boolean;
+
+  constructor() {
+    super();
+    this.stickyHeader = false;
+  }
+
+  render() {
+    return html`
+      <div
+        class="wrapper"
+        style=${this.stickyHeader ? 'max-block-size: 100%; overflow-block: auto;' : ''}
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+customElements.define('bds-table', BdsTable);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-table': BdsTable;
+  }
+}