@reliability-design/web 1.4.5 → 1.4.7

package/dist/components/rel-table/rel-table-cell.ts

@@ -1,43 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-@customElement("rel-table-cell")
-export class RelTableCell extends LitElement {
-  @property({ type: String, reflect: true }) align: "left" | "center" | "right" = "left";
-  @property({ type: Number, reflect: true }) colspan?: number;
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: contents;
-    }
-
-    td {
-      border-right: 1px solid var(--rel-border-default);
-    }
-
-    :host(:last-child) td {
-      border-right: none;
-    }
-  `;
-
-  render() {
-    return html`
-      <td
-        role="cell"
-        colspan="${this.colspan ?? 1}"
-        style="
-          text-align: ${this.align};
-          font-family: var(--rel-fonts-font-family);
-          padding: var(--rel-spacing-sm) var(--rel-spacing-md);
-          font-size: var(--rel-body-md-regular-font-size);
-          color: var(--rel-text-default);
-          vertical-align: middle;
-          border-bottom: 1px solid var(--rel-border-default);
-        "
-      >
-        <slot></slot>
-      </td>
-    `;
-  }
-}

package/dist/components/rel-table/rel-table-footer.ts

@@ -1,24 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement } from "lit/decorators.js";
-
-@customElement("rel-table-footer")
-export class RelTableFooter extends LitElement {
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: table-footer-group;
-      font-family: var(--rel-fonts-font-family);
-      font-weight: var(--rel-fonts-weight-body-medium, 500);
-      background-color: var(--rel-bg-surface-elevated);
-    }
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("role", "rowgroup");
-  }
-
-  render() {
-    return html`<slot></slot>`;
-  }
-}

package/dist/components/rel-table/rel-table-head.ts

@@ -1,47 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-@customElement("rel-table-head")
-export class RelTableHead extends LitElement {
-  @property({ type: String, reflect: true }) align: "left" | "center" | "right" = "left";
-
-  static styles = css`
-    :host {
-      display: table-cell;
-      padding: var(--rel-spacing-sm) var(--rel-spacing-md);
-      text-align: left;
-      color: var(--rel-text-placeholder);
-      vertical-align: middle;
-      height: var(--rel-table-head-height, 48px);
-      border-bottom: 1px solid var(--rel-border-default);
-      border-right: 1px solid var(--rel-border-default);
-      font-family: var(--rel-body-sm-medium-font-family);
-      font-weight: var(--rel-body-sm-medium-font-weight);
-      font-size: var(--rel-body-sm-medium-font-size);
-      line-height: var(--rel-body-sm-medium-line-height);
-      letter-spacing: var(--rel-body-sm-medium-letter-spacing);
-    }
-
-    :host(:last-child) {
-      border-right: none;
-    }
-
-    :host([align="center"]) {
-      text-align: center;
-    }
-
-    :host([align="right"]) {
-      text-align: right;
-    }
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("role", "columnheader");
-    this.setAttribute("scope", "col");
-  }
-
-  render() {
-    return html`<slot></slot>`;
-  }
-}

package/dist/components/rel-table/rel-table-header.ts

@@ -1,22 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement } from "lit/decorators.js";
-
-@customElement("rel-table-header")
-export class RelTableHeader extends LitElement {
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: table-header-group;
-      font-family: var(--rel-fonts-font-family);
-    }
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("role", "rowgroup");
-  }
-
-  render() {
-    return html`<slot></slot>`;
-  }
-}

package/dist/components/rel-table/rel-table-row.ts

@@ -1,37 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-@customElement("rel-table-row")
-export class RelTableRow extends LitElement {
-  @property({ type: Boolean, reflect: true }) selected = false;
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: table-row;
-      font-family: var(--rel-fonts-font-family);
-      transition: background-color 0.15s ease;
-    }
-
-    :host(:hover) {
-      background-color: var(--rel-bg-surface-elevated);
-    }
-
-    :host([selected]) {
-      background-color: var(--rel-bg-neutral-elevated-2);
-    }
-
-    :host([selected]:hover) {
-      background-color: var(--rel-action-overlay-hover);
-    }
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("role", "row");
-  }
-
-  render() {
-    return html`<slot></slot>`;
-  }
-}

package/dist/components/rel-table/rel-table.ts

@@ -1,62 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-/**
- * @deprecated rel-table has no Figma design in RelDS 2.0 and is excluded from
- * the parity contract. It remains exported for compatibility but will be
- * removed in a future major version.
- */
-@customElement("rel-table")
-export class RelTable extends LitElement {
-  @property({ type: Boolean, reflect: true }) bordered = false;
-  @property({ type: Boolean, reflect: true }) compact = false;
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: block;
-      font-family: var(--rel-fonts-font-family);
-      position: relative;
-      width: 100%;
-    }
-
-    .table-wrapper {
-      position: relative;
-      width: 100%;
-      overflow-x: auto;
-    }
-
-    :host([bordered]) {
-      border: var(--rel-stroke-sm) solid var(--rel-border-default);
-      border-radius: var(--rel-border-radius-sm);
-      overflow: hidden;
-    }
-
-    table {
-      width: 100%;
-      caption-side: bottom;
-      border-collapse: collapse;
-      color: var(--rel-text-default);
-      font-family: var(--rel-body-md-regular-font-family);
-      font-weight: var(--rel-body-md-regular-font-weight);
-      font-size: var(--rel-body-md-regular-font-size);
-      line-height: var(--rel-body-md-regular-line-height);
-      letter-spacing: var(--rel-body-md-regular-letter-spacing);
-    }
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("role", "table");
-  }
-
-  render() {
-    return html`
-      <div class="table-wrapper">
-        <table>
-          <slot></slot>
-        </table>
-      </div>
-    `;
-  }
-}