@yesilyazilim/web.spa 1.1.7 → 1.1.8

package/index.css

@@ -554,6 +554,12 @@
   --bd-tr-10: color-mix(in srgb, var(--base-down) 20%, var(--transparent) 100%);
   --bd-tr-20: color-mix(in srgb, var(--base-down) 40%, var(--transparent) 100%);
   --bd-tr-30: color-mix(in srgb, var(--base-down) 60%, var(--transparent) 100%);
+  --bd-tr-40: color-mix(in srgb, var(--base-down) 80%, var(--transparent) 100%);
+  --bd-tr-50: color-mix(in srgb, var(--base-down) 100%, var(--transparent) 100%);
+  --bd-tr-60: color-mix(in srgb, var(--base-down) 100%, var(--transparent) 80%);
+  --bd-tr-70: color-mix(in srgb, var(--base-down) 100%, var(--transparent) 60%);
+  --bd-tr-80: color-mix(in srgb, var(--base-down) 100%, var(--transparent) 40%);
+  --bd-tr-90: color-mix(in srgb, var(--base-down) 100%, var(--transparent) 20%);
   --accent-bg-img-v: linear-gradient(to bottom, var(--primary) 0%, var(--primary) 30%, var(--primary-2) 100%);
   --glass-bg-img: linear-gradient(180deg, var(--base-down) 0%, var(--bd-tr-20) 50%, var(--bd-tr-20) 100%);
   --glass-shadow: 0 5px 30px var(--glass-shadow-color);
@@ -661,6 +667,13 @@
   --font-size: 13px !important;
 }
 
+:not(:root):fullscreen::backdrop {
+  background: var(--background-color);
+  background-image: var(--app-back-img);
+  position: fixed;
+  inset: 0;
+}
+
 ::selection {
   background-color: var(--primary-focus);
 }
@@ -920,7 +933,9 @@ button {
   --pad-h: calc(var(--spacing) * 3 / 2);
   --pad-v: calc(var(--spacing) * 3 / 2);
   --box-shadow: 0px 0px 0px 0px var(--drop-shadow-color);
+  background-color: var(--background-color);
   color: var(--color);
+  border: var(--border-width) solid var(--border-color);
   border-radius: var(--border-radius);
   padding: var(--pad-v) var(--pad-h);
   width: fit-content;
@@ -995,15 +1010,6 @@ button:is(.primary, .secondary, .success, .danger, .warning, .error, .info):hove
   background-position: 100%;
 }
 
