@trebco/treb 25.0.0-rc2 → 25.0.0

package/treb-embed/style/toolbar.scss

@@ -15,11 +15,10 @@ $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-main {
 
   .treb-layout-header {
     
@@ -41,13 +40,13 @@ $swatch-size: 18px;
   .treb-toolbar {
 
     color: var(--treb-toolbar-color, var(--treb-ui-color, #333));
-    font-size: $font-size;
+    font-size: var(--treb-toolbar-font-size, inherit);
 
     // ----
 
     display: flex;
     flex-direction: row;
-    gap: .5em;
+    gap: .5rem;
 
     & > div {
       display: flex;
@@ -105,11 +104,9 @@ $swatch-size: 18px;
       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?
+      // removing this transition because it lags when toggling light/dark mode 
 
-      transition: background-color .1s ease;
+      // transition: background-color .1s ease;
       // border-radius: $border-radius;
 
       &[dropdown] {
@@ -122,7 +119,7 @@ $swatch-size: 18px;
           height: 0px;
           border: 5px solid transparent;
           border-top-color: currentColor;
-          top: 18px; // FIXME: specify in ems
+          top: 18px; // FIXME: specify in ems // NO
           left: 50%;
           transform: translate(-50%, -50%);
         }
@@ -198,13 +195,21 @@ $swatch-size: 18px;
 
     .treb-menu {
 
-      z-index: 999; // FIXME: NO
+      // on Safari, we need to make these menus focus targets, so we can 
+      // use :focus-within. they will get a tabIndex. we will preferentially 
+      // focus on buttons within the menus, but there will be flashes where 
+      // focus is visible on the menu itself, so to reduce jitter we remove
+      // the outline.
+
+      outline: none;
+
+      // ---
 
       & > div {
 
         display: none; 
 
-        margin-top: .5em;
+        margin-top: .5rem;
 
         flex-direction: column;
         background: $menu-background;
@@ -220,7 +225,7 @@ $swatch-size: 18px;
           background: transparent;
           border: 0;
           text-align: left;
-          padding: .4em 1em;
+          padding: .4rem 1rem;
           margin: 3px 0;
           transition: background-color .125s ease;
 
@@ -234,10 +239,6 @@ $swatch-size: 18px;
           & > button, & > .treb-menu > button {
             padding: 0;
           }
-          /*
-          padding-left: .5em;
-          padding-right: .5em;
-          */
         }
 
         & > [separator] {
@@ -320,7 +321,7 @@ $swatch-size: 18px;
       }
 
       & > div {
-        padding: .75em .75em;
+        padding: .75rem .75rem;
       }
 
       & > div + div {
@@ -331,12 +332,12 @@ $swatch-size: 18px;
         
         display: flex;
         flex-direction: row;
-        gap: .5em;
+        gap: .5rem;
         align-items: center;
 
         input {
           flex-grow: 1;
-          padding: 0 .5em;
+          padding: 0 .5rem;
         }
 
         input, button {
@@ -351,7 +352,7 @@ $swatch-size: 18px;
 
         display: grid;
         grid-template-columns: repeat(10, 1fr);
-        gap: .5em;
+        gap: .5rem;
 
         button {
           width: $swatch-size;
@@ -387,10 +388,10 @@ $swatch-size: 18px;
         font: inherit;
         resize: both;
         border: 1px solid $border-color;
-        padding: .25em;
+        padding: .25rem;
         line-height: 1.5;
-        margin: .5em;
-        height: 10em;
+        margin: .5rem;
+        height: 10rem;
       }
 
       textarea + div {
@@ -398,8 +399,8 @@ $swatch-size: 18px;
         flex-direction: row;
         align-items: center;
         justify-content: center;
-        gap: .5em;
-        padding: 0 0 .5em 0;
+        gap: .5rem;
+        padding: 0 0 .5rem 0;
 
         button {
           border: 1px solid $border-color;

package/treb-embed/style/tooltip.scss

@@ -19,7 +19,7 @@
  * 
  */
 
-.treb-layout {
+.treb-main {
 
   .treb-tooltip {
 

package/treb-grid/src/types/grid.ts

@@ -1609,31 +1609,8 @@ export class Grid extends GridBase {
 
     // going to rename to clarify.
 
-
     this.view_node = view_node;
 
-    // so here we want the class list to read
-    //
-    // ... treb-main [treb-ua-windows] treb-theme ...
-    //
-    // our internal styles will be scoped to `.treb-main` and optionally
-    // `.treb-main.treb-ua-windows`; then you should be able to override
-    // using `.treb-main.treb-theme`. we have some extra classes we still 
-    // need to clean up, though.
-
-    // grid_container.classList.add('treb-main');
-
-    /* MOVE
-
-    if (UA.is_windows) {
-      grid_container.classList.add('treb-ua-windows');
-    }
-    else if (UA.is_mac) {
-      grid_container.classList.add('treb-ua-osx');
-    }
-
-    */
-
     // MOVE
 
     // this.ApplyTheme();
@@ -6696,15 +6673,15 @@ export class Grid extends GridBase {
     if (this.tab_bar) {
       let data: StatsEntry[] = [];
 
+      // why does this get tested on every call? just set the function
+
       if (typeof this.options.stats === 'function') {
         if (!this.primary_selection.empty) {
-          // text = this.options.stats.call(undefined, this.GetRange(this.primary_selection.area));
           data = this.options.stats.call(undefined, this.GetRange(this.primary_selection.area));
         }
       }
       else {
         if (!this.primary_selection.empty && this.primary_selection.area.count > 1) {
-          // text = this.RenderStats(this.GetRange(this.primary_selection.area));
           data = this.RenderStats(this.GetRange(this.primary_selection.area));
         }
       }