@gravionlabs/helix-ui 22.1.29 → 22.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravionlabs/helix-ui",
-  "version": "22.1.29",
+  "version": "22.2.0",
   "description": "Helix UI: vanilla Angular components on the Helix design tokens — plain CSS, no runtime styling engine.",
   "license": "MIT",
   "keywords": [

package/styles.css

@@ -672,7 +672,7 @@
 
   /* breadcrumb */
   /*
-   * Breadcrumb: `<hx-breadcrumb>`. Same look as the helix-core breadcrumb, from the `--h-breadcrumb-*` tokens.
+   * Breadcrumb: `<hx-breadcrumb>`. Styled from the `--h-breadcrumb-*` tokens.
    * The separator is a chevron drawn with a mask, so it follows the token colour.
    */
   .hx-breadcrumb {
@@ -779,9 +779,8 @@
 
   /* button */
   /*
-   * Button: `button[hx-button]` / `a[hx-button]`. Same look as the helix-core button, from the same tokens
-   * (`--h-button-*`). A severity class only maps its tokens onto local `--hx-*` variables; the variant
-   * rules (filled, outlined, text, link) read those, so every severity works with every variant.
+   * Button: `button[hx-button]` / `a[hx-button]`. Styled by the tokens (`--h-button-*`). A severity class only maps its tokens onto local `--hx-*`
+   * variables; the variant rules (filled, outlined, text, link) read those, so every severity works with every variant.
    */
   .hx-button,
   .hx-button-primary {
@@ -1245,8 +1244,8 @@
 
   /* checkbox */
   /*
-   * Checkbox: `input[hx-checkbox]` on a native `<input type="checkbox">`, drawn with CSS. Same look as the
-   * helix-core Checkbox, from the `--h-checkbox-*` tokens. Checked, indeterminate and invalid (`aria-invalid`
+   * Checkbox: `input[hx-checkbox]` on a native `<input type="checkbox">`, drawn with CSS, styled
+   * from the `--h-checkbox-*` tokens. Checked, indeterminate and invalid (`aria-invalid`
    * or `ng-invalid ng-touched`) are styled; the tick is a mask in the icon colour.
    */
   .hx-checkbox {
@@ -1518,6 +1517,223 @@
     padding: var(--h-confirmpopup-footer-padding);
   }
 
+  /* data-table */
+  /*
+   * Data table: `<hx-data-table>`. The table itself is drawn by `table.scss` (`.hx-table`); this sheet adds the frame
+   * with the loading cover, the visually hidden caption, the empty row and the column alignment, from the
+   * `--h-datatable-*` tokens.
+   */
+  .hx-data-table {
+    display: block;
+  }
+
+  .hx-data-table-frame {
+    position: relative;
+  }
+
+  .hx-data-table-scroll:not(.hx-data-table-scrolls) {
+    overflow: visible;
+  }
+
+  .hx-data-table-caption-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .hx-table .hx-data-table-align-center {
+    text-align: center;
+  }
+
+  .hx-table .hx-data-table-align-right {
+    text-align: end;
+  }
+
+  .hx-data-table-empty td {
+    color: var(--h-datatable-row-color);
+    text-align: center;
+    opacity: 0.7;
+  }
+
+  .hx-data-table-loading {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: color-mix(in srgb, var(--h-datatable-row-background) 60%, transparent);
+  }
+
+  .hx-data-table-loading hx-progress-spinner {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+
+  /* sortable headers: a button that fills the header cell */
+  .hx-data-table-sort {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--h-datatable-header-cell-gap);
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: inherit;
+    cursor: pointer;
+    border-radius: 2px;
+    outline-color: transparent;
+  }
+
+  .hx-data-table-align-center .hx-data-table-sort {
+    justify-content: center;
+  }
+
+  .hx-data-table-align-right .hx-data-table-sort {
+    justify-content: flex-end;
+  }
+
+  .hx-data-table-sort:hover {
+    color: var(--h-datatable-header-cell-hover-color);
+  }
+
+  .hx-data-table-sort:focus-visible {
+    outline: var(--h-datatable-header-cell-focus-ring-width) var(--h-datatable-header-cell-focus-ring-style) var(--h-datatable-header-cell-focus-ring-color);
+    outline-offset: var(--h-datatable-header-cell-focus-ring-offset);
+    box-shadow: var(--h-datatable-header-cell-focus-ring-shadow);
+  }
+
+  .hx-table thead th.hx-data-table-sorted {
+    background: var(--h-datatable-header-cell-selected-background);
+    color: var(--h-datatable-header-cell-selected-color);
+  }
+
+  .hx-data-table-sort-icon {
+    display: inline-block;
+    flex: none;
+    width: var(--h-datatable-sort-icon-size);
+    height: var(--h-datatable-sort-icon-size);
+    background: var(--h-datatable-sort-icon-color);
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 9 4-4 4 4M8 15l4 4 4-4'/%3E%3C/svg%3E") center/contain no-repeat;
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 9 4-4 4 4M8 15l4 4 4-4'/%3E%3C/svg%3E") center/contain no-repeat;
+  }
+
+  .hx-data-table-sort:hover .hx-data-table-sort-icon {
+    background: var(--h-datatable-sort-icon-hover-color);
+  }
+
+  .hx-data-table-sort-asc {
+    display: inline-block;
+    flex: none;
+    width: var(--h-datatable-sort-icon-size);
+    height: var(--h-datatable-sort-icon-size);
+    background: currentcolor;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
+  }
+
+  .hx-data-table-sort-desc {
+    display: inline-block;
+    flex: none;
+    width: var(--h-datatable-sort-icon-size);
+    height: var(--h-datatable-sort-icon-size);
+    background: currentcolor;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
+  }
+
+  .hx-data-table-sort-rank {
+    font-size: 0.75em;
+    opacity: 0.8;
+  }
+
+  .hx-data-table-paginator {
+    border-block-start: 1px solid var(--h-datatable-border-color);
+  }
+
+  /* selection and expansion */
+  .hx-data-table-select-cell,
+  .hx-data-table-expander-cell {
+    width: 1%;
+    white-space: nowrap;
+  }
+
+  .hx-data-table-selectable {
+    cursor: pointer;
+  }
+
+  .hx-data-table-selectable:focus-visible {
+    outline: var(--h-datatable-row-focus-ring-width) var(--h-datatable-row-focus-ring-style) var(--h-datatable-row-focus-ring-color);
+    outline-offset: calc(-1 * var(--h-datatable-row-focus-ring-width));
+    box-shadow: var(--h-datatable-row-focus-ring-shadow);
+  }
+
+  .hx-data-table-filter-row th {
+    padding-block: 0.25rem 0.5rem;
+    font-weight: normal;
+  }
+
+  .hx-data-table-expander {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--h-datatable-row-toggle-button-size);
+    height: var(--h-datatable-row-toggle-button-size);
+    padding: 0;
+    border: 0;
+    border-radius: var(--h-datatable-row-toggle-button-border-radius);
+    background: transparent;
+    color: var(--h-datatable-row-toggle-button-color);
+    cursor: pointer;
+    outline-color: transparent;
+  }
+
+  .hx-data-table-expander::before {
+    display: inline-block;
+    flex: none;
+    width: 1em;
+    height: 1em;
+    background: currentcolor;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
+    content: "";
+    transition: transform 0.15s;
+  }
+
+  .hx-data-table-expander-open::before {
+    transform: rotate(90deg);
+  }
+
+  .hx-data-table-expander:hover {
+    background: var(--h-datatable-row-toggle-button-hover-background);
+    color: var(--h-datatable-row-toggle-button-hover-color);
+  }
+
+  .hx-data-table-expander:focus-visible {
+    outline: var(--h-datatable-row-toggle-button-focus-ring-width) var(--h-datatable-row-toggle-button-focus-ring-style) var(--h-datatable-row-toggle-button-focus-ring-color);
+    outline-offset: var(--h-datatable-row-toggle-button-focus-ring-offset);
+    box-shadow: var(--h-datatable-row-toggle-button-focus-ring-shadow);
+  }
+
+  .hx-table tbody tr.hx-data-table-expansion > td {
+    background: var(--h-datatable-row-background);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hx-data-table-expander::before {
+      transition: none;
+    }
+  }
+
   /* date-picker */
   /*
    * DatePicker: `<hx-date-picker>`. The calendar panel from the `--h-datepicker-*` tokens: a header with the
@@ -2809,7 +3025,7 @@
 
   /* input */
   /*
-   * Text field: `input[hx-input]` and `textarea[hx-input]`. Same look as the helix-core InputText and Textarea,
+   * Text field: `input[hx-input]` and `textarea[hx-input]`, styled
    * from the `--h-inputtext-*` tokens (the Textarea tokens hold the same values).
    * Invalid: `aria-invalid="true"` or Angular's `ng-invalid ng-touched`.
    */
@@ -3653,7 +3869,7 @@
 
   /* multi-select */
   /*
-   * Select: `<hx-multi-select>`. Same look as the helix-core Select, from the `--h-multiselect-*` tokens. The host draws the
+   * Select: `<hx-multi-select>`. Styled from the `--h-multiselect-*` tokens. The host draws the
    * field (border, background, focus ring), the trigger is a button inside it, the panel is a CDK connected
    * overlay (`.hx-multi-select-overlay` is the CDK pane, `.hx-multi-select-panel` its content). The CDK's own overlay
    * container CSS is part of styles.css.
@@ -3938,6 +4154,127 @@
     border-color: var(--h-inputtext-focus-border-color);
   }
 
+  /* paginator */
+  /*
+   * Paginator: `<hx-paginator>`, from the `--h-paginator-*` tokens. Page buttons are round, the current page is
+   * highlighted; the first/previous/next/last icons are masks that follow the text colour.
+   */
+  .hx-paginator {
+    display: block;
+    padding: var(--h-paginator-padding);
+    border-radius: var(--h-paginator-border-radius);
+    background: var(--h-paginator-background);
+    color: var(--h-paginator-color);
+  }
+
+  .hx-paginator-nav {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: var(--h-paginator-gap);
+  }
+
+  .hx-paginator-pages {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--h-paginator-gap);
+  }
+
+  .hx-paginator-report {
+    margin-inline-end: auto;
+    color: var(--h-paginator-current-page-report-color);
+  }
+
+  .hx-paginator-rows {
+    margin-inline-start: auto;
+  }
+
+  .hx-paginator-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--h-paginator-nav-button-width);
+    height: var(--h-paginator-nav-button-height);
+    padding: 0;
+    border: 0;
+    border-radius: var(--h-paginator-nav-button-border-radius);
+    background: var(--h-paginator-nav-button-background);
+    color: var(--h-paginator-nav-button-color);
+    font: inherit;
+    cursor: pointer;
+    outline-color: transparent;
+    transition: background var(--h-paginator-transition-duration), color var(--h-paginator-transition-duration), outline-color var(--h-paginator-transition-duration);
+  }
+
+  .hx-paginator-button:hover:not(:disabled) {
+    background: var(--h-paginator-nav-button-hover-background);
+    color: var(--h-paginator-nav-button-hover-color);
+  }
+
+  .hx-paginator-button:focus-visible {
+    outline: var(--h-paginator-nav-button-focus-ring-width) var(--h-paginator-nav-button-focus-ring-style) var(--h-paginator-nav-button-focus-ring-color);
+    outline-offset: var(--h-paginator-nav-button-focus-ring-offset);
+    box-shadow: var(--h-paginator-nav-button-focus-ring-shadow);
+  }
+
+  .hx-paginator-button:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  .hx-paginator-page-current,
+  .hx-paginator-page-current:hover:not(:disabled) {
+    background: var(--h-paginator-nav-button-selected-background);
+    color: var(--h-paginator-nav-button-selected-color);
+  }
+
+  .hx-paginator-first::before {
+    display: inline-block;
+    flex: none;
+    width: 1.1em;
+    height: 1.1em;
+    background: currentcolor;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17-5-5 5-5M18 17l-5-5 5-5'/%3E%3C/svg%3E") center/contain no-repeat;
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17-5-5 5-5M18 17l-5-5 5-5'/%3E%3C/svg%3E") center/contain no-repeat;
+  }
+
+  .hx-paginator-prev::before {
+    display: inline-block;
+    flex: none;
+    width: 1.1em;
+    height: 1.1em;
+    background: currentcolor;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 6-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 6-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
+  }
+
+  .hx-paginator-next::before {
+    display: inline-block;
+    flex: none;
+    width: 1.1em;
+    height: 1.1em;
+    background: currentcolor;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
+  }
+
+  .hx-paginator-last::before {
+    display: inline-block;
+    flex: none;
+    width: 1.1em;
+    height: 1.1em;
+    background: currentcolor;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m13 17 5-5-5-5M6 17l5-5-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m13 17 5-5-5-5M6 17l5-5-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hx-paginator-button {
+      transition: none;
+    }
+  }
+
   /* panel */
   /*
    * Panel: `<hx-panel>`. A bordered container from the `--h-panel-*` tokens with a header (title, actions, the
@@ -4287,8 +4624,8 @@
 
   /* radio */
   /*
-   * RadioButton: `input[hx-radio]` on a native `<input type="radio">`, drawn with CSS. Same look as the
-   * helix-core RadioButton, from the `--h-radiobutton-*` tokens.
+   * RadioButton: `input[hx-radio]` on a native `<input type="radio">`, drawn with CSS, styled
+   * from the `--h-radiobutton-*` tokens.
    */
   .hx-radio {
     display: inline-grid;
@@ -4618,7 +4955,7 @@
 
   /* select */
   /*
-   * Select: `<hx-select>`. Same look as the helix-core Select, from the `--h-select-*` tokens. The host draws the
+   * Select: `<hx-select>`. Styled from the `--h-select-*` tokens. The host draws the
    * field (border, background, focus ring), the trigger is a button inside it, the panel is a CDK connected
    * overlay (`.hx-select-overlay` is the CDK pane, `.hx-select-panel` its content). The CDK's own overlay
    * container CSS is part of styles.css.
@@ -5271,7 +5608,7 @@
   /* switch */
   /*
    * ToggleSwitch: `input[hx-switch]` on a native `<input type="checkbox" role="switch">`, drawn with CSS.
-   * Same look as the helix-core ToggleSwitch, from the `--h-toggleswitch-*` tokens: the track is the input, the
+   * Styled from the `--h-toggleswitch-*` tokens: the track is the input, the
    * handle its `::before`.
    */
   .hx-switch {

package/tokens.css

@@ -1,4 +1,4 @@
-/* @gravionlabs/helix-ui: the Helix tokens the components read, from helixPreset (generated by scripts/build-ui-css.mjs; do not edit). Light on :root, dark under .app-dark. */
+/* @gravionlabs/helix-ui: the Helix tokens the components read, from the Helix tokens (generated by scripts/build-ui-css.mjs; do not edit). Light on :root, dark under .app-dark. */
 :root,:host{--h-stone-50:#fafaf9;--h-stone-100:#f5f5f4;--h-stone-200:#e7e5e4;--h-stone-300:#d6d3d1;--h-stone-400:#a8a29e;--h-stone-500:#78716c;--h-stone-600:#57534e;--h-stone-700:#44403c;--h-stone-800:#292524;--h-stone-900:#1c1917;--h-stone-950:#0c0a09;--h-neutral-50:#fafafa;--h-neutral-100:#f5f5f5;--h-neutral-200:#e5e5e5;--h-neutral-300:#d4d4d4;--h-neutral-400:#a3a3a3;--h-neutral-500:#737373;--h-neutral-600:#525252;--h-neutral-700:#404040;--h-neutral-800:#262626;--h-neutral-900:#171717;--h-neutral-950:#0a0a0a;--h-zinc-50:#fafafa;--h-zinc-100:#f4f4f5;--h-zinc-200:#e4e4e7;--h-zinc-300:#d4d4d8;--h-zinc-400:#a1a1aa;--h-zinc-500:#71717a;--h-zinc-600:#52525b;--h-zinc-700:#3f3f46;--h-zinc-800:#27272a;--h-zinc-900:#18181b;--h-zinc-950:#09090b;--h-gray-50:#f9fafb;--h-gray-100:#f3f4f6;--h-gray-200:#e5e7eb;--h-gray-300:#d1d5db;--h-gray-400:#9ca3af;--h-gray-500:#6b7280;--h-gray-600:#4b5563;--h-gray-700:#374151;--h-gray-800:#1f2937;--h-gray-900:#111827;--h-gray-950:#030712;--h-slate-50:#f8fafc;--h-slate-100:#f1f5f9;--h-slate-200:#e2e8f0;--h-slate-300:#cbd5e1;--h-slate-400:#94a3b8;--h-slate-500:#64748b;--h-slate-600:#475569;--h-slate-700:#334155;--h-slate-800:#1e293b;--h-slate-900:#0f172a;--h-slate-950:#020617;--h-rose-50:#faf3f3;--h-rose-100:#f6e7e8;--h-rose-200:#efd4d7;--h-rose-300:#e4b2b7;--h-rose-400:#d88c93;--h-rose-500:#cb6e74;--h-rose-600:#b95b61;--h-rose-700:#9c4a51;--h-rose-800:#823e47;--h-rose-900:#703640;--h-rose-950:#3d1a1f;--h-pink-50:#faf4f7;--h-pink-100:#f6eaf1;--h-pink-200:#eed6e3;--h-pink-300:#e3b6cd;--h-pink-400:#d48daf;--h-pink-500:#c87195;--h-pink-600:#b65d7a;--h-pink-700:#9d4c63;--h-pink-800:#823f52;--h-pink-900:#6c3646;--h-pink-950:#411d27;--h-fuchsia-50:#faf6fc;--h-fuchsia-100:#f5ebf8;--h-fuchsia-200:#ebd7f0;--h-fuchsia-300:#dfb9e5;--h-fuchsia-400:#cf95d8;--h-fuchsia-500:#bd74c7;--h-fuchsia-600:#a55dae;--h-fuchsia-700:#8a4d90;--h-fuchsia-800:#723f76;--h-fuchsia-900:#603661;--h-fuchsia-950:#3e1e3f;--h-purple-50:#f9f6fc;--h-purple-100:#f0eaf7;--h-purple-200:#e4d9f1;--h-purple-300:#d0bde5;--h-purple-400:#b495d6;--h-purple-500:#9973c7;--h-purple-600:#845db6;--h-purple-700:#704d9f;--h-purple-800:#5f4082;--h-purple-900:#4e3469;--h-purple-950:#33204b;--h-violet-50:#f5f4fa;--h-violet-100:#edeaf6;--h-violet-200:#dcd9ef;--h-violet-300:#c2bbe3;--h-violet-400:#a397d3;--h-violet-500:#8573c3;--h-violet-600:#735db6;--h-violet-700:#644fa4;--h-violet-800:#544189;--h-violet-900:#463671;--h-violet-950:#2a214b;--h-indigo-50:#f0f2f9;--h-indigo-100:#e3e7f5;--h-indigo-200:#cdd3eb;--h-indigo-300:#aeb7de;--h-indigo-400:#8a94ce;--h-indigo-500:#6c74be;--h-indigo-600:#555dad;--h-indigo-700:#484e97;--h-indigo-800:#3b407b;--h-indigo-900:#353863;--h-indigo-950:#20203a;--h-blue-50:#f2f6fb;--h-blue-100:#e1e9f4;--h-blue-200:#cbdaed;--h-blue-300:#a9c4e2;--h-blue-400:#81a5d4;--h-blue-500:#6187c5;--h-blue-600:#4b6eb5;--h-blue-700:#3d5ca3;--h-blue-800:#344b84;--h-blue-900:#2f406a;--h-blue-950:#1f2841;--h-sky-50:#f3f8fc;--h-sky-100:#e7f1f7;--h-sky-200:#cbe3ef;--h-sky-300:#a2cee4;--h-sky-400:#7db8d8;--h-sky-500:#67a1c6;--h-sky-600:#5282a6;--h-sky-700:#416886;--h-sky-800:#36576f;--h-sky-900:#2e495c;--h-sky-950:#1c2e3c;--h-cyan-50:#f2fcfd;--h-cyan-100:#dff6f8;--h-cyan-200:#c4ecf1;--h-cyan-300:#a1dfe8;--h-cyan-400:#83cad8;--h-cyan-500:#6faebe;--h-cyan-600:#588b9d;--h-cyan-700:#47707f;--h-cyan-800:#3b5b67;--h-cyan-900:#324b57;--h-cyan-950:#1e313a;--h-teal-50:#f4fbfa;--h-teal-100:#ddf6f0;--h-teal-200:#bdede3;--h-teal-300:#9ddfd2;--h-teal-400:#83c9bc;--h-teal-500:#6eaea3;--h-teal-600:#588c84;--h-teal-700:#466f6a;--h-teal-800:#385956;--h-teal-900:#2f4a47;--h-teal-950:#192c2b;--h-yellow-50:#fdfbf1;--h-yellow-100:#faf8db;--h-yellow-200:#f6efba;--h-yellow-300:#efe19a;--h-yellow-400:#e8d087;--h-yellow-500:#d6b979;--h-yellow-600:#b59260;--h-yellow-700:#8d6b48;--h-yellow-800:#74553b;--h-yellow-900:#624732;--h-yellow-950:#382519;--h-amber-50:#fdfbf2;--h-amber-100:#f9f3db;--h-amber-200:#f2e7b7;--h-amber-300:#ebd697;--h-amber-400:#e5c584;--h-amber-500:#d9aa73;--h-amber-600:#bc875d;--h-amber-700:#996548;--h-amber-800:#7c4f3a;--h-amber-900:#664130;--h-amber-950:#392217;--h-orange-50:#fcf8f2;--h-orange-100:#f8eee1;--h-orange-200:#f0dbc2;--h-orange-300:#e7c29e;--h-orange-400:#dca27a;--h-orange-500:#d48c67;--h-orange-600:#c5775a;--h-orange-700:#a25e48;--h-orange-800:#804a3a;--h-orange-900:#683d30;--h-orange-950:#371e17;--h-red-50:#faf3f3;--h-red-100:#f5e5e5;--h-red-200:#eed1d1;--h-red-300:#e3b2b1;--h-red-400:#d58b88;--h-red-500:#c76e67;--h-red-600:#b55b52;--h-red-700:#984b43;--h-red-800:#7d3e38;--h-red-900:#683632;--h-red-950:#381917;--h-lime-50:#f8fcf0;--h-lime-100:#f0f9de;--h-lime-200:#e1f3c2;--h-lime-300:#cceaa2;--h-lime-400:#b7dc8b;--h-lime-500:#9bc275;--h-lime-600:#799b5c;--h-lime-700:#5c7646;--h-lime-800:#4a5d38;--h-lime-900:#3f4f31;--h-lime-950:#202b18;--h-green-50:#f4fbf6;--h-green-100:#e6f8ec;--h-green-200:#d0f0da;--h-green-300:#aee4bf;--h-green-400:#8cd19e;--h-green-500:#74b881;--h-green-600:#5e9869;--h-green-700:#4a7754;--h-green-800:#3b5e44;--h-green-900:#314d39;--h-green-950:#182a1d;--h-emerald-50:#f2fbf6;--h-emerald-100:#dff5e9;--h-emerald-200:#c3ebd7;--h-emerald-300:#a0dcc1;--h-emerald-400:#82c6a6;--h-emerald-500:#6cad8e;--h-emerald-600:#568c73;--h-emerald-700:#44705e;--h-emerald-800:#35594b;--h-emerald-900:#2b493e;--h-emerald-950:#162923;--h-border-radius-none:0;--h-border-radius-xs:2px;--h-border-radius-sm:4px;--h-border-radius-md:6px;--h-border-radius-lg:8px;--h-border-radius-xl:12px;}
 :root,:host{--h-transition-duration:0.2s;--h-disabled-opacity:0.6;--h-icon-size:1rem;--h-anchor-gutter:2px;--h-overlay-navigation-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);--h-overlay-modal-border-radius:var(--h-border-radius-xl);--h-overlay-modal-padding:1.25rem;--h-overlay-modal-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);--h-overlay-popover-border-radius:var(--h-border-radius-md);--h-overlay-popover-padding:0.75rem;--h-overlay-popover-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);--h-overlay-select-border-radius:var(--h-border-radius-md);--h-overlay-select-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);--h-navigation-submenu-icon-size:0.875rem;--h-navigation-submenu-label-padding:0.5rem 0.75rem;--h-navigation-submenu-label-font-weight:600;--h-navigation-item-padding:0.5rem 0.75rem;--h-navigation-item-border-radius:var(--h-border-radius-sm);--h-navigation-item-gap:0.5rem;--h-navigation-list-padding:0.25rem 0.25rem;--h-navigation-list-gap:2px;--h-mask-transition-duration:0.3s;--h-content-border-radius:var(--h-border-radius-md);--h-list-padding:0.25rem 0.25rem;--h-list-gap:2px;--h-list-option-group-padding:0.5rem 0.75rem;--h-list-option-group-font-weight:600;--h-list-option-padding:0.5rem 0.75rem;--h-list-option-border-radius:var(--h-border-radius-sm);--h-list-header-padding:0.5rem 1rem 0.25rem 1rem;--h-form-field-padding-x:0.75rem;--h-form-field-padding-y:0.5rem;--h-form-field-border-radius:var(--h-border-radius-md);--h-form-field-transition-duration:var(--h-transition-duration);--h-form-field-focus-ring-width:0;--h-form-field-focus-ring-style:none;--h-form-field-focus-ring-color:transparent;--h-form-field-focus-ring-offset:0;--h-form-field-focus-ring-shadow:none;--h-form-field-lg-font-size:1.125rem;--h-form-field-lg-padding-x:0.875rem;--h-form-field-lg-padding-y:0.625rem;--h-form-field-sm-font-size:0.875rem;--h-form-field-sm-padding-x:0.625rem;--h-form-field-sm-padding-y:0.375rem;--h-primary-50:var(--h-indigo-50);--h-primary-100:var(--h-indigo-100);--h-primary-200:var(--h-indigo-200);--h-primary-300:var(--h-indigo-300);--h-primary-400:var(--h-indigo-400);--h-primary-500:var(--h-indigo-500);--h-primary-600:var(--h-indigo-600);--h-primary-700:var(--h-indigo-700);--h-primary-800:var(--h-indigo-800);--h-primary-900:var(--h-indigo-900);--h-primary-950:var(--h-indigo-950);--h-focus-ring-width:1px;--h-focus-ring-style:solid;--h-focus-ring-color:var(--h-primary-color);--h-focus-ring-offset:2px;--h-focus-ring-shadow:none;--h-navigation-submenu-icon-color:var(--h-surface-400);--h-navigation-submenu-icon-focus-color:var(--h-surface-500);--h-navigation-submenu-icon-active-color:var(--h-surface-500);--h-navigation-submenu-label-background:transparent;--h-navigation-submenu-label-color:var(--h-text-muted-color);--h-navigation-item-focus-background:var(--h-surface-100);--h-navigation-item-active-background:var(--h-surface-100);--h-navigation-item-color:var(--h-text-color);--h-navigation-item-focus-color:var(--h-text-hover-color);--h-navigation-item-active-color:var(--h-text-hover-color);--h-navigation-item-icon-color:var(--h-surface-400);--h-navigation-item-icon-focus-color:var(--h-surface-500);--h-navigation-item-icon-active-color:var(--h-surface-500);--h-list-option-group-background:transparent;--h-list-option-group-color:var(--h-text-muted-color);--h-list-option-focus-background:var(--h-surface-100);--h-list-option-selected-background:var(--h-highlight-background);--h-list-option-selected-focus-background:var(--h-highlight-focus-background);--h-list-option-color:var(--h-text-color);--h-list-option-focus-color:var(--h-text-hover-color);--h-list-option-selected-color:var(--h-highlight-color);--h-list-option-selected-focus-color:var(--h-highlight-focus-color);--h-list-option-icon-color:var(--h-surface-400);--h-list-option-icon-focus-color:var(--h-surface-500);--h-overlay-modal-background:var(--h-surface-0);--h-overlay-modal-border-color:var(--h-surface-200);--h-overlay-modal-color:var(--h-text-color);--h-overlay-popover-background:var(--h-surface-0);--h-overlay-popover-border-color:var(--h-surface-200);--h-overlay-popover-color:var(--h-text-color);--h-overlay-select-background:var(--h-surface-0);--h-overlay-select-border-color:var(--h-surface-200);--h-overlay-select-color:var(--h-text-color);--h-content-background:var(--h-surface-0);--h-content-hover-background:var(--h-surface-100);--h-content-border-color:var(--h-surface-200);--h-content-color:var(--h-text-color);--h-content-hover-color:var(--h-text-hover-color);--h-text-color:var(--h-surface-600);--h-text-hover-color:var(--h-surface-700);--h-text-muted-color:var(--h-surface-500);--h-text-hover-muted-color:var(--h-surface-600);--h-form-field-background:var(--h-surface-0);--h-form-field-disabled-background:var(--h-surface-200);--h-form-field-filled-background:var(--h-surface-50);--h-form-field-filled-hover-background:var(--h-surface-50);--h-form-field-filled-focus-background:var(--h-surface-50);--h-form-field-border-color:var(--h-surface-300);--h-form-field-hover-border-color:var(--h-surface-400);--h-form-field-focus-border-color:var(--h-primary-color);--h-form-field-invalid-border-color:var(--h-red-400);--h-form-field-color:var(--h-surface-600);--h-form-field-disabled-color:var(--h-surface-500);--h-form-field-placeholder-color:var(--h-surface-500);--h-form-field-invalid-placeholder-color:var(--h-red-600);--h-form-field-float-label-color:var(--h-surface-500);--h-form-field-float-label-focus-color:var(--h-primary-color);--h-form-field-float-label-active-color:var(--h-surface-500);--h-form-field-float-label-invalid-color:var(--h-form-field-invalid-placeholder-color);--h-form-field-icon-color:var(--h-surface-400);--h-form-field-shadow:0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);--h-mask-background:rgba(0,0,0,0.4);--h-mask-color:var(--h-surface-200);--h-highlight-background:var(--h-primary-50);--h-highlight-focus-background:var(--h-primary-100);--h-highlight-color:var(--h-primary-700);--h-highlight-focus-color:var(--h-primary-800);--h-primary-color:var(--h-primary-600);--h-primary-contrast-color:#ffffff;--h-primary-hover-color:var(--h-primary-700);--h-primary-active-color:var(--h-primary-800);--h-surface-0:#ffffff;--h-surface-50:#f6f6f7;--h-surface-100:#ebebef;--h-surface-200:#e2e2e3;--h-surface-300:#c2c2c4;--h-surface-400:#98989f;--h-surface-500:#67676c;--h-surface-600:#3c3c43;--h-surface-700:#2e2e32;--h-surface-800:#202127;--h-surface-900:#1b1b1f;--h-surface-950:#161618;}.app-dark{--h-navigation-submenu-icon-color:var(--h-surface-500);--h-navigation-submenu-icon-focus-color:var(--h-surface-400);--h-navigation-submenu-icon-active-color:var(--h-surface-400);--h-navigation-submenu-label-background:transparent;--h-navigation-submenu-label-color:var(--h-text-muted-color);--h-navigation-item-focus-background:var(--h-surface-800);--h-navigation-item-active-background:var(--h-surface-800);--h-navigation-item-color:var(--h-text-color);--h-navigation-item-focus-color:var(--h-text-hover-color);--h-navigation-item-active-color:var(--h-text-hover-color);--h-navigation-item-icon-color:var(--h-surface-500);--h-navigation-item-icon-focus-color:var(--h-surface-400);--h-navigation-item-icon-active-color:var(--h-surface-400);--h-list-option-group-background:transparent;--h-list-option-group-color:var(--h-text-muted-color);--h-list-option-focus-background:var(--h-surface-800);--h-list-option-selected-background:var(--h-highlight-background);--h-list-option-selected-focus-background:var(--h-highlight-focus-background);--h-list-option-color:var(--h-text-color);--h-list-option-focus-color:var(--h-text-hover-color);--h-list-option-selected-color:var(--h-highlight-color);--h-list-option-selected-focus-color:var(--h-highlight-focus-color);--h-list-option-icon-color:var(--h-surface-500);--h-list-option-icon-focus-color:var(--h-surface-400);--h-overlay-modal-background:var(--h-surface-900);--h-overlay-modal-border-color:var(--h-surface-700);--h-overlay-modal-color:var(--h-text-color);--h-overlay-popover-background:var(--h-surface-900);--h-overlay-popover-border-color:var(--h-surface-700);--h-overlay-popover-color:var(--h-text-color);--h-overlay-select-background:var(--h-surface-900);--h-overlay-select-border-color:var(--h-surface-700);--h-overlay-select-color:var(--h-text-color);--h-content-background:var(--h-surface-900);--h-content-hover-background:var(--h-surface-800);--h-content-border-color:var(--h-surface-700);--h-content-color:var(--h-text-color);--h-content-hover-color:var(--h-text-hover-color);--h-text-color:#dfdfd6;--h-text-hover-color:var(--h-surface-50);--h-text-muted-color:var(--h-surface-400);--h-text-hover-muted-color:var(--h-surface-300);--h-form-field-background:var(--h-surface-950);--h-form-field-disabled-background:var(--h-surface-700);--h-form-field-filled-background:var(--h-surface-800);--h-form-field-filled-hover-background:var(--h-surface-800);--h-form-field-filled-focus-background:var(--h-surface-800);--h-form-field-border-color:var(--h-surface-600);--h-form-field-hover-border-color:var(--h-surface-500);--h-form-field-focus-border-color:var(--h-primary-color);--h-form-field-invalid-border-color:var(--h-red-300);--h-form-field-color:var(--h-text-color);--h-form-field-disabled-color:var(--h-surface-400);--h-form-field-placeholder-color:var(--h-surface-400);--h-form-field-invalid-placeholder-color:var(--h-red-400);--h-form-field-float-label-color:var(--h-surface-400);--h-form-field-float-label-focus-color:var(--h-primary-color);--h-form-field-float-label-active-color:var(--h-surface-400);--h-form-field-float-label-invalid-color:var(--h-form-field-invalid-placeholder-color);--h-form-field-icon-color:var(--h-surface-400);--h-form-field-shadow:0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);--h-mask-background:rgba(0,0,0,0.6);--h-mask-color:var(--h-surface-200);--h-highlight-background:color-mix(in srgb, var(--h-primary-400), transparent 84%);--h-highlight-focus-background:color-mix(in srgb, var(--h-primary-400), transparent 76%);--h-highlight-color:rgba(255,255,255,.87);--h-highlight-focus-color:rgba(255,255,255,.87);--h-primary-color:var(--h-primary-400);--h-primary-contrast-color:var(--h-surface-950);--h-primary-hover-color:var(--h-primary-300);--h-primary-active-color:var(--h-primary-200);--h-surface-0:#ffffff;--h-surface-50:#f6f6f7;--h-surface-100:#ebebef;--h-surface-200:#e2e2e3;--h-surface-300:#c2c2c4;--h-surface-400:#98989f;--h-surface-500:#67676c;--h-surface-600:#3c3c43;--h-surface-700:#2e2e32;--h-surface-800:#202127;--h-surface-900:#1b1b1f;--h-surface-950:#161618;}
 :root,:host{color-scheme:light}.app-dark{color-scheme:dark}
