@genexus/genexus-ide-ui 0.0.93 → 0.0.94

package/dist/genexus-ide-ui/{p-8f66c5b3.entry.js → p-ff264cda.entry.js}

@@ -1,4 +1,4 @@
-import { r as t, c as i, g as e, a as o, h as s, H as r } from "./p-1e275d2c.js";
+import { r as t, c as i, g as e, a as o, h as s, H as r } from "./p-d8a08b43.js";
 
 const a = ':host{--text-color:var(--black);--font-family:"Source Sans Pro", sans-serif;--font-size:14px;--font-weight:bold;--item-color:var(--lightGray);--line-color:var(--lightGray);--item-active-color:var(--black)}:host .item{width:250px}:host .li-item{position:relative;display:flex;flex-direction:column}:host .li-item--active .round-tab{background-color:var(--item-active-color)}:host .li-item--active .horizontal-line{background-color:var(--item-active-color)}:host .horizontal-line{background-color:var(--line-color);width:100%;height:3px;position:absolute;z-index:1;top:28px}:host .round-tab{width:25px;height:25px;border-radius:50%;background-color:var(--item-color);margin-left:auto;margin-right:auto;display:flex;align-items:center;justify-content:center;z-index:2}:host .round-tab:hover{cursor:pointer}:host .text{color:var(--text-color);font-size:var(--font-size);font-family:var(--font-family);font-weight:var(--font-weight);letter-spacing:0.38px;text-align:center;margin-left:auto;margin-right:auto}:host .text:hover{cursor:pointer}:host .item-icon{position:absolute;z-index:2}';
 
@@ -74,4 +74,4 @@ const l = class {
 l.style = a;
 
 export { l as ch_step_list_item };
-//# sourceMappingURL=p-8f66c5b3.entry.js.map
+//# sourceMappingURL=p-ff264cda.entry.js.map

package/dist/genexus-ide-ui/{p-eeaf79d6.entry.js → p-ffa0a15e.entry.js}

@@ -1,4 +1,4 @@
-import { r as t, g as r, h as e, H as o } from "./p-1e275d2c.js";
+import { r as t, g as r, h as e, H as o } from "./p-d8a08b43.js";
 
 const a = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{cursor:initial}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px);height:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px);border:var(--gxg-scrollbar-track-thumb-border);background-clip:padding-box}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04)}:host{display:inline-block;background:var(--color-background);border-radius:var(--border-width-md);box-shadow:var(--box-shadow-01)}:host .menu__header{border-bottom-style:var(--border-style-regular);border-bottom-width:var(--border-width-sm);border-bottom-color:var(--gray-04)}:host .menu__header__title{color:var(--color-on-background);font-family:var(--font-family-primary);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);text-transform:uppercase;margin-top:0;margin-bottom:0;padding:var(--spacing-comp-03) var(--spacing-comp-05) var(--spacing-comp-03) var(--spacing-comp-05)}:host .menuList{list-style-type:none;display:block;padding-left:0;margin:0;font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}:host([full-width]){width:100% !important}:host([tabs]) .menuList{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}:host([tabs]) .menuList ::slotted(gxg-menu-item){text-transform:uppercase}";
 
