@trebco/treb 23.6.5 → 25.0.0-rc1

package/treb-embed/style/toolbar.scss

@@ -0,0 +1,416 @@
+
+// -----------------------------------------------------------------------------
+
+$button-width: 32px;
+$dropdown-button-width: 16px;
+
+$background-color: var(--treb-toolbar-button-background, transparent);
+$background-hover: var(--treb-toolbar-hover-button-background, #f3f4f6);
+$border-color: var(--treb-toolbar-border-color, var(--treb-ui-border-color, rgb(209, 213, 219)));
+
+$menu-background: var(--treb-toolbar-button-background, #fff);
+$menu-border-color: var(--treb-toolbar-border-color, var(--treb-ui-border-color, rgb(209, 213, 219)));
+$menu-item-hover-color: var(--treb-toolbar-hover-button-background, #f3f4f6);
+
+$box-shadow: 0 4px 6px -4px rgba(0, 0, 0, .4);
+$border-radius: 3px;
+
+$font-size: 14px;
+$split-font-size: 10px;
+$swatch-size: 18px;
+
+.treb-layout {
+
+  .treb-layout-header {
+    
+    overflow: hidden;
+    position: relative;
+    overflow-x: scroll;
+
+    // hide scrollbars
+    // FIXME: util class
+
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    &::-webkit-scrollbar { 
+      display: none;
+    }
+
+  }
+
+  .treb-toolbar {
+
+    color: var(--treb-toolbar-color, var(--treb-ui-color, #333));
+    font-size: $font-size;
+
+    // ----
+
+    display: flex;
+    flex-direction: row;
+    gap: .5em;
+
+    & > div {
+      display: flex;
+      flex-direction: row;
+    }
+
+    & > input, & > div > input {
+      height: $button-width;
+      background-color: $background-color;
+      border: 1px solid $border-color;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      padding-left: .5em;
+      padding-right: .5em;
+    }
+
+    & > .treb-menu > button {
+      border-radius: $border-radius;
+    }
+
+    & > .group, & > [composite] {
+
+      & > button + button, 
+      & > input + button, 
+      & > input + .treb-menu > button, 
+      & > button + .treb-menu > button,
+      & > .treb-menu + button {
+        border-left-width: 0px;
+      }
+
+      & > button:first-child, & > input:first-child {
+        border-top-left-radius: $border-radius;
+        border-bottom-left-radius: $border-radius;
+      }
+  
+      & > button:last-child, & > .treb-menu:last-child > button {
+        border-top-right-radius: $border-radius;
+        border-bottom-right-radius: $border-radius;
+      }
+  
+
+    }
+
+
+
+    & > button, & > div > button, .treb-menu > button, button[data-icon], .treb-icon-buttons > button {
+
+      width: $button-width;
+      height: $button-width;
+      background-color: $background-color;
+      border: 1px solid $border-color;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+
+      // the problem with this transition is that it gets applied
+      // to separate items in sequence and we get kind of a wave
+      // or cascade effect. is it possible to synchronize them?
+
+      transition: background-color .1s ease;
+      // border-radius: $border-radius;
+
+      &[dropdown] {
+        width: $dropdown-button-width;
+        &::after {
+          box-sizing: content-box;
+          content: '';
+          position: absolute;
+          width: 0px;
+          height: 0px;
+          border: 5px solid transparent;
+          border-top-color: currentColor;
+          top: 18px; // FIXME: specify in ems
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
+      }
+
+      &:hover, &[active] {
+        background-color: $background-hover;
+      }
+
+      &[data-color-bar]::after {
+        content: '';
+        box-sizing: border-box;
+        position: relative;
+        display: block;
+        width: 20px;
+        height: 6px;
+        border: 1px solid $border-color;
+        background: var(--treb-color-bar-color, var(--treb-default-color, unset));
+      }
+
+      &[data-icon], &[data-command] {
+        &::before {
+          content: '';
+          display: block;
+          position: relative;
+          background: currentColor;
+          width: 20px;
+          height: 20px;
+          mask-position: center;
+          -webkit-mask-position: center;
+          mask-repeat: no-repeat;
+          -webkit-mask-repeat: no-repeat;
+          mask-image: var(--icon);
+          -webkit-mask-image: var(--icon);
+          mask-size: var(--icon-size, 16px 16px);
+          -webkit-mask-size: var(--icon-size, 16px 16px);
+        }
+      }
+
+    }
+
+    .treb-split {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+
+      button[data-command] {
+        &::before {
+          display: none;
+        }
+        font-size: $split-font-size;
+      }
+
+      & > button {
+        height: calc($button-width / 2);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      & > button:first-child {
+        border-top-left-radius: $border-radius;      
+        border-top-right-radius: $border-radius;      
+      }
+
+      & > button:last-child {
+        border-top: 0;      
+        border-bottom-left-radius: $border-radius;      
+        border-bottom-right-radius: $border-radius;      
+      }
+
+    }
+
+    .treb-menu {
+
+      z-index: 999; // FIXME: NO
+
+      & > div {
+
+        display: none; 
+
+        margin-top: .5em;
+
+        flex-direction: column;
+        background: $menu-background;
+        border: 1px solid $border-color;
+        border-radius: $border-radius;
+        position: fixed;
+        z-index: 20;
+        top: 48px;
+        box-shadow: $box-shadow;
+
+        button {
+          white-space: nowrap;
+          background: transparent;
+          border: 0;
+          text-align: left;
+          padding: .4em 1em;
+          margin: 3px 0;
+          transition: background-color .125s ease;
+
+          &:hover {
+            background: $background-hover;
+          }
+      
+        }
+
+        &.treb-icon-buttons {
+          & > button, & > .treb-menu > button {
+            padding: 0;
+          }
+          /*
+          padding-left: .5em;
+          padding-right: .5em;
+          */
+        }
+
+        & > [separator] {
+          background: $border-color;
+          height: 1px;
+          margin: 2px 0;
+
+        }
+
+      }
+
+      &:focus-within > div, &.visible > div {
+        display: flex;
+      }
+
+    }
+
+    // ---------------------------------------------------------------------------
+
+    [data-icon=file-menu]{ --icon: var(--treb-icon-file-menu); }
+    
+    [data-command=justify-left] { --icon: var(--treb-icon-text-align-left); }
+    [data-command=justify-right] { --icon: var(--treb-icon-text-align-right); }
+    [data-command=justify-center] { --icon: var(--treb-icon-text-align-center); }
+
+    [data-command=align-top] { --icon: var(--treb-icon-text-align-top); }
+    [data-command=align-middle] { --icon: var(--treb-icon-text-align-middle); }
+    [data-command=align-bottom] { --icon: var(--treb-icon-text-align-bottom); }
+    [data-command=merge-cells] { --icon: var(--treb-icon-merge-cells); }
+    [data-command=unmerge-cells] { --icon: var(--treb-icon-unmerge-cells); }
+
+    [data-command=fill-color] { --icon: var(--treb-icon-fill-color); }
+    [data-command=text-color] { --icon: var(--treb-icon-text-color); }
+
+    [data-command=lock-cells] { --icon: var(--treb-icon-lock); }
+    [data-command=wrap-text] { --icon: var(--treb-icon-wrap-text); }
+    [data-icon=comment] { --icon: var(--treb-icon-comment); }
+    [data-icon=table] { --icon: var(--treb-icon-table); }
+    
+    [data-icon=layout] { --icon: var(--treb-icon-layout); }
+    [data-command=freeze-panes] { --icon: var(--treb-icon-freeze); }
+    
+    [data-command=insert-column-chart] { --icon: var(--treb-icon-column-chart); }
+    [data-command=insert-donut-chart] { --icon: var(--treb-icon-donut-chart); }
+    [data-command=insert-bar-chart] { --icon: var(--treb-icon-bar-chart); }
+    [data-command=insert-line-chart] { --icon: var(--treb-icon-line-chart); }
+    [data-command=insert-image] { --icon: var(--treb-icon-image); }
+
+    [data-command=border-bottom] { --icon: var(--treb-icon-border-bottom); }
+    [data-command=border-left] { --icon: var(--treb-icon-border-left); }
+    [data-command=border-right] { --icon: var(--treb-icon-border-right); }
+    [data-command=border-top] { --icon: var(--treb-icon-border-top); }
+    [data-command=border-outside] { --icon: var(--treb-icon-border-outer); }
+    [data-command=border-all] { --icon: var(--treb-icon-border-all); }
+    [data-command=border-none] { --icon: var(--treb-icon-border-none); }
+    [data-command=border-double-bottom] { --icon: var(--treb-icon-border-double-bottom); }
+    [data-icon=palette] { --icon: var(--treb-icon-palette); } 
+
+    [data-command=recalculate] { 
+      --icon: var(--treb-icon-recalculate); 
+      --icon-size: 20px 20px;
+    } 
+
+    .treb-font-scale {
+      width: 4em;
+    }
+
+    .treb-number-format {
+      width: 8em;
+    }
+
+    .treb-color-chooser {
+
+      button[data-command=set-color] {
+        padding: 0;
+        display: flex;
+        align-items: center;
+        width: $button-width;
+        justify-content: center;
+      }
+
+      & > div {
+        padding: .75em .75em;
+      }
+
+      & > div + div {
+        padding-top: 0;
+      }
+      
+      & > div:last-child {
+        
+        display: flex;
+        flex-direction: row;
+        gap: .5em;
+        align-items: center;
+
+        input {
+          flex-grow: 1;
+          padding: 0 .5em;
+        }
+
+        input, button {
+          border: 1px solid $border-color;
+          border-radius: $border-radius;
+          height: $button-width;
+        }
+
+      }
+
+      .treb-swatches {
+
+        display: grid;
+        grid-template-columns: repeat(10, 1fr);
+        gap: .5em;
+
+        button {
+          width: $swatch-size;
+          height: $swatch-size;
+          padding: 0;
+          margin: 0;
+          border: 1px solid $border-color;
+          border-radius: 2px;          
+        }
+
+        .treb-default-color::before {
+          opacity: .7;
+          content: '';
+          display: block;
+          position: relative;
+          background: currentColor;
+          width: 100%;
+          height: 100%;
+          mask-position: center;
+          -webkit-mask-position: center;
+          mask-repeat: no-repeat;
+          -webkit-mask-repeat: no-repeat;
+          mask-image: var(--treb-icon-x);
+          -webkit-mask-image: var(--treb-icon-x);
+          mask-size: 24px 24px;
+          -webkit-mask-size: 24px 24px;
+        }
+      }
+    }
+
+    .treb-comment-box {
+      textarea {
+        font: inherit;
+        resize: both;
+        border: 1px solid $border-color;
+        padding: .25em;
+        line-height: 1.5;
+        margin: .5em;
+        height: 10em;
+      }
+
+      textarea + div {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        gap: .5em;
+        padding: 0 0 .5em 0;
+
+        button {
+          border: 1px solid $border-color;
+          border-radius: $border-radius;
+        }
+
+      }
+
+    }
+
+  }
+
+}
+

package/treb-embed/style/tooltip.scss

@@ -0,0 +1,68 @@
+/*
+ * This file is part of TREB.
+ *
+ * TREB is free software: you can redistribute it and/or modify it under the 
+ * terms of the GNU General Public License as published by the Free Software 
+ * Foundation, either version 3 of the License, or (at your option) any 
+ * later version.
+ *
+ * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along 
+ * with TREB. If not, see <https://www.gnu.org/licenses/>. 
+ *
+ * Copyright 2022-2023 trebco, llc. 
+ * info@treb.app
+ * 
+ */
+
+.treb-layout {
+
+  .treb-tooltip {
+
+    display: none;
+    pointer-events: none;
+    position: fixed;
+    padding: 2px 10px;
+    border-radius: 2px;
+    box-shadow: $default-box-shadow;
+    z-index: $z-index-tooltip;
+    line-height: normal;
+
+    &.arrow-up {
+      &::after {
+        box-sizing: border-box;
+        position: absolute;
+        top: calc(-2 * $tooltip-arrow-size);
+        left: calc(50% - $tooltip-arrow-size);
+        width: calc(2 * $tooltip-arrow-size);
+        height: calc(2 * $tooltip-arrow-size);
+        overflow: hidden;
+        content: ' ';
+        border: $tooltip-arrow-size solid transparent;
+        border-bottom-color: inherit;
+      }
+    }
+
+    &.arrow-left {
+      &::after {
+        box-sizing: border-box;
+        position: absolute;
+        left: calc(-2 * $tooltip-arrow-size);
+        top: calc(50% - $tooltip-arrow-size);
+        width: calc(2 * $tooltip-arrow-size);
+        height: calc(2 * $tooltip-arrow-size);
+        overflow: hidden;
+        content: ' ';
+        border: $tooltip-arrow-size solid transparent;
+        border-right-color: inherit;
+      }
+    }
+
+  }
+
+}
+

package/treb-embed/style/treb-icons.scss

@@ -0,0 +1,130 @@
+
+:root {
+
+  /* source: bootstrap-icons-1.8.3/x.svg */
+  --treb-icon-x: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/></svg>");
+
+  /* source: fontawesome-free-5.15.4-desktop/svgs/solid/external-link-alt.svg */
+  --treb-sidebar-icon-popout: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><path stroke='none' fill='currentColor' d='M22 14.5v5c0 2.484-2.016 4.5-4.5 4.5h-13c-2.484 0-4.5-2.016-4.5-4.5v-13c0-2.484 2.016-4.5 4.5-4.5h11c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-1.375 0-2.5 1.125-2.5 2.5v13c0 1.375 1.125 2.5 2.5 2.5h13c1.375 0 2.5-1.125 2.5-2.5v-5c0-0.281 0.219-0.5 0.5-0.5h1c0.281 0 0.5 0.219 0.5 0.5zM28 1v8c0 0.547-0.453 1-1 1-0.266 0-0.516-0.109-0.703-0.297l-2.75-2.75-10.187 10.187c-0.094 0.094-0.234 0.156-0.359 0.156s-0.266-0.063-0.359-0.156l-1.781-1.781c-0.094-0.094-0.156-0.234-0.156-0.359s0.063-0.266 0.156-0.359l10.187-10.187-2.75-2.75c-0.187-0.187-0.297-0.438-0.297-0.703 0-0.547 0.453-1 1-1h8c0.547 0 1 0.453 1 1z'></path></svg>");
+
+  /* source: fontawesome-free-5.15.4-desktop/svgs/solid/sliders-h.svg */
+  --treb-sidebar-icon-toolbar: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><path stroke='none' fill='currentColor' d='M5.5 22v2h-5.5v-2h5.5zM11 20c0.547 0 1 0.453 1 1v4c0 0.547-0.453 1-1 1h-4c-0.547 0-1-0.453-1-1v-4c0-0.547 0.453-1 1-1h4zM13.5 14v2h-13.5v-2h13.5zM3.5 6v2h-3.5v-2h3.5zM24 22v2h-11.5v-2h11.5zM9 4c0.547 0 1 0.453 1 1v4c0 0.547-0.453 1-1 1h-4c-0.547 0-1-0.453-1-1v-4c0-0.547 0.453-1 1-1h4zM19 12c0.547 0 1 0.453 1 1v4c0 0.547-0.453 1-1 1h-4c-0.547 0-1-0.453-1-1v-4c0-0.547 0.453-1 1-1h4zM24 14v2h-3.5v-2h3.5zM24 6v2h-13.5v-2h13.5z'></path></svg>");
+
+  /* source: fontawesome-free-5.15.4-desktop/svgs/solid/download.svg */
+  --treb-sidebar-icon-export: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 28'><path stroke='none' fill='currentColor' d='M20 21c0-0.547-0.453-1-1-1s-1 0.453-1 1 0.453 1 1 1 1-0.453 1-1zM24 21c0-0.547-0.453-1-1-1s-1 0.453-1 1 0.453 1 1 1 1-0.453 1-1zM26 17.5v5c0 0.828-0.672 1.5-1.5 1.5h-23c-0.828 0-1.5-0.672-1.5-1.5v-5c0-0.828 0.672-1.5 1.5-1.5h7.266l2.109 2.125c0.578 0.562 1.328 0.875 2.125 0.875s1.547-0.313 2.125-0.875l2.125-2.125h7.25c0.828 0 1.5 0.672 1.5 1.5zM20.922 8.609c0.156 0.375 0.078 0.812-0.219 1.094l-7 7c-0.187 0.203-0.453 0.297-0.703 0.297s-0.516-0.094-0.703-0.297l-7-7c-0.297-0.281-0.375-0.719-0.219-1.094 0.156-0.359 0.516-0.609 0.922-0.609h4v-7c0-0.547 0.453-1 1-1h4c0.547 0 1 0.453 1 1v7h4c0.406 0 0.766 0.25 0.922 0.609z'></path></svg>");
+
+  /* source: fontawesome-free-5.15.4-desktop/svgs/solid/sync-alt.svg */
+  --treb-sidebar-icon-reset: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><path stroke='none' fill='currentColor' d='M23.609 16.5c0 0.031 0 0.078-0.016 0.109-1.328 5.531-5.891 9.391-11.656 9.391-3.047 0-6-1.203-8.219-3.313l-2.016 2.016c-0.187 0.187-0.438 0.297-0.703 0.297-0.547 0-1-0.453-1-1v-7c0-0.547 0.453-1 1-1h7c0.547 0 1 0.453 1 1 0 0.266-0.109 0.516-0.297 0.703l-2.141 2.141c1.469 1.375 3.422 2.156 5.437 2.156 2.781 0 5.359-1.437 6.813-3.813 0.375-0.609 0.562-1.203 0.828-1.828 0.078-0.219 0.234-0.359 0.469-0.359h3c0.281 0 0.5 0.234 0.5 0.5zM24 4v7c0 0.547-0.453 1-1 1h-7c-0.547 0-1-0.453-1-1 0-0.266 0.109-0.516 0.297-0.703l2.156-2.156c-1.484-1.375-3.437-2.141-5.453-2.141-2.781 0-5.359 1.437-6.813 3.813-0.375 0.609-0.562 1.203-0.828 1.828-0.078 0.219-0.234 0.359-0.469 0.359h-3.109c-0.281 0-0.5-0.234-0.5-0.5v-0.109c1.344-5.547 5.953-9.391 11.719-9.391 3.063 0 6.047 1.219 8.266 3.313l2.031-2.016c0.187-0.187 0.438-0.297 0.703-0.297 0.547 0 1 0.453 1 1z'></path></svg>");
+
+  /* source: fontawesome-free-5.15.4-desktop/svgs/solid/question-circle.svg */
+  --treb-sidebar-icon-about: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><path stroke='none' fill='currentColor' d='M14 21.5v-3c0-0.281-0.219-0.5-0.5-0.5h-3c-0.281 0-0.5 0.219-0.5 0.5v3c0 0.281 0.219 0.5 0.5 0.5h3c0.281 0 0.5-0.219 0.5-0.5zM18 11c0-2.859-3-5-5.688-5-2.547 0-4.453 1.094-5.797 3.328-0.141 0.219-0.078 0.5 0.125 0.656l2.063 1.563c0.078 0.063 0.187 0.094 0.297 0.094 0.141 0 0.297-0.063 0.391-0.187 0.734-0.938 1.047-1.219 1.344-1.437 0.266-0.187 0.781-0.375 1.344-0.375 1 0 1.922 0.641 1.922 1.328 0 0.812-0.422 1.219-1.375 1.656-1.109 0.5-2.625 1.797-2.625 3.313v0.562c0 0.281 0.219 0.5 0.5 0.5h3c0.281 0 0.5-0.219 0.5-0.5v0c0-0.359 0.453-1.125 1.188-1.547 1.188-0.672 2.812-1.578 2.812-3.953zM24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12 12 5.375 12 12z'></path></svg>");
+
+  /* source: fontawesome-free-5.15.4-desktop/svgs/solid/chevron-left.svg */
+  --treb-sidebar-icon-chevron-left: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 28'><path stroke='none' fill='currentColor' d='M18.297 4.703l-8.297 8.297 8.297 8.297c0.391 0.391 0.391 1.016 0 1.406l-2.594 2.594c-0.391 0.391-1.016 0.391-1.406 0l-11.594-11.594c-0.391-0.391-0.391-1.016 0-1.406l11.594-11.594c0.391-0.391 1.016-0.391 1.406 0l2.594 2.594c0.391 0.391 0.391 1.016 0 1.406z'></path></svg>");
+
+  /* source: fontawesome-free-5.15.4-desktop/svgs/solid/chevron-right.svg */
+  --treb-sidebar-icon-chevron-right: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 28'><path stroke='none' fill='currentColor' d='M17.297 13.703l-11.594 11.594c-0.391 0.391-1.016 0.391-1.406 0l-2.594-2.594c-0.391-0.391-0.391-1.016 0-1.406l8.297-8.297-8.297-8.297c-0.391-0.391-0.391-1.016 0-1.406l2.594-2.594c0.391-0.391 1.016-0.391 1.406 0l11.594 11.594c0.391 0.391 0.391 1.016 0 1.406z'></path></svg>");
+
+  /* source: fontawesome-free-5.15.4-desktop/svgs/solid/history.svg */
+  --treb-sidebar-icon-revert: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><path stroke='none' fill='currentColor' d='M24 14c0 6.609-5.391 12-12 12-3.578 0-6.953-1.578-9.234-4.328-0.156-0.203-0.141-0.5 0.031-0.672l2.141-2.156c0.109-0.094 0.25-0.141 0.391-0.141 0.141 0.016 0.281 0.078 0.359 0.187 1.531 1.984 3.828 3.109 6.312 3.109 4.406 0 8-3.594 8-8s-3.594-8-8-8c-2.047 0-3.984 0.781-5.437 2.141l2.141 2.156c0.297 0.281 0.375 0.719 0.219 1.078-0.156 0.375-0.516 0.625-0.922 0.625h-7c-0.547 0-1-0.453-1-1v-7c0-0.406 0.25-0.766 0.625-0.922 0.359-0.156 0.797-0.078 1.078 0.219l2.031 2.016c2.203-2.078 5.187-3.313 8.266-3.313 6.609 0 12 5.391 12 12zM14 9.5v7c0 0.281-0.219 0.5-0.5 0.5h-5c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h3.5v-5.5c0-0.281 0.219-0.5 0.5-0.5h1c0.281 0 0.5 0.219 0.5 0.5z'></path></svg>");
+
+  /* source: bootstrap-icons-1.8.3/text-left.svg */
+  --treb-icon-text-align-left: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'> <path fill-rule='evenodd' d='M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z'/> </svg>");
+
+  /* source: bootstrap-icons-1.8.3/text-center.svg */
+  --treb-icon-text-align-center: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'> <path fill-rule='evenodd' d='M4 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z'/> </svg>");
+
+  /* source: bootstrap-icons-1.8.3/text-right.svg */
+  --treb-icon-text-align-right: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'> <path fill-rule='evenodd' d='M6 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm4-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z'/> </svg>");
+
+  /* source: treb/align-up.svg */
+  --treb-icon-text-align-top: url("data:image/svg+xml,<?xml version='1.0' encoding='utf-8'?> <svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='16px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve'> <path d='M8,15c0.276,0,0.5-0.224,0.5-0.5V5.707l3.146,3.146c0.195,0.195,0.512,0.195,0.707,0s0.195-0.512,0-0.707l-4-4 C8.159,3.951,7.842,3.95,7.647,4.145c0,0,0,0-0.001,0.001l-4,4c-0.195,0.195-0.195,0.512,0,0.707s0.513,0.195,0.708,0L7.5,5.707 V14.5C7.5,14.776,7.724,15,8,15z'/> <line fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='3' y1='1.5' x2='13' y2='1.5'/> </svg> ");
+
+  /* source: bootstrap-icons-1.8.3/arrows-collapse.svg */
+  --treb-icon-text-align-middle: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'> <path fill-rule='evenodd' d='M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z'/> </svg>");
+
+  /* source: treb/align-down.svg */
+  --treb-icon-text-align-bottom: url("data:image/svg+xml,<?xml version='1.0' encoding='utf-8'?> <svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='16px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve'> <path d='M8,1C7.724,1,7.5,1.224,7.5,1.5v8.793L4.354,7.146c-0.195-0.195-0.512-0.195-0.707,0s-0.195,0.512,0,0.707l4,4 c0.195,0.195,0.512,0.196,0.707,0.001c0,0,0,0,0.001-0.001l4-4c0.195-0.195,0.195-0.512,0-0.707s-0.513-0.195-0.708,0L8.5,10.293 V1.5C8.5,1.224,8.276,1,8,1z'/> <line fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='13' y1='14.5' x2='3' y2='14.5'/> </svg> ");
+
+  /* source: bootstrap-icons-1.8.3/folder.svg */
+  --treb-icon-file-menu: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'> <path d='M.54 3.87.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181l-.637 7A2 2 0 0 1 13.174 14H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31zM2.19 4a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91h10.348a1 1 0 0 0 .995-.91l.637-7A1 1 0 0 0 13.81 4H2.19zm4.69-1.707A1 1 0 0 0 6.172 2H2.5a1 1 0 0 0-1 .981l.006.139C1.72 3.042 1.95 3 2.19 3h5.396l-.707-.707z'/> </svg>");
+
+  /* source: treb/wrap.svg */
+  --treb-icon-wrap-text: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'> <path d='M4,5h8c0.276,0,0.5-0.224,0.5-0.5S12.276,4,12,4H4C3.724,4,3.5,4.224,3.5,4.5S3.724,5,4,5z'/> <path d='M10,8H4C3.724,8,3.5,8.224,3.5,8.5S3.724,9,4,9h6c0.828,0,1.5,0.672,1.5,1.5S10.828,12,10,12v-1.203l-2.953,1.707 L10,14.203V13c1.381,0,2.5-1.119,2.5-2.5S11.381,8,10,8z'/> <path d='M3.75,12.5c0,0.276,0.224,0.5,0.5,0.5H6v-1H4.25C3.974,12,3.75,12.224,3.75,12.5z'/> </svg> ");
+
+  /* source: bootstrap-icons-1.8.3/fullscreen.svg */
+  --treb-icon-unmerge-cells: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'> <path d='M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1h-4zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zM.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5z'/> </svg>");
+
+  /* source: bootstrap-icons-1.8.3/fullscreen-exit.svg */
+  --treb-icon-merge-cells: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'> <path d='M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5zm5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5zM0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zm10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4z'/> </svg>");
+
+  /* source: bootstrap-icons-1.8.3/lock.svg */
+  --treb-icon-lock: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'> <path d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/> </svg>");
+
+  /* source: bootstrap-icons-1.8.3/chat-square.svg */
+  --treb-icon-comment: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'> <path d='M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z'/> </svg>");
+
+  /* source: bootstrap-icons-1.8.3/paint-bucket.svg */
+  --treb-icon-fill-color: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'> <path d='M6.192 2.78c-.458-.677-.927-1.248-1.35-1.643a2.972 2.972 0 0 0-.71-.515c-.217-.104-.56-.205-.882-.02-.367.213-.427.63-.43.896-.003.304.064.664.173 1.044.196.687.556 1.528 1.035 2.402L.752 8.22c-.277.277-.269.656-.218.918.055.283.187.593.36.903.348.627.92 1.361 1.626 2.068.707.707 1.441 1.278 2.068 1.626.31.173.62.305.903.36.262.05.64.059.918-.218l5.615-5.615c.118.257.092.512.05.939-.03.292-.068.665-.073 1.176v.123h.003a1 1 0 0 0 1.993 0H14v-.057a1.01 1.01 0 0 0-.004-.117c-.055-1.25-.7-2.738-1.86-3.494a4.322 4.322 0 0 0-.211-.434c-.349-.626-.92-1.36-1.627-2.067-.707-.707-1.441-1.279-2.068-1.627-.31-.172-.62-.304-.903-.36-.262-.05-.64-.058-.918.219l-.217.216zM4.16 1.867c.381.356.844.922 1.311 1.632l-.704.705c-.382-.727-.66-1.402-.813-1.938a3.283 3.283 0 0 1-.131-.673c.091.061.204.15.337.274zm.394 3.965c.54.852 1.107 1.567 1.607 2.033a.5.5 0 1 0 .682-.732c-.453-.422-1.017-1.136-1.564-2.027l1.088-1.088c.054.12.115.243.183.365.349.627.92 1.361 1.627 2.068.706.707 1.44 1.278 2.068 1.626.122.068.244.13.365.183l-4.861 4.862a.571.571 0 0 1-.068-.01c-.137-.027-.342-.104-.608-.252-.524-.292-1.186-.8-1.846-1.46-.66-.66-1.168-1.32-1.46-1.846-.147-.265-.225-.47-.251-.607a.573.573 0 0 1-.01-.068l3.048-3.047zm2.87-1.935a2.44 2.44 0 0 1-.241-.561c.135.033.324.11.562.241.524.292 1.186.8 1.846 1.46.45.45.83.901 1.118 1.31a3.497 3.497 0 0 0-1.066.091 11.27 11.27 0 0 1-.76-.694c-.66-.66-1.167-1.322-1.458-1.847z'/> </svg>");
+
+  /* source: treb/letter.svg */
+  --treb-icon-text-color: url("data:image/svg+xml,<?xml version='1.0' encoding='utf-8'?> <svg version='1.1' id='Layer_2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='16px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve'> <g> <path d='M12.259,14.001l-1.389-3.727H5.465l-1.354,3.727H2.811L7.609,1.397h1.178l4.772,12.604H12.259z M8.418,3.604 c-0.041-0.111-0.084-0.24-0.127-0.387C8.246,3.07,8.21,2.903,8.181,2.716H8.146C8.11,2.903,8.07,3.07,8.027,3.217 C7.982,3.363,7.94,3.492,7.899,3.604L5.86,9.211h4.614L8.418,3.604z'/> </g> </svg> ");
+
+  /* source: bootstrap-icons-1.8.3/border-bottom.svg */
+  --treb-icon-border-bottom: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'> <path d='M.969 0H0v.969h.5V1h.469V.969H1V.5H.969V0zm.937 1h.938V0h-.938v1zm1.875 0h.938V0H3.78v1zm1.875 0h.938V0h-.938v1zM7.531.969V1h.938V.969H8.5V.5h-.031V0H7.53v.5H7.5v.469h.031zM9.406 1h.938V0h-.938v1zm1.875 0h.938V0h-.938v1zm1.875 0h.938V0h-.938v1zm1.875 0h.469V.969h.5V0h-.969v.5H15v.469h.031V1zM1 2.844v-.938H0v.938h1zm6.5-.938v.938h1v-.938h-1zm7.5 0v.938h1v-.938h-1zM1 4.719V3.78H0v.938h1zm6.5-.938v.938h1V3.78h-1zm7.5 0v.938h1V3.78h-1zM1 6.594v-.938H0v.938h1zm6.5-.938v.938h1v-.938h-1zm7.5 0v.938h1v-.938h-1zM.5 8.5h.469v-.031H1V7.53H.969V7.5H.5v.031H0v.938h.5V8.5zm1.406 0h.938v-1h-.938v1zm1.875 0h.938v-1H3.78v1zm1.875 0h.938v-1h-.938v1zm2.813 0v-.031H8.5V7.53h-.031V7.5H7.53v.031H7.5v.938h.031V8.5h.938zm.937 0h.938v-1h-.938v1zm1.875 0h.938v-1h-.938v1zm1.875 0h.938v-1h-.938v1zm1.875 0h.469v-.031h.5V7.53h-.5V7.5h-.469v.031H15v.938h.031V8.5zM0 9.406v.938h1v-.938H0zm7.5 0v.938h1v-.938h-1zm8.5.938v-.938h-1v.938h1zm-16 .937v.938h1v-.938H0zm7.5 0v.938h1v-.938h-1zm8.5.938v-.938h-1v.938h1zm-16 .937v.938h1v-.938H0zm7.5 0v.938h1v-.938h-1zm8.5.938v-.938h-1v.938h1zM0 15h16v1H0v-1z'/> </svg>");
+
+  /* source: bootstrap-icons-1.8.3/border-top.svg */
+  --treb-icon-border-top: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'> <path d='M0 0v1h16V0H0zm1 2.844v-.938H0v.938h1zm6.5-.938v.938h1v-.938h-1zm7.5 0v.938h1v-.938h-1zM1 4.719V3.78H0v.938h1zm6.5-.938v.938h1V3.78h-1zm7.5 0v.938h1V3.78h-1zM1 6.594v-.938H0v.938h1zm6.5-.938v.938h1v-.938h-1zm7.5 0v.938h1v-.938h-1zM.5 8.5h.469v-.031H1V7.53H.969V7.5H.5v.031H0v.938h.5V8.5zm1.406 0h.938v-1h-.938v1zm1.875 0h.938v-1H3.78v1zm1.875 0h.938v-1h-.938v1zm2.813 0v-.031H8.5V7.53h-.031V7.5H7.53v.031H7.5v.938h.031V8.5h.938zm.937 0h.938v-1h-.938v1zm1.875 0h.938v-1h-.938v1zm1.875 0h.938v-1h-.938v1zm1.875 0h.469v-.031h.5V7.53h-.5V7.5h-.469v.031H15v.938h.031V8.5zM0 9.406v.938h1v-.938H0zm7.5 0v.938h1v-.938h-1zm8.5.938v-.938h-1v.938h1zm-16 .937v.938h1v-.938H0zm7.5 0v.938h1v-.938h-1zm8.5.938v-.938h-1v.938h1zm-16 .937v.938h1v-.938H0zm7.5 0v.938h1v-.938h-1zm8.5.938v-.938h-1v.938h1zM0 16h.969v-.5H1v-.469H.969V15H.5v.031H0V16zm1.906 0h.938v-1h-.938v1zm1.875 0h.938v-1H3.78v1zm1.875 0h.938v-1h-.938v1zm1.875-.5v.5h.938v-.5H8.5v-.469h-.031V15H7.53v.031H7.5v.469h.031zm1.875.5h.938v-1h-.938v1zm1.875 0h.938v-1h-.938v1zm1.875 0h.938v-1h-.938v1zm1.875-.5v.5H16v-.969h-.5V15h-.469v.031H15v.469h.031z'/> </svg>");
+
+  /* source: bootstrap-icons-1.8.3/border-left.svg */
+  --treb-icon-border-left: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'> <path d='M0 0v16h1V0H0zm1.906 1h.938V0h-.938v1zm1.875 0h.938V0H3.78v1zm1.875 0h.938V0h-.938v1zM7.531.969V1h.938V.969H8.5V.5h-.031V0H7.53v.5H7.5v.469h.031zM9.406 1h.938V0h-.938v1zm1.875 0h.938V0h-.938v1zm1.875 0h.938V0h-.938v1zm1.875 0h.469V.969h.5V0h-.969v.5H15v.469h.031V1zM7.5 1.906v.938h1v-.938h-1zm7.5 0v.938h1v-.938h-1zM7.5 3.781v.938h1V3.78h-1zm7.5 0v.938h1V3.78h-1zM7.5 5.656v.938h1v-.938h-1zm7.5 0v.938h1v-.938h-1zM1.906 8.5h.938v-1h-.938v1zm1.875 0h.938v-1H3.78v1zm1.875 0h.938v-1h-.938v1zm2.813 0v-.031H8.5V7.53h-.031V7.5H7.53v.031H7.5v.938h.031V8.5h.938zm.937 0h.938v-1h-.938v1zm1.875 0h.938v-1h-.938v1zm1.875 0h.938v-1h-.938v1zm1.875 0h.469v-.031h.5V7.53h-.5V7.5h-.469v.031H15v.938h.031V8.5zM7.5 9.406v.938h1v-.938h-1zm8.5.938v-.938h-1v.938h1zm-8.5.937v.938h1v-.938h-1zm8.5.938v-.938h-1v.938h1zm-8.5.937v.938h1v-.938h-1zm8.5.938v-.938h-1v.938h1zM1.906 16h.938v-1h-.938v1zm1.875 0h.938v-1H3.78v1zm1.875 0h.938v-1h-.938v1zm1.875-.5v.5h.938v-.5H8.5v-.469h-.031V15H7.53v.031H7.5v.469h.031zm1.875.5h.938v-1h-.938v1zm1.875 0h.938v-1h-.938v1zm1.875 0h.938v-1h-.938v1zm1.875-.5v.5H16v-.969h-.5V15h-.469v.031H15v.469h.031z'/> </svg>");
+
+  /* source: bootstrap-icons-1.8.3/border-right.svg */
+  --treb-icon-border-right: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'> <path d='M.969 0H0v.969h.5V1h.469V.969H1V.5H.969V0zm.937 1h.938V0h-.938v1zm1.875 0h.938V0H3.78v1zm1.875 0h.938V0h-.938v1zM7.531.969V1h.938V.969H8.5V.5h-.031V0H7.53v.5H7.5v.469h.031zM9.406 1h.938V0h-.938v1zm1.875 0h.938V0h-.938v1zm1.875 0h.938V0h-.938v1zM16 0h-1v16h1V0zM1 2.844v-.938H0v.938h1zm6.5-.938v.938h1v-.938h-1zM1 4.719V3.78H0v.938h1zm6.5-.938v.938h1V3.78h-1zM1 6.594v-.938H0v.938h1zm6.5-.938v.938h1v-.938h-1zM.5 8.5h.469v-.031H1V7.53H.969V7.5H.5v.031H0v.938h.5V8.5zm1.406 0h.938v-1h-.938v1zm1.875 0h.938v-1H3.78v1zm1.875 0h.938v-1h-.938v1zm2.813 0v-.031H8.5V7.53h-.031V7.5H7.53v.031H7.5v.938h.031V8.5h.938zm.937 0h.938v-1h-.938v1zm1.875 0h.938v-1h-.938v1zm1.875 0h.938v-1h-.938v1zM0 9.406v.938h1v-.938H0zm7.5 0v.938h1v-.938h-1zM0 11.281v.938h1v-.938H0zm7.5 0v.938h1v-.938h-1zM0 13.156v.938h1v-.938H0zm7.5 0v.938h1v-.938h-1zM0 16h.969v-.5H1v-.469H.969V15H.5v.031H0V16zm1.906 0h.938v-1h-.938v1zm1.875 0h.938v-1H3.78v1zm1.875 0h.938v-1h-.938v1zm1.875-.5v.5h.938v-.5H8.5v-.469h-.031V15H7.53v.031H7.5v.469h.031zm1.875.5h.938v-1h-.938v1zm1.875 0h.938v-1h-.938v1zm1.875 0h.938v-1h-.938v1z'/> </svg>");
+
+  /* source: treb/border-double-bottom.svg */
+  --treb-icon-border-double-bottom: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='16px' height='16px' viewBox='0 0 16 16' > <path d='M0.969,0H0v0.969h0.5V1h0.469V0.969H1V0.5H0.969V0z M1.906,1h0.938V0H1.906V1z M3.781,1h0.938V0H3.78v1H3.781z M5.656,1 h0.938V0H5.656V1z M7.531,0.969V1h0.938V0.969H8.5V0.5H8.469V0H7.53v0.5H7.5v0.469H7.531z M9.406,1h0.938V0H9.406V1z M11.281,1 h0.938V0h-0.938V1z M13.156,1h0.938V0h-0.938V1z M15.031,1H15.5V0.969H16V0h-0.969v0.5H15v0.469h0.031V1z M1,2.844V1.906H0v0.938H1z M7.5,1.906v0.938h1V1.906H7.5z M15,1.906v0.938h1V1.906H15z M1,4.719V3.78H0v0.938L1,4.719L1,4.719z M7.5,3.781v0.938h1V3.78h-1 V3.781z M15,3.781v0.938h1V3.78h-1V3.781z M1,6.594V5.656H0v0.938H1z M7.5,5.656v0.938h1V5.656H7.5z M15,5.656v0.938h1V5.656H15z M0.5,8.5h0.469V8.469H1V7.53H0.969V7.5H0.5v0.031H0v0.938h0.5V8.5z M1.906,8.5h0.938v-1H1.906V8.5z M3.781,8.5h0.938v-1H3.78v1 H3.781z M5.656,8.5h0.938v-1H5.656V8.5z M8.469,8.5V8.469H8.5V7.53H8.469V7.5H7.53v0.031H7.5v0.938h0.031V8.5H8.469z M9.406,8.5 h0.938v-1H9.406V8.5z M11.281,8.5h0.938v-1h-0.938V8.5z M13.156,8.5h0.938v-1h-0.938V8.5z M15.031,8.5H15.5V8.469H16V7.53h-0.5V7.5 h-0.469v0.031H15v0.938h0.031V8.5z M0,9.406v0.938h1V9.406H0z M7.5,9.406v0.938h1V9.406H7.5z M16,10.344V9.406h-1v0.938H16z M0,11.281v0.938h1v-0.938H0z M7.5,11.281v0.938h1v-0.938H7.5z M16,12.219v-0.938h-1v0.938H16z M0,15h16v1H0V15z M0,13h16v1H0V13z' /> </svg> ");
+
+  /* source: bootstrap-icons-1.8.3/border-all.svg */
+  --treb-icon-border-all: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'> <path d='M0 0h16v16H0V0zm1 1v6.5h6.5V1H1zm7.5 0v6.5H15V1H8.5zM15 8.5H8.5V15H15V8.5zM7.5 15V8.5H1V15h6.5z'/> </svg>");
+
+  /* source: bootstrap-icons-1.8.3/border-outer.svg */
+  --treb-icon-border-outer: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'> <path d='M7.5 1.906v.938h1v-.938h-1zm0 1.875v.938h1V3.78h-1zm0 1.875v.938h1v-.938h-1zM1.906 8.5h.938v-1h-.938v1zm1.875 0h.938v-1H3.78v1zm1.875 0h.938v-1h-.938v1zm2.813 0v-.031H8.5V7.53h-.031V7.5H7.53v.031H7.5v.938h.031V8.5h.938zm.937 0h.938v-1h-.938v1zm1.875 0h.938v-1h-.938v1zm1.875 0h.938v-1h-.938v1zM7.5 9.406v.938h1v-.938h-1zm0 1.875v.938h1v-.938h-1zm0 1.875v.938h1v-.938h-1z'/> <path d='M0 0v16h16V0H0zm1 1h14v14H1V1z'/> </svg>");
+
+  /* source: bootstrap-icons-1.8.3/border.svg */
+  --treb-icon-border-none: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'> <path d='M0 0h.969v.5H1v.469H.969V1H.5V.969H0V0zm2.844 1h-.938V0h.938v1zm1.875 0H3.78V0h.938v1zm1.875 0h-.938V0h.938v1zm.937 0V.969H7.5V.5h.031V0h.938v.5H8.5v.469h-.031V1H7.53zm2.813 0h-.938V0h.938v1zm1.875 0h-.938V0h.938v1zm1.875 0h-.938V0h.938v1zM15.5 1h-.469V.969H15V.5h.031V0H16v.969h-.5V1zM1 1.906v.938H0v-.938h1zm6.5.938v-.938h1v.938h-1zm7.5 0v-.938h1v.938h-1zM1 3.78v.938H0V3.78h1zm6.5.938V3.78h1v.938h-1zm7.5 0V3.78h1v.938h-1zM1 5.656v.938H0v-.938h1zm6.5.938v-.938h1v.938h-1zm7.5 0v-.938h1v.938h-1zM.969 8.5H.5v-.031H0V7.53h.5V7.5h.469v.031H1v.938H.969V8.5zm1.875 0h-.938v-1h.938v1zm1.875 0H3.78v-1h.938v1zm1.875 0h-.938v-1h.938v1zm1.875-.031V8.5H7.53v-.031H7.5V7.53h.031V7.5h.938v.031H8.5v.938h-.031zm1.875.031h-.938v-1h.938v1zm1.875 0h-.938v-1h.938v1zm1.875 0h-.938v-1h.938v1zm1.406 0h-.469v-.031H15V7.53h.031V7.5h.469v.031h.5v.938h-.5V8.5zM0 10.344v-.938h1v.938H0zm7.5 0v-.938h1v.938h-1zm8.5-.938v.938h-1v-.938h1zM0 12.22v-.938h1v.938H0zm7.5 0v-.938h1v.938h-1zm8.5-.938v.938h-1v-.938h1zM0 14.094v-.938h1v.938H0zm7.5 0v-.938h1v.938h-1zm8.5-.938v.938h-1v-.938h1zM.969 16H0v-.969h.5V15h.469v.031H1v.469H.969v.5zm1.875 0h-.938v-1h.938v1zm1.875 0H3.78v-1h.938v1zm1.875 0h-.938v-1h.938v1zm.937 0v-.5H7.5v-.469h.031V15h.938v.031H8.5v.469h-.031v.5H7.53zm2.813 0h-.938v-1h.938v1zm1.875 0h-.938v-1h.938v1zm1.875 0h-.938v-1h.938v1zm.937 0v-.5H15v-.469h.031V15h.469v.031h.5V16h-.969z'/> </svg>");
+
+  /* source: bootstrap-icons-1.8.3/palette2.svg */
+  --treb-icon-palette: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'> <path d='M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 .5.5v5.277l4.147-4.131a.5.5 0 0 1 .707 0l3.535 3.536a.5.5 0 0 1 0 .708L10.261 10H15.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5H3a2.99 2.99 0 0 1-2.121-.879A2.99 2.99 0 0 1 0 13.044m6-.21 7.328-7.3-2.829-2.828L6 7.188v5.647zM4.5 13a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0zM15 15v-4H9.258l-4.015 4H15zM0 .5v12.495V.5z'/> <path d='M0 12.995V13a3.07 3.07 0 0 0 0-.005z'/> </svg>");
+
+  /* source: treb/square.svg */
+  --treb-icon-layout: url("data:image/svg+xml,<?xml version='1.0' encoding='utf-8'?> <svg version='1.1' id='Layer_3' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='20px' height='20px' viewBox='0 0 20 20' enable-background='new 0 0 20 20' xml:space='preserve'> <polygon points='3,0 20,17.156 20,17.042 '/> <polygon points='3,0 0,0 0,16 1,16 1,1 2.585,1 19,17.455 19,19 4,19 4,20 20,20 20,17.156 '/> <path d='M6.886,3.922L5.343,5.465c-0.195,0.195-0.195,0.511,0,0.707c0.196,0.195,0.512,0.195,0.708,0l1.539-1.54L6.886,3.922z'/> <path d='M9.702,6.763l-1.53,1.53C7.977,8.488,7.977,8.805,8.172,9c0.195,0.196,0.512,0.196,0.707,0l1.526-1.526L9.702,6.763z'/> <path d='M12.517,9.604L11,11.121c-0.195,0.195-0.195,0.512,0,0.707s0.512,0.195,0.707,0l1.514-1.514L12.517,9.604z'/> <path d='M15.332,12.445l-1.504,1.504c-0.195,0.195-0.195,0.512,0,0.707s0.512,0.195,0.707,0l1.501-1.5L15.332,12.445z'/> <path d='M1,16H0c0,2.209,1.791,4,4,4v-1C2.346,19,1,17.654,1,16z'/> <path d='M5,9v6h6L5,9z M6,11.414L8.586,14H6V11.414z'/> </svg> ");
+
+  /* source: bootstrap-icons-1.8.3/snow.svg */
+  --treb-icon-freeze: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'> <path d='M8 16a.5.5 0 0 1-.5-.5v-1.293l-.646.647a.5.5 0 0 1-.707-.708L7.5 12.793V8.866l-3.4 1.963-.496 1.85a.5.5 0 1 1-.966-.26l.237-.882-1.12.646a.5.5 0 0 1-.5-.866l1.12-.646-.884-.237a.5.5 0 1 1 .26-.966l1.848.495L7 8 3.6 6.037l-1.85.495a.5.5 0 0 1-.258-.966l.883-.237-1.12-.646a.5.5 0 1 1 .5-.866l1.12.646-.237-.883a.5.5 0 1 1 .966-.258l.495 1.849L7.5 7.134V3.207L6.147 1.854a.5.5 0 1 1 .707-.708l.646.647V.5a.5.5 0 1 1 1 0v1.293l.647-.647a.5.5 0 1 1 .707.708L8.5 3.207v3.927l3.4-1.963.496-1.85a.5.5 0 1 1 .966.26l-.236.882 1.12-.646a.5.5 0 0 1 .5.866l-1.12.646.883.237a.5.5 0 1 1-.26.966l-1.848-.495L9 8l3.4 1.963 1.849-.495a.5.5 0 0 1 .259.966l-.883.237 1.12.646a.5.5 0 0 1-.5.866l-1.12-.646.236.883a.5.5 0 1 1-.966.258l-.495-1.849-3.4-1.963v3.927l1.353 1.353a.5.5 0 0 1-.707.708l-.647-.647V15.5a.5.5 0 0 1-.5.5z'/> </svg>");
+
+  /* source: treb/column-chart.svg */
+  --treb-icon-column-chart: url("data:image/svg+xml,<?xml version='1.0' encoding='utf-8'?> <svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='20px' height='20px' viewBox='0 0 20 20' enable-background='new 0 0 20 20' xml:space='preserve'> <path d='M4.5,17.5C4.5,17.776,4.276,18,4,18l0,0c-0.276,0-0.5-0.224-0.5-0.5v-5C3.5,12.224,3.724,12,4,12l0,0 c0.276,0,0.5,0.224,0.5,0.5V17.5z'/> <path d='M12.5,17.5c0,0.276-0.224,0.5-0.5,0.5l0,0c-0.276,0-0.5-0.224-0.5-0.5v-9C11.5,8.224,11.724,8,12,8l0,0 c0.276,0,0.5,0.224,0.5,0.5V17.5z'/> <path d='M16.5,17.5c0,0.276-0.224,0.5-0.5,0.5l0,0c-0.276,0-0.5-0.224-0.5-0.5v-13C15.5,4.224,15.724,4,16,4l0,0 c0.276,0,0.5,0.224,0.5,0.5V17.5z'/> <path d='M8.5,17.5C8.5,17.776,8.276,18,8,18l0,0c-0.276,0-0.5-0.224-0.5-0.5v-14C7.5,3.224,7.724,3,8,3l0,0 c0.276,0,0.5,0.224,0.5,0.5V17.5z'/> </svg> ");
+
+  /* source: treb/donut-chart.svg */
+  --treb-icon-donut-chart: url("data:image/svg+xml,<?xml version='1.0' encoding='utf-8'?> <svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='20px' height='20px' viewBox='0 0 20 20' enable-background='new 0 0 20 20' xml:space='preserve'> <path d='M12,1.23v1.548C14.526,3.479,16.5,5.477,17.203,8h1.565C18.004,4.639,15.362,1.995,12,1.23z'/> <path d='M2.5,10c0-3.51,2.426-6.456,5.688-7.27V1.183C4.085,2.021,1,5.65,1,10c0,1.761,0.513,3.397,1.387,4.784l1.093-1.093 C2.859,12.601,2.5,11.343,2.5,10z'/> <path d='M17.221,12c-0.878,3.166-3.778,5.5-7.221,5.5c-1.343,0-2.601-0.359-3.692-0.979l-1.093,1.093C6.603,18.487,8.24,19,10,19 c4.282,0,7.859-2.993,8.77-7H17.221z'/> </svg> ");
+
+  /* source: treb/bar-chart.svg */
+  --treb-icon-bar-chart: url("data:image/svg+xml,<?xml version='1.0' encoding='utf-8'?> <svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='20px' height='20px' viewBox='0 0 20 20' enable-background='new 0 0 20 20' xml:space='preserve'> <path d='M2.5,4.5C2.224,4.5,2,4.276,2,4l0,0c0-0.276,0.224-0.5,0.5-0.5h5C7.776,3.5,8,3.724,8,4l0,0c0,0.276-0.224,0.5-0.5,0.5H2.5z '/> <path d='M2.5,12.5C2.224,12.5,2,12.276,2,12l0,0c0-0.276,0.224-0.5,0.5-0.5h9c0.276,0,0.5,0.224,0.5,0.5l0,0 c0,0.276-0.224,0.5-0.5,0.5H2.5z'/> <path d='M2.5,16.5C2.224,16.5,2,16.276,2,16l0,0c0-0.276,0.224-0.5,0.5-0.5h13c0.276,0,0.5,0.224,0.5,0.5l0,0 c0,0.276-0.224,0.5-0.5,0.5H2.5z'/> <path d='M2.5,8.5C2.224,8.5,2,8.276,2,8l0,0c0-0.276,0.224-0.5,0.5-0.5h14C16.776,7.5,17,7.724,17,8l0,0c0,0.276-0.224,0.5-0.5,0.5 H2.5z'/> </svg> ");
+
+  /* source: treb/line-chart.svg */
+  --treb-icon-line-chart: url("data:image/svg+xml,<?xml version='1.0' encoding='utf-8'?> <svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='20px' height='20px' viewBox='0 0 20 20' enable-background='new 0 0 20 20' xml:space='preserve'> <polygon points='1,8 4,5 11,10 19,2 19,4 11,12 4,7 1,10 '/> </svg> ");
+
+  /* source: bootstrap-icons-1.8.3/image.svg */
+  --treb-icon-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'> <path d='M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'/> <path d='M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z'/> </svg>");
+
+  /* source: treb/rotate.svg */
+  --treb-icon-recalculate: url("data:image/svg+xml,<?xml version='1.0' encoding='utf-8'?> <svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='20px' height='20px' viewBox='0 0 20 20' enable-background='new 0 0 20 20' xml:space='preserve'> <path d='M9.478,4.022c2.402-0.209,4.583,1.047,5.711,3.014l1.083-0.095c-1.233-2.528-3.912-4.175-6.881-3.916 c-2.97,0.26-5.321,2.347-6.098,5.051l1.083-0.095C5.144,5.849,7.074,4.233,9.478,4.022z'/> <path d='M10.523,15.977c-2.403,0.211-4.585-1.047-5.712-3.013l-1.08,0.095c1.234,2.527,3.91,4.175,6.879,3.914 c2.971-0.259,5.32-2.347,6.095-5.05l-1.08,0.095C14.856,14.15,12.926,15.767,10.523,15.977z'/> <polygon points='2.272,15.616 7.469,12.616 3.371,11.519 '/> <polygon points='17.728,4.384 12.531,7.384 16.629,8.482 '/> <path d='M10,10'/> </svg> ");
+
+  /* source: bootstrap-icons-1.8.3/check2.svg */
+  --treb-icon-check: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'> <path d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/> </svg>");
+
+  /* source: bootstrap-icons-1.8.3/table.svg */
+  --treb-icon-table: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z'/></svg>");
+
+}