@@ -15,6 +15,7 @@
 :root,:host{--h-chip-remove-icon-size:1rem;--h-chip-remove-icon-focus-ring-width:var(--h-focus-ring-width);--h-chip-remove-icon-focus-ring-style:var(--h-focus-ring-style);--h-chip-remove-icon-focus-ring-color:var(--h-focus-ring-color);--h-chip-remove-icon-focus-ring-offset:var(--h-focus-ring-offset);--h-chip-remove-icon-focus-ring-shadow:var(--h-form-field-focus-ring-shadow);--h-chip-icon-size:1rem;--h-chip-image-width:2rem;--h-chip-image-height:2rem;--h-chip-border-radius:16px;--h-chip-padding-x:0.75rem;--h-chip-padding-y:0.5rem;--h-chip-gap:0.5rem;--h-chip-transition-duration:var(--h-transition-duration);--h-chip-remove-icon-color:var(--h-surface-800);--h-chip-icon-color:var(--h-surface-800);--h-chip-background:var(--h-surface-100);--h-chip-color:var(--h-surface-800);}.app-dark{--h-chip-remove-icon-color:var(--h-surface-0);--h-chip-icon-color:var(--h-surface-0);--h-chip-background:var(--h-surface-800);--h-chip-color:var(--h-surface-0);}
 :root,:host{--h-confirmdialog-content-gap:1rem;--h-confirmdialog-icon-size:2rem;--h-confirmdialog-icon-color:var(--h-overlay-modal-color);}
 :root,:host{--h-confirmpopup-footer-gap:0.5rem;--h-confirmpopup-footer-padding:0 var(--h-overlay-popover-padding) var(--h-overlay-popover-padding) var(--h-overlay-popover-padding);--h-confirmpopup-icon-size:1.5rem;--h-confirmpopup-icon-color:var(--h-overlay-popover-color);--h-confirmpopup-content-padding:var(--h-overlay-popover-padding);--h-confirmpopup-content-gap:1rem;--h-confirmpopup-background:var(--h-overlay-popover-background);--h-confirmpopup-border-color:var(--h-overlay-popover-border-color);--h-confirmpopup-color:var(--h-overlay-popover-color);--h-confirmpopup-border-radius:var(--h-overlay-popover-border-radius);--h-confirmpopup-shadow:var(--h-overlay-popover-shadow);--h-confirmpopup-gutter:10px;--h-confirmpopup-arrow-offset:1.25rem;}
