@umbraco-ui/uui 1.17.0 → 2.0.0-alpha.1

package/dist/components/symbol-more/symbol-more.d.ts

@@ -0,0 +1,8 @@
+import { UUISymbolMoreElement } from './symbol-more.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-symbol-more': UUISymbolMoreElement;
+    }
+}
+export * from './symbol-more.element.js';
+export { UUISymbolMoreElement as default } from './symbol-more.element.js';

package/dist/components/symbol-more/symbol-more.element.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from 'lit';
+/**
+ * @element uui-symbol-more
+ */
+export declare class UUISymbolMoreElement extends LitElement {
+    render(): import("lit-html").TemplateResult<2>;
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/symbol-more/symbol-more.element.js

@@ -0,0 +1,29 @@
+import { LitElement, svg, css } from "lit";
+const _UUISymbolMoreElement = class _UUISymbolMoreElement extends LitElement {
+  render() {
+    return svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+      <circle cx="17" cy="50" r="9"></circle>
+      <circle cx="50" cy="50" r="9"></circle>
+      <circle cx="83" cy="50" r="9"></circle>
+    </svg>`;
+  }
+};
+_UUISymbolMoreElement.styles = [
+  css`
+      :host {
+        display: inline-block;
+        vertical-align: bottom;
+        width: 1.15em;
+        height: 1.15em;
+      }
+
+      svg {
+        fill: currentColor;
+      }
+    `
+];
+let UUISymbolMoreElement = _UUISymbolMoreElement;
+export {
+  UUISymbolMoreElement
+};
+//# sourceMappingURL=symbol-more.element.js.map

package/dist/components/symbol-more/symbol-more.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"symbol-more.element.js","sources":["../../../src/components/symbol-more/symbol-more.element.ts"],"sourcesContent":["import { LitElement, svg, css } from 'lit';\n/**\n * @element uui-symbol-more\n */\nexport class UUISymbolMoreElement extends LitElement {\n  render() {\n    return svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\">\n      <circle cx=\"17\" cy=\"50\" r=\"9\"></circle>\n      <circle cx=\"50\" cy=\"50\" r=\"9\"></circle>\n      <circle cx=\"83\" cy=\"50\" r=\"9\"></circle>\n    </svg>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: inline-block;\n        vertical-align: bottom;\n        width: 1.15em;\n        height: 1.15em;\n      }\n\n      svg {\n        fill: currentColor;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";AAIO,MAAM,wBAAN,MAAM,8BAA6B,WAAW;AAAA,EACnD,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AAgBF;AAdE,sBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAVG,IAAM,uBAAN;"}

package/dist/components/symbol-more/symbol-more.js

@@ -0,0 +1,8 @@
+import { defineElement } from "../../internal/registration/index.js";
+import { UUISymbolMoreElement } from "./symbol-more.element.js";
+defineElement("uui-symbol-more", UUISymbolMoreElement);
+export {
+  UUISymbolMoreElement,
+  UUISymbolMoreElement as default
+};
+//# sourceMappingURL=symbol-more.js.map

package/dist/components/symbol-more/symbol-more.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"symbol-more.js","sources":["../../../src/components/symbol-more/symbol-more.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUISymbolMoreElement } from './symbol-more.element.js';\n\ndefineElement('uui-symbol-more', UUISymbolMoreElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-symbol-more': UUISymbolMoreElement;\n  }\n}\n\nexport * from './symbol-more.element.js';\nexport { UUISymbolMoreElement as default } from './symbol-more.element.js';\n"],"names":[],"mappings":";;AAGA,cAAc,mBAAmB,oBAAoB;"}

package/dist/components/symbol-sort/symbol-sort.d.ts

@@ -0,0 +1,8 @@
+import { UUISymbolSortElement } from './symbol-sort.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-symbol-sort': UUISymbolSortElement;
+    }
+}
+export * from './symbol-sort.element.js';
+export { UUISymbolSortElement as default } from './symbol-sort.element.js';

package/dist/components/symbol-sort/symbol-sort.element.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+declare const UUISymbolSortElement_base: (new (...args: any[]) => import("../../index.js").UUIActiveMixinInterface) & typeof LitElement;
+/**
+ *  @element uui-symbol-sort
+ *  @description A symbol indicating whether related composition is sorting(active) and whether the sorting is ascending or descending.
+ *  Please define aria-sort on the header for the composition.
+ */
+export declare class UUISymbolSortElement extends UUISymbolSortElement_base {
+    /**
+     * Turns the arrow around. Set this boolean to true for displaying descending sort is active.
+     * @type {boolean}
+     * @default false
+     */
+    descending: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+export {};

package/dist/components/symbol-sort/symbol-sort.element.js

@@ -0,0 +1,116 @@
+import { LitElement, html, css } from "lit";
+import { property } from "lit/decorators.js";
+import { ActiveMixin } from "../../internal/mixins/ActiveMixin.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const _UUISymbolSortElement = class _UUISymbolSortElement extends ActiveMixin(LitElement) {
+  constructor() {
+    super(...arguments);
+    this.descending = false;
+  }
+  render() {
+    return html` <svg
+        id="up"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="3"
+        stroke-linecap="round"
+        stroke-linejoin="round">
+        <path d="m4 9 8 8 8-8"></path>
+      </svg>
+      <svg
+        id="down"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="3"
+        stroke-linecap="round"
+        stroke-linejoin="round">
+        <path d="m4 9 8 8 8-8"></path>
+      </svg>`;
+  }
+};
+_UUISymbolSortElement.styles = [
+  css`
+      :host {
+        position: relative;
+        display: inline-block;
+        width: 0.9em;
+        height: 1em;
+        //vertical-align: middle;
+        pointer-events: none;
+      }
+
+      svg {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        width: 0.9em;
+        transform-origin: 50% 50%;
+        transition:
+          transform 120ms ease-in-out,
+          opacity 120ms,
+          margin-top 240ms;
+        opacity: 0;
+        margin-top: -8em;
+      }
+
+      #up {
+        transform: rotate(180deg);
+        margin-top: -1.05em;
+      }
+      #down {
+        margin-top: -0.55em;
+      }
+      :host([active]) #up {
+        margin-top: calc(-0.8em - (0.25em * var(--uui-symbol-sort-hover, 0)));
+      }
+      :host([active]) #down {
+        margin-top: calc(-0.8em + (0.25em * var(--uui-symbol-sort-hover, 0)));
+      }
+
+      :host(:hover) {
+        --uui-symbol-sort-hover: 1;
+      }
+      :host(:not([active])) #up,
+      :host(:not([active])) #down {
+        opacity: calc(0.25 * var(--uui-symbol-sort-hover, 0));
+      }
+
+      :host([active]:not([descending])) #down {
+        opacity: 1;
+      }
+      :host([active]:not([descending])) #up {
+        opacity: calc(0.25 * var(--uui-symbol-sort-hover, 0));
+      }
+
+      :host([active][descending]) #up {
+        opacity: 1;
+      }
+      :host([active][descending]) #down {
+        opacity: calc(0.25 * var(--uui-symbol-sort-hover, 0));
+      }
+    `
+];
+let UUISymbolSortElement = _UUISymbolSortElement;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUISymbolSortElement.prototype, "descending");
+export {
+  UUISymbolSortElement
+};
+//# sourceMappingURL=symbol-sort.element.js.map

package/dist/components/symbol-sort/symbol-sort.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"symbol-sort.element.js","sources":["../../../src/components/symbol-sort/symbol-sort.element.ts"],"sourcesContent":["import { ActiveMixin } from '../../internal/mixins/index.js';\nimport { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n/**\n *  @element uui-symbol-sort\n *  @description A symbol indicating whether related composition is sorting(active) and whether the sorting is ascending or descending.\n *  Please define aria-sort on the header for the composition.\n */\nexport class UUISymbolSortElement extends ActiveMixin(LitElement) {\n  /**\n   * Turns the arrow around. Set this boolean to true for displaying descending sort is active.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public descending = false;\n\n  render() {\n    return html` <svg\n        id=\"up\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"3\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\">\n        <path d=\"m4 9 8 8 8-8\"></path>\n      </svg>\n      <svg\n        id=\"down\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"3\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\">\n        <path d=\"m4 9 8 8 8-8\"></path>\n      </svg>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        position: relative;\n        display: inline-block;\n        width: 0.9em;\n        height: 1em;\n        //vertical-align: middle;\n        pointer-events: none;\n      }\n\n      svg {\n        position: absolute;\n        left: 0;\n        top: 50%;\n        width: 0.9em;\n        transform-origin: 50% 50%;\n        transition:\n          transform 120ms ease-in-out,\n          opacity 120ms,\n          margin-top 240ms;\n        opacity: 0;\n        margin-top: -8em;\n      }\n\n      #up {\n        transform: rotate(180deg);\n        margin-top: -1.05em;\n      }\n      #down {\n        margin-top: -0.55em;\n      }\n      :host([active]) #up {\n        margin-top: calc(-0.8em - (0.25em * var(--uui-symbol-sort-hover, 0)));\n      }\n      :host([active]) #down {\n        margin-top: calc(-0.8em + (0.25em * var(--uui-symbol-sort-hover, 0)));\n      }\n\n      :host(:hover) {\n        --uui-symbol-sort-hover: 1;\n      }\n      :host(:not([active])) #up,\n      :host(:not([active])) #down {\n        opacity: calc(0.25 * var(--uui-symbol-sort-hover, 0));\n      }\n\n      :host([active]:not([descending])) #down {\n        opacity: 1;\n      }\n      :host([active]:not([descending])) #up {\n        opacity: calc(0.25 * var(--uui-symbol-sort-hover, 0));\n      }\n\n      :host([active][descending]) #up {\n        opacity: 1;\n      }\n      :host([active][descending]) #down {\n        opacity: calc(0.25 * var(--uui-symbol-sort-hover, 0));\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AASO,MAAM,wBAAN,MAAM,8BAA6B,YAAY,UAAU,EAAE;AAAA,EAA3D,cAAA;AAAA,UAAA,GAAA,SAAA;AAOL,SAAO,aAAa;AAAA,EAAA;AAAA,EAEpB,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0BT;AAgEF;AA9DE,sBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAvCG,IAAM,uBAAN;AAOE,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAN/B,qBAOJ,WAAA,YAAA;"}

