@kubex/zinc 1.1.39 → 1.1.41

package/docs/_utilities/code-previews.cjs

@@ -89,18 +89,22 @@ module.exports = function (doc, options)
   });
 
   // Wrap code preview scripts in anonymous helpers so they don't run in the global scope
+  const jsTypes = new Set(['', 'text/javascript', 'application/javascript', 'application/ecmascript', 'text/ecmascript']);
   doc.querySelectorAll('.code-preview__preview script').forEach(script =>
   {
-    if(script.type === 'module')
+    const type = (script.getAttribute('type') || '').toLowerCase();
+    if(type === 'module')
     {
       // Modules are already scoped
       script.textContent = script.innerHTML;
     }
-    else
+    else if(jsTypes.has(type))
     {
       // Wrap non-modules in an anonymous function so they don't run in the global scope
       script.textContent = `(() => { ${script.innerHTML} })();`;
     }
+    // Otherwise leave alone: data blocks (e.g. type="application/json", type="zn-templates")
+    // are inert by spec and components read their original textContent directly.
   });
 
   return doc;

package/docs/pages/components/datepicker.md

@@ -168,7 +168,6 @@ Combine `min-date` and `max-date` to constrain the selectable date range.
   help-text="Select dates within the conference period (March 1-15, 2026)">
 </zn-datepicker>
 ```
-
 ### Clearable
 
 Use the `clearable` attribute to add a "Clear" button to the calendar popup, allowing users to easily remove a selected date.
@@ -417,4 +416,14 @@ Use [CSS parts](#css-parts) to customize the way form controls are drawn. This e
 </style>
 ```
 
+### Date Time
+
+Displays time.
 
+```html:preview
+<zn-datepicker
+  time-picker
+  label="Conference dates"
+  help-text="Select date and time">
+</zn-datepicker>
+```

package/docs/pages/components/editor.md

@@ -119,6 +119,23 @@ In ticket mode (default), Enter creates new lines. Forms must be submitted using
 </script>
 ```
 
+### Caching Unsent Content
+
+Set a `store-key` to cache what the agent has typed, so an unsent reply survives page reloads and navigation. Content is saved as it is typed, restored when an editor with the same key next loads, and cleared when the form is submitted or the editor is emptied.
+
+Use a key unique to the conversation — for example the ticket or chat ID. Add the `local-storage` attribute to persist across tabs and browser restarts (otherwise `sessionStorage` is used, scoped to the current tab). Cached content expires after a day by default; tune with `store-ttl` (seconds).
+
+```html:preview
+<zn-editor
+  name="reply"
+  interaction-type="ticket"
+  store-key="ticket-12345"
+  local-storage
+  style="height: 250px">
+</zn-editor>
+<p><small>Type something, then reload the page — your draft is restored.</small></p>
+```
+
 ### Enabling Features
 
 The editor has many optional features that can be enabled with boolean attributes.

package/docs/pages/components/style.md

@@ -104,3 +104,49 @@ layout: component
 <div class="style-abg"><zn-style border a-margin=a>ALL Margin</zn-style></div>
 ```
 
+### Border
+
+Accepts any combination of `t`, `b`, `l`, `r` to render specific sides. Use `a` (or the equivalent `tblr`) as a shortcut for all four sides. The bare `border` attribute (no value) is equivalent to `border="a"` and is kept for backward compatibility.
+
+```html:preview
+<zn-style border="t" pad=a>Top only</zn-style>
+<zn-style border="b" pad=a>Bottom only</zn-style>
+<zn-style border="l" pad=a>Left only</zn-style>
+<zn-style border="r" pad=a>Right only</zn-style>
+<zn-style border="tb" pad=a>Top + Bottom</zn-style>
+<zn-style border="lr" pad=a>Left + Right</zn-style>
+<zn-style border="tl" pad=a>Top + Left</zn-style>
+<zn-style border="a"  pad=a>All sides (a)</zn-style>
+<zn-style border      pad=a>All sides (bare attribute)</zn-style>
+```
+
+### Size
+
+Adjusts font size in five steps mapped to the zinc font-size tokens. `m` is the default and applies no class.
+
+| value | token                       |
+| ----- | --------------------------- |
+| `xs`  | `--zn-font-size-x-small`    |
+| `s`   | `--zn-font-size-small`      |
+| `m`   | inherits (no class applied) |
+| `l`   | `--zn-font-size-large`      |
+| `xl`  | `--zn-font-size-x-large`    |
+
+```html:preview
+<zn-style size="xs">Extra small</zn-style>
+<zn-style size="s">Small</zn-style>
+<zn-style size="m">Medium (default)</zn-style>
+<zn-style size="l">Large</zn-style>
+<zn-style size="xl">Extra large</zn-style>
+```
+
+### Muted
+
+Dims the content with reduced opacity. Useful for placeholder-like values, em-dashes for empty cells, or any text you want visually de-emphasized without changing its colour.
+
+```html:preview
+<zn-style>Regular text</zn-style>
+<zn-style muted>Muted text</zn-style>
+<zn-style muted>&mdash;</zn-style>
+```
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.39",
+  "version": "1.1.41",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/scss/_root.scss