+:root,:host{--h-datatable-paginator-bottom-border-color:var(--h-datatable-border-color);--h-datatable-paginator-bottom-border-width:0 0 1px 0;--h-datatable-paginator-top-border-color:var(--h-datatable-border-color);--h-datatable-paginator-top-border-width:0 0 1px 0;--h-datatable-filter-inline-gap:0.5rem;--h-datatable-filter-constraint-focus-background:var(--h-list-option-focus-background);--h-datatable-filter-constraint-selected-background:var(--h-list-option-selected-background);--h-datatable-filter-constraint-selected-focus-background:var(--h-list-option-selected-focus-background);--h-datatable-filter-constraint-color:var(--h-list-option-color);--h-datatable-filter-constraint-focus-color:var(--h-list-option-focus-color);--h-datatable-filter-constraint-selected-color:var(--h-list-option-selected-color);--h-datatable-filter-constraint-selected-focus-color:var(--h-list-option-selected-focus-color);--h-datatable-filter-constraint-padding:var(--h-list-option-padding);--h-datatable-filter-constraint-border-radius:var(--h-list-option-border-radius);--h-datatable-filter-constraint-separator-border-color:var(--h-content-border-color);--h-datatable-filter-constraint-list-padding:var(--h-list-padding);--h-datatable-filter-constraint-list-gap:var(--h-list-gap);--h-datatable-filter-rule-border-color:var(--h-content-border-color);--h-datatable-filter-overlay-popover-background:var(--h-overlay-popover-background);--h-datatable-filter-overlay-popover-border-color:var(--h-overlay-popover-border-color);--h-datatable-filter-overlay-popover-border-radius:var(--h-overlay-popover-border-radius);--h-datatable-filter-overlay-popover-color:var(--h-overlay-popover-color);--h-datatable-filter-overlay-popover-shadow:var(--h-overlay-popover-shadow);--h-datatable-filter-overlay-popover-padding:var(--h-overlay-popover-padding);--h-datatable-filter-overlay-popover-gap:0.5rem;--h-datatable-filter-overlay-select-background:var(--h-overlay-select-background);--h-datatable-filter-overlay-select-border-color:var(--h-overlay-select-border-color);--h-datatable-filter-overlay-select-border-radius:var(--h-overlay-select-border-radius);--h-datatable-filter-overlay-select-color:var(--h-overlay-select-color);--h-datatable-filter-overlay-select-shadow:var(--h-overlay-select-shadow);--h-datatable-row-toggle-button-hover-background:var(--h-content-hover-background);--h-datatable-row-toggle-button-selected-hover-background:var(--h-content-background);--h-datatable-row-toggle-button-color:var(--h-text-muted-color);--h-datatable-row-toggle-button-hover-color:var(--h-text-color);--h-datatable-row-toggle-button-selected-hover-color:var(--h-primary-color);--h-datatable-row-toggle-button-size:1.75rem;--h-datatable-row-toggle-button-border-radius:50%;--h-datatable-row-toggle-button-focus-ring-width:var(--h-focus-ring-width);--h-datatable-row-toggle-button-focus-ring-style:var(--h-focus-ring-style);--h-datatable-row-toggle-button-focus-ring-color:var(--h-focus-ring-color);--h-datatable-row-toggle-button-focus-ring-offset:var(--h-focus-ring-offset);--h-datatable-row-toggle-button-focus-ring-shadow:var(--h-focus-ring-shadow);--h-datatable-loading-icon-size:2rem;--h-datatable-sort-icon-color:var(--h-text-muted-color);--h-datatable-sort-icon-hover-color:var(--h-text-hover-muted-color);--h-datatable-sort-icon-size:0.875rem;--h-datatable-resize-indicator-width:1px;--h-datatable-resize-indicator-color:var(--h-primary-color);--h-datatable-column-resizer-width:0.5rem;--h-datatable-drop-point-color:var(--h-primary-color);--h-datatable-footer-background:var(--h-content-background);--h-datatable-footer-border-color:var(--h-datatable-border-color);--h-datatable-footer-color:var(--h-content-color);--h-datatable-footer-border-width:0 0 1px 0;--h-datatable-footer-padding:0.75rem 1rem;--h-datatable-footer-lg-padding:1rem 1.25rem;--h-datatable-footer-sm-padding:0.375rem 0.5rem;--h-datatable-column-footer-font-weight:600;--h-datatable-footer-cell-background:var(--h-content-background);--h-datatable-footer-cell-border-color:var(--h-datatable-border-color);--h-datatable-footer-cell-color:var(--h-content-color);--h-datatable-footer-cell-padding:0.75rem 1rem;--h-datatable-footer-cell-lg-padding:1rem 1.25rem;--h-datatable-footer-cell-sm-padding:0.375rem 0.5rem;--h-datatable-body-cell-border-color:var(--h-datatable-border-color);--h-datatable-body-cell-padding:0.75rem 1rem;--h-datatable-body-cell-lg-padding:1rem 1.25rem;--h-datatable-body-cell-sm-padding:0.375rem 0.5rem;--h-datatable-row-background:var(--h-content-background);--h-datatable-row-hover-background:var(--h-content-hover-background);--h-datatable-row-selected-background:var(--h-highlight-background);--h-datatable-row-color:var(--h-content-color);--h-datatable-row-hover-color:var(--h-content-hover-color);--h-datatable-row-selected-color:var(--h-highlight-color);--h-datatable-row-focus-ring-width:var(--h-focus-ring-width);--h-datatable-row-focus-ring-style:var(--h-focus-ring-style);--h-datatable-row-focus-ring-color:var(--h-focus-ring-color);--h-datatable-row-focus-ring-offset:-1px;--h-datatable-row-focus-ring-shadow:var(--h-focus-ring-shadow);--h-datatable-column-title-font-weight:600;--h-datatable-header-cell-background:var(--h-content-background);--h-datatable-header-cell-hover-background:var(--h-content-hover-background);--h-datatable-header-cell-selected-background:var(--h-highlight-background);--h-datatable-header-cell-border-color:var(--h-datatable-border-color);--h-datatable-header-cell-color:var(--h-content-color);--h-datatable-header-cell-hover-color:var(--h-content-hover-color);--h-datatable-header-cell-selected-color:var(--h-highlight-color);--h-datatable-header-cell-gap:0.5rem;--h-datatable-header-cell-padding:0.75rem 1rem;--h-datatable-header-cell-lg-padding:1rem 1.25rem;--h-datatable-header-cell-sm-padding:0.375rem 0.5rem;--h-datatable-header-cell-focus-ring-width:var(--h-focus-ring-width);--h-datatable-header-cell-focus-ring-style:var(--h-focus-ring-style);--h-datatable-header-cell-focus-ring-color:var(--h-focus-ring-color);--h-datatable-header-cell-focus-ring-offset:-1px;--h-datatable-header-cell-focus-ring-shadow:var(--h-focus-ring-shadow);--h-datatable-header-background:var(--h-content-background);--h-datatable-header-border-color:var(--h-datatable-border-color);--h-datatable-header-color:var(--h-content-color);--h-datatable-header-border-width:0 0 1px 0;--h-datatable-header-padding:0.75rem 1rem;--h-datatable-header-lg-padding:1rem 1.25rem;--h-datatable-header-sm-padding:0.375rem 0.5rem;--h-datatable-transition-duration:var(--h-transition-duration);--h-datatable-body-cell-selected-border-color:var(--h-primary-100);--h-datatable-row-striped-background:var(--h-surface-50);--h-datatable-border-color:var(--h-content-border-color);}.app-dark{--h-datatable-body-cell-selected-border-color:var(--h-primary-900);--h-datatable-row-striped-background:var(--h-surface-950);--h-datatable-border-color:var(--h-surface-800);}
 :root,:host{--h-datepicker-time-picker-padding:0.5rem 0 0 0;--h-datepicker-time-picker-border-color:var(--h-content-border-color);--h-datepicker-time-picker-gap:0.5rem;--h-datepicker-time-picker-button-gap:0.25rem;--h-datepicker-buttonbar-padding:0.5rem 0 0 0;--h-datepicker-buttonbar-border-color:var(--h-content-border-color);--h-datepicker-year-padding:0.375rem;--h-datepicker-year-border-radius:var(--h-content-border-radius);--h-datepicker-year-view-margin:0.5rem 0 0 0;--h-datepicker-month-padding:0.375rem;--h-datepicker-month-border-radius:var(--h-content-border-radius);--h-datepicker-month-view-margin:0.5rem 0 0 0;--h-datepicker-date-hover-background:var(--h-content-hover-background);--h-datepicker-date-selected-background:var(--h-primary-color);--h-datepicker-date-range-selected-background:var(--h-highlight-background);--h-datepicker-date-color:var(--h-content-color);--h-datepicker-date-hover-color:var(--h-content-hover-color);--h-datepicker-date-selected-color:var(--h-primary-contrast-color);--h-datepicker-date-range-selected-color:var(--h-highlight-color);--h-datepicker-date-width:2rem;--h-datepicker-date-height:2rem;--h-datepicker-date-border-radius:50%;--h-datepicker-date-padding:0.25rem;--h-datepicker-date-focus-ring-width:var(--h-focus-ring-width);--h-datepicker-date-focus-ring-style:var(--h-focus-ring-style);--h-datepicker-date-focus-ring-color:var(--h-focus-ring-color);--h-datepicker-date-focus-ring-offset:var(--h-focus-ring-offset);--h-datepicker-date-focus-ring-shadow:var(--h-focus-ring-shadow);--h-datepicker-week-day-padding:0.25rem;--h-datepicker-week-day-font-weight:500;--h-datepicker-week-day-color:var(--h-content-color);--h-datepicker-day-view-margin:0.5rem 0 0 0;--h-datepicker-group-border-color:var(--h-content-border-color);--h-datepicker-group-gap:var(--h-overlay-popover-padding);--h-datepicker-select-year-hover-background:var(--h-content-hover-background);--h-datepicker-select-year-color:var(--h-content-color);--h-datepicker-select-year-hover-color:var(--h-content-hover-color);--h-datepicker-select-year-padding:0.25rem 0.5rem;--h-datepicker-select-year-border-radius:var(--h-content-border-radius);--h-datepicker-select-month-hover-background:var(--h-content-hover-background);--h-datepicker-select-month-color:var(--h-content-color);--h-datepicker-select-month-hover-color:var(--h-content-hover-color);--h-datepicker-select-month-padding:0.25rem 0.5rem;--h-datepicker-select-month-border-radius:var(--h-content-border-radius);--h-datepicker-input-icon-color:var(--h-form-field-icon-color);--h-datepicker-dropdown-width:2.5rem;--h-datepicker-dropdown-border-color:var(--h-form-field-border-color);--h-datepicker-dropdown-hover-border-color:var(--h-form-field-border-color);--h-datepicker-dropdown-active-border-color:var(--h-form-field-border-color);--h-datepicker-dropdown-border-radius:var(--h-form-field-border-radius);--h-datepicker-dropdown-focus-ring-width:var(--h-focus-ring-width);--h-datepicker-dropdown-focus-ring-style:var(--h-focus-ring-style);--h-datepicker-dropdown-focus-ring-color:var(--h-focus-ring-color);--h-datepicker-dropdown-focus-ring-offset:var(--h-focus-ring-offset);--h-datepicker-dropdown-focus-ring-shadow:var(--h-focus-ring-shadow);--h-datepicker-dropdown-lg-width:3rem;--h-datepicker-dropdown-sm-width:2rem;--h-datepicker-title-gap:0.5rem;--h-datepicker-title-font-weight:500;--h-datepicker-header-background:var(--h-content-background);--h-datepicker-header-border-color:var(--h-content-border-color);--h-datepicker-header-color:var(--h-content-color);--h-datepicker-header-padding:0 0 0.5rem 0;--h-datepicker-panel-background:var(--h-content-background);--h-datepicker-panel-border-color:var(--h-content-border-color);--h-datepicker-panel-color:var(--h-content-color);--h-datepicker-panel-border-radius:var(--h-content-border-radius);--h-datepicker-panel-shadow:var(--h-overlay-popover-shadow);--h-datepicker-panel-padding:var(--h-overlay-popover-padding);--h-datepicker-transition-duration:var(--h-transition-duration);--h-datepicker-today-background:var(--h-surface-200);--h-datepicker-today-color:var(--h-surface-900);--h-datepicker-dropdown-background:var(--h-surface-100);--h-datepicker-dropdown-hover-background:var(--h-surface-200);--h-datepicker-dropdown-active-background:var(--h-surface-300);--h-datepicker-dropdown-color:var(--h-surface-600);--h-datepicker-dropdown-hover-color:var(--h-surface-700);--h-datepicker-dropdown-active-color:var(--h-surface-800);}.app-dark{--h-datepicker-today-background:var(--h-surface-700);--h-datepicker-today-color:var(--h-surface-0);--h-datepicker-dropdown-background:var(--h-surface-800);--h-datepicker-dropdown-hover-background:var(--h-surface-700);--h-datepicker-dropdown-active-background:var(--h-surface-600);--h-datepicker-dropdown-color:var(--h-surface-300);--h-datepicker-dropdown-hover-color:var(--h-surface-200);--h-datepicker-dropdown-active-color:var(--h-surface-100);}
 :root,:host{--h-dialog-footer-padding:0 var(--h-overlay-modal-padding) var(--h-overlay-modal-padding) var(--h-overlay-modal-padding);--h-dialog-footer-gap:0.5rem;--h-dialog-content-padding:0 var(--h-overlay-modal-padding) var(--h-overlay-modal-padding) var(--h-overlay-modal-padding);--h-dialog-title-font-size:1.25rem;--h-dialog-title-font-weight:600;--h-dialog-header-padding:var(--h-overlay-modal-padding);--h-dialog-header-gap:0.5rem;--h-dialog-background:var(--h-overlay-modal-background);--h-dialog-border-color:var(--h-overlay-modal-border-color);--h-dialog-color:var(--h-overlay-modal-color);--h-dialog-border-radius:var(--h-overlay-modal-border-radius);--h-dialog-shadow:var(--h-overlay-modal-shadow);}
 :root,:host{--h-divider-vertical-margin:0 1rem;--h-divider-vertical-padding:0.5rem 0;--h-divider-vertical-content-padding:0.5rem 0;--h-divider-horizontal-margin:1rem 0;--h-divider-horizontal-padding:0 1rem;--h-divider-horizontal-content-padding:0 0.5rem;--h-divider-content-background:var(--h-content-background);--h-divider-content-color:var(--h-text-color);--h-divider-border-color:var(--h-content-border-color);}