package/dist/components/symbol-sort/symbol-sort.js

@@ -0,0 +1,8 @@
+import { defineElement } from "../../internal/registration/index.js";
+import { UUISymbolSortElement } from "./symbol-sort.element.js";
+defineElement("uui-symbol-sort", UUISymbolSortElement);
+export {
+  UUISymbolSortElement,
+  UUISymbolSortElement as default
+};
+//# sourceMappingURL=symbol-sort.js.map

package/dist/components/symbol-sort/symbol-sort.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"symbol-sort.js","sources":["../../../src/components/symbol-sort/symbol-sort.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUISymbolSortElement } from './symbol-sort.element.js';\n\ndefineElement('uui-symbol-sort', UUISymbolSortElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-symbol-sort': UUISymbolSortElement;\n  }\n}\n\nexport * from './symbol-sort.element.js';\nexport { UUISymbolSortElement as default } from './symbol-sort.element.js';\n"],"names":[],"mappings":";;AAGA,cAAc,mBAAmB,oBAAoB;"}

package/dist/components/table/table-advanced-example.d.ts

@@ -0,0 +1,56 @@
+import './table.js';
+import '../avatar/avatar.js';
+import '../box/box.js';
+import '../button/button.js';
+import '../checkbox/checkbox.js';
+import '../icon/icon.js';
+import '../progress-bar/progress-bar.js';
+import '../tag/tag.js';
+import '../symbol-sort/symbol-sort.js';
+import { LitElement } from 'lit';
+interface TableColumn {
+    name: string;
+    sort: (items: Array<TableItem>, desc: boolean) => Array<TableItem>;
+}
+interface TableItem {
+    key: string;
+    name: string;
+    progress: number;
+    signUpDate: string;
+    email: string;
+    newsletter: boolean;
+}
+export declare class UUITableWithSelectionExampleElement extends LitElement {
+    /**
+     * This property is used to generate the label for the select all checkbox
+     * @type {string}
+     * @attr
+     */
+    selectAllLabel: string;
+    /**
+     * This property is used to generate the label for individual row checkboxes.
+     * The item name will be appended. For example, with the default value "Select" and an item named "John Doe",
+     * the resulting label will be "Select John Doe".
+     * @type {string}
+     * @attr
+     */
+    selectRowLabel: string;
+    private _columns;
+    private _items;
+    private _selectionMode;
+    private _selection;
+    private _sortingColumn;
+    private _sortingDesc;
+    private _selectAllHandler;
+    private _selectHandler;
+    private _selectRowHandler;
+    private _deselectRowHandler;
+    private _sortingHandler;
+    private _isSelected;
+    connectedCallback(): void;
+    renderHeaderCellTemplate(column: TableColumn): import("lit-html").TemplateResult<1>;
+    protected renderRowTemplate: (item: TableItem) => import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+export {};

package/dist/components/table/table-cell.element.d.ts

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+/**
+ *  Table cell that detects if it has overflow and if so it'll add a title attribute to itself to display full text. Must be a child of uui-table-row
+ *  @element uui-table-cell
+ *  @slot - slot for table cell content
+ *  @cssprop --uui-table-cell-padding - overwrite the table cell padding
+ *  @cssprop --uui-table-cell-height - overwrite the table cell height
+ */
+export declare class UUITableCellElement extends LitElement {
+    /**
+     * Used to enforce selection interaction by preventing other interactions, primary set by table-row for select-only mode.
+     * @attr
+     * @type boolean
+     */
+    disableChildInteraction: boolean;
+    /**
+     * Remove padding in order to have element going to the edge of the cell.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    noPadding: boolean;
+    /**
+     * Enable overflow ellipsis
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    clipText: boolean;
+    private readonly _observer;
+    private _detectOverflow;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/table/table-cell.element.js

@@ -0,0 +1,106 @@
+import { LitElement, html, css } from "lit";
+import { property } from "lit/decorators.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const _UUITableCellElement = class _UUITableCellElement extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.disableChildInteraction = false;
+    this.noPadding = false;
+    this.clipText = false;
+    this._observer = new ResizeObserver(() => {
+      this._detectOverflow();
+    });
+  }
+  _detectOverflow() {
+    if (this.scrollWidth > this.clientWidth) {
+      this.setAttribute("title", this.innerText);
+    } else {
+      this.removeAttribute("title");
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "cell");
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._observer.disconnect();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("clipText")) {
+      if (this.clipText) {
+        this._detectOverflow();
+        this._observer.observe(this);
+      } else {
+        this._observer.disconnect();
+      }
+    }
+  }
+  render() {
+    return html` <slot @slotchange=${this._detectOverflow}></slot>`;
+  }
+};
+_UUITableCellElement.styles = [
+  css`
+      :host {
+        position: relative;
+        display: table-cell;
+        height: var(--uui-table-cell-height, var(--uui-size-12));
+        padding: var(
+          --uui-table-cell-padding,
+          var(--uui-size-3) var(--uui-size-5)
+        );
+        border-top: 1px solid var(--uui-color-border);
+        vertical-align: middle;
+      }
+
+      :host([clip-text]) {
+        max-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        box-sizing: border-box;
+      }
+
+      :host([disable-child-interaction]) ::slotted(*) {
+        pointer-events: none;
+      }
+
+      :host([disable-child-interaction])::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+      }
+
+      :host([no-padding]) {
+        padding: 0;
+      }
+    `
+];
+let UUITableCellElement = _UUITableCellElement;
+__decorateClass([
+  property({
+    type: Boolean,
+    reflect: true,
+    attribute: "disable-child-interaction"
+  })
+], UUITableCellElement.prototype, "disableChildInteraction");
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "no-padding" })
+], UUITableCellElement.prototype, "noPadding");
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "clip-text" })
+], UUITableCellElement.prototype, "clipText");
+export {
+  UUITableCellElement
+};
+//# sourceMappingURL=table-cell.element.js.map

package/dist/components/table/table-cell.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-cell.element.js","sources":["../../../src/components/table/table-cell.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n/**\n *  Table cell that detects if it has overflow and if so it'll add a title attribute to itself to display full text. Must be a child of uui-table-row\n *  @element uui-table-cell\n *  @slot - slot for table cell content\n *  @cssprop --uui-table-cell-padding - overwrite the table cell padding\n *  @cssprop --uui-table-cell-height - overwrite the table cell height\n */\nexport class UUITableCellElement extends LitElement {\n  /**\n   * Used to enforce selection interaction by preventing other interactions, primary set by table-row for select-only mode.\n   * @attr\n   * @type boolean\n   */\n  @property({\n    type: Boolean,\n    reflect: true,\n    attribute: 'disable-child-interaction',\n  })\n  disableChildInteraction = false;\n\n  /**\n   * Remove padding in order to have element going to the edge of the cell.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'no-padding' })\n  noPadding = false;\n\n  /**\n   * Enable overflow ellipsis\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'clip-text' })\n  clipText = false;\n\n  private readonly _observer = new ResizeObserver(() => {\n    this._detectOverflow();\n  });\n\n  private _detectOverflow() {\n    if (this.scrollWidth > this.clientWidth) {\n      this.setAttribute('title', this.innerText);\n    } else {\n      this.removeAttribute('title');\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'cell');\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._observer.disconnect();\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('clipText')) {\n      if (this.clipText) {\n        this._detectOverflow();\n        this._observer.observe(this);\n      } else {\n        this._observer.disconnect();\n      }\n    }\n  }\n\n  render() {\n    return html` <slot @slotchange=${this._detectOverflow}></slot>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        position: relative;\n        display: table-cell;\n        height: var(--uui-table-cell-height, var(--uui-size-12));\n        padding: var(\n          --uui-table-cell-padding,\n          var(--uui-size-3) var(--uui-size-5)\n        );\n        border-top: 1px solid var(--uui-color-border);\n        vertical-align: middle;\n      }\n\n      :host([clip-text]) {\n        max-width: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        box-sizing: border-box;\n      }\n\n      :host([disable-child-interaction]) ::slotted(*) {\n        pointer-events: none;\n      }\n\n      :host([disable-child-interaction])::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n      }\n\n      :host([no-padding]) {\n        padding: 0;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAUO,MAAM,uBAAN,MAAM,6BAA4B,WAAW;AAAA,EAA7C,cAAA;AAAA,UAAA,GAAA,SAAA;AAWL,SAAA,0BAA0B;AAS1B,SAAA,YAAY;AASZ,SAAA,WAAW;AAEX,SAAiB,YAAY,IAAI,eAAe,MAAM;AACpD,WAAK,gBAAA;AAAA,IACP,CAAC;AAAA,EAAA;AAAA,EAEO,kBAAkB;AACxB,QAAI,KAAK,cAAc,KAAK,aAAa;AACvC,WAAK,aAAa,SAAS,KAAK,SAAS;AAAA,IAC3C,OAAO;AACL,WAAK,gBAAgB,OAAO;AAAA,IAC9B;AAAA,EACF;AAAA,EAEA,oBAAoB;AAClB,UAAM,kBAAA;AACN,SAAK,aAAa,QAAQ,MAAM;AAAA,EAClC;AAAA,EAEA,uBAAuB;AACrB,UAAM,qBAAA;AACN,SAAK,UAAU,WAAA;AAAA,EACjB;AAAA,EAEA,QAAQ,mBAA2D;AACjE,UAAM,QAAQ,iBAAiB;AAC/B,QAAI,kBAAkB,IAAI,UAAU,GAAG;AACrC,UAAI,KAAK,UAAU;AACjB,aAAK,gBAAA;AACL,aAAK,UAAU,QAAQ,IAAI;AAAA,MAC7B,OAAO;AACL,aAAK,UAAU,WAAA;AAAA,MACjB;AAAA,IACF;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO,0BAA0B,KAAK,eAAe;AAAA,EACvD;AAuCF;AArCE,qBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAtEG,IAAM,sBAAN;AAWL,gBAAA;AAAA,EALC,SAAS;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,IACT,WAAW;AAAA,EAAA,CACZ;AAAA,GAVU,oBAWX,WAAA,yBAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,cAAc;AAAA,GAnBxD,oBAoBX,WAAA,WAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,aAAa;AAAA,GA5BvD,oBA6BX,WAAA,UAAA;"}

package/dist/components/table/table-column.element.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from 'lit';
+/**
+ * Table column element. Equivalent of native col. Any styles you apply to it will be applied to the corresponding column in the table. Must be a child of uui-table. If you want to have unstyled column between two styled columns put this element into the markup without any styles applied to it.
+ *  @element uui-table-column
+ */
+export declare class UUITableColumnElement extends LitElement {
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/table/table-column.element.js

@@ -0,0 +1,15 @@
+import { LitElement, css } from "lit";
+const _UUITableColumnElement = class _UUITableColumnElement extends LitElement {
+};
+_UUITableColumnElement.styles = [
+  css`
+      :host {
+        display: table-column;
+      }
+    `
+];
+let UUITableColumnElement = _UUITableColumnElement;
+export {
+  UUITableColumnElement
+};
+//# sourceMappingURL=table-column.element.js.map

package/dist/components/table/table-column.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-column.element.js","sources":["../../../src/components/table/table-column.element.ts"],"sourcesContent":["import { css, LitElement } from 'lit';\n\n/**\n * Table column element. Equivalent of native col. Any styles you apply to it will be applied to the corresponding column in the table. Must be a child of uui-table. If you want to have unstyled column between two styled columns put this element into the markup without any styles applied to it.\n *  @element uui-table-column\n */\nexport class UUITableColumnElement extends LitElement {\n  static override readonly styles = [\n    css`\n      :host {\n        display: table-column;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";AAMO,MAAM,yBAAN,MAAM,+BAA8B,WAAW;AAQtD;AAPE,uBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAFG,IAAM,wBAAN;"}

package/dist/components/table/table-head-cell.element.d.ts

@@ -0,0 +1,9 @@
+import { UUITableCellElement } from './table-cell.element.js';
+/**
+ * Child element of uui-table-head. Use it there.
+ *  @element uui-table-head-cell
+ */
+export declare class UUITableHeadCellElement extends UUITableCellElement {
+    connectedCallback(): void;
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/table/table-head-cell.element.js

@@ -0,0 +1,21 @@
+import { css } from "lit";
+import { UUITableCellElement } from "./table-cell.element.js";
+const _UUITableHeadCellElement = class _UUITableHeadCellElement extends UUITableCellElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "columnheader");
+  }
+};
+_UUITableHeadCellElement.styles = [
+  ...UUITableCellElement.styles,
+  css`
+      :host {
+        border-top: none;
+      }
+    `
+];
+let UUITableHeadCellElement = _UUITableHeadCellElement;
+export {
+  UUITableHeadCellElement
+};
+//# sourceMappingURL=table-head-cell.element.js.map

package/dist/components/table/table-head-cell.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-head-cell.element.js","sources":["../../../src/components/table/table-head-cell.element.ts"],"sourcesContent":["import { css } from 'lit';\n\nimport { UUITableCellElement } from './table-cell.element.js';\n\n/**\n * Child element of uui-table-head. Use it there.\n *  @element uui-table-head-cell\n */\nexport class UUITableHeadCellElement extends UUITableCellElement {\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'columnheader');\n  }\n\n  static override readonly styles = [\n    ...UUITableCellElement.styles,\n    css`\n      :host {\n        border-top: none;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;AAQO,MAAM,2BAAN,MAAM,iCAAgC,oBAAoB;AAAA,EAC/D,oBAAoB;AAClB,UAAM,kBAAA;AACN,SAAK,aAAa,QAAQ,cAAc;AAAA,EAC1C;AAUF;AARE,yBAAyB,SAAS;AAAA,EAChC,GAAG,oBAAoB;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA;AARG,IAAM,0BAAN;"}

package/dist/components/table/table-head.element.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+/**
+ *  Table head element. Holds the styles for table head. Parent to uui-table-head-cell.
+ *  @element uui-table-head
+ *  @slot - slot for uui-table-head-cell elements.
+ */
+export declare class UUITableHeadElement extends LitElement {
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/table/table-head.element.js

@@ -0,0 +1,23 @@
+import { LitElement, html, css } from "lit";
+const _UUITableHeadElement = class _UUITableHeadElement extends LitElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "row");
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+_UUITableHeadElement.styles = [
+  css`
+      :host {
+        display: table-header-group;
+        font-weight: bold;
+      }
+    `
+];
+let UUITableHeadElement = _UUITableHeadElement;
+export {
+  UUITableHeadElement
+};
+//# sourceMappingURL=table-head.element.js.map

package/dist/components/table/table-head.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-head.element.js","sources":["../../../src/components/table/table-head.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\n\n/**\n *  Table head element. Holds the styles for table head. Parent to uui-table-head-cell.\n *  @element uui-table-head\n *  @slot - slot for uui-table-head-cell elements.\n */\nexport class UUITableHeadElement extends LitElement {\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'row');\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: table-header-group;\n        font-weight: bold;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";AAOO,MAAM,uBAAN,MAAM,6BAA4B,WAAW;AAAA,EAClD,oBAAoB;AAClB,UAAM,kBAAA;AACN,SAAK,aAAa,QAAQ,KAAK;AAAA,EACjC;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,EACT;AAUF;AARE,qBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAXG,IAAM,sBAAN;"}

package/dist/components/table/table-row.element.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+declare const UUITableRowElement_base: (new (...args: any[]) => import("../../index.js").UUISelectOnlyMixinInterface) & (new (...args: any[]) => import("../../index.js").UUISelectableMixinInterface) & typeof LitElement;
+/**
+ *  Table row element with option to set is as selectable. Parent for uui-table-cell. Must be a child of uui-table.
+ *  @element uui-table-row
+ *  @slot for <uui-table-cell> elements that should be in the row.
+ *  @cssprop --uui-table-row-color-selected - overwrite the color of the selected row
+ */
+export declare class UUITableRowElement extends UUITableRowElement_base {
+    connectedCallback(): void;
+    private readonly slotCellNodes?;
+    protected updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private updateChildSelectOnly;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+export {};

package/dist/components/table/table-row.element.js

@@ -0,0 +1,74 @@
+import { html, css, LitElement } from "lit";
+import { queryAssignedElements } from "lit/decorators.js";
+import { SelectOnlyMixin } from "../../internal/mixins/SelectOnlyMixin.js";
+import { SelectableMixin } from "../../internal/mixins/SelectableMixin.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const _UUITableRowElement = class _UUITableRowElement extends SelectOnlyMixin(
+  SelectableMixin(LitElement)
+) {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "row");
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("selectOnly")) {
+      this.updateChildSelectOnly();
+    }
+  }
+  updateChildSelectOnly() {
+    if (this.slotCellNodes) {
+      this.slotCellNodes.forEach((el) => {
+        if (el.disableChildInteraction !== void 0) {
+          el.disableChildInteraction = this.selectOnly;
+        }
+      });
+    }
+  }
+  render() {
+    return html` <slot @slotchanged=${this.updateChildSelectOnly}></slot> `;
+  }
+};
+_UUITableRowElement.styles = [
+  css`
+      :host {
+        display: table-row;
+        position: relative;
+        outline-offset: -3px;
+        border-radius: var(--uui-border-radius);
+      }
+
+      :host([selectable]) {
+        cursor: pointer;
+      }
+
+      :host(:focus-visible) {
+        outline: 2px solid var(--uui-color-focus);
+      }
+      :host([selected]) {
+        outline: 2px solid
+          var(--uui-table-row-color-selected, var(--uui-color-selected));
+      }
+      :host([selected]:focus) {
+        outline-color: var(--uui-color-focus);
+      }
+    `
+];
+let UUITableRowElement = _UUITableRowElement;
+__decorateClass([
+  queryAssignedElements({
+    flatten: true,
+    selector: "uui-table-cell, [uui-table-cell], [role=cell]"
+  })
+], UUITableRowElement.prototype, "slotCellNodes");
+export {
+  UUITableRowElement
+};
+//# sourceMappingURL=table-row.element.js.map