ember-inspector 4.13.1-alpha.2024.8.8 → 4.13.1-alpha.2025.10.1

package/{lib/ui/addon/styles → app/styles/ui}/_split.scss

@@ -7,19 +7,16 @@
 /* .split: The container for one or more panels */
 
 .split {
-  bottom: 0;
+  inset: 0;
   display: flex;
   flex: auto;
   flex-direction: row;
-  left: 0;
   position: absolute;
-  right: 0;
-  top: 0;
 }
 
-/* .split__panel: Contains a body, and optional header and footer elements */
+/* .split-panel: Contains a body, and optional header and footer elements */
 
-.split__panel {
+.split-panel {
   display: flex;
   flex: auto;
   flex-direction: column;
@@ -27,14 +24,14 @@
   overflow: hidden;
 }
 
-.split__panel__hd,
-.split__panel__bd,
-.split__panel__ft {
+.split-panel-hd,
+.split-panel-bd,
+.split-panel-ft {
   position: relative;
 }
 
-.split__panel__hd,
-.split__panel__ft {
+.split-panel-hd,
+.split-panel-ft {
   border-color: var(--base03);
   box-sizing: border-box;
   display: flex;
@@ -42,14 +39,14 @@
   flex-direction: column;
 }
 
-.split__panel__hd {
+.split-panel-hd {
   background: var(--base00);
   border-bottom-style: solid;
   border-bottom-width: 1px;
   min-height: 29px;
 }
 
-.split__panel__bd {
+.split-panel-bd {
   background: var(--base00);
   flex: auto;
   overflow: scroll;
@@ -57,7 +54,7 @@
   width: auto;
 }
 
-.split__panel__ft {
+.split-panel-ft {
   background: var(--base01);
   border-top-style: solid;
   border-top-width: 1px;
@@ -65,26 +62,35 @@
   justify-content: center;
 }
 
-.split__panel,
-.split__panel__bd {
+.split-panel,
+.split-panel-bd {
   height: 100%;
 }
 
 /* Custom panels */
 
-.split__panel--sidebar-1 .split__panel__bd {
+.split-panel-hd-row {
+  flex-flow: row;
+}
+
+.split-panel-sidebar-1 .split-panel-bd {
   background: var(--base01);
 }
 
-.split__panel--sidebar-2 .split__panel__bd {
+.split-panel-sidebar-2 .split-panel-bd {
   background: var(--base01);
 }
 
 /* Fix main list-view scrolling */
-.split--main > .split__panel > .split__panel__bd {
+.split-main > .split-panel > .split-panel-bd {
   overflow: hidden;
 }
 
-.split--main > .split__panel--sidebar-1 > .split__panel__bd {
+.split-main > .split-panel-sidebar-1 > .split-panel-bd {
   overflow-y: auto;
 }
+
+/* There is better ways to do this, but they create more complicated CSS */
+.split-panel-hd-row .spacer {
+  flex: 1 1 100%;
+}

package/app/styles/ui/_ui.scss

@@ -0,0 +1,13 @@
+@import "disclosure-triangle";
+@import "drag-handle";
+@import "empty-message";
+@import "error-page";
+@import "list";
+@import "nav";
+@import "pill";
+@import "send-to-console";
+@import "goto-source";
+@import "object-inspector-toggle";
+@import "split";
+@import "toolbar/index";
+@import "warning";

package/{lib/ui/addon/styles → app/styles/ui}/toolbar/_checkbox.scss

@@ -1,4 +1,4 @@
-.toolbar__checkbox {
+.toolbar-checkbox {
   height: 100%;
   margin-left: 4px;
   margin-right: 4px;
@@ -6,24 +6,24 @@
   white-space: nowrap;
 }
 
-.toolbar__checkbox label {
+.toolbar-checkbox label {
   display: block;
   height: 100%;
   line-height: var(--toolbar-height);
 }
 
-.toolbar__checkbox input {
+.toolbar-checkbox input {
   margin: 0;
 }
 
 /*
   if first item in toolbar, create extra clickable space
 */
-.toolbar__checkbox:first-child {
+.toolbar-checkbox:first-child {
   margin-left: 0;
 }
 
-.toolbar__checkbox:first-child label {
+.toolbar-checkbox:first-child label {
   margin-left: 0;
   padding-left: 8px;
 }

package/app/styles/ui/toolbar/_icon-button.scss

@@ -0,0 +1,80 @@
+.toolbar-icon-button {
+  align-items: center;
+  background: transparent;
+  border: 0 transparent none;
+  display: flex;
+  height: var(--toolbar-height);
+  margin-left: 2px;
+  margin-right: 2px;
+  padding: 0 2px;
+  vertical-align: top;
+
+  /* if first item in toolbar, create extra clickable space on left side */
+  &:first-child {
+    margin-left: 0;
+    padding-left: 10px;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:active {
+    transform: translate(1px, 1px);
+  }
+
+  /*
+  SVG colors
+  */
+
+  .svg-stroke {
+    stroke: var(--base11);
+  }
+
+  .svg-fill {
+    fill: var(--base11);
+  }
+
+  &:hover {
+    .svg-stroke {
+      stroke: var(--base13);
+    }
+
+    .svg-fill {
+      fill: var(--base13);
+    }
+  }
+
+  /*
+  Modifier:
+  .active (highlighted)
+  */
+  &.active .svg-stroke {
+    stroke: var(--focus);
+  }
+
+  &.active .svg-fill {
+    fill: var(--focus);
+  }
+
+  /*
+  Modifier
+  .disabled
+  */
+
+  &.disabled {
+    pointer-events: none;
+  }
+
+  &.disabled:active {
+    transform: none;
+  }
+
+  &.disabled .svg-stroke {
+    stroke: var(--base05);
+  }
+
+  &.disabled .svg-fill {
+    fill: var(--base05);
+  }
+}

package/{lib/ui/addon/styles → app/styles/ui}/toolbar/_index.scss

@@ -17,13 +17,14 @@
   margin-left: 5px;
   margin-right: 5px;
 }
+
 .toolbar .goto-source {
   margin-left: 5px;
   margin-right: 5px;
 }
 
-@import 'checkbox';
-@import 'divider';
-@import 'icon-button';
-@import 'radio';
-@import 'search';
+@import "checkbox";
+@import "divider";
+@import "icon-button";
+@import "radio";
+@import "search";

package/{lib/ui/addon/styles → app/styles/ui}/toolbar/_radio.scss

@@ -1,4 +1,4 @@
-.toolbar__radio {
+.toolbar-radio {
   background: var(--base02);
   border: none;
   border-radius: 2px;
@@ -14,30 +14,30 @@
   vertical-align: middle;
 }
 
-.toolbar__radio:active,
-.toolbar__radio:hover,
-.toolbar__radio:focus,
-.toolbar__radio.active {
+.toolbar-radio:active,
+.toolbar-radio:hover,
+.toolbar-radio:focus,
+.toolbar-radio.active {
   outline: none;
 }
 
-.toolbar__radio--first {
+.toolbar-radio-first {
   margin-left: 4px;
 }
 
-.toolbar__radio--last {
+.toolbar-radio-last {
   margin-right: 4px;
 }
 
-.toolbar__radio:hover {
+.toolbar-radio:hover {
   background: var(--base04);
 }
 
-.toolbar__radio:active {
+.toolbar-radio:active {
   background: var(--base00);
 }
 
-.toolbar__radio.active {
+.toolbar-radio.active {
   background: var(--focus);
   color: var(--focus-text);
 }

package/{lib/ui/addon/styles → app/styles/ui}/toolbar/_search.scss

@@ -1,13 +1,15 @@
-.toolbar__search input {
+.toolbar-search input {
   border: 1px solid var(--base05);
   height: calc(var(--toolbar-height) - 7px);
   width: 175px;
 }
 
-.toolbar__search-clear-button {
+.toolbar-search-clear-button {
   top: 3px;
 
   svg {
-    path { fill: var(--base11); }
+    path {
+      fill: var(--base11);
+    }
   }
 }