@@ -32,6 +33,7 @@
 :root,:host{--h-menubar-mobile-button-border-radius:50%;--h-menubar-mobile-button-size:1.75rem;--h-menubar-mobile-button-color:var(--h-text-muted-color);--h-menubar-mobile-button-hover-color:var(--h-text-hover-muted-color);--h-menubar-mobile-button-hover-background:var(--h-content-hover-background);--h-menubar-mobile-button-focus-ring-width:var(--h-focus-ring-width);--h-menubar-mobile-button-focus-ring-style:var(--h-focus-ring-style);--h-menubar-mobile-button-focus-ring-color:var(--h-focus-ring-color);--h-menubar-mobile-button-focus-ring-offset:var(--h-focus-ring-offset);--h-menubar-mobile-button-focus-ring-shadow:var(--h-focus-ring-shadow);--h-menubar-separator-border-color:var(--h-content-border-color);--h-menubar-submenu-padding:var(--h-navigation-list-padding);--h-menubar-submenu-gap:var(--h-navigation-list-gap);--h-menubar-submenu-background:var(--h-content-background);--h-menubar-submenu-border-color:var(--h-content-border-color);--h-menubar-submenu-border-radius:var(--h-content-border-radius);--h-menubar-submenu-shadow:var(--h-overlay-navigation-shadow);--h-menubar-submenu-mobile-indent:1rem;--h-menubar-submenu-icon-size:var(--h-navigation-submenu-icon-size);--h-menubar-submenu-icon-color:var(--h-navigation-submenu-icon-color);--h-menubar-submenu-icon-focus-color:var(--h-navigation-submenu-icon-focus-color);--h-menubar-submenu-icon-active-color:var(--h-navigation-submenu-icon-active-color);--h-menubar-item-focus-background:var(--h-navigation-item-focus-background);--h-menubar-item-active-background:var(--h-navigation-item-active-background);--h-menubar-item-color:var(--h-navigation-item-color);--h-menubar-item-focus-color:var(--h-navigation-item-focus-color);--h-menubar-item-active-color:var(--h-navigation-item-active-color);--h-menubar-item-padding:var(--h-navigation-item-padding);--h-menubar-item-border-radius:var(--h-navigation-item-border-radius);--h-menubar-item-gap:var(--h-navigation-item-gap);--h-menubar-item-icon-color:var(--h-navigation-item-icon-color);--h-menubar-item-icon-focus-color:var(--h-navigation-item-icon-focus-color);--h-menubar-item-icon-active-color:var(--h-navigation-item-icon-active-color);--h-menubar-base-item-border-radius:var(--h-content-border-radius);--h-menubar-base-item-padding:var(--h-navigation-item-padding);--h-menubar-background:var(--h-content-background);--h-menubar-border-color:var(--h-content-border-color);--h-menubar-border-radius:var(--h-content-border-radius);--h-menubar-color:var(--h-content-color);--h-menubar-gap:0.5rem;--h-menubar-padding:0.5rem 0.75rem;--h-menubar-transition-duration:var(--h-transition-duration);}
 :root,:host{--h-message-simple-content-padding:0;--h-message-outlined-border-width:1px;--h-message-close-icon-size:1rem;--h-message-close-icon-lg-size:1.125rem;--h-message-close-icon-sm-size:0.875rem;--h-message-close-button-width:1.75rem;--h-message-close-button-height:1.75rem;--h-message-close-button-border-radius:50%;--h-message-close-button-focus-ring-width:var(--h-focus-ring-width);--h-message-close-button-focus-ring-style:var(--h-focus-ring-style);--h-message-close-button-focus-ring-offset:var(--h-focus-ring-offset);--h-message-icon-size:1.125rem;--h-message-icon-lg-size:1.25rem;--h-message-icon-sm-size:1rem;--h-message-text-font-size:1rem;--h-message-text-font-weight:500;--h-message-text-lg-font-size:1.125rem;--h-message-text-sm-font-size:0.875rem;--h-message-content-padding:0.5rem 0.75rem;--h-message-content-gap:0.5rem;--h-message-content-lg-padding:0.625rem 0.875rem;--h-message-content-sm-padding:0.375rem 0.625rem;--h-message-border-radius:var(--h-content-border-radius);--h-message-border-width:1px;--h-message-transition-duration:var(--h-transition-duration);--h-message-contrast-background:var(--h-surface-900);--h-message-contrast-border-color:var(--h-surface-950);--h-message-contrast-color:var(--h-surface-50);--h-message-contrast-shadow:0px 4px 8px 0px color-mix(in srgb, var(--h-surface-950), transparent 96%);--h-message-contrast-simple-color:var(--h-surface-950);--h-message-contrast-outlined-color:var(--h-surface-950);--h-message-contrast-outlined-border-color:var(--h-surface-950);--h-message-contrast-close-button-hover-background:var(--h-surface-800);--h-message-contrast-close-button-focus-ring-color:var(--h-surface-50);--h-message-contrast-close-button-focus-ring-shadow:none;--h-message-secondary-background:var(--h-surface-100);--h-message-secondary-border-color:var(--h-surface-200);--h-message-secondary-color:var(--h-surface-600);--h-message-secondary-shadow:0px 4px 8px 0px color-mix(in srgb, var(--h-surface-500), transparent 96%);--h-message-secondary-simple-color:var(--h-surface-500);--h-message-secondary-outlined-color:var(--h-surface-500);--h-message-secondary-outlined-border-color:var(--h-surface-500);--h-message-secondary-close-button-hover-background:var(--h-surface-200);--h-message-secondary-close-button-focus-ring-color:var(--h-surface-600);--h-message-secondary-close-button-focus-ring-shadow:none;--h-message-error-background:color-mix(in srgb, var(--h-red-50), transparent 5%);--h-message-error-border-color:var(--h-red-200);--h-message-error-color:var(--h-red-600);--h-message-error-shadow:0px 4px 8px 0px color-mix(in srgb, var(--h-red-500), transparent 96%);--h-message-error-simple-color:var(--h-red-600);--h-message-error-outlined-color:var(--h-red-600);--h-message-error-outlined-border-color:var(--h-red-600);--h-message-error-close-button-hover-background:var(--h-red-100);--h-message-error-close-button-focus-ring-color:var(--h-red-600);--h-message-error-close-button-focus-ring-shadow:none;--h-message-warn-background:color-mix(in srgb,var(--h-yellow-50), transparent 5%);--h-message-warn-border-color:var(--h-yellow-200);--h-message-warn-color:var(--h-yellow-600);--h-message-warn-shadow:0px 4px 8px 0px color-mix(in srgb, var(--h-yellow-500), transparent 96%);--h-message-warn-simple-color:var(--h-yellow-600);--h-message-warn-outlined-color:var(--h-yellow-600);--h-message-warn-outlined-border-color:var(--h-yellow-600);--h-message-warn-close-button-hover-background:var(--h-yellow-100);--h-message-warn-close-button-focus-ring-color:var(--h-yellow-600);--h-message-warn-close-button-focus-ring-shadow:none;--h-message-success-background:color-mix(in srgb, var(--h-green-50), transparent 5%);--h-message-success-border-color:var(--h-green-200);--h-message-success-color:var(--h-green-600);--h-message-success-shadow:0px 4px 8px 0px color-mix(in srgb, var(--h-green-500), transparent 96%);--h-message-success-simple-color:var(--h-green-600);--h-message-success-outlined-color:var(--h-green-600);--h-message-success-outlined-border-color:var(--h-green-600);--h-message-success-close-button-hover-background:var(--h-green-100);--h-message-success-close-button-focus-ring-color:var(--h-green-600);--h-message-success-close-button-focus-ring-shadow:none;--h-message-info-background:color-mix(in srgb, var(--h-blue-50), transparent 5%);--h-message-info-border-color:var(--h-blue-200);--h-message-info-color:var(--h-blue-600);--h-message-info-shadow:0px 4px 8px 0px color-mix(in srgb, var(--h-blue-500), transparent 96%);--h-message-info-simple-color:var(--h-blue-600);--h-message-info-outlined-color:var(--h-blue-600);--h-message-info-outlined-border-color:var(--h-blue-600);--h-message-info-close-button-hover-background:var(--h-blue-100);--h-message-info-close-button-focus-ring-color:var(--h-blue-600);--h-message-info-close-button-focus-ring-shadow:none;}.app-dark{--h-message-contrast-background:var(--h-surface-0);--h-message-contrast-border-color:var(--h-surface-100);--h-message-contrast-color:var(--h-surface-950);--h-message-contrast-shadow:0px 4px 8px 0px color-mix(in srgb, var(--h-surface-950), transparent 96%);--h-message-contrast-simple-color:var(--h-surface-0);--h-message-contrast-outlined-color:var(--h-surface-0);--h-message-contrast-outlined-border-color:var(--h-surface-0);--h-message-contrast-close-button-hover-background:var(--h-surface-100);--h-message-contrast-close-button-focus-ring-color:var(--h-surface-950);--h-message-contrast-close-button-focus-ring-shadow:none;--h-message-secondary-background:var(--h-surface-800);--h-message-secondary-border-color:var(--h-surface-700);--h-message-secondary-color:var(--h-surface-300);--h-message-secondary-shadow:0px 4px 8px 0px color-mix(in srgb, var(--h-surface-500), transparent 96%);--h-message-secondary-simple-color:var(--h-surface-400);--h-message-secondary-outlined-color:var(--h-surface-400);--h-message-secondary-outlined-border-color:var(--h-surface-400);--h-message-secondary-close-button-hover-background:var(--h-surface-700);--h-message-secondary-close-button-focus-ring-color:var(--h-surface-300);--h-message-secondary-close-button-focus-ring-shadow:none;--h-message-error-background:color-mix(in srgb, var(--h-red-500), transparent 84%);--h-message-error-border-color:color-mix(in srgb, var(--h-red-700), transparent 64%);--h-message-error-color:var(--h-red-500);--h-message-error-shadow:0px 4px 8px 0px color-mix(in srgb, var(--h-red-500), transparent 96%);--h-message-error-simple-color:var(--h-red-500);--h-message-error-outlined-color:var(--h-red-500);--h-message-error-outlined-border-color:var(--h-red-500);--h-message-error-close-button-hover-background:rgba(255, 255, 255, 0.05);--h-message-error-close-button-focus-ring-color:var(--h-red-500);--h-message-error-close-button-focus-ring-shadow:none;--h-message-warn-background:color-mix(in srgb, var(--h-yellow-500), transparent 84%);--h-message-warn-border-color:color-mix(in srgb, var(--h-yellow-700), transparent 64%);--h-message-warn-color:var(--h-yellow-500);--h-message-warn-shadow:0px 4px 8px 0px color-mix(in srgb, var(--h-yellow-500), transparent 96%);--h-message-warn-simple-color:var(--h-yellow-500);--h-message-warn-outlined-color:var(--h-yellow-500);--h-message-warn-outlined-border-color:var(--h-yellow-500);--h-message-warn-close-button-hover-background:rgba(255, 255, 255, 0.05);--h-message-warn-close-button-focus-ring-color:var(--h-yellow-500);--h-message-warn-close-button-focus-ring-shadow:none;--h-message-success-background:color-mix(in srgb, var(--h-green-500), transparent 84%);--h-message-success-border-color:color-mix(in srgb, var(--h-green-700), transparent 64%);--h-message-success-color:var(--h-green-500);--h-message-success-shadow:0px 4px 8px 0px color-mix(in srgb, var(--h-green-500), transparent 96%);--h-message-success-simple-color:var(--h-green-500);--h-message-success-outlined-color:var(--h-green-500);--h-message-success-outlined-border-color:var(--h-green-500);--h-message-success-close-button-hover-background:rgba(255, 255, 255, 0.05);--h-message-success-close-button-focus-ring-color:var(--h-green-500);--h-message-success-close-button-focus-ring-shadow:none;--h-message-info-background:color-mix(in srgb, var(--h-blue-500), transparent 84%);--h-message-info-border-color:color-mix(in srgb, var(--h-blue-700), transparent 64%);--h-message-info-color:var(--h-blue-500);--h-message-info-shadow:0px 4px 8px 0px color-mix(in srgb, var(--h-blue-500), transparent 96%);--h-message-info-simple-color:var(--h-blue-500);--h-message-info-outlined-color:var(--h-blue-500);--h-message-info-outlined-border-color:var(--h-blue-500);--h-message-info-close-button-hover-background:rgba(255, 255, 255, 0.05);--h-message-info-close-button-focus-ring-color:var(--h-blue-500);--h-message-info-close-button-focus-ring-shadow:none;}
 :root,:host{--h-multiselect-empty-message-padding:var(--h-list-option-padding);--h-multiselect-clear-icon-color:var(--h-form-field-icon-color);--h-multiselect-chip-border-radius:var(--h-border-radius-sm);--h-multiselect-option-group-background:var(--h-list-option-group-background);--h-multiselect-option-group-color:var(--h-list-option-group-color);--h-multiselect-option-group-font-weight:var(--h-list-option-group-font-weight);--h-multiselect-option-group-padding:var(--h-list-option-group-padding);--h-multiselect-option-focus-background:var(--h-list-option-focus-background);--h-multiselect-option-selected-background:var(--h-list-option-selected-background);--h-multiselect-option-selected-focus-background:var(--h-list-option-selected-focus-background);--h-multiselect-option-color:var(--h-list-option-color);--h-multiselect-option-focus-color:var(--h-list-option-focus-color);--h-multiselect-option-selected-color:var(--h-list-option-selected-color);--h-multiselect-option-selected-focus-color:var(--h-list-option-selected-focus-color);--h-multiselect-option-padding:var(--h-list-option-padding);--h-multiselect-option-border-radius:var(--h-list-option-border-radius);--h-multiselect-option-gap:0.5rem;--h-multiselect-list-padding:var(--h-list-padding);--h-multiselect-list-gap:var(--h-list-gap);--h-multiselect-list-header-padding:var(--h-list-header-padding);--h-multiselect-overlay-background:var(--h-overlay-select-background);--h-multiselect-overlay-border-color:var(--h-overlay-select-border-color);--h-multiselect-overlay-border-radius:var(--h-overlay-select-border-radius);--h-multiselect-overlay-color:var(--h-overlay-select-color);--h-multiselect-overlay-shadow:var(--h-overlay-select-shadow);--h-multiselect-dropdown-width:2.5rem;--h-multiselect-dropdown-color:var(--h-form-field-icon-color);--h-multiselect-background:var(--h-form-field-background);--h-multiselect-disabled-background:var(--h-form-field-disabled-background);--h-multiselect-filled-background:var(--h-form-field-filled-background);--h-multiselect-filled-hover-background:var(--h-form-field-filled-hover-background);--h-multiselect-filled-focus-background:var(--h-form-field-filled-focus-background);--h-multiselect-border-color:var(--h-form-field-border-color);--h-multiselect-hover-border-color:var(--h-form-field-hover-border-color);--h-multiselect-focus-border-color:var(--h-form-field-focus-border-color);--h-multiselect-invalid-border-color:var(--h-form-field-invalid-border-color);--h-multiselect-color:var(--h-form-field-color);--h-multiselect-disabled-color:var(--h-form-field-disabled-color);--h-multiselect-placeholder-color:var(--h-form-field-placeholder-color);--h-multiselect-invalid-placeholder-color:var(--h-form-field-invalid-placeholder-color);--h-multiselect-shadow:var(--h-form-field-shadow);--h-multiselect-padding-x:var(--h-form-field-padding-x);--h-multiselect-padding-y:var(--h-form-field-padding-y);--h-multiselect-border-radius:var(--h-form-field-border-radius);--h-multiselect-transition-duration:var(--h-form-field-transition-duration);--h-multiselect-lg-font-size:var(--h-form-field-lg-font-size);--h-multiselect-lg-padding-x:var(--h-form-field-lg-padding-x);--h-multiselect-lg-padding-y:var(--h-form-field-lg-padding-y);--h-multiselect-sm-font-size:var(--h-form-field-sm-font-size);--h-multiselect-sm-padding-x:var(--h-form-field-sm-padding-x);--h-multiselect-sm-padding-y:var(--h-form-field-sm-padding-y);--h-multiselect-focus-ring-width:var(--h-form-field-focus-ring-width);--h-multiselect-focus-ring-style:var(--h-form-field-focus-ring-style);--h-multiselect-focus-ring-color:var(--h-form-field-focus-ring-color);--h-multiselect-focus-ring-offset:var(--h-form-field-focus-ring-offset);--h-multiselect-focus-ring-shadow:var(--h-form-field-focus-ring-shadow);}