@@ -39,4 +39,4 @@ const i = class {
 i.style = a;
 
 export { i as gxg_menu };
-//# sourceMappingURL=p-eeaf79d6.entry.js.map
+//# sourceMappingURL=p-ffa0a15e.entry.js.map

package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/flexible-layout/flexible-layout/flexible-layout.css

@@ -1,3 +1,19 @@
 :host {
   display: contents;
+}
+
+.droppable-area {
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  border: unset;
+  color: unset;
+  inset-block: var(--ch-flexible-layout-drop-area-block-start) var(--ch-flexible-layout-drop-area-block-end);
+  inset-inline: var(--ch-flexible-layout-drop-area-inline-start) var(--ch-flexible-layout-drop-area-inline-end);
+  background-color: color-mix(in srgb, currentColor 15%, transparent);
+  transition-property: inset;
+  transition-duration: 150ms;
+  transition-timing-function: ease-in-out;
+  pointer-events: none;
 }

package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/layout-splitter/layout-splitter.css

@@ -1,12 +1,11 @@
 *,
-::before,
-::after {
+::after,
+::before {
   box-sizing: border-box;
 }
 
 :host {
   --ch-drag-bar__size: 5px;
-  --ch-drag-bar__position-fix: calc(0.5px - var(--ch-drag-bar__size) / 2);
   display: grid;
   position: relative;
   block-size: 100%;
@@ -18,52 +17,63 @@
 }
 
 .bar {
-  position: absolute;
+  --position-fix: calc((var(--size, 0px) - var(--ch-drag-bar__size)) / 2);
+  position: relative;
+  inline-size: 100%;
+  block-size: 100%;
+  background-color: currentColor;
   z-index: 1;
 }
+.bar[aria-disabled] {
+  pointer-events: none;
+}
+.bar:focus-visible {
+  outline: unset;
+}
 .bar::after {
   content: "";
   display: flex;
   position: absolute;
-  inline-size: 100%;
-  block-size: 100%;
   background-color: currentColor;
   opacity: 0;
-  transition: opacity 0s linear 200ms;
+  transition: opacity 0s linear;
 }
-.bar:hover::after, .bar:active::after {
+.bar:is(:active, :focus-visible, :hover)::after {
   opacity: 1;
 }
+.bar:hover::after {
+  transition-delay: 250ms;
+}
 
-.container {
+.leaf {
+  display: contents;
+}
+
+.group {
   display: grid;
   position: relative;
 }
 
 .direction--columns {
-  grid-template-columns: var(--ch-layout-splitter__grid-template-direction);
+  grid-template-columns: var(--ch-layout-splitter__distribution);
 }
 .direction--columns > .bar {
-  inset-block: 0;
-  inset-inline-start: calc(var(--ch-drag-bar__start-position));
-  inline-size: 1px;
   cursor: ew-resize;
 }
 .direction--columns > .bar::after {
+  block-size: 100%;
   inline-size: var(--ch-drag-bar__size);
-  margin-inline-start: var(--ch-drag-bar__position-fix);
+  margin-inline-start: var(--position-fix);
 }
 
 .direction--rows {
-  grid-template-rows: var(--ch-layout-splitter__grid-template-direction);
+  grid-template-rows: var(--ch-layout-splitter__distribution);
 }
 .direction--rows > .bar {
-  inset-inline: 0;
-  inset-block-start: calc(var(--ch-drag-bar__start-position));
-  block-size: 1px;
   cursor: ns-resize;
 }
 .direction--rows > .bar::after {
-  margin-block-start: var(--ch-drag-bar__position-fix);
   block-size: var(--ch-drag-bar__size);
+  inline-size: 100%;
+  margin-block-start: var(--position-fix);
 }

package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/tab/tab.css

@@ -5,22 +5,17 @@
 }
 
 :host {
+  --ch-tab-transition-duration: 150ms;
   display: grid;
   block-size: 100%;
   inline-size: 100%;
 }
 
-:host([type=blockStart]) {
-  grid-auto-flow: row;
-  grid-auto-rows: max-content;
-}
-
 :host([type=inlineStart]) {
   grid-template-columns: max-content 1fr;
 }
 
-:host([type=main]),
-:host([type=blockEnd]) {
+:host(.ch-tab-direction--block) {
   grid-template-rows: max-content 1fr;
 }
 
@@ -38,12 +33,19 @@
   cursor: pointer;
 }
 
-.caption-image {
+.caption-image,
+.decorative-image::before {
   display: block;
   block-size: 18px;
   inline-size: 18px;
 }
 
+.decorative-image::before {
+  content: "";
+  -webkit-mask: var(--ch-tab-decorative-image) 50% 50%/100% 100% no-repeat;
+  background-color: currentColor;
+}
+
 .close-button::after {
   content: "";
   display: flex;
@@ -54,31 +56,86 @@
   opacity: 0;
 }
 
-.main__button,
-.blockEnd__button {
+.block__button {
   display: flex;
   align-items: center;
 }
-.main__button:hover > .close-button::after, .main__button:focus-within > .close-button::after, .main__button[aria-selected=true] > .close-button::after,
-.blockEnd__button:hover > .close-button::after,
-.blockEnd__button:focus-within > .close-button::after,
-.blockEnd__button[aria-selected=true] > .close-button::after {
+.block__button:hover > .close-button::after, .block__button:focus-within > .close-button::after, .block__button[aria-selected=true] > .close-button::after {
   opacity: 1;
 }
 
-.inlineStart__tab-list,
-.inlineEnd__tab-list {
+.dragged-element {
+  opacity: 0;
+}
+.dragged-element--outside {
+  display: none;
+}
+
+.drag-preview {
+  --ch-tab-snap-drag-preview: clamp(
+    var(--ch-tab-tab-list-start),
+    var(--ch-tab-mouse-position),
+    var(--ch-tab-tab-list-end)
+  );
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 108;
+}
+.drag-preview:popover-open {
+  padding: 0;
+  margin: 0;
+  border: unset;
+  color: unset;
+  pointer-events: none;
+}
+.drag-preview-element {
+  cursor: grabbing;
+}
+.drag-preview--outside-tab-list {
+  transform: translate(calc(var(--ch-tab-mouse-position-x) - var(--ch-tab-mouse-offset-x)), calc(var(--ch-tab-mouse-position-y) - var(--ch-tab-mouse-offset-y)));
+}
+.drag-preview--inside-tab-list__block {
+  --ch-tab-mouse-position: calc(
+    var(--ch-tab-mouse-position-x) - var(--ch-tab-mouse-offset-x)
+  );
+  transform: translate(var(--ch-tab-snap-drag-preview), var(--ch-tab-button-position-y));
+}
+.drag-preview--inside-tab-list__inline {
+  --ch-tab-mouse-position: calc(
+    var(--ch-tab-mouse-position-y) - var(--ch-tab-mouse-offset-y)
+  );
+  transform: translate(var(--ch-tab-button-position-x), var(--ch-tab-snap-drag-preview));
+}
+
+.shifted-element {
+  transition: transform var(--ch-tab-transition-duration);
+}
+
+:host(.ch-tab-direction--block) .shifted-element--start {
+  transform: translate(calc(var(--ch-tab-button-size) * -1), 0);
+}
+:host(.ch-tab-direction--block) .shifted-element--end {
+  transform: translate(var(--ch-tab-button-size), 0);
+}
+
+:host(.ch-tab-direction--inline) .shifted-element--start {
+  transform: translateY(calc(var(--ch-tab-button-size) * -1));
+}
+:host(.ch-tab-direction--inline) .shifted-element--end {
+  transform: translateY(var(--ch-tab-button-size));
+}
+
+.inline__tab-list {
   display: grid;
   grid-auto-flow: row;
   grid-auto-rows: max-content;
 }
-
-.inlineEnd__tab-list {
+:host([type=inlineEnd]) > .inline__tab-list {
   order: 1;
 }
 
-.main__tab-list,
-.blockEnd__tab-list {
+.block__tab-list {
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: max-content;
@@ -86,27 +143,28 @@
 
 .page-container {
   display: grid;
+  grid-template: "selected" 1fr/1fr;
   block-size: 100%;
   inline-size: 100%;
 }
 
+.page--selected {
+  grid-area: selected;
+}
+
 @supports (content-visibility: hidden) {
-  .page-container--collapsed {
+  .page-container--collapsed,
+.page--hidden {
     content-visibility: hidden;
+  }
+
+  .page-container--collapsed {
     inline-size: 0;
   }
 }
 @supports not (content-visibility: hidden) {
-  .page-container--collapsed {
+  .page-container--collapsed,
+.page--hidden {
     display: none;
   }
-}
-.inlineStart__page,
-.inlineEnd__page {
-  display: grid;
-  grid-template-rows: max-content 1fr;
-}
-
-.page--hidden {
-  display: none;
 }

package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/test/test-flexible-layout/test-flexible-layout.css

@@ -57,6 +57,239 @@
   border-inline-start: 7px solid currentColor;
 }
 
+ch-grid::part(main)::-webkit-scrollbar {
+  width: 12px;
+  background-color: red;
+}
+
+ch-grid::part(main)::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+}
+
+ch-grid::part(main)::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
+}
+
+ch-grid:focus-within {
+  outline: unset;
+}
+
+ch-grid-columnset {
+  background-color: #d4d4d4;
+}
+
+ch-grid-column {
+  padding-block: 4px;
+  padding-inline: 4px;
+}
+
+ch-grid-column::part(bar) {
+  width: 100%;
+}
+
+ch-grid-column::part(bar)::after {
+  content: "";
+  order: 3;
+  margin-left: auto;
+}
+
+ch-grid-column::part(bar-resize) {
+  width: 3px;
+}
+
+ch-grid-rowset-legend {
+  background-color: lightgrey;
+}
+
+ch-grid-row {
+  padding-block: 2px;
+  border-block-end: 1px solid lightgrey;
+}
+
+ch-grid-row[highlighted] {
+  background-color: #e8e8e9;
+}
+
+ch-grid-row[selected] {
+  background-color: #cfdee6;
+}
+
+ch-grid-cell {
+  padding-inline: 4px;
+}
+
+ch-grid-cell[selected] {
+  background-color: #cfdee6;
+  outline: 1px solid #0266a0;
+  outline-offset: -1px;
+}
+
+ch-grid-cell::part(node-icon) {
+  width: 16px;
+  height: 16px;
+  background-repeat: no-repeat;
+  background-size: 12px 12px;
+  background-position: center;
+}
+
+ch-grid-row:has(> ch-grid-rowset) > ch-grid-cell::part(node-icon) {
+  background-image: url("../icons/folder.svg");
+}
+
+ch-grid-cell::part(node-icon) {
+  background-image: url("../icons/file.svg");
+}
+
+ch-grid-rowset-legend::part(icon) {
+  width: 16px;
+  height: 16px;
+  background-image: url("../icons/group.svg");
+  background-repeat: no-repeat;
+  background-size: 12px 12px;
+  background-position: center;
+}
+
+ch-grid::part(settings-mask) {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+ch-grid-cell::part(drag-icon) {
+  width: 16px;
+  height: 16px;
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+  background-position: center;
+  background-image: url("../icons/drag.svg");
+}
+
+ch-grid-cell::part(actions-icon) {
+  padding: 0px;
+  border: 0px none transparent;
+  background-color: transparent;
+  box-sizing: content-box;
+  font-family: inherit;
+  font-size: 100%;
+  width: 16px;
+  height: 16px;
+  background-repeat: no-repeat;
+  background-size: 10px 10px;
+  background-position: center;
+  background-image: url("../icons/view-more.svg");
+}
+
+/* caret */
+ch-grid-row > ch-grid-cell::part(caret),
+ch-grid-rowset > ch-grid-rowset-legend::part(caret) {
+  width: 16px;
+  height: 16px;
+  background-image: url("../icons/node_collapse.gif");
+}
+
+ch-grid-row:is([collapsed], [leaf="false"]:not(:has(> ch-grid-rowset))) > ch-grid-cell::part(caret),
+ch-grid-rowset[collapsed] > ch-grid-rowset-legend::part(caret) {
+  background-image: url("../icons/node_expand.gif");
+}
+
+ch-grid-actionbar {
+  display: inline-block;
+  margin-top: 10px;
+}
+
+ch-grid-action-refresh {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  background-repeat: no-repeat;
+  background-size: 24px 24px;
+  background-position: center;
+  background-image: url("../icons/refresh.svg");
+}
+
+ch-grid-action-settings {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  background-repeat: no-repeat;
+  background-size: 24px 24px;
+  background-position: center;
+  background-image: url("../icons/settings.svg");
+}
+
+ch-grid-column::part(bar-settings-button) {
+  all: unset;
+  width: 16px;
+  height: 16px;
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+  background-position: center;
+  background-image: url("../icons/settings.svg");
+}
+
+ch-grid-column::part(bar-sort-ascending) {
+  width: 16px;
+  height: 16px;
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+  background-position: center;
+  background-image: url("../icons/sort-asc.svg");
+}
+
+ch-grid-column::part(bar-sort-descending) {
+  width: 16px;
+  height: 16px;
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+  background-position: center;
+  background-image: url("../icons/sort-desc.svg");
+}
+
+/* grid settings window */
+ch-grid::part(settings-window),
+ch-grid-column::part(settings-window) {
+  background: white;
+  padding: 5px;
+  border: solid 1px grey;
+}
+
+ch-grid::part(settings-header),
+ch-grid-column::part(settings-header) {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 5px;
+}
+
+ch-grid::part(settings-caption),
+ch-grid-column::part(settings-caption) {
+  text-transform: uppercase;
+}
+
+ch-grid::part(settings-close),
+ch-grid-column::part(settings-close) {
+  background-position: center;
+  margin-bottom: 0px;
+  cursor: pointer;
+}
+
+/* indentation */
+ch-grid {
+  --indent: 16px;
+}
+
+.column-settings {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 300px;
+  height: 100px;
+}
+
+ch-grid-row-actions[show-on-row-hover]::part(window) {
+  margin-right: 19px;
+}
+
 *,
 ::after,
 ::before {
@@ -70,27 +303,26 @@ ch-test-flexible-layout {
 .flexible-layout::part(bar visible) {
   background-color: #e7e7e7;
 }
-.flexible-layout::part(inlineStart__page-container), .flexible-layout::part(inlineEnd__page-container) {
+.flexible-layout::part(inline__page-container) {
   background-color: #f2f2f2;
 }
-.flexible-layout::part(inlineStart__tab-list), .flexible-layout::part(inlineEnd__tab-list) {
+.flexible-layout::part(inline__tab-list) {
   background-color: #e8e8e9;
   inline-size: 48px;
   gap: 4px;
 }
-.flexible-layout::part(inlineStart__button), .flexible-layout::part(inlineEnd__button) {
+.flexible-layout::part(inline__button) {
   position: relative;
   block-size: 32px;
   inline-size: 48px;
 }
-.flexible-layout::part(inlineStart__button)::before, .flexible-layout::part(inlineEnd__button)::before {
-  content: "";
+.flexible-layout::part(inline__button)::before {
   display: flex;
   block-size: 100%;
   inline-size: 100%;
-  background-color: currentColor;
+  -webkit-mask-size: 16px;
 }
-.flexible-layout::part(inlineStart__button selected)::after, .flexible-layout::part(inlineEnd__button selected)::after {
+.flexible-layout::part(inline__button selected)::after {
   content: "";
   display: flex;
   position: absolute;
@@ -100,20 +332,11 @@ ch-test-flexible-layout {
   inline-size: 2px;
   background-color: currentColor;
 }
-.flexible-layout::part(inlineEnd__button selected)::after {
+.flexible-layout::part(inline__button inlineEnd selected)::after {
   inset-inline-start: unset;
   inset-inline-end: 1px;
 }
-.flexible-layout::part(caption-kb-explorer)::before {
-  -webkit-mask: url("assets/icons/toolbar/kb-explorer.svg") 50% 50%/16px 16px no-repeat;
-}
-.flexible-layout::part(caption-preferences)::before {
-  -webkit-mask: url("assets/icons/toolbar/preferences.svg") 50% 50%/16px 16px no-repeat;
-}
-.flexible-layout::part(caption-properties)::before {
-  -webkit-mask: url("assets/icons/toolbar/properties.svg") 50% 50%/16px 16px no-repeat;
-}
-.flexible-layout::part(inlineStart__page-name), .flexible-layout::part(inlineEnd__page-name) {
+.flexible-layout::part(inline__page-name) {
   display: block;
   padding-block: 8px;
   padding-inline: 16px;
@@ -128,22 +351,47 @@ ch-test-flexible-layout {
 .flexible-layout::part(close-button):focus-visible {
   outline: 1px solid currentColor;
 }
-.flexible-layout::part(main__button), .flexible-layout::part(blockEnd__button) {
+.flexible-layout::part(inline__button):focus-visible {
+  outline: 1px solid currentColor;
+  outline-offset: -1px;
+}
+.flexible-layout::part(block__button) {
   padding-block: 6px;
   padding-inline: 16px 8px;
   gap: 8px;
   background-color: #ececec;
 }
-.flexible-layout::part(main__button):focus-visible, .flexible-layout::part(blockEnd__button):focus-visible {
+.flexible-layout::part(block__button):focus-visible {
   outline: 1px solid currentColor;
   outline-offset: -1px;
 }
-.flexible-layout::part(main__button selected), .flexible-layout::part(blockEnd__button selected) {
+.flexible-layout::part(block__button selected) {
   background-color: #fff;
 }
-.flexible-layout::part(main__tab-list), .flexible-layout::part(blockEnd__tab-list) {
+.flexible-layout::part(block__button selected blockEnd) {
+  position: relative;
+}
+.flexible-layout::part(block__button selected blockEnd)::after {
+  content: "";
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline: 0;
+  block-size: 1px;
+  background-color: currentColor;
+  z-index: 1;
+}
+.flexible-layout::part(block__tab-list) {
   background-color: #f7f7f7;
 }
+.flexible-layout::part(block__page-container), .flexible-layout::part(inline__page-container) {
+  overflow: auto;
+}
+.flexible-layout::part(drag-preview-element block__button) {
+  padding-inline: 25px;
+}
+.flexible-layout::part(drag-preview--outside-tab-list) {
+  box-shadow: 0 3px 4px 1px #00000020;
+}
 
 .ch-tree-view-item--success::part(action)::before {
   grid-area: first-img;