-button:not(:is(.primary, .secondary, .success, .danger, .warning, .error, .info)) {
-  background-color: var(--background-color);
-  border: 1px solid var(--border-color);
-}
-
-button:not(:is(.primary, .secondary, .success, .danger, .warning, .error, .info)):hover {
-  background-color: color-mix(in oklab, var(--background-color) 100%, var(--base-up) 20%);
-}
-
 button.outline {
   --background-color: var(--transparent);
   --background-color-2: var(--transparent);
@@ -1786,7 +1792,7 @@ body ::-webkit-scrollbar {
 }
 
 body ::-webkit-scrollbar-thumb {
-  background-color: var(--mid-d2);
+  background-color: var(--primary-d4);
   background-clip: padding-box;
   border: 2px solid #0000;
   border-radius: 10px;
@@ -1794,7 +1800,7 @@ body ::-webkit-scrollbar-thumb {
 }
 
 body ::-webkit-scrollbar-thumb:hover {
-  background-color: var(--mid);
+  background-color: var(--primary-d3);
   border-width: 0;
 }
 
@@ -1802,16 +1808,16 @@ body ::-webkit-scrollbar-track {
   background: none;
 }
 
+body ::-webkit-selection {
+  background: var(--primary);
+}
+
 input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
   background-position: .5rem;
   background-size: 1rem;
   padding-inline-start: calc(var(--form-element-spacing-horizontal)  + 1.75rem);
 }
 
-::-webkit-selection {
-  background: var(--primary);
-}
-
 option:hover, option:focus, option:active {
   background-color: var(--primary-hover) !important;
   color: var(--primary-inverse) !important;
@@ -2143,27 +2149,27 @@ select:focus > option:hover {
 }
 
 .fg-danger {
-  color: var(--danger);
+  color: var(--danger) !important;
 }
 
 .fg-warning {
-  color: var(--warning);
+  color: var(--warning) !important;
 }
 
 .fg-success {
-  color: var(--success);
+  color: var(--success) !important;
 }
 
 .fg-info {
-  color: var(--info);
+  color: var(--info) !important;
 }
 
 .fg-primary {
-  color: var(--primary);
+  color: var(--primary) !important;
 }
 
 .fg-secondary {
-  color: var(--secondary);
+  color: var(--secondary) !important;
 }
 
 .bg-danger {
@@ -3030,26 +3036,28 @@ app-main-panel {
 }
 
 app-main-panel > .mp-cover {
+  gap: var(--panel-spacing);
+  width: 100%;
+  height: 100%;
+  padding: 0 var(--panel-spacing) var(--panel-spacing) var(--panel-spacing);
   grid-template-rows: auto 1fr;
   grid-template-areas: "ga_header"
                        "ga_panels";
-  width: 100%;
-  height: 100%;
   display: grid;
+  overflow: hidden;
 }
 
-app-main-panel > .mp-cover > app-ribbon-container {
+app-main-panel > .mp-cover > nav-ribbon-body {
   z-index: 3;
   grid-area: ga_header;
 }
 
 app-main-panel > .mp-cover > .mp-panels {
-  width: 100%;
-  height: 100%;
-  padding: var(--panel-spacing);
   grid-area: ga_panels;
   grid-template-columns: auto 1fr auto;
   grid-template-areas: "ga_left ga_middle ga_right";
+  width: 100%;
+  height: 100%;
   display: grid;
   overflow: hidden;
 }
@@ -3133,371 +3141,149 @@ app-main-panel > app-main-panel-drag-window > .mp-dp-container .mp-drag-panel[dr
   background: color-mix(in srgb, var(--success) 50%, transparent);
 }
 
-app-ribbon {
-  --tab-accent-hover: var(--mid-d2);
-  --tab-body: var(--mid-d4);
-  --ribbon-item-shadow: 0px 1px 5px 2px var(--drop-shadow-color);
-  --tab-header-background: transparent !important;
-  --tab-header-foreground: var(--color) !important;
-  --tab-accent-color: var(--background-color) !important;
-}
-
-app-ribbon > app-tab-container {
-  height: inherit;
-}
-
-app-ribbon > app-tab-container > .appTabContainerTop {
-  padding: 0 var(--spacing-2x);
-}
-
-app-ribbon > app-tab-container > .appTabContainerTop > .appTabContainerHeader {
-  z-index: 1;
-  --tab-border-h: 3px;
-}
-
-app-ribbon > app-tab-container > .appTabContainerTop > .appTabContainerHeader app-tab-header {
-  --tab-header-border-color: transparent;
-  border-top: none;
-  border-bottom: var(--tab-border-h) solid;
-  border-bottom-color: #0000;
-  transition: box-shadow .5s;
+app-sub-panel {
+  position: relative;
+  overflow: hidden;
 }
 
-app-ribbon > app-tab-container > .appTabContainerTop > .appTabContainerHeader app-tab-header .title {
-  padding: 3px 9px;
+app-sub-panel > app-tab-container .appTabContainerBody {
+  box-shadow: var(--glass-shadow);
 }
 
-app-ribbon > app-tab-container > .appTabContainerTop > .appTabContainerHeader app-tab-header:hover {
-  border-bottom: var(--tab-border-h) solid;
-  border-bottom-color: var(--tab-accent-hover);
+app-sub-panel.Pos-Center {
+  grid-area: ga_center;
 }
 
-app-ribbon > app-tab-container > .appTabContainerTop > .appTabContainerHeader app-tab-header.active {
-  --tab-accent-color: var(--primary);
-  --tab-header-border-color: var(--mid-d4);
-  border-bottom: var(--tab-border-h) solid;
-  border-bottom-color: var(--tab-accent-color);
-  background-color: #0000;
-  border-left: none;
-  border-right: none;
+app-sub-panel.Pos-Center > app-tab-container > .appTabContainerBody > app-tab {
+  padding: 0;
 }
 
-app-ribbon > app-tab-container > .appTabContainerTop > .appTabContainerHeader app-tab-header.active:after, app-ribbon > app-tab-container > .appTabContainerTop:after {
-  display: none;
+app-sub-panel.Pos-Left {
+  padding-right: var(--panel-spacing);
+  grid-area: ga_left;
+  min-width: 100px !important;
 }
 
-app-ribbon > app-tab-container > .appTabContainerBody {
-  margin: 0 var(--spacing-2x) var(--spacing) var(--spacing-2x);
-  background: var(--background-color);
-  box-shadow: var(--ribbon-item-shadow);
-  border-radius: 6px;
-  transition: top .5s;
-  top: 0;
-  border: none !important;
+app-sub-panel.Pos-Right {
+  padding-left: var(--panel-spacing);
+  grid-area: ga_right;
+  min-width: 100px !important;
 }
 
-app-ribbon > app-tab-container > .appTabContainerBody > app-tab {
-  padding-top: var(--spacing);
-  padding-bottom: var(--spacing-half);
+app-sub-panel.Pos-Bottom {
+  height: max(200px, 40vh);
+  padding-top: var(--panel-spacing);
+  grid-area: ga_bottom;
+  min-height: 100px !important;
 }
 
-app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent {
-  gap: var(--spacing);
-  padding-left: var(--spacing);
-  --text-color: var(--primary-u5);
-  display: flex;
+app-sub-panel > .panel-resizer {
+  z-index: 100;
+  opacity: .1;
+  transition: all .5s;
+  position: absolute;
 }
 
-app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup {
-  gap: var(--spacing);
-  grid-template-rows: 1fr auto;
-  display: grid;
+app-sub-panel > .panel-resizer:hover {
+  opacity: .8;
+  border-radius: var(--border-radius);
+  box-shadow: 0 0 20px 0px var(--primary);
 }
 
-app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody {
-  gap: var(--spacing-half);
-  display: flex;
+app-sub-panel > .panel-resizer.panel-resizer-b {
+  cursor: row-resize;
+  width: calc(100% - 24px);
+  height: calc(var(--panel-spacing) / 2);
+  top: calc(var(--panel-spacing) / 4);
+  left: 12px;
 }
 
-app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody .disabled {
-  opacity: .5;
-  pointer-events: none;
-  cursor: not-allowed;
+app-sub-panel > .panel-resizer.panel-resizer-b:hover {
+  background: var(--accent-bg-img);
 }
 
-app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody .active {
-  outline: 3px solid var(--active);
-  outline-offset: -3px;
+app-sub-panel > .panel-resizer.panel-resizer-l {
+  cursor: col-resize;
+  height: calc(100% - 50px);
+  width: calc(var(--panel-spacing) / 2);
+  right: calc(var(--panel-spacing) / 4);
+  bottom: 12px;
 }
 
-app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > button {
-  --border-color: transparent;
-  background: var(--base-down);
-  width: auto;
-  min-width: 50px;
-  max-width: 140px;
-  padding: var(--spacing);
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--spacing);
-  flex-flow: row;
-  margin-bottom: 0;
-  font-weight: normal;
-  display: flex;
+app-sub-panel > .panel-resizer.panel-resizer-l:hover {
+  background: var(--accent-bg-img-v);
 }
 
-app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > button > i {
-  font-size: 16px;
+app-sub-panel > .panel-resizer.panel-resizer-r {
+  cursor: col-resize;
+  height: calc(100% - 50px);
+  width: calc(var(--panel-spacing) / 2);
+  bottom: 12px;
+  left: calc(var(--panel-spacing) / 4);
 }
 
-app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > button > span {
-  color: var(--text-color);
-  padding: 0;
-  font-size: .875rem;
+app-sub-panel > .panel-resizer.panel-resizer-r:hover {
+  background: var(--accent-bg-img-v);
 }
 
-app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > button:hover {
-  box-shadow: var(--ribbon-item-shadow);
+:root {
+  --tab-accent-color: var(--primary);
+  --tab-accent-hover: color-mix(in srgb, var(--tab-accent-color) 50%, transparent);
+  --tab-body: var(--glass-bg-img);
+  --tab-header-foreground: var(--color);
+  --tab-header-background: var(--background-color);
+  --tab-border-h: 3px;
+  --tab-header-border-color: transparent;
 }
 
-app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > button[active]:after {
-  opacity: .5;
+app-tab-container {
+  grid-template-rows: minmax(21px, auto) 1fr;
+  grid-template-areas: "th-head"
+                       "th-body";
+  width: 100%;
+  height: 100%;
+  display: grid;
 }
 
-app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > app-radio-button {
-  background-color: var(--tranparent);
-  grid-template-rows: auto auto;
-  grid-auto-flow: column;
-  align-content: center;
-  gap: 2px;
-  padding: 2px;
+app-tab-container > .appTabContainerTop {
+  z-index: 1;
+  grid-area: th-head;
+  grid-template-columns: 16px 1fr;
+  grid-template-areas: "th-menu th-header";
   display: grid;
+  overflow: hidden;
 }
 
-app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > app-radio-button > button {
-  background-color: var(--tranparent);
-  border: none;
-  border-radius: 0;
-  align-items: center;
-  margin-bottom: 0;
-  padding: 0 4px;
-  font-weight: normal;
+app-tab-container > .appTabContainerTop > app-optionsmenu {
+  grid-area: th-menu;
+  justify-content: start;
+  width: 100%;
   display: flex;
 }
 
-app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > app-radio-button > button > i {
-  color: var(--primary);
-  font-size: .8rem;
+app-tab-container > .appTabContainerTop > app-optionsmenu > app-dropdown > .ddBody > app-menu > .menu-item {
+  padding: var(--spacing-half);
 }
 
-app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > app-radio-button > button > span {
-  color: var(--text-color);
-  font-size: .875rem;
+app-tab-container > .appTabContainerTop > .appTabContainerHeader {
+  width: 100%;
+  color: var(--tab-header-foreground);
+  flex-flow: row;
+  grid-area: th-header;
+  padding: 0;
+  display: flex;
 }
 
-app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > app-radio-button > button:hover > i {
-  box-shadow: var(--ribbon-item-shadow);
-  z-index: 1;
-  position: relative;
-}
-
-app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > app-radio-button > button[checked] > i {
-  color: var(--primary) !important;
-}
-
-app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > .ribbonElementContainer {
-  flex-direction: column-reverse;
-  gap: 0;
-  display: flex;
-}
-
-app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > .ribbonElementContainer > select {
-  background-color: var(--base-down);
-  cursor: pointer;
-  min-width: 100px;
-  height: 100%;
-  margin: 0;
-  font-size: 11px;
-  line-height: 1rem;
-  --color: var(--text-color) !important;
-}
-
-app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > .ribbonElementContainer > select option {
-  font-size: 11px;
-}
-
-app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > .ribbonElementContainer > select:hover {
-  box-shadow: var(--ribbon-item-shadow);
-}
-
-app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > .ribbonElementContainer > input {
-  background-color: var(--base-down);
-  cursor: pointer;
-  min-width: 100px;
-  margin: 0;
-  line-height: 1rem;
-  --color: var(--text-color) !important;
-}
-
-app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > .ribbonElementContainer > input:hover {
-  box-shadow: var(--ribbon-item-shadow);
-}
-
-app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > .ribbonElementContainer > label {
-  text-align: center;
-  color: var(--muted-color);
-  font-size: 10px;
-  display: none;
-}
-
-app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupTitle {
-  text-align: center;
-  color: var(--muted-color);
-  font-size: .8rem;
-}
-
-app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonGroupSeperator {
-  box-sizing: border-box;
-  background-color: var(--mid-d4);
-  width: 1px;
-  height: auto;
-}
-
-app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonGroupSeperator:last-child {
-  height: 0;
-}
-
-app-radio-button {
-  background: var(--background-color);
-  flex-direction: row;
-  width: 100%;
-  display: flex;
-  position: relative;
-}
-
-app-radio-button > button {
-  padding: calc(var(--spacing)  - 1px);
-  border-radius: 0;
-  align-items: center;
-  font-weight: normal;
-}
-
-app-radio-button > button > i {
-  font-size: 1.2rem;
-}
-
-app-radio-button > button:hover > i {
-  opacity: .5;
-}
-
-app-radio-button > button[checked] > i {
-  color: var(--primary-inverse) !important;
-}
-
-app-radio-button > button:first-child {
-  border-top-left-radius: var(--border-radius);
-  border-bottom-left-radius: var(--border-radius);
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-app-radio-button > button:last-child {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  border-top-right-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
-}
-
-app-radio-button.flat {
-  width: 100%;
-}
-
-app-radio-button.flat > button {
-  color: var(--text-color);
-  background-color: #0000;
-  border: none;
-}
-
-app-radio-button.flat > button > i {
-  color: var(--primary);
-  font-size: 1.2rem;
-}
-
-app-radio-button.flat > button:hover {
-  background-color: #0000 !important;
-}
-
-app-radio-button.flat > button:focus {
-  box-shadow: none;
-}
-
-app-radio-button.flat > button[checked] > i {
-  color: var(--primary) !important;
-}
-
-app-radio-button[readonly] * {
-  cursor: default !important;
-  pointer-events: none !important;
-}
-
-:root {
-  --tab-accent-color: var(--primary);
-  --tab-accent-hover: color-mix(in srgb, var(--tab-accent-color) 50%, transparent);
-  --tab-body: var(--glass-bg-img);
-  --tab-header-foreground: var(--color);
-  --tab-header-background: var(--background-color);
-  --tab-border-h: 3px;
-  --tab-header-border-color: transparent;
-}
-
-app-tab-container {
-  grid-template-rows: minmax(21px, auto) 1fr;
-  grid-template-areas: "th-head"
-                       "th-body";
-  width: 100%;
-  height: 100%;
-  display: grid;
-}
-
-app-tab-container > .appTabContainerTop {
-  z-index: 1;
-  grid-area: th-head;
-  grid-template-columns: 16px 1fr;
-  grid-template-areas: "th-menu th-header";
-  display: grid;
-  overflow: hidden;
-}
-
-app-tab-container > .appTabContainerTop > app-optionsmenu {
-  grid-area: th-menu;
-  justify-content: start;
-  width: 100%;
-  display: flex;
-}
-
-app-tab-container > .appTabContainerTop > app-optionsmenu > app-dropdown > .ddBody > app-menu > .menu-item {
-  padding: var(--spacing-half);
-}
-
-app-tab-container > .appTabContainerTop > .appTabContainerHeader {
-  width: 100%;
-  color: var(--tab-header-foreground);
-  flex-flow: row;
-  grid-area: th-header;
-  padding: 0;
-  display: flex;
-}
-
-app-tab-container > .appTabContainerTop > .appTabContainerHeader > app-tab-header {
-  min-width: 60px;
-  padding: var(--spacing-half) var(--spacing);
-  border-top-left-radius: var(--spacing);
-  border-top-right-radius: var(--spacing);
-  grid-template-columns: 1fr auto;
-  grid-template-areas: "th-title th-close";
-  align-items: center;
-  transition: all .5s;
-  display: grid;
+app-tab-container > .appTabContainerTop > .appTabContainerHeader > app-tab-header {
+  min-width: 60px;
+  padding: var(--spacing-half) var(--spacing);
+  border-top-left-radius: var(--spacing);
+  border-top-right-radius: var(--spacing);
+  grid-template-columns: 1fr auto;
+  grid-template-areas: "th-title th-close";
+  align-items: center;
+  transition: all .5s;
+  display: grid;
   position: relative;
 }
 
@@ -3959,272 +3745,508 @@ app-list > .itemContainer > .filtered {
   display: none !important;
 }
 
-app-dropdown-button {
-  grid-template-columns: 1fr auto;
-  grid-template-areas: "main icon";
-  display: grid;
-  position: relative;
-  padding: 0 !important;
-}
-
-app-dropdown-button > app-dropdown > .ddBody > app-button-list {
-  border-radius: var(--border-radius);
+nav-ribbon-header {
+  flex-flow: row;
+  align-items: center;
+  height: 100%;
+  display: flex;
 }
 
-app-dropdown-button > app-dropdown button {
-  color: var(--mid-u2);
-  background-color: var(--primary-inverse);
-  border: none;
+nav-ribbon-header > .ribbon-header-tab {
+  height: 100%;
+  color: var(--color);
+  border-top: 3px solid var(--transparent);
+  padding: 0 var(--spacing);
+  cursor: pointer;
+  align-items: center;
+  display: flex;
 }
 
-app-dropdown-button > app-dropdown button:hover {
-  background-color: var(--mid-d5);
+nav-ribbon-header > .ribbon-header-tab:hover {
+  border-top: var(--tab-border-h) solid;
+  border-top-color: var(--tab-accent-hover);
 }
 
-app-dropdown-button > .mainButton {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  grid-area: main;
-  width: 100%;
+nav-ribbon-header > .ribbon-header-tab.active {
+  background-color: var(--background-color);
+  border-top: 3px solid var(--primary);
+  box-shadow: var(--drop-shadow);
+  cursor: default;
+  pointer-events: none;
+  z-index: 1;
 }
 
-app-dropdown-button > .headButton {
-  grid-area: main;
+nav-ribbon-body {
+  --ribbon-item-shadow: 0px 1px 5px 2px var(--drop-shadow-color);
+  background: var(--base-down);
   width: 100%;
+  box-shadow: var(--drop-shadow-m);
+  border-radius: 6px;
+  grid-template-columns: auto 1fr;
+  grid-template-areas: "ga-static ga-body";
+  transition: top .3s linear;
+  display: grid;
 }
 
-app-dropdown-button > .headButton > i {
+nav-ribbon-body > .pin-button {
+  z-index: 1;
+  bottom: var(--spacing);
   right: var(--spacing);
   position: absolute;
 }
 
-app-dropdown-button > .headButton > i:before {
-  transition: rotate .5s;
-}
-
-app-dropdown-button > .headButton > i.up:before {
-  rotate: 180deg;
+nav-ribbon-body > .pin-button > i {
+  color: var(--primary);
 }
 
-app-dropdown-button > .headButton.open {
-  opacity: .7;
+nav-ribbon-body > .static {
+  grid-area: ga-static;
 }
 
-app-dropdown-button > .iconButton {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  grid-area: icon;
+nav-ribbon-body > .NavRibbonTabContent {
+  gap: var(--spacing);
+  padding: var(--spacing-half);
+  padding-left: var(--spacing);
+  --text-color: var(--primary-u5);
+  grid-area: ga-body;
+  display: none;
 }
 
-app-dropdown-button > .iconButton i:before {
-  transition: rotate .5s;
+nav-ribbon-body > .NavRibbonTabContent.active {
+  display: flex;
 }
 
-app-dropdown-button > .iconButton.up i:before {
-  rotate: 180deg;
+nav-ribbon-body > .NavRibbonTabContent > .NavRibbonTabGroup {
+  gap: var(--spacing);
+  grid-template-rows: 1fr auto;
+  display: grid;
 }
 
-app-button-list {
+nav-ribbon-body > .NavRibbonTabContent > .NavRibbonTabGroup > .NavRibbonTabGroupBody {
+  gap: var(--spacing-half);
   display: flex;
 }
 
-app-button-list > button {
-  border-radius: 0;
-  align-items: center;
-  height: 100%;
-  margin-bottom: 0;
+nav-ribbon-body > .NavRibbonTabContent > .NavRibbonTabGroup > .NavRibbonTabGroupBody .disabled {
+  opacity: .5;
+  pointer-events: none;
+  cursor: not-allowed;
 }
 
-app-button-list:not(.toolbar).vertical > button {
-  border-bottom: 1px solid var(--form-element-border-color);
-  width: 100%;
+nav-ribbon-body > .NavRibbonTabContent > .NavRibbonTabGroup > .NavRibbonTabGroupBody .active {
+  outline: 3px solid var(--active);
+  outline-offset: -3px;
 }
 
-app-button-list:not(.toolbar).vertical > button:last-child {
-  border-bottom: none;
+nav-ribbon-body > .NavRibbonTabContent > .NavRibbonTabGroup > .NavRibbonTabGroupBody > button {
+  --border-color: transparent;
+  background: var(--base-down);
+  width: auto;
+  min-width: 50px;
+  max-width: 140px;
+  padding: var(--spacing);
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing);
+  flex-flow: row;
+  margin-bottom: 0;
+  font-weight: normal;
+  display: flex;
 }
 
-app-button-list:not(.toolbar).horizonal > button {
-  width: auto;
+nav-ribbon-body > .NavRibbonTabContent > .NavRibbonTabGroup > .NavRibbonTabGroupBody > button > i {
+  font-size: 16px;
 }
 
-app-button-list:not(.toolbar).horizonal > button:first-child {
-  border-top-left-radius: var(--border-radius);
-  border-bottom-left-radius: var(--border-radius);
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+nav-ribbon-body > .NavRibbonTabContent > .NavRibbonTabGroup > .NavRibbonTabGroupBody > button > span {
+  color: var(--text-color);
+  padding: 0;
+  font-size: .875rem;
 }
 
-app-button-list:not(.toolbar).horizonal > button:last-child {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  border-top-right-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
+nav-ribbon-body > .NavRibbonTabContent > .NavRibbonTabGroup > .NavRibbonTabGroupBody > button:hover {
+  box-shadow: var(--ribbon-item-shadow);
 }
 
-app-button-list.toolbar {
-  background-color: var(--mid-d4);
-  padding: var(--spacing-half);
+nav-ribbon-body > .NavRibbonTabContent > .NavRibbonTabGroup > .NavRibbonTabGroupBody > button[active]:after {
+  opacity: .5;
 }
 
-app-button-list.toolbar > button {
-  background-color: var(--primary-inverse);
-  color: var(--h5-color);
-  border: 1px solid var(--form-element-border-color);
-  width: auto;
-  padding: var(--spacing);
+nav-ribbon-body > .NavRibbonTabContent > .NavRibbonTabGroup > .NavRibbonTabGroupBody > app-radio-button {
+  background-color: var(--tranparent);
+  grid-template-rows: auto auto;
+  grid-auto-flow: column;
+  align-content: center;
+  gap: 2px;
+  padding: 2px;
+  display: grid;
 }
 
-app-button-list.toolbar > button > span {
-  display: none;
+nav-ribbon-body > .NavRibbonTabContent > .NavRibbonTabGroup > .NavRibbonTabGroupBody > app-radio-button > button {
+  background-color: var(--tranparent);
+  border: none;
+  border-radius: 0;
+  align-items: center;
+  margin-bottom: 0;
+  padding: 0 4px;
+  font-weight: normal;
+  display: flex;
 }
 
-app-button-list.toolbar > button:hover {
+nav-ribbon-body > .NavRibbonTabContent > .NavRibbonTabGroup > .NavRibbonTabGroupBody > app-radio-button > button > i {
   color: var(--primary);
+  font-size: .8rem;
 }
 
-app-button-list.toolbar.horizonal > button {
-  border-left: none;
+nav-ribbon-body > .NavRibbonTabContent > .NavRibbonTabGroup > .NavRibbonTabGroupBody > app-radio-button > button > span {
+  color: var(--text-color);
+  font-size: .875rem;
 }
 
-app-button-list.toolbar.horizonal > button:last-child {
-  border-top-right-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
+nav-ribbon-body > .NavRibbonTabContent > .NavRibbonTabGroup > .NavRibbonTabGroupBody > app-radio-button > button:hover > i {
+  box-shadow: var(--ribbon-item-shadow);
+  z-index: 1;
+  position: relative;
 }
 
-app-button-list.toolbar.horizonal > button:first-child {
-  border-left: 1px solid var(--form-element-border-color);
-  border-top-left-radius: var(--border-radius);
-  border-bottom-left-radius: var(--border-radius);
+nav-ribbon-body > .NavRibbonTabContent > .NavRibbonTabGroup > .NavRibbonTabGroupBody > app-radio-button > button[checked] > i {
+  color: var(--primary) !important;
 }
 
-app-button-list.toolbar.vertical {
-  place-self: flex-start;
-  width: auto;
-  height: 100%;
+nav-ribbon-body > .NavRibbonTabContent > .NavRibbonTabGroup > .NavRibbonTabGroupBody > .NavRibbonElementContainer {
+  flex-direction: column-reverse;
+  gap: 0;
+  display: flex;
 }
 
-app-button-list.toolbar.vertical > button {
-  border-top: none;
+nav-ribbon-body > .NavRibbonTabContent > .NavRibbonTabGroup > .NavRibbonTabGroupBody > .NavRibbonElementContainer > select {
+  background-color: var(--base-down);
+  cursor: pointer;
+  min-width: 100px;
+  height: 100%;
+  margin: 0;
+  font-size: 11px;
+  line-height: 1rem;
+  --color: var(--text-color) !important;
 }
 
-app-button-list.toolbar.vertical > button:last-child {
-  border-bottom-left-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
+nav-ribbon-body > .NavRibbonTabContent > .NavRibbonTabGroup > .NavRibbonTabGroupBody > .NavRibbonElementContainer > select option {
+  font-size: 11px;
 }
 
-app-button-list.toolbar.vertical > button:first-child {
-  border-top: 1px solid var(--form-element-border-color);
-  border-top-left-radius: var(--border-radius);
-  border-top-right-radius: var(--border-radius);
+nav-ribbon-body > .NavRibbonTabContent > .NavRibbonTabGroup > .NavRibbonTabGroupBody > .NavRibbonElementContainer > select:hover {
+  box-shadow: var(--ribbon-item-shadow);
 }
 
-app-sub-panel {
-  position: relative;
-  overflow: hidden;
+nav-ribbon-body > .NavRibbonTabContent > .NavRibbonTabGroup > .NavRibbonTabGroupBody > .NavRibbonElementContainer > input {
+  background-color: var(--base-down);
+  cursor: pointer;
+  min-width: 100px;
+  margin: 0;
+  line-height: 1rem;
+  --color: var(--text-color) !important;
 }
 
-app-sub-panel > app-tab-container .appTabContainerBody {
-  box-shadow: var(--glass-shadow);
+nav-ribbon-body > .NavRibbonTabContent > .NavRibbonTabGroup > .NavRibbonTabGroupBody > .NavRibbonElementContainer > input:hover {
+  box-shadow: var(--ribbon-item-shadow);
 }
 
-app-sub-panel.Pos-Center {
-  grid-area: ga_center;
+nav-ribbon-body > .NavRibbonTabContent > .NavRibbonTabGroup > .NavRibbonTabGroupBody > .NavRibbonElementContainer > label {
+  text-align: center;
+  color: var(--muted-color);
+  font-size: 10px;
+  display: none;
 }
 
-app-sub-panel.Pos-Center > app-tab-container > .appTabContainerBody > app-tab {
-  padding: 0;
+nav-ribbon-body > .NavRibbonTabContent > .NavRibbonTabGroup > .NavRibbonTabGroupTitle {
+  text-align: center;
+  color: var(--muted-color);
+  font-size: .8rem;
 }
 
-app-sub-panel.Pos-Left {
-  width: min(250px, 20vw);
-  padding-right: var(--panel-spacing);
-  grid-area: ga_left;
-  min-width: 100px !important;
+nav-ribbon-body > .NavRibbonTabContent > .NavRibbonGroupSeperator {
+  box-sizing: border-box;
+  background-color: var(--mid-d4);
+  width: 1px;
+  height: auto;
 }
 
-app-sub-panel.Pos-Right {
-  width: min(250px, 20vw);
-  padding-left: var(--panel-spacing);
-  grid-area: ga_right;
-  min-width: 100px !important;
+nav-ribbon-body > .NavRibbonTabContent > .NavRibbonGroupSeperator:last-child {
+  height: 0;
 }
 
-app-sub-panel.Pos-Bottom {
-  height: min(200px, 20vh);
-  padding-top: var(--panel-spacing);
-  grid-area: ga_bottom;
-  min-height: 100px !important;
+nav-ribbon-body.floating {
+  z-index: 0;
+  -webkit-backdrop-filter: blur(15px);
+  position: absolute;
+  top: -60px;
 }
 
-app-sub-panel > .panel-resizer {
-  z-index: 100;
-  opacity: .1;
-  transition: all .5s;
-  position: absolute;
+nav-ribbon-body.floating > .pin-button {
+  display: none;
 }
 
-app-sub-panel > .panel-resizer:hover {
-  opacity: .8;
-  border-radius: var(--border-radius);
-  box-shadow: 0 0 20px 0px var(--primary);
+nav-ribbon-body.floating.open {
+  display: grid;
+  top: 0;
 }
 
-app-sub-panel > .panel-resizer.panel-resizer-b {
-  cursor: row-resize;
-  width: calc(100% - 24px);
-  height: calc(var(--panel-spacing) / 2);
-  top: calc(var(--panel-spacing) / 4);
-  left: 12px;
+nav-ribbon-body.floating.open > .pin-button {
+  display: block;
 }
 
-app-sub-panel > .panel-resizer.panel-resizer-b:hover {
-  background: var(--accent-bg-img);
+app-radio-button {
+  background: var(--background-color);
+  flex-direction: row;
+  width: 100%;
+  display: flex;
+  position: relative;
 }
 
-app-sub-panel > .panel-resizer.panel-resizer-l {
-  cursor: col-resize;
-  height: calc(100% - 50px);
-  width: calc(var(--panel-spacing) / 2);
-  right: calc(var(--panel-spacing) / 4);
-  bottom: 12px;
+app-radio-button > button {
+  padding: calc(var(--spacing)  - 1px);
+  border-radius: 0;
+  align-items: center;
+  font-weight: normal;
 }
 
-app-sub-panel > .panel-resizer.panel-resizer-l:hover {
-  background: var(--accent-bg-img-v);
+app-radio-button > button > i {
+  font-size: 1.2rem;
 }
 
-app-sub-panel > .panel-resizer.panel-resizer-r {
-  cursor: col-resize;
-  height: calc(100% - 50px);
-  width: calc(var(--panel-spacing) / 2);
-  bottom: 12px;
-  left: calc(var(--panel-spacing) / 4);
+app-radio-button > button:hover > i {
+  opacity: .5;
 }
 
-app-sub-panel > .panel-resizer.panel-resizer-r:hover {
-  background: var(--accent-bg-img-v);
+app-radio-button > button[checked] > i {
+  color: var(--primary-inverse) !important;
 }
 
-app-accordion {
-  color: var(--color);
-  backdrop-filter: blur(5px);
-  border: var(--glass-border);
-  border-radius: var(--border-radius);
-  background: var(--glass-bg-img);
-  overflow: hidden;
-  box-shadow: 0 4px 30px #0000001a;
+app-radio-button > button:first-child {
+  border-top-left-radius: var(--border-radius);
+  border-bottom-left-radius: var(--border-radius);
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
-app-accordion > .accordion-header {
-  padding: var(--spacing) var(--spacing-2x);
-  cursor: pointer;
-  background-color: var(--base-down);
-  box-shadow: var(--drop-shadow-m);
-  grid-template-columns: 1fr auto;
-  align-items: center;
-  transition: background-color .3s;
-  display: grid;
+app-radio-button > button:last-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-top-right-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
+}
+
+app-radio-button.flat {
+  width: 100%;
+}
+
+app-radio-button.flat > button {
+  color: var(--text-color);
+  background-color: #0000;
+  border: none;
+}
+
+app-radio-button.flat > button > i {
+  color: var(--primary);
+  font-size: 1.2rem;
+}
+
+app-radio-button.flat > button:hover {
+  background-color: #0000 !important;
+}
+
+app-radio-button.flat > button:focus {
+  box-shadow: none;
+}
+
+app-radio-button.flat > button[checked] > i {
+  color: var(--primary) !important;
+}
+
+app-radio-button[readonly] * {
+  cursor: default !important;
+  pointer-events: none !important;
+}
+
+app-dropdown-button {
+  grid-template-columns: 1fr auto;
+  grid-template-areas: "main icon";
+  display: grid;
+  position: relative;
+  padding: 0 !important;
+}
+
+app-dropdown-button > app-dropdown > .ddBody > app-button-list {
+  border-radius: var(--border-radius);
+}
+
+app-dropdown-button > app-dropdown button {
+  color: var(--mid-u2);
+  background-color: var(--primary-inverse);
+  border: none;
+}
+
+app-dropdown-button > app-dropdown button:hover {
+  background-color: var(--mid-d5);
+}
+
+app-dropdown-button > .mainButton {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  grid-area: main;
+  width: 100%;
+}
+
+app-dropdown-button > .headButton {
+  grid-area: main;
+  width: 100%;
+}
+
+app-dropdown-button > .headButton > i {
+  right: var(--spacing);
+  position: absolute;
+}
+
+app-dropdown-button > .headButton > i:before {
+  transition: rotate .5s;
+}
+
+app-dropdown-button > .headButton > i.up:before {
+  rotate: 180deg;
+}
+
+app-dropdown-button > .headButton.open {
+  opacity: .7;
+}
+
+app-dropdown-button > .iconButton {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  grid-area: icon;
+}
+
+app-dropdown-button > .iconButton i:before {
+  transition: rotate .5s;
+}
+
+app-dropdown-button > .iconButton.up i:before {
+  rotate: 180deg;
+}
+
+app-button-list {
+  display: flex;
+}
+
+app-button-list > button {
+  border-radius: 0;
+  align-items: center;
+  height: 100%;
+  margin-bottom: 0;
+}
+
+app-button-list:not(.toolbar).vertical > button {
+  border-bottom: 1px solid var(--form-element-border-color);
+  width: 100%;
+}
+
+app-button-list:not(.toolbar).vertical > button:last-child {
+  border-bottom: none;
+}
+
+app-button-list:not(.toolbar).horizonal > button {
+  width: auto;
+}
+
+app-button-list:not(.toolbar).horizonal > button:first-child {
+  border-top-left-radius: var(--border-radius);
+  border-bottom-left-radius: var(--border-radius);
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+app-button-list:not(.toolbar).horizonal > button:last-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-top-right-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
+}
+
+app-button-list.toolbar {
+  background-color: var(--mid-d4);
+  padding: var(--spacing-half);
+}
+
+app-button-list.toolbar > button {
+  background-color: var(--primary-inverse);
+  color: var(--h5-color);
+  border: 1px solid var(--form-element-border-color);
+  width: auto;
+  padding: var(--spacing);
+}
+
+app-button-list.toolbar > button > span {
+  display: none;
+}
+
+app-button-list.toolbar > button:hover {
+  color: var(--primary);
+}
+
+app-button-list.toolbar.horizonal > button {
+  border-left: none;
+}
+
+app-button-list.toolbar.horizonal > button:last-child {
+  border-top-right-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
+}
+
+app-button-list.toolbar.horizonal > button:first-child {
+  border-left: 1px solid var(--form-element-border-color);
+  border-top-left-radius: var(--border-radius);
+  border-bottom-left-radius: var(--border-radius);
+}
+
+app-button-list.toolbar.vertical {
+  place-self: flex-start;
+  width: auto;
+  height: 100%;
+}
+
+app-button-list.toolbar.vertical > button {
+  border-top: none;
+}
+
+app-button-list.toolbar.vertical > button:last-child {
+  border-bottom-left-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
+}
+
+app-button-list.toolbar.vertical > button:first-child {
+  border-top: 1px solid var(--form-element-border-color);
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
+}
+
+app-accordion {
+  color: var(--color);
+  backdrop-filter: blur(5px);
+  border: var(--glass-border);
+  border-radius: var(--border-radius);
+  background: var(--glass-bg-img);
+  overflow: hidden;
+  box-shadow: 0 4px 30px #0000001a;
+}
+
+app-accordion > .accordion-header {
+  padding: var(--spacing) var(--spacing-2x);
+  cursor: pointer;
+  background-color: var(--base-down);
+  box-shadow: var(--drop-shadow-m);
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  transition: background-color .3s;
+  display: grid;
 }
 
 app-accordion > .accordion-header > .arrow {
@@ -6122,186 +6144,431 @@ app-taginput > .input::-webkit-inner-spin-button {
   margin: 0;
 }
 
-app-taginput > .input:focus {
-  box-shadow: none;
-  border: none;
+app-taginput > .input:focus {
+  box-shadow: none;
+  border: none;
+}
+
+@keyframes dialogMessageBoxOpen {
+  from {
+    opacity: 0;
+    transform: scale(0);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.MessageBox {
+  --messagebox-border-color: var(--primary);
+  --messagebox-accent-color: var(--grey-400);
+}
+
+.MessageBox.success {
+  --messagebox-border-color: var(--success);
+}
+
+.MessageBox.error {
+  --messagebox-border-color: var(--danger);
+}
+
+.MessageBox.info {
+  --messagebox-border-color: var(--info);
+}
+
+.MessageBox.warning {
+  --messagebox-border-color: var(--warning);
+}
+
+.MessageBox::backdrop {
+  background: var(--modal-overlay-background-color);
+}
+
+.MessageBox[open] > app-msgbox-content {
+  transform: none;
+}
+
+.MessageBox.internal-mb {
+  width: 100%;
+  height: 100%;
+  backdrop-filter: var(--modal-overlay-backdrop-filter);
+  background-color: var(--modal-overlay-background-color);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: absolute;
+  inset: 0;
+}
+
+.MessageBox > app-msgbox-content {
+  border-radius: var(--border-radius);
+  background: var(--background-color);
+  min-width: 10vw;
+  box-shadow: var(--drop-shadow);
+  grid-template-rows: auto 1fr auto;
+  animation: .2s ease-in dialogMessageBoxOpen;
+  display: grid;
+  transform: scale(0);
+}
+
+.MessageBox > app-msgbox-content > .title {
+  text-align: center;
+  background-color: var(--messagebox-border-color);
+  color: var(--primary-inverse);
+  width: 100%;
+  min-height: 24px;
+  padding: 8px 5px;
+  font-size: 1.1rem;
+}
+
+.MessageBox > app-msgbox-content > .contentContainer {
+  max-width: 80vw;
+  max-height: 60vh;
+  padding: 10px;
+  overflow-y: visible;
+}
+
+.MessageBox > app-msgbox-content > .contentContainer > .textContent {
+  text-align: center;
+  word-wrap: normal;
+  padding: 10px;
+}
+
+.MessageBox > app-msgbox-content > .buttons {
+  padding: var(--spacing);
+  flex-flow: row;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  display: flex;
+}
+
+.MessageBox > app-msgbox-content > .buttons > button {
+  padding: var(--spacing) calc(var(--spacing) * 2);
+  margin-bottom: 0;
+}
+
+.MessageBox > app-msgbox-content > .buttons > .okButton, .MessageBox > app-msgbox-content > .buttons > .cancelButton {
+  width: auto;
+}
+
+app-rad-menu {
+  --size: 150px;
+  --stripSize: calc(var(--size) / 4);
+  --stripIconSize: 1.5rem;
+  --iconY: calc((var(--stripSize)  + (var(--stripSize)  - var(--stripIconSize)) / 2) * -1);
+  width: var(--size);
+  height: var(--size);
+  visibility: hidden;
+  z-index: -1;
+  position: fixed;
+  overflow: hidden;
+}
+
+app-rad-menu.on {
+  visibility: visible;
+  z-index: 10000;
+}
+
+app-rad-menu:has([data-chosen="true"]) {
+  cursor: pointer;
+}
+
+app-rad-menu:after {
+  content: "";
+  background-color: var(--active);
+  opacity: .5;
+  border-radius: 50%;
+  width: 5px;
+  height: 5px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+app-rad-menu .arc {
+  rotate: var(--rotation);
+  aspect-ratio: 1;
+  width: 100%;
+  padding: var(--stripSize);
+  box-sizing: border-box;
+  background-color: var(--primary);
+  mask: linear-gradient(#0000 0 0) content-box intersect, conic-gradient(#000 var(--sizeAng), #0000 0);
+  transition: all .5s;
+  transition-property: background-color opacity;
+  pointer-events: none;
+  opacity: .5;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: absolute;
+}
+
+app-rad-menu .arc[data-chosen="true"] {
+  opacity: 1;
+}
+
+app-rad-menu .arc.empty {
+  background-color: var(--mid-d3);
+  opacity: 1;
+}
+
+app-rad-menu .arc i {
+  color: var(--background-color);
+  opacity: .8;
+  font-size: var(--stripIconSize);
+  z-index: 1;
+  transform: rotate(var(--halfSizeAng)) translate(0, calc(var(--iconY)  - 50%));
+  position: absolute;
+}
+
+app-ribbon {
+  --tab-accent-hover: var(--mid-d2);
+  --tab-body: var(--mid-d4);
+  --ribbon-item-shadow: 0px 1px 5px 2px var(--drop-shadow-color);
+  --tab-header-background: transparent !important;
+  --tab-header-foreground: var(--color) !important;
+  --tab-accent-color: var(--background-color) !important;
+}
+
+app-ribbon > app-tab-container {
+  height: inherit;
+  padding: 0 var(--spacing-2x) var(--spacing) var(--spacing-2x);
+  grid-template-rows: minmax(21px, auto) 1fr;
+  transition: grid-template-rows .5s;
+}
+
+app-ribbon > app-tab-container > .appTabContainerTop {
+  padding: 0 var(--spacing-2x);
+}
+
+app-ribbon > app-tab-container > .appTabContainerTop > .appTabContainerHeader {
+  z-index: 1;
+  --tab-border-h: 3px;
+}
+
+app-ribbon > app-tab-container > .appTabContainerTop > .appTabContainerHeader app-tab-header {
+  --tab-header-border-color: transparent;
+  border-top: none;
+  border-bottom: var(--tab-border-h) solid;
+  border-bottom-color: #0000;
+  transition: box-shadow .5s;
+}
+
+app-ribbon > app-tab-container > .appTabContainerTop > .appTabContainerHeader app-tab-header .title {
+  padding: 3px 9px;
+}
+
+app-ribbon > app-tab-container > .appTabContainerTop > .appTabContainerHeader app-tab-header:hover {
+  border-bottom: var(--tab-border-h) solid;
+  border-bottom-color: var(--tab-accent-hover);
+}
+
+app-ribbon > app-tab-container > .appTabContainerTop > .appTabContainerHeader app-tab-header.active {
+  --tab-accent-color: var(--primary);
+  --tab-header-border-color: var(--mid-d4);
+  border-bottom: var(--tab-border-h) solid;
+  border-bottom-color: var(--tab-accent-color);
+  background-color: #0000;
+  border-left: none;
+  border-right: none;
+}
+
+app-ribbon > app-tab-container > .appTabContainerTop > .appTabContainerHeader app-tab-header.active:after, app-ribbon > app-tab-container > .appTabContainerTop:after {
+  display: none;
+}
+
+app-ribbon > app-tab-container > .appTabContainerBody {
+  background: var(--bd-tr-50);
+  background-image: var(--glass-bg-img);
+  -webkit-backdrop-filter: blur(5px);
+  border-radius: 6px;
+  width: 100%;
+  height: 0;
+  transition: height .5s linear;
+  position: absolute;
+  top: 0;
+  box-shadow: 0 4px 30px #0000001a;
+  border: none !important;
+}
+
+app-ribbon > app-tab-container > .appTabContainerBody > app-tab {
+  padding-top: var(--spacing);
+  padding-bottom: var(--spacing-half);
+}
+
+app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent {
+  gap: var(--spacing);
+  padding-left: var(--spacing);
+  --text-color: var(--primary-u5);
+  display: flex;
+}
+
+app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup {
+  gap: var(--spacing);
+  grid-template-rows: 1fr auto;
+  display: grid;
 }
 
-@keyframes dialogMessageBoxOpen {
-  from {
-    opacity: 0;
-    transform: scale(0);
-  }
+app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody {
+  gap: var(--spacing-half);
+  display: flex;
+}
 
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
+app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody .disabled {
+  opacity: .5;
+  pointer-events: none;
+  cursor: not-allowed;
 }
 
-.MessageBox {
-  --messagebox-border-color: var(--primary);
-  --messagebox-accent-color: var(--grey-400);
+app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody .active {
+  outline: 3px solid var(--active);
+  outline-offset: -3px;
 }
 
-.MessageBox.success {
-  --messagebox-border-color: var(--success);
+app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > button {
+  --border-color: transparent;
+  background: var(--base-down);
+  width: auto;
+  min-width: 50px;
+  max-width: 140px;
+  padding: var(--spacing);
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing);
+  flex-flow: row;
+  margin-bottom: 0;
+  font-weight: normal;
+  display: flex;
 }
 
-.MessageBox.error {
-  --messagebox-border-color: var(--danger);
+app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > button > i {
+  font-size: 16px;
 }
 
-.MessageBox.info {
-  --messagebox-border-color: var(--info);
+app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > button > span {
+  color: var(--text-color);
+  padding: 0;
+  font-size: .875rem;
 }
 
-.MessageBox.warning {
-  --messagebox-border-color: var(--warning);
+app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > button:hover {
+  box-shadow: var(--ribbon-item-shadow);
 }
 
-.MessageBox::backdrop {
-  background: var(--modal-overlay-background-color);
+app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > button[active]:after {
+  opacity: .5;
 }
 
-.MessageBox[open] > app-msgbox-content {
-  transform: none;
+app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > app-radio-button {
+  background-color: var(--tranparent);
+  grid-template-rows: auto auto;
+  grid-auto-flow: column;
+  align-content: center;
+  gap: 2px;
+  padding: 2px;
+  display: grid;
 }
 
-.MessageBox.internal-mb {
-  width: 100%;
-  height: 100%;
-  backdrop-filter: var(--modal-overlay-backdrop-filter);
-  background-color: var(--modal-overlay-background-color);
-  justify-content: center;
+app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > app-radio-button > button {
+  background-color: var(--tranparent);
+  border: none;
+  border-radius: 0;
   align-items: center;
+  margin-bottom: 0;
+  padding: 0 4px;
+  font-weight: normal;
   display: flex;
-  position: absolute;
-  inset: 0;
 }
 
-.MessageBox > app-msgbox-content {
-  border-radius: var(--border-radius);
-  background: var(--background-color);
-  min-width: 10vw;
-  box-shadow: var(--drop-shadow);
-  grid-template-rows: auto 1fr auto;
-  animation: .2s ease-in dialogMessageBoxOpen;
-  display: grid;
-  transform: scale(0);
+app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > app-radio-button > button > i {
+  color: var(--primary);
+  font-size: .8rem;
 }
 
-.MessageBox > app-msgbox-content > .title {
-  text-align: center;
-  background-color: var(--messagebox-border-color);
-  color: var(--primary-inverse);
-  width: 100%;
-  min-height: 24px;
-  padding: 8px 5px;
-  font-size: 1.1rem;
+app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > app-radio-button > button > span {
+  color: var(--text-color);
+  font-size: .875rem;
 }
 
-.MessageBox > app-msgbox-content > .contentContainer {
-  max-width: 80vw;
-  max-height: 60vh;
-  padding: 10px;
-  overflow-y: visible;
+app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > app-radio-button > button:hover > i {
+  box-shadow: var(--ribbon-item-shadow);
+  z-index: 1;
+  position: relative;
 }
 
-.MessageBox > app-msgbox-content > .contentContainer > .textContent {
-  text-align: center;
-  word-wrap: normal;
-  padding: 10px;
+app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > app-radio-button > button[checked] > i {
+  color: var(--primary) !important;
 }
 
-.MessageBox > app-msgbox-content > .buttons {
-  padding: var(--spacing);
-  flex-flow: row;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
+app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > .ribbonElementContainer {
+  flex-direction: column-reverse;
+  gap: 0;
   display: flex;
 }
 
-.MessageBox > app-msgbox-content > .buttons > button {
-  padding: var(--spacing) calc(var(--spacing) * 2);
-  margin-bottom: 0;
+app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > .ribbonElementContainer > select {
+  background-color: var(--base-down);
+  cursor: pointer;
+  min-width: 100px;
+  height: 100%;
+  margin: 0;
+  font-size: 11px;
+  line-height: 1rem;
+  --color: var(--text-color) !important;
 }
 
-.MessageBox > app-msgbox-content > .buttons > .okButton, .MessageBox > app-msgbox-content > .buttons > .cancelButton {
-  width: auto;
+app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > .ribbonElementContainer > select option {
+  font-size: 11px;
 }
 
-app-rad-menu {
-  --size: 150px;
-  --stripSize: calc(var(--size) / 4);
-  --stripIconSize: 1.5rem;
-  --iconY: calc((var(--stripSize)  + (var(--stripSize)  - var(--stripIconSize)) / 2) * -1);
-  width: var(--size);
-  height: var(--size);
-  visibility: hidden;
-  z-index: -1;
-  position: fixed;
-  overflow: hidden;
+app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > .ribbonElementContainer > select:hover {
+  box-shadow: var(--ribbon-item-shadow);
 }
 
-app-rad-menu.on {
-  visibility: visible;
-  z-index: 10000;
+app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > .ribbonElementContainer > input {
+  background-color: var(--base-down);
+  cursor: pointer;
+  min-width: 100px;
+  margin: 0;
+  line-height: 1rem;
+  --color: var(--text-color) !important;
 }
 
-app-rad-menu:has([data-chosen="true"]) {
-  cursor: pointer;
+app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > .ribbonElementContainer > input:hover {
+  box-shadow: var(--ribbon-item-shadow);
 }
 
-app-rad-menu:after {
-  content: "";
-  background-color: var(--active);
-  opacity: .5;
-  border-radius: 50%;
-  width: 5px;
-  height: 5px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupBody > .ribbonElementContainer > label {
+  text-align: center;
+  color: var(--muted-color);
+  font-size: 10px;
+  display: none;
 }
 
-app-rad-menu .arc {
-  rotate: var(--rotation);
-  aspect-ratio: 1;
-  width: 100%;
-  padding: var(--stripSize);
-  box-sizing: border-box;
-  background-color: var(--primary);
-  mask: linear-gradient(#0000 0 0) content-box intersect, conic-gradient(#000 var(--sizeAng), #0000 0);
-  transition: all .5s;
-  transition-property: background-color opacity;
-  pointer-events: none;
-  opacity: .5;
-  border-radius: 50%;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  position: absolute;
+app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonTabGroup > .RibbonTabGroupTitle {
+  text-align: center;
+  color: var(--muted-color);
+  font-size: .8rem;
 }
 
-app-rad-menu .arc[data-chosen="true"] {
-  opacity: 1;
+app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonGroupSeperator {
+  box-sizing: border-box;
+  background-color: var(--mid-d4);
+  width: 1px;
+  height: auto;
 }
 
-app-rad-menu .arc.empty {
-  background-color: var(--mid-d3);
-  opacity: 1;
+app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrapper > .RibbonTabContent > .RibbonGroupSeperator:last-child {
+  height: 0;
 }
 
-app-rad-menu .arc i {
-  color: var(--background-color);
-  opacity: .8;
-  font-size: var(--stripIconSize);
-  z-index: 1;
-  transform: rotate(var(--halfSizeAng)) translate(0, calc(var(--iconY)  - 50%));
-  position: absolute;
+app-ribbon > app-tab-container:hover > .appTabContainerBody {
+  height: 60px;
 }
 
 app-host {
@@ -6331,23 +6598,13 @@ app-host > nav-host {
 nav-header {
   color: var(--primary-u5);
   -webkit-user-drag: none;
-  grid-template-columns: auto 1fr auto;
   height: 2rem;
+  padding: 0 var(--panel-spacing);
+  grid-template-columns: auto 1fr auto;
   display: grid;
   position: relative;
 }
 
-nav-header:after {
-  content: "";
-  width: 100%;
-  height: var(--header-bar-h);
-  z-index: 1;
-  background-image: linear-gradient(to right, var(--primary) 0%, var(--primary) 30%, var(--primary-2) 100%);
-  background-size: 100%;
-  position: absolute;
-  top: 0;
-}
-
 nav-header .iconButton {
   border: none;
   width: auto;
@@ -6375,12 +6632,13 @@ nav-header button i:hover {
 }
 
 nav-header > .header-left {
+  padding: 0 var(--panel-spacing);
   flex-flow: row;
+  align-items: stretch;
   display: flex;
 }
 
 nav-header > .header-left > .HeaderNavContainer {
-  padding-left: var(--spacing);
   flex-flow: row;
   align-items: center;
   display: flex;
@@ -6397,21 +6655,30 @@ nav-header > .header-left > .HeaderNavContainer > .HeaderNavButton.active {
   pointer-events: none;
 }
 
-nav-header > .header-left > .HeaderNavContainer > .CurrentPageTitle {
-  margin-left: var(--spacing);
-  min-width: 100px;
+nav-header > .header-left > .nav-ribbon-header-container {
+  padding-left: var(--panel-spacing);
 }
 
 nav-header > .header-center {
+  color: var(--base-up);
   justify-content: center;
   align-items: center;
   display: flex;
 }
 
+nav-header > .header-center > .CurrentPageTitle {
+  padding-left: var(--spacing);
+  min-width: 100px;
+}
+
+nav-header > .header-center > .CurrentPageTitle:before {
+  content: "– ";
+}
+
 nav-header > .header-right {
   align-items: center;
   gap: var(--spacing);
-  padding: 0 var(--spacing);
+  padding: 0 var(--panel-spacing);
   flex-flow: row;
   display: flex;
 }