+:root,:host{--h-paginator-jump-to-page-input-max-width:2.5rem;--h-paginator-current-page-report-color:var(--h-text-muted-color);--h-paginator-nav-button-background:transparent;--h-paginator-nav-button-hover-background:var(--h-content-hover-background);--h-paginator-nav-button-selected-background:var(--h-highlight-background);--h-paginator-nav-button-color:var(--h-text-muted-color);--h-paginator-nav-button-hover-color:var(--h-text-hover-muted-color);--h-paginator-nav-button-selected-color:var(--h-highlight-color);--h-paginator-nav-button-width:2.5rem;--h-paginator-nav-button-height:2.5rem;--h-paginator-nav-button-border-radius:50%;--h-paginator-nav-button-focus-ring-width:var(--h-focus-ring-width);--h-paginator-nav-button-focus-ring-style:var(--h-focus-ring-style);--h-paginator-nav-button-focus-ring-color:var(--h-focus-ring-color);--h-paginator-nav-button-focus-ring-offset:var(--h-focus-ring-offset);--h-paginator-nav-button-focus-ring-shadow:var(--h-focus-ring-shadow);--h-paginator-padding:0.5rem 1rem;--h-paginator-gap:0.25rem;--h-paginator-border-radius:var(--h-content-border-radius);--h-paginator-background:var(--h-content-background);--h-paginator-color:var(--h-content-color);--h-paginator-transition-duration:var(--h-transition-duration);}
 :root,:host{--h-panel-footer-padding:0 1.125rem 1.125rem 1.125rem;--h-panel-content-padding:0 1.125rem 1.125rem 1.125rem;--h-panel-title-font-weight:600;--h-panel-toggleable-header-padding:0.375rem 1.125rem;--h-panel-header-background:transparent;--h-panel-header-color:var(--h-text-color);--h-panel-header-padding:1.125rem;--h-panel-header-border-color:var(--h-content-border-color);--h-panel-header-border-width:0;--h-panel-header-border-radius:0;--h-panel-background:var(--h-content-background);--h-panel-border-color:var(--h-content-border-color);--h-panel-color:var(--h-content-color);--h-panel-border-radius:var(--h-content-border-radius);}
 :root,:host{--h-password-content-gap:0.5rem;--h-password-overlay-background:var(--h-overlay-popover-background);--h-password-overlay-border-color:var(--h-overlay-popover-border-color);--h-password-overlay-border-radius:var(--h-overlay-popover-border-radius);--h-password-overlay-color:var(--h-overlay-popover-color);--h-password-overlay-padding:var(--h-overlay-popover-padding);--h-password-overlay-shadow:var(--h-overlay-popover-shadow);--h-password-icon-color:var(--h-form-field-icon-color);--h-password-meter-background:var(--h-content-border-color);--h-password-meter-border-radius:var(--h-content-border-radius);--h-password-meter-height:.75rem;--h-password-strength-weak-background:var(--h-red-500);--h-password-strength-medium-background:var(--h-amber-500);--h-password-strength-strong-background:var(--h-green-500);}.app-dark{--h-password-strength-weak-background:var(--h-red-400);--h-password-strength-medium-background:var(--h-amber-400);--h-password-strength-strong-background:var(--h-green-400);}
 :root,:host{--h-popover-content-padding:var(--h-overlay-popover-padding);--h-popover-background:var(--h-overlay-popover-background);--h-popover-border-color:var(--h-overlay-popover-border-color);--h-popover-color:var(--h-overlay-popover-color);--h-popover-border-radius:var(--h-overlay-popover-border-radius);--h-popover-shadow:var(--h-overlay-popover-shadow);--h-popover-gutter:10px;--h-popover-arrow-offset:1.25rem;}
@@ -47,7 +49,6 @@
 :root,:host{--h-splitbutton-border-radius:var(--h-form-field-border-radius);--h-splitbutton-rounded-border-radius:2rem;--h-splitbutton-raised-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);}
 :root,:host{--h-stepper-steppanel-background:var(--h-content-background);--h-stepper-steppanel-color:var(--h-content-color);--h-stepper-steppanel-padding:0;--h-stepper-steppanel-indent:1rem;--h-stepper-steppanels-padding:0.875rem 0.5rem 1.125rem 0.5rem;--h-stepper-step-number-background:var(--h-content-background);--h-stepper-step-number-active-background:var(--h-content-background);--h-stepper-step-number-border-color:var(--h-content-border-color);--h-stepper-step-number-active-border-color:var(--h-content-border-color);--h-stepper-step-number-color:var(--h-text-muted-color);--h-stepper-step-number-active-color:var(--h-primary-color);--h-stepper-step-number-size:2rem;--h-stepper-step-number-font-size:1.143rem;--h-stepper-step-number-font-weight:500;--h-stepper-step-number-border-radius:50%;--h-stepper-step-number-shadow:0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);--h-stepper-step-title-color:var(--h-text-muted-color);--h-stepper-step-title-active-color:var(--h-primary-color);--h-stepper-step-title-font-weight:500;--h-stepper-step-header-padding:0;--h-stepper-step-header-border-radius:var(--h-content-border-radius);--h-stepper-step-header-gap:0.5rem;--h-stepper-step-header-focus-ring-width:var(--h-focus-ring-width);--h-stepper-step-header-focus-ring-style:var(--h-focus-ring-style);--h-stepper-step-header-focus-ring-color:var(--h-focus-ring-color);--h-stepper-step-header-focus-ring-offset:var(--h-focus-ring-offset);--h-stepper-step-header-focus-ring-shadow:var(--h-focus-ring-shadow);--h-stepper-step-padding:0.5rem;--h-stepper-step-gap:1rem;--h-stepper-separator-background:var(--h-content-border-color);--h-stepper-separator-active-background:var(--h-primary-color);--h-stepper-separator-margin:0 0 0 1.625rem;--h-stepper-separator-size:2px;--h-stepper-transition-duration:var(--h-transition-duration);}
 :root,:host{--h-toggleswitch-handle-border-radius:50%;--h-toggleswitch-handle-size:1rem;--h-toggleswitch-width:2.5rem;--h-toggleswitch-height:1.5rem;--h-toggleswitch-border-radius:30px;--h-toggleswitch-gap:0.25rem;--h-toggleswitch-shadow:var(--h-form-field-shadow);--h-toggleswitch-border-width:1px;--h-toggleswitch-border-color:transparent;--h-toggleswitch-hover-border-color:transparent;--h-toggleswitch-checked-border-color:transparent;--h-toggleswitch-checked-hover-border-color:transparent;--h-toggleswitch-invalid-border-color:var(--h-form-field-invalid-border-color);--h-toggleswitch-transition-duration:var(--h-form-field-transition-duration);--h-toggleswitch-slide-duration:0.2s;--h-toggleswitch-focus-ring-width:var(--h-focus-ring-width);--h-toggleswitch-focus-ring-style:var(--h-focus-ring-style);--h-toggleswitch-focus-ring-color:var(--h-focus-ring-color);--h-toggleswitch-focus-ring-offset:var(--h-focus-ring-offset);--h-toggleswitch-focus-ring-shadow:var(--h-focus-ring-shadow);--h-toggleswitch-handle-background:var(--h-surface-0);--h-toggleswitch-handle-disabled-background:var(--h-form-field-disabled-color);--h-toggleswitch-handle-hover-background:var(--h-surface-0);--h-toggleswitch-handle-checked-background:var(--h-surface-0);--h-toggleswitch-handle-checked-hover-background:var(--h-surface-0);--h-toggleswitch-handle-color:var(--h-text-muted-color);--h-toggleswitch-handle-hover-color:var(--h-text-color);--h-toggleswitch-handle-checked-color:var(--h-primary-color);--h-toggleswitch-handle-checked-hover-color:var(--h-primary-hover-color);--h-toggleswitch-background:var(--h-surface-300);--h-toggleswitch-disabled-background:var(--h-form-field-disabled-background);--h-toggleswitch-hover-background:var(--h-surface-400);--h-toggleswitch-checked-background:var(--h-primary-color);--h-toggleswitch-checked-hover-background:var(--h-primary-hover-color);}.app-dark{--h-toggleswitch-handle-background:var(--h-surface-400);--h-toggleswitch-handle-disabled-background:var(--h-surface-900);--h-toggleswitch-handle-hover-background:var(--h-surface-300);--h-toggleswitch-handle-checked-background:var(--h-surface-900);--h-toggleswitch-handle-checked-hover-background:var(--h-surface-900);--h-toggleswitch-handle-color:var(--h-surface-900);--h-toggleswitch-handle-hover-color:var(--h-surface-800);--h-toggleswitch-handle-checked-color:var(--h-primary-color);--h-toggleswitch-handle-checked-hover-color:var(--h-primary-hover-color);--h-toggleswitch-background:var(--h-surface-700);--h-toggleswitch-disabled-background:var(--h-surface-600);--h-toggleswitch-hover-background:var(--h-surface-600);--h-toggleswitch-checked-background:var(--h-primary-color);--h-toggleswitch-checked-hover-background:var(--h-primary-hover-color);}