@@ -108,7 +108,27 @@
 }
 
 .zn-mono {
-  font-family: var(--zn-font-family-mono, "monospace");
+  font-family: var(--zn-font-family-mono), monospace;
+}
+
+.zn-muted {
+  color: var(--zn-color-muted-text);
+}
+
+.zn-size-xs {
+  font-size: var(--zn-font-size-x-small);
+}
+
+.zn-size-s {
+  font-size: var(--zn-font-size-small);
+}
+
+.zn-size-l {
+  font-size: var(--zn-font-size-large);
+}
+
+.zn-size-xl {
+  font-size: var(--zn-font-size-x-large);
 }
 
 :root, [t="light"], .theme-light, [t="dark"], .theme-dark {

package/scss/air-datapicker.scss

@@ -0,0 +1,50 @@
+
+// External components
+@use "../node_modules/air-datepicker/air-datepicker.css";
+
+.air-datepicker {
+  --adp-color: rgba(var(--zn-text), var(--zn-text-opacity));
+  --adp-nav-color-secondary: rgb(var(--zn-purple-text));
+
+  --adp-day-name-color: var(--zn-color-primary-600);
+  --adp-day-name-color-hover: var(--zn-color-primary-700);
+  --adp-cell-background-color-selected: var(--zn-color-primary-600);
+  --adp-cell-background-color-selected-hover: var(--zn-color-primary-700);
+  --adp-color-current-date: var(--zn-color-primary-600);
+
+  --adp-background-color: var(--zn-input-background-color);
+  --adp-background-color-hover: var(--zn-input-background-color-hover);
+  --adp-background-color-active: var(--zn-input-background-color-hover);
+  --adp-background-color-selected-other-month: var(--zn-color-primary-300);
+  --adp-background-color-in-range: var(--zn-color-primary-100);
+
+  --adp-border-color: rgb(var(--zn-border-color));
+  --adp-border-color-inline: rgb(var(--zn-border-color));
+  --adp-border-color-inner: rgb(var(--zn-border-color));
+
+  --adp-cell-background-color-in-range: var(--zn-color-primary-100);
+  --adp-cell-background-color-in-range-hover: var(--zn-color-primary-200);
+}
+
+.air-datepicker--pointer:after {
+  background-color: var(--zn-input-background-color);
+}
+
+.air-datepicker-global-container {
+  z-index: 1000000;
+}
+
+.air-datepicker-button {
+  border: none;
+  padding: var(--zn-spacing-2x-small) var(--zn-spacing-x-small);
+  border-radius: var(--adp-border-radius);
+  font-family: var(--adp-font-family), sans-serif;
+  font-size: var(--zn-font-size-medium);
+  font-weight: var(--zn-font-weight-normal);
+  cursor: pointer;
+  color: rgba(var(--zn-text), var(--zn-text-opacity));
+
+  &:hover {
+    background-color: var(--zn-input-background-color-hover) !important;
+  }
+}

package/scss/boot.scss

@@ -9,55 +9,8 @@
 // Needed components for positioning
 @use "./shared";
 
-// External components
-@use "../node_modules/air-datepicker/air-datepicker.css";
+@use "./air-datapicker";
 
-.air-datepicker {
-  --adp-color: rgba(var(--zn-text), var(--zn-text-opacity));
-  --adp-nav-color-secondary: rgb(var(--zn-purple-text));
-
-  --adp-day-name-color: var(--zn-color-primary-600);
-  --adp-day-name-color-hover: var(--zn-color-primary-700);
-  --adp-cell-background-color-selected: var(--zn-color-primary-600);
-  --adp-cell-background-color-selected-hover: var(--zn-color-primary-700);
-  --adp-color-current-date: var(--zn-color-primary-600);
-
-  --adp-background-color: var(--zn-input-background-color);
-  --adp-background-color-hover: var(--zn-input-background-color-hover);
-  --adp-background-color-active: var(--zn-input-background-color-hover);
-  --adp-background-color-selected-other-month: var(--zn-color-primary-300);
-  --adp-background-color-in-range: var(--zn-color-primary-100);
-
-  --adp-border-color: rgb(var(--zn-border-color));
-  --adp-border-color-inline: rgb(var(--zn-border-color));
-  --adp-border-color-inner: rgb(var(--zn-border-color));
-
-  --adp-cell-background-color-in-range: var(--zn-color-primary-100);
-  --adp-cell-background-color-in-range-hover: var(--zn-color-primary-200);
-}
-
-.air-datepicker--pointer:after {
-  background-color: var(--zn-input-background-color);
-}
-
-.air-datepicker-global-container {
-  z-index: 1000000;
-}
-
-.air-datepicker-button {
-  border: none;
-  padding: var(--zn-spacing-2x-small) var(--zn-spacing-x-small);
-  border-radius: var(--adp-border-radius);
-  font-family: var(--adp-font-family), sans-serif;
-  font-size: var(--zn-font-size-medium);
-  font-weight: var(--zn-font-weight-normal);
-  cursor: pointer;
-  color: rgba(var(--zn-text), var(--zn-text-opacity));
-
-  &:hover {
-    background-color: var(--zn-input-background-color-hover) !important;
-  }
-}
 
 // Utility to minimize flashing of undefined web components
 .zn-cloak:has(:not(:defined)) {

package/src/components/data-table/data-table.component.ts

@@ -3,8 +3,8 @@ import {type CSSResultGroup, html, nothing, type TemplateResult, unsafeCSS} from
 import {HasSlotController} from "../../internal/slot";
 import {ifDefined} from "lit/directives/if-defined.js";
 import {property, query} from 'lit/decorators.js';
-import {ResizeController} from '@lit-labs/observers/resize-controller.js';
 import {ref} from "lit/directives/ref.js";
+import {ResizeController} from '@lit-labs/observers/resize-controller.js';
 import {Task} from "@lit/task";
 import {unsafeHTML} from "lit/directives/unsafe-html.js";
 import {type ZnFilterChangeEvent} from "../../events/zn-filter-change";
@@ -40,6 +40,8 @@ interface Cell {
   style?: string;
   iconSrc?: string;
   iconColor?: string;
+  iconSize?: number;
+  iconStyle?: string;
   hoverContent?: string;
   hoverPlacement?: string;
   chipColor?: string;
@@ -100,8 +102,27 @@ interface HeaderConfig {
   hideHeader?: boolean;
   hideColumn?: boolean;
   secondary?: boolean;
+  type?: string;
+  cellTemplate ?: Cell;
+  ifEmpty ?:Cell;
 }
 
+type DisplayTemplate = (cell: Cell, row: Row, header: HeaderConfig) =>
+  TemplateResult | string;
+
+
+const defaultTemplates = {
+  dateTime: ((cell) => {
+    const t = cell.text || '';
+    return html`
+      <div class="table__collum--datetime">
+        <span><strong>${t.slice(0, 10)}</strong></span>
+        <zn-style size="s" muted>${t.slice(11)}</zn-style>
+      </div>`
+  }) satisfies DisplayTemplate
+};
+
+
 interface DataRequest {
   page: number;
   perPage: number;
@@ -171,7 +192,7 @@ export default class ZnDataTable extends ZincElement {
   };
 
   @property({attribute: 'data-uri'}) dataUri: string;
-  @property({attribute: 'data', type: Object, reflect: true}) data: any;
+  @property({attribute: 'data', type: Object}) data: Row[] | Row = [];
   @property({attribute: 'sort-column'}) sortColumn: string;
   @property({attribute: 'sort-direction'}) sortDirection: string = "asc";
   @property({attribute: 'local-sort', type: Boolean}) localSort: boolean = false;
@@ -181,6 +202,8 @@ export default class ZnDataTable extends ZincElement {
   @property({attribute: 'key'}) key: string = 'id';
   @property({attribute: 'headers', type: Object}) headers: Record<string, HeaderConfig> = {};
 
+  @property({attribute: false}) displayTemplates: Record<string, DisplayTemplate> = {};
+
   // Hide header text keeping the content - e.g. Action buttons without a header
   @property({attribute: 'hide-headers', type: Object}) hiddenHeaders = '{}';
 
@@ -217,6 +240,7 @@ export default class ZnDataTable extends ZincElement {
 
   @property() groups = '';
 
+  @property({attribute: 'per-page-size', type:Number}) itemsPerPage:number = DEFAULT_PER_PAGE;
   @query('#select-all-rows') selectAllButton: ZnButton;
 
   // Data Table Properties
@@ -232,7 +256,7 @@ export default class ZnDataTable extends ZincElement {
     },
   });
 
-  private itemsPerPage: number = DEFAULT_PER_PAGE;
+  // private itemsPerPage: number = DEFAULT_PER_PAGE;
   private page: number = DEFAULT_PAGE;
   private totalPages: number;
 
@@ -292,7 +316,6 @@ export default class ZnDataTable extends ZincElement {
         Object.assign(requestData, params);
       }
 
-
       // Add any extra request params
       if (requestParams && typeof requestParams === 'object') {
         Object.assign(requestData, requestParams);
@@ -320,6 +343,7 @@ export default class ZnDataTable extends ZincElement {
   private _expandedRows: Set<string> = new Set();
   private _hiddenCells: Map<string, Cell[]> = new Map();
   private _secondaryHeaders: HeaderConfig[];
+  private _formatTemplates: Record<string, DisplayTemplate> = defaultTemplates;
 
   requestParams: Record<string, any> = {};
 
@@ -330,12 +354,13 @@ export default class ZnDataTable extends ZincElement {
   }
 
   render() {
+
     // If no-initial-load is set, do not invoke the Task on the first render
-    let tableBody: TemplateResult;
+    let tableBody: TemplateResult = html``;
     if (this.noInitialLoad && this._initialLoad) {
       tableBody = html`
         <slot name="empty-state"></slot>`;
-    } else {
+    } else if (this.dataUri) {
       tableBody = this._dataTask.render({
         pending: () => {
           if (this._initialLoad) {
@@ -367,6 +392,18 @@ export default class ZnDataTable extends ZincElement {
             <div>${error}</div>`
         }
       }) as TemplateResult;
+    } else if (Array.isArray(this.data) ? this.data.length > 0 : !!this.data) {
+      const rows: Row[] = Array.isArray(this.data) ? this.data : [this.data];
+      const response: Response = {
+        rows,
+        perPage: rows.length,
+        total: rows.length,
+        page: 1,
+      };
+      this._initialLoad = false;
+      this._lastTableContent = html`
+            <div>${this.renderTable(response)}</div>`;
+      tableBody = this._lastTableContent;
     }
 
     const hasActions = this.hasSlotController.test(ActionSlots.delete.valueOf())
@@ -396,6 +433,10 @@ export default class ZnDataTable extends ZincElement {
     this.addEventListener('zn-search-change', this.searchChangeListener);
   }
 
+  private getTemplate(name: string): DisplayTemplate | undefined {
+    return this.displayTemplates[name] ?? this._formatTemplates[name];
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener('zn-filter-change', this.filterChangeListener);
@@ -616,7 +657,7 @@ export default class ZnDataTable extends ZincElement {
               'table__row--data': true,
             })}" data-row-id="${row.id}">
               ${anyHidden ? this.renderExpanderCell(row) : nothing}
-              ${(visibleRowCells.get(row.id) || row.cells).map((value: Cell, index: number) => this.renderCellBody(index, value))}
+              ${(visibleRowCells.get(row.id) || row.cells).map((value: Cell, index: number) => this.renderCellBody(index, value, row))}
               ${this.rowHasActions ? this.renderActions(row) : nothing}
             </tr>
             ${this._expandedRows.has(row.id) ? this.renderDetailsRow(row, colCount) : nothing}
@@ -922,91 +963,128 @@ export default class ZnDataTable extends ZincElement {
     };
   }
 
-  renderCell(data: Cell) {
-    if (data && typeof data === 'object') {
-      let content: TemplateResult | ZincElement = html`${data.text}`;
+  renderCell(data: Cell, row?: Row, header?: HeaderConfig): TemplateResult | ZincElement {
+    const fn = (header?.type ? this.getTemplate(header.type) : undefined);
 
-      if (data.style || data.color) {
-        const styleStr = typeof data.style === 'string' ? data.style : '';
-        const tokens = new Set(styleStr.split(',').filter(Boolean));
+    if((!data.text && !data.iconSrc) && header?.ifEmpty !== undefined) {
+      const header2 = {...header, type: undefined, render: undefined, renderTemplate: undefined};
+      return this.renderCell({...data, ...header.ifEmpty}, row, header2)
+    }
 
-        const isMono = tokens.has('mono') || tokens.has('code');
-        const isBorder = tokens.has('border');
-        const isCenter = tokens.has('center');
+    if (fn && row && header) {
+      const out = fn(data, row, header);
+      return typeof out === 'string' ? html`${unsafeHTML(out)}` : out;
+    }
 
-        if (tokens.has('bold') || tokens.has('strong')) {
-          content = html`<strong>${content}</strong>`;
-        }
+    if(!data || typeof data !== 'object') {
+      return data;
+    }
 
-        if (tokens.has('italic')) {
-          content = html`<em>${content}</em>`;
-        }
+    if(header?.cellTemplate !== undefined) {
+      data = {...header.cellTemplate, ...data}
+    }
 
-        content = html`
-          <zn-style
-            font="${isMono ? 'mono' : nothing}"
-            border="${isBorder || nothing}"
-            center="${isCenter || nothing}"
-            color="${ifDefined(data.color)}">${content}
-          </zn-style>`;
-      }
+    let content: TemplateResult | ZincElement = html`${data.text}`;
+
+    if (data.style || data.color) {
+      const styleStr = typeof data.style === 'string' ? data.style : '';
+      const tokens = new Set(styleStr.split(',').filter(Boolean));
+
+      const isMono = tokens.has('mono') || tokens.has('code');
+      const isBorder = tokens.has('border');
+      const isCenter = tokens.has('center');
+      const isMuted = tokens.has('muted');
 
-      if (data.uri) {
-        content = html`
-          <a href="${data.uri}"
-             data-target="${ifDefined(data.target || nothing)}"
-             gaid="${ifDefined(data.gaid || nothing)}">${content}</a>`;
+      if (tokens.has('bold') || tokens.has('strong')) {
+        content = html`<strong>${content}</strong>`;
       }
 
-      if (data.chipColor) {
-        return html`
-          <zn-chip type="${data.chipColor}">${content}</zn-chip>`;
+      if (tokens.has('italic')) {
+        content = html`<em>${content}</em>`;
       }
 
-      if (data.hoverContent) {
-        const placement = data.hoverPlacement ?? 'top';
+      content = html`
+        <zn-style
+          font="${isMono ? 'mono' : nothing}"
+          border="${isBorder || nothing}"
+          center="${isCenter || nothing}"
+          muted="${isMuted || nothing}"
+          color="${ifDefined(data.color)}">${content}
+        </zn-style>`;
+    }
 
-        if (data.iconSrc) {
-          const src = data.iconSrc;
-          const color = data.iconColor ?? '';
+    if (data.uri) {
+      content = html`
+        <a href="${data.uri}"
+           data-target="${ifDefined(data.target || nothing)}"
+           gaid="${ifDefined(data.gaid || nothing)}">${content}</a>`;
+    }
 
-          return html`
-            ${content}
-            <zn-hover-container placement="${placement}"
-                                flip>
-              <zn-icon src="${src}" color="${color}"></zn-icon>
-              <div slot="content">
-                ${unsafeHTML(data.hoverContent)}
-              </div>
-            </zn-hover-container>`;
-        }
+    if (data.chipColor) {
+      return html`
+        <zn-chip type="${data.chipColor}">${content}</zn-chip>`;
+    }
 
-        return html`
-          <zn-hover-container placement="${placement}"
-                              flip>
-            <div slot="anchor">${content}</div>
-            ${unsafeHTML(data.hoverContent)}
-          </zn-hover-container>`;
-      }
+    if (data.hoverContent) {
+      const placement = data.hoverPlacement ?? 'top';
 
       if (data.iconSrc) {
         const src = data.iconSrc;
-        const color = data.iconColor ?? '';
+        const color = data.iconColor;
+        const size = data.iconSize;
+        const tokens = (data.iconStyle ?? '').split(',').map(s => s.trim()).filter(Boolean);
 
-        return html`
-          <zn-icon src="${src}" color="${color}"></zn-icon> ${content}`;
-      }
-
-      if (data.copyable) {
         return html`
           ${content}
-          <zn-copy-button value="${data.text}"></zn-copy-button>`;
+          <zn-hover-container placement="${placement}" flip>
+            <zn-icon
+              src="${src}"
+              size="${ifDefined(size)}"
+              color="${ifDefined(color)}"
+              ${ref(el => {
+                if (!el) return;
+                tokens.forEach(t => el.setAttribute(t, ''));
+              })}
+            ></zn-icon>
+            <div slot="content">
+              ${unsafeHTML(data.hoverContent)}
+            </div>
+          </zn-hover-container>`;
       }
 
-      return content;
+      return html`
+        <zn-hover-container placement="${placement}" flip>
+          <div slot="anchor">${content}</div>
+          ${unsafeHTML(data.hoverContent)}
+        </zn-hover-container>`;
     }
 
-    return data;
+    if (data.iconSrc) {
+      const src = data.iconSrc;
+      const color = data.iconColor;
+      const size = data.iconSize;
+      const tokens = (data.iconStyle ?? '').split(',').map(s => s.trim()).filter(Boolean);
+
+      return html`
+        <zn-icon
+          src="${src}"
+          size="${ifDefined(size)}"
+          color="${ifDefined(color)}"
+          ${ref(el => {
+            if (!el) return;
+            tokens.forEach(t => el.setAttribute(t, ''));
+          })}
+        ></zn-icon> ${content}`;
+    }
+
+    if (data.copyable) {
+      return html`
+        ${content}
+        <zn-copy-button value="${data.text}"></zn-copy-button>`;
+    }
+
+    return content;
+
   }
 
   private updateActionKeys(slotName: string) {
@@ -1076,7 +1154,7 @@ export default class ZnDataTable extends ZincElement {
     `;
   }
 
-  private renderCellBody(index: number, value: Cell) {
+  private renderCellBody(index: number, value: Cell, row: Row) {
     const filteredHeaders = Object.values(this.headers).filter((header: HeaderConfig) => {
       if (header.hideHeader || header.hideColumn) return false;
 
@@ -1084,7 +1162,8 @@ export default class ZnDataTable extends ZincElement {
 
       return !header.secondary;
     });
-    const headerKey: string = filteredHeaders[index]?.key;
+    const header: HeaderConfig | undefined = filteredHeaders[index];
+    const headerKey: string = header?.key;
 
     return html`
       <td
@@ -1094,7 +1173,7 @@ export default class ZnDataTable extends ZincElement {
           'table__cell--wide': headerKey === this.wideColumn,
           'table__cell--last': index === filteredHeaders.length - 1,
         })}">
-        <div>${this.renderCell(value)}</div>
+        <div>${this.renderCell(value, row, header)}</div>
       </td>`;
   }
 
@@ -1136,7 +1215,7 @@ export default class ZnDataTable extends ZincElement {
               return html`
                 <div class="table__details__item">
                   <div class="table__details__label">${label}</div>
-                  <div class="table__details__value">${this.renderCell(cell)}</div>
+                  <div class="table__details__value">${this.renderCell(cell, row, header)}</div>
                 </div>`;
             })}
           </div>

package/src/components/data-table/data-table.scss

@@ -422,3 +422,9 @@ table:has(tbody tr:first-of-type.table__row--selected) thead tr th {
   text-overflow: ellipsis;
 }
 
+.table__collum--datetime{
+  display:flex;
+  flex-direction:column;
+  align-items: flex-end;
+  gap:2px;
+}