-:root,:host{--h-datatable-paginator-bottom-border-color:var(--h-datatable-border-color);--h-datatable-paginator-bottom-border-width:0 0 1px 0;--h-datatable-paginator-top-border-color:var(--h-datatable-border-color);--h-datatable-paginator-top-border-width:0 0 1px 0;--h-datatable-filter-inline-gap:0.5rem;--h-datatable-filter-constraint-focus-background:var(--h-list-option-focus-background);--h-datatable-filter-constraint-selected-background:var(--h-list-option-selected-background);--h-datatable-filter-constraint-selected-focus-background:var(--h-list-option-selected-focus-background);--h-datatable-filter-constraint-color:var(--h-list-option-color);--h-datatable-filter-constraint-focus-color:var(--h-list-option-focus-color);--h-datatable-filter-constraint-selected-color:var(--h-list-option-selected-color);--h-datatable-filter-constraint-selected-focus-color:var(--h-list-option-selected-focus-color);--h-datatable-filter-constraint-padding:var(--h-list-option-padding);--h-datatable-filter-constraint-border-radius:var(--h-list-option-border-radius);--h-datatable-filter-constraint-separator-border-color:var(--h-content-border-color);--h-datatable-filter-constraint-list-padding:var(--h-list-padding);--h-datatable-filter-constraint-list-gap:var(--h-list-gap);--h-datatable-filter-rule-border-color:var(--h-content-border-color);--h-datatable-filter-overlay-popover-background:var(--h-overlay-popover-background);--h-datatable-filter-overlay-popover-border-color:var(--h-overlay-popover-border-color);--h-datatable-filter-overlay-popover-border-radius:var(--h-overlay-popover-border-radius);--h-datatable-filter-overlay-popover-color:var(--h-overlay-popover-color);--h-datatable-filter-overlay-popover-shadow:var(--h-overlay-popover-shadow);--h-datatable-filter-overlay-popover-padding:var(--h-overlay-popover-padding);--h-datatable-filter-overlay-popover-gap:0.5rem;--h-datatable-filter-overlay-select-background:var(--h-overlay-select-background);--h-datatable-filter-overlay-select-border-color:var(--h-overlay-select-border-color);--h-datatable-filter-overlay-select-border-radius:var(--h-overlay-select-border-radius);--h-datatable-filter-overlay-select-color:var(--h-overlay-select-color);--h-datatable-filter-overlay-select-shadow:var(--h-overlay-select-shadow);--h-datatable-row-toggle-button-hover-background:var(--h-content-hover-background);--h-datatable-row-toggle-button-selected-hover-background:var(--h-content-background);--h-datatable-row-toggle-button-color:var(--h-text-muted-color);--h-datatable-row-toggle-button-hover-color:var(--h-text-color);--h-datatable-row-toggle-button-selected-hover-color:var(--h-primary-color);--h-datatable-row-toggle-button-size:1.75rem;--h-datatable-row-toggle-button-border-radius:50%;--h-datatable-row-toggle-button-focus-ring-width:var(--h-focus-ring-width);--h-datatable-row-toggle-button-focus-ring-style:var(--h-focus-ring-style);--h-datatable-row-toggle-button-focus-ring-color:var(--h-focus-ring-color);--h-datatable-row-toggle-button-focus-ring-offset:var(--h-focus-ring-offset);--h-datatable-row-toggle-button-focus-ring-shadow:var(--h-focus-ring-shadow);--h-datatable-loading-icon-size:2rem;--h-datatable-sort-icon-color:var(--h-text-muted-color);--h-datatable-sort-icon-hover-color:var(--h-text-hover-muted-color);--h-datatable-sort-icon-size:0.875rem;--h-datatable-resize-indicator-width:1px;--h-datatable-resize-indicator-color:var(--h-primary-color);--h-datatable-column-resizer-width:0.5rem;--h-datatable-drop-point-color:var(--h-primary-color);--h-datatable-footer-background:var(--h-content-background);--h-datatable-footer-border-color:var(--h-datatable-border-color);--h-datatable-footer-color:var(--h-content-color);--h-datatable-footer-border-width:0 0 1px 0;--h-datatable-footer-padding:0.75rem 1rem;--h-datatable-footer-lg-padding:1rem 1.25rem;--h-datatable-footer-sm-padding:0.375rem 0.5rem;--h-datatable-column-footer-font-weight:600;--h-datatable-footer-cell-background:var(--h-content-background);--h-datatable-footer-cell-border-color:var(--h-datatable-border-color);--h-datatable-footer-cell-color:var(--h-content-color);--h-datatable-footer-cell-padding:0.75rem 1rem;--h-datatable-footer-cell-lg-padding:1rem 1.25rem;--h-datatable-footer-cell-sm-padding:0.375rem 0.5rem;--h-datatable-body-cell-border-color:var(--h-datatable-border-color);--h-datatable-body-cell-padding:0.75rem 1rem;--h-datatable-body-cell-lg-padding:1rem 1.25rem;--h-datatable-body-cell-sm-padding:0.375rem 0.5rem;--h-datatable-row-background:var(--h-content-background);--h-datatable-row-hover-background:var(--h-content-hover-background);--h-datatable-row-selected-background:var(--h-highlight-background);--h-datatable-row-color:var(--h-content-color);--h-datatable-row-hover-color:var(--h-content-hover-color);--h-datatable-row-selected-color:var(--h-highlight-color);--h-datatable-row-focus-ring-width:var(--h-focus-ring-width);--h-datatable-row-focus-ring-style:var(--h-focus-ring-style);--h-datatable-row-focus-ring-color:var(--h-focus-ring-color);--h-datatable-row-focus-ring-offset:-1px;--h-datatable-row-focus-ring-shadow:var(--h-focus-ring-shadow);--h-datatable-column-title-font-weight:600;--h-datatable-header-cell-background:var(--h-content-background);--h-datatable-header-cell-hover-background:var(--h-content-hover-background);--h-datatable-header-cell-selected-background:var(--h-highlight-background);--h-datatable-header-cell-border-color:var(--h-datatable-border-color);--h-datatable-header-cell-color:var(--h-content-color);--h-datatable-header-cell-hover-color:var(--h-content-hover-color);--h-datatable-header-cell-selected-color:var(--h-highlight-color);--h-datatable-header-cell-gap:0.5rem;--h-datatable-header-cell-padding:0.75rem 1rem;--h-datatable-header-cell-lg-padding:1rem 1.25rem;--h-datatable-header-cell-sm-padding:0.375rem 0.5rem;--h-datatable-header-cell-focus-ring-width:var(--h-focus-ring-width);--h-datatable-header-cell-focus-ring-style:var(--h-focus-ring-style);--h-datatable-header-cell-focus-ring-color:var(--h-focus-ring-color);--h-datatable-header-cell-focus-ring-offset:-1px;--h-datatable-header-cell-focus-ring-shadow:var(--h-focus-ring-shadow);--h-datatable-header-background:var(--h-content-background);--h-datatable-header-border-color:var(--h-datatable-border-color);--h-datatable-header-color:var(--h-content-color);--h-datatable-header-border-width:0 0 1px 0;--h-datatable-header-padding:0.75rem 1rem;--h-datatable-header-lg-padding:1rem 1.25rem;--h-datatable-header-sm-padding:0.375rem 0.5rem;--h-datatable-transition-duration:var(--h-transition-duration);--h-datatable-body-cell-selected-border-color:var(--h-primary-100);--h-datatable-row-striped-background:var(--h-surface-50);--h-datatable-border-color:var(--h-content-border-color);}.app-dark{--h-datatable-body-cell-selected-border-color:var(--h-primary-900);--h-datatable-row-striped-background:var(--h-surface-950);--h-datatable-border-color:var(--h-surface-800);}
 :root,:host{--h-tabs-active-bar-height:1px;--h-tabs-active-bar-bottom:-1px;--h-tabs-active-bar-background:var(--h-primary-color);--h-tabs-nav-button-background:var(--h-content-background);--h-tabs-nav-button-color:var(--h-text-muted-color);--h-tabs-nav-button-hover-color:var(--h-text-color);--h-tabs-nav-button-width:2.5rem;--h-tabs-nav-button-focus-ring-width:var(--h-focus-ring-width);--h-tabs-nav-button-focus-ring-style:var(--h-focus-ring-style);--h-tabs-nav-button-focus-ring-color:var(--h-focus-ring-color);--h-tabs-nav-button-focus-ring-offset:-1px;--h-tabs-nav-button-focus-ring-shadow:var(--h-focus-ring-shadow);--h-tabs-tabpanel-background:var(--h-content-background);--h-tabs-tabpanel-color:var(--h-content-color);--h-tabs-tabpanel-padding:0.875rem 1.125rem 1.125rem 1.125rem;--h-tabs-tabpanel-focus-ring-width:var(--h-focus-ring-width);--h-tabs-tabpanel-focus-ring-style:var(--h-focus-ring-style);--h-tabs-tabpanel-focus-ring-color:var(--h-focus-ring-color);--h-tabs-tabpanel-focus-ring-offset:var(--h-focus-ring-offset);--h-tabs-tabpanel-focus-ring-shadow:inset var(--h-focus-ring-shadow);--h-tabs-tab-background:transparent;--h-tabs-tab-hover-background:transparent;--h-tabs-tab-active-background:transparent;--h-tabs-tab-border-width:0 0 1px 0;--h-tabs-tab-border-color:var(--h-content-border-color);--h-tabs-tab-hover-border-color:var(--h-content-border-color);--h-tabs-tab-active-border-color:var(--h-primary-color);--h-tabs-tab-color:var(--h-text-muted-color);--h-tabs-tab-hover-color:var(--h-text-color);--h-tabs-tab-active-color:var(--h-primary-color);--h-tabs-tab-padding:1rem 1.125rem;--h-tabs-tab-font-weight:600;--h-tabs-tab-margin:0 0 -1px 0;--h-tabs-tab-gap:0.5rem;--h-tabs-tab-focus-ring-width:var(--h-focus-ring-width);--h-tabs-tab-focus-ring-style:var(--h-focus-ring-style);--h-tabs-tab-focus-ring-color:var(--h-focus-ring-color);--h-tabs-tab-focus-ring-offset:-1px;--h-tabs-tab-focus-ring-shadow:var(--h-focus-ring-shadow);--h-tabs-tablist-border-width:0 0 1px 0;--h-tabs-tablist-background:var(--h-content-background);--h-tabs-tablist-border-color:var(--h-content-border-color);--h-tabs-transition-duration:var(--h-transition-duration);--h-tabs-nav-button-shadow:0px 0px 10px 50px rgba(255, 255, 255, 0.6);}.app-dark{--h-tabs-nav-button-shadow:0px 0px 10px 50px color-mix(in srgb, var(--h-content-background), transparent 50%);}
 :root,:host{--h-tag-icon-size:0.75rem;--h-tag-font-size:0.875rem;--h-tag-font-weight:700;--h-tag-padding:0.25rem 0.5rem;--h-tag-gap:0.25rem;--h-tag-border-radius:var(--h-content-border-radius);--h-tag-rounded-border-radius:var(--h-border-radius-xl);--h-tag-contrast-background:var(--h-surface-950);--h-tag-contrast-color:var(--h-surface-0);--h-tag-danger-background:var(--h-red-100);--h-tag-danger-color:var(--h-red-700);--h-tag-warn-background:var(--h-orange-100);--h-tag-warn-color:var(--h-orange-700);--h-tag-info-background:var(--h-sky-100);--h-tag-info-color:var(--h-sky-700);--h-tag-success-background:var(--h-green-100);--h-tag-success-color:var(--h-green-700);--h-tag-secondary-background:var(--h-surface-100);--h-tag-secondary-color:var(--h-surface-600);--h-tag-primary-background:var(--h-primary-100);--h-tag-primary-color:var(--h-primary-700);}.app-dark{--h-tag-contrast-background:var(--h-surface-0);--h-tag-contrast-color:var(--h-surface-950);--h-tag-danger-background:color-mix(in srgb, var(--h-red-500), transparent 84%);--h-tag-danger-color:var(--h-red-300);--h-tag-warn-background:color-mix(in srgb, var(--h-orange-500), transparent 84%);--h-tag-warn-color:var(--h-orange-300);--h-tag-info-background:color-mix(in srgb, var(--h-sky-500), transparent 84%);--h-tag-info-color:var(--h-sky-300);--h-tag-success-background:color-mix(in srgb, var(--h-green-500), transparent 84%);--h-tag-success-color:var(--h-green-300);--h-tag-secondary-background:var(--h-surface-800);--h-tag-secondary-color:var(--h-surface-300);--h-tag-primary-background:color-mix(in srgb, var(--h-primary-500), transparent 84%);--h-tag-primary-color:var(--h-primary-300);}
 :root,:host{--h-timeline-event-connector-color:var(--h-content-border-color);--h-timeline-event-connector-size:2px;--h-timeline-event-marker-size:1.125rem;--h-timeline-event-marker-border-radius:50%;--h-timeline-event-marker-border-width:2px;--h-timeline-event-marker-background:var(--h-content-background);--h-timeline-event-marker-border-color:var(--h-content-border-color);--h-timeline-event-marker-content-border-radius:50%;--h-timeline-event-marker-content-size:0.375rem;--h-timeline-event-marker-content-background:var(--h-primary-color);--h-timeline-event-marker-content-inset-shadow:0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);--h-timeline-vertical-event-content-padding:0 1rem;--h-timeline-horizontal-event-content-padding:1rem 0;--h-timeline-event-min-height:5rem;}