@genesislcap/foundation-layout 14.387.2 → 14.388.1

package/.stylelintignore

@@ -0,0 +1 @@
+src/styles/layout.styles.ts

package/dist/custom-elements.json

@@ -1306,7 +1306,7 @@
         {
           "kind": "variable",
           "name": "layoutStyles",
-          "default": "css`\n  ${containerStyles}\n  ${loadingSpinnerStyles}\n\n  :host {\n    --foundation-tab-height: calc((( (var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 4) * 1px);\n  }\n\n  .lm_goldenlayout {\n    border-radius: calc(var(--control-corner-radius) * 1.5px);\n  }\n\n  .lm_stack.lm_item {\n    background-color: var(--neutral-layer-3);\n    border-radius: calc(var(--control-corner-radius) * 1.5px);\n  }\n  .lm_maximised .lm_header {\n    background-color: var(--neutral-layer-3);\n    border-radius: calc(var(--control-corner-radius) * 1.5px);\n    position: unset;\n  }\n\n  .lm_maximised .lm_header .lm_tabs {\n    z-index: 3;\n  }\n\n  .lm_content {\n    background-color: var(--neutral-layer-card-container);\n    border-radius: calc(var(--control-corner-radius) * 1.5px);\n    border: 1px solid;\n    border-color: var(--neutral-stroke-rest);\n    box-sizing: border-box;\n    color: var(--neutral-foreground-rest);\n  }\n\n  .lm_header .lm_tabs {\n    padding: 0 16px;\n  }\n\n  .lm_stack > .lm_items {\n    box-shadow: 0px -1px 15px rgba(0, 0, 0, 0.15);\n  }\n\n  .lm_header .lm_tab.lm_active.lm_focused {\n    background-color: var(--neutral-layer-card-container);\n  }\n  .lm_header .lm_tab.lm_active {\n    background-color: var(--neutral-layer-card-container);\n    border: 1px solid;\n    border-color: var(--neutral-stroke-rest);\n    border-bottom: 0;\n    color: var(--accent-foreground-rest);\n  }\n\n  .lm_header .lm_tab {\n    align-items: center;\n    background-color: var(--neutral-layer-4);\n    border: 0;\n    border-bottom-color: transparent;\n    border-bottom: 0px solid;\n    border-color: var(--neutral-stroke-rest);\n    border-radius: calc(var(--control-corner-radius) * 1.5px) calc(var(--control-corner-radius) * 1.5px) 0 0;\n    color: var(--accent-foreground-rest);\n    display: flex;\n    font-family: inherit;\n    font-size: 13px;\n    font-weight: 400;\n    height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 8px);\n    margin-right: 2px;\n    margin-top: 3px;\n    padding: 2px 16px;\n  }\n\n  .lm_header .lm_tab:not(.lm_active):hover {\n    background-color: var(--neutral-layer-card-container);\n    color: var(--accent-foreground-rest);\n  }\n\n  .lm_header .lm_controls {\n    top: 4px;\n    display: flex;\n  }\n  .lm_header .lm_controls > * {\n    width: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 6px);\n    height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 6px);\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.533333);\n    background-color: color-mix(in srgb, var(--neutral-fill-strong-rest), transparent 90%);\n    border-radius: calc(var(--control-corner-radius) * 1.5px);\n    margin-right: 4px;\n    top: 3px;\n    opacity: 1;\n  }\n  .lm_header .lm_controls > *:hover {\n    background-color: color-mix(in srgb, var(--neutral-fill-strong-hover), transparent 75%);\n    cursor: pointer;\n  }\n\n  .lm_controls .lm_maximise {\n    background-image: url('${LAYOUT_ICONS.maximiseSVG}');\n  }\n  .lm_maximised .lm_controls .lm_maximise {\n    background-image: url('${LAYOUT_ICONS.minimiseSVG}');\n  }\n  .lm_controls .lm_close {\n    background-image: url('${LAYOUT_ICONS.closeSVG}');\n  }\n  .lm_header .lm_tab .lm_close_tab {\n    background-image: url('${LAYOUT_ICONS.closeSVG}');\n  background-size: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.2777);\n    background-repeat: no-repeat;\n    margin-left: 12px;\n    position: relative;\n    top: 0;\n    right: 0;\n  }\n\n  .lm_header .lm_tab.lm_active {\n    padding: 4px 25px 3px 10px;\n  }\n\n  .lm_header .lm_tab:not(.lm_active) .lm_title {\n    color: var(--neutral-foreground-hint);\n  }\n\n  .lm_header .lm_controls .lm_tabdropdown::before {\n    content: none;\n  }\n  .lm_header .lm_controls .lm_tabdropdown {\n    background-image: url('${LAYOUT_ICONS.tabDropdownSVG}');\n  }\n  .lm_header .lm_tabdropdown_list {\n    top: var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT});\n    right: 108px;\n    background-color: var(--neutral-layer-3);\n    border: 1px solid;\n    border-color: var(--neutral-stroke-rest);\n    border-radius: calc(var(--control-corner-radius) * 1.5px);\n    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35);\n  }\n  .lm_header .lm_tabdropdown_list > .lm_tab {\n    box-shadow: none;\n    padding: 0 16px;\n    white-space: nowrap;\n    background-color: transparent;\n    color: var(--neutral-foreground-rest);\n    height: var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT});\n    border-radius: 0;\n    overflow: visible;\n    text-overflow: normal;\n  }\n  .lm_header .lm_tabdropdown_list > .lm_tab:last-child {\n    border-bottom: 0;\n  }\n\n  /* gl base styles start */\n  .lm_root {\n    position: relative;\n  }\n  .lm_row > .lm_item {\n    float: left;\n  }\n  .lm_content {\n    overflow: hidden;\n    position: relative;\n  }\n  .lm_dragging,\n  .lm_dragging * {\n    cursor: move !important;\n    user-select: none;\n  }\n  .lm_maximised {\n    left: 0;\n    padding: 1px;\n    position: absolute;\n    top: 0;\n    z-index: 40;\n  }\n  .lm_maximise_placeholder {\n    display: none;\n  }\n  .lm_splitter {\n    position: relative;\n    z-index: 20;\n  }\n  .lm_splitter:hover,\n  .lm_splitter.lm_dragging {\n    background: var(--accent-fill-rest);\n    border-radius: calc(var(--control-corner-radius) * 4px);\n  }\n  .lm_splitter.lm_vertical .lm_drag_handle {\n    width: 100%;\n    height: 15px;\n    position: absolute;\n    top: -5px;\n    cursor: ns-resize !important;\n  }\n  .lm_splitter.lm_horizontal {\n    float: left;\n    height: 100%;\n  }\n  .lm_splitter.lm_horizontal .lm_drag_handle {\n    width: 15px;\n    height: 100%;\n    position: absolute;\n    left: -5px;\n    cursor: ew-resize !important;\n  }\n  .lm_header {\n    overflow: visible;\n    position: relative;\n  }\n  .lm_header [class^='lm_'] {\n    box-sizing: content-box !important;\n  }\n  .lm_header .lm_controls {\n    position: absolute;\n    right: 3px;\n  }\n  .lm_header .lm_controls > li {\n    cursor: pointer;\n    float: left;\n    width: 18px;\n    height: 18px;\n    text-align: center;\n  }\n  .lm_header ul {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n  }\n  .lm_header .lm_tabs {\n    position: absolute;\n  }\n  .lm_header .lm_tab {\n    cursor: pointer;\n    float: left;\n    margin-top: 1px;\n    padding: 3px 25px 3px 10px;\n    position: relative;\n  }\n  .lm_header .lm_tab i {\n    width: 2px;\n    height: 19px;\n    position: absolute;\n  }\n  .lm_header .lm_tab i.lm_left {\n    top: 0;\n    left: -2px;\n  }\n  .lm_header .lm_tab i.lm_right {\n    top: 0;\n    right: -2px;\n  }\n  .lm_header .lm_tab .lm_title {\n    display: inline-block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    user-select: none;\n  }\n  .lm_header .lm_tab .lm_title:only-child {\n    padding-left: 10px;\n  }\n  .lm_header .lm_tab .lm_close_tab {\n    width: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.3888);\n    height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.3888);\n    top: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.3055);\n    position: absolute;\n    right: 0;\n    text-align: center;\n  }\n  .lm_stack.lm_left .lm_header,\n  .lm_stack.lm_right .lm_header {\n    height: 100%;\n  }\n  .lm_dragProxy.lm_left .lm_header,\n  .lm_dragProxy.lm_right .lm_header,\n  .lm_stack.lm_left .lm_header,\n  .lm_stack.lm_right .lm_header {\n    width: 20px;\n    float: left;\n    vertical-align: top;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabs,\n  .lm_dragProxy.lm_right .lm_header .lm_tabs,\n  .lm_stack.lm_left .lm_header .lm_tabs,\n  .lm_stack.lm_right .lm_header .lm_tabs {\n    transform-origin: left top;\n    top: 0;\n    width: 1000px;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_controls,\n  .lm_dragProxy.lm_right .lm_header .lm_controls,\n  .lm_stack.lm_left .lm_header .lm_controls,\n  .lm_stack.lm_right .lm_header .lm_controls {\n    bottom: 0;\n  }\n  .lm_dragProxy.lm_left .lm_items,\n  .lm_dragProxy.lm_right .lm_items,\n  .lm_stack.lm_left .lm_items,\n  .lm_stack.lm_right .lm_items {.lm_header .lm_tab.lm_active\n    float: left;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabs,\n  .lm_stack.lm_left .lm_header .lm_tabs {\n    transform: rotate(-90deg) scaleX(-1);\n    left: 0;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab,\n  .lm_stack.lm_left .lm_header .lm_tabs .lm_tab {\n    transform: scaleX(-1);\n    margin-top: 1px;\n  }\n  .lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list,\n  .lm_stack.lm_left .lm_header .lm_tabdropdown_list {\n    top: initial;\n    right: initial;\n    left: 20px;\n  }\n  .lm_dragProxy.lm_right .lm_content {\n    float: left;\n  }\n  .lm_dragProxy.lm_right .lm_header .lm_tabs,\n  .lm_stack.lm_right .lm_header .lm_tabs {\n    transform: rotate(90deg) scaleX(1);\n    left: 100%;\n    margin-left: 0;\n  }\n  .lm_dragProxy.lm_right .lm_header .lm_controls,\n  .lm_stack.lm_right .lm_header .lm_controls {\n    left: 3px;\n  }\n  .lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list,\n  .lm_stack.lm_right .lm_header .lm_tabdropdown_list {\n    top: initial;\n    right: 20px;\n  }\n  .lm_dragProxy.lm_bottom .lm_header .lm_tab,\n  .lm_stack.lm_bottom .lm_header .lm_tab {\n    margin-top: 0;\n    border-top: none;\n  }\n  .lm_dragProxy.lm_bottom .lm_header .lm_controls,\n  .lm_stack.lm_bottom .lm_header .lm_controls {\n    top: 3px;\n  }\n  .lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list,\n  .lm_stack.lm_bottom .lm_header .lm_tabdropdown_list {\n    top: initial;\n    bottom: 20px;\n  }\n  .lm_drop_tab_placeholder {\n    float: left;\n    width: 100px;\n    height: 10px;\n    visibility: hidden;\n  }\n  .lm_header .lm_tabdropdown_list {\n    position: absolute;\n    top: 20px;\n    right: 0;\n    z-index: 5;\n    overflow: hidden;\n  }\n  .lm_header .lm_tabdropdown_list .lm_tab {\n    clear: both;\n    padding-right: 10px;\n    margin: 0;\n  }\n  .lm_header .lm_tabdropdown_list .lm_tab .lm_title {\n    width: 100px;\n  }\n  .lm_header .lm_tabdropdown_list .lm_close_tab {\n    display: none !important;\n  }\n  .lm_dragProxy {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 30;\n  }\n  .lm_dragProxy .lm_header {\n    background: transparent;\n  }\n  .lm_dragProxy .lm_content {\n    border-top: none;\n    overflow: hidden;\n  }\n  .lm_dropTargetIndicator {\n    display: none;\n    position: absolute;\n    z-index: 20;\n    box-shadow: none;\n  }\n  .lm_dropTargetIndicator .lm_inner {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    top: 0;\n    left: 0;\n  }\n  .lm_transition_indicator {\n    display: none;\n    width: 20px;\n    height: 20px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 20;\n  }\n  .lm_popin {\n    width: 20px;\n    height: 20px;\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    z-index: 9999;\n  }\n  .lm_popin > * {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n  .lm_popin > .lm_bg {\n    z-index: 10;\n  }\n  .lm_popin > .lm_icon {\n    z-index: 20;\n  } /*# sourceMappingURL=goldenlayout-base.css.map */\n`",
+          "default": "css`\n  ${containerStyles}\n  ${loadingSpinnerStyles}\n\n  :host {\n    --foundation-tab-height: calc(\n      (((var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 4) * 1px\n    );\n  }\n\n  .lm_goldenlayout {\n    border-radius: calc(var(--control-corner-radius) * 1.5px);\n  }\n\n  .lm_stack.lm_item {\n    background-color: var(--neutral-layer-3);\n    border-radius: calc(var(--control-corner-radius) * 1.5px);\n  }\n\n  .lm_maximised .lm_header {\n    background-color: var(--neutral-layer-3);\n    border-radius: calc(var(--control-corner-radius) * 1.5px);\n    position: unset;\n  }\n\n  .lm_maximised .lm_header .lm_tabs {\n    z-index: 3;\n  }\n\n  .lm_content {\n    background-color: var(--neutral-layer-card-container);\n    border-radius: calc(var(--control-corner-radius) * 1.5px);\n    border: 1px solid;\n    border-color: var(--neutral-stroke-rest);\n    box-sizing: border-box;\n    color: var(--neutral-foreground-rest);\n  }\n\n  .lm_header .lm_tabs {\n    padding: 0 16px;\n  }\n\n  .lm_stack > .lm_items {\n    box-shadow: 0 -1px 15px rgb(0 0 0 / 15%);\n  }\n\n  .lm_header .lm_tab.lm_active.lm_focused {\n    background-color: var(--neutral-layer-card-container);\n  }\n\n  .lm_header .lm_tab.lm_active {\n    background-color: var(--neutral-layer-card-container);\n    border: 1px solid;\n    border-color: var(--neutral-stroke-rest);\n    border-bottom: 0;\n    color: var(--accent-foreground-rest);\n  }\n\n  .lm_header .lm_tab {\n    align-items: center;\n    background-color: var(--neutral-layer-4);\n    border: 0;\n    border-bottom-color: transparent;\n    border-bottom: 0 solid;\n    border-color: var(--neutral-stroke-rest);\n    border-radius: calc(var(--control-corner-radius) * 1.5px)\n      calc(var(--control-corner-radius) * 1.5px) 0 0;\n    color: var(--accent-foreground-rest);\n    display: flex;\n    font-family: inherit;\n    font-size: 13px;\n    font-weight: 400;\n    height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 8px);\n    margin-right: 2px;\n    margin-top: 3px;\n    padding: 2px 16px;\n  }\n\n  .lm_header .lm_tab:not(.lm_active):hover {\n    background-color: var(--neutral-layer-card-container);\n    color: var(--accent-foreground-rest);\n  }\n\n  .lm_header .lm_controls {\n    top: 4px;\n    display: flex;\n  }\n\n  .lm_header .lm_controls > * {\n    width: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 6px);\n    height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 6px);\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.533333);\n    background-color: color-mix(in srgb, var(--neutral-fill-strong-rest), transparent 90%);\n    border-radius: calc(var(--control-corner-radius) * 1.5px);\n    margin-right: 4px;\n    top: 3px;\n    opacity: 100%;\n  }\n\n  .lm_header .lm_controls > *:hover {\n    background-color: color-mix(in srgb, var(--neutral-fill-strong-hover), transparent 75%);\n    cursor: pointer;\n  }\n\n  .lm_controls .lm_maximise {\n    background-image: url('${LAYOUT_ICONS.maximiseSVG}');\n  }\n\n  .lm_maximised .lm_controls .lm_maximise {\n    background-image: url('${LAYOUT_ICONS.minimiseSVG}');\n  }\n\n  .lm_controls .lm_close {\n    background-image: url('${LAYOUT_ICONS.closeSVG}');\n  }\n\n  .lm_header .lm_tab .lm_close_tab {\n    background-image: url('${LAYOUT_ICONS.closeSVG}');\n    background-size: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.2777);\n    background-repeat: no-repeat;\n    margin-left: 12px;\n    position: relative;\n    top: 0;\n    right: 0;\n  }\n\n  .lm_header .lm_tab.lm_active {\n    padding: 4px 25px 3px 10px;\n  }\n\n  .lm_header .lm_tab:not(.lm_active) .lm_title {\n    color: var(--neutral-foreground-hint);\n  }\n\n  .lm_header .lm_controls .lm_tabdropdown::before {\n    content: none;\n  }\n\n  .lm_header .lm_controls .lm_tabdropdown {\n    background-image: url('${LAYOUT_ICONS.tabDropdownSVG}');\n  }\n\n  .lm_header .lm_tabdropdown_list {\n    top: var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT});\n    right: 108px;\n    background-color: var(--neutral-layer-3);\n    border: 1px solid;\n    border-color: var(--neutral-stroke-rest);\n    border-radius: calc(var(--control-corner-radius) * 1.5px);\n    box-shadow: 0 5px 15px rgb(0 0 0 / 35%);\n  }\n\n  .lm_header .lm_tabdropdown_list > .lm_tab {\n    box-shadow: none;\n    padding: 0 16px;\n    white-space: nowrap;\n    background-color: transparent;\n    color: var(--neutral-foreground-rest);\n    height: var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT});\n    border-radius: 0;\n    overflow: visible;\n    text-overflow: normal;\n  }\n\n  .lm_header .lm_tabdropdown_list > .lm_tab:last-child {\n    border-bottom: 0;\n  }\n\n  /* gl base styles start */\n  .lm_root {\n    position: relative;\n  }\n\n  .lm_row > .lm_item {\n    float: left;\n  }\n\n  .lm_content {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .lm_dragging,\n  .lm_dragging * {\n    cursor: move !important;\n    user-select: none;\n  }\n\n  .lm_maximised {\n    left: 0;\n    padding: 1px;\n    position: absolute;\n    top: 0;\n    z-index: 40;\n  }\n\n  .lm_maximise_placeholder {\n    display: none;\n  }\n\n  .lm_splitter {\n    position: relative;\n    z-index: 20;\n  }\n\n  .lm_splitter:hover,\n  .lm_splitter.lm_dragging {\n    background: var(--accent-fill-rest);\n    border-radius: calc(var(--control-corner-radius) * 4px);\n  }\n\n  .lm_splitter.lm_vertical .lm_drag_handle {\n    width: 100%;\n    height: 15px;\n    position: absolute;\n    top: -5px;\n    cursor: ns-resize !important;\n  }\n\n  .lm_splitter.lm_horizontal {\n    float: left;\n    height: 100%;\n  }\n\n  .lm_splitter.lm_horizontal .lm_drag_handle {\n    width: 15px;\n    height: 100%;\n    position: absolute;\n    left: -5px;\n    cursor: ew-resize !important;\n  }\n\n  .lm_header {\n    overflow: visible;\n    position: relative;\n  }\n\n  .lm_header [class^='lm_'] {\n    box-sizing: content-box !important;\n  }\n\n  .lm_header .lm_controls {\n    position: absolute;\n    right: 3px;\n  }\n\n  .lm_header .lm_controls > li {\n    cursor: pointer;\n    float: left;\n    width: 18px;\n    height: 18px;\n    text-align: center;\n  }\n\n  .lm_header ul {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n  }\n\n  .lm_header .lm_tabs {\n    position: absolute;\n  }\n\n  .lm_header .lm_tab {\n    cursor: pointer;\n    float: left;\n    margin-top: 1px;\n    padding: 3px 25px 3px 10px;\n    position: relative;\n  }\n\n  .lm_header .lm_tab i {\n    width: 2px;\n    height: 19px;\n    position: absolute;\n  }\n\n  .lm_header .lm_tab i.lm_left {\n    top: 0;\n    left: -2px;\n  }\n\n  .lm_header .lm_tab i.lm_right {\n    top: 0;\n    right: -2px;\n  }\n\n  .lm_header .lm_tab .lm_title {\n    display: inline-block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    user-select: none;\n  }\n\n  .lm_header .lm_tab .lm_title:only-child {\n    padding-left: 10px;\n  }\n\n  .lm_header .lm_tab .lm_close_tab {\n    width: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.3888);\n    height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.3888);\n    top: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.3055);\n    position: absolute;\n    right: 0;\n    text-align: center;\n  }\n\n  .lm_stack.lm_left .lm_header,\n  .lm_stack.lm_right .lm_header {\n    height: 100%;\n  }\n\n  .lm_dragProxy.lm_left .lm_header,\n  .lm_dragProxy.lm_right .lm_header,\n  .lm_stack.lm_left .lm_header,\n  .lm_stack.lm_right .lm_header {\n    width: 20px;\n    float: left;\n    vertical-align: top;\n  }\n\n  .lm_dragProxy.lm_left .lm_header .lm_tabs,\n  .lm_dragProxy.lm_right .lm_header .lm_tabs,\n  .lm_stack.lm_left .lm_header .lm_tabs,\n  .lm_stack.lm_right .lm_header .lm_tabs {\n    transform-origin: left top;\n    top: 0;\n    width: 1000px;\n  }\n\n  .lm_dragProxy.lm_left .lm_header .lm_controls,\n  .lm_dragProxy.lm_right .lm_header .lm_controls,\n  .lm_stack.lm_left .lm_header .lm_controls,\n  .lm_stack.lm_right .lm_header .lm_controls {\n    bottom: 0;\n  }\n\n  .lm_dragProxy.lm_left .lm_items,\n  .lm_dragProxy.lm_right .lm_items,\n  .lm_stack.lm_left .lm_items,\n  .lm_stack.lm_right .lm_items {\n    float: left;\n  }\n\n  .lm_dragProxy.lm_left .lm_header .lm_tabs,\n  .lm_stack.lm_left .lm_header .lm_tabs {\n    transform: rotate(-90deg) scaleX(-1);\n    left: 0;\n  }\n\n  .lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab,\n  .lm_stack.lm_left .lm_header .lm_tabs .lm_tab {\n    transform: scaleX(-1);\n    margin-top: 1px;\n  }\n\n  .lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list,\n  .lm_stack.lm_left .lm_header .lm_tabdropdown_list {\n    top: initial;\n    right: initial;\n    left: 20px;\n  }\n\n  .lm_dragProxy.lm_right .lm_content {\n    float: left;\n  }\n\n  .lm_dragProxy.lm_right .lm_header .lm_tabs,\n  .lm_stack.lm_right .lm_header .lm_tabs {\n    transform: rotate(90deg) scaleX(1);\n    left: 100%;\n    margin-left: 0;\n  }\n\n  .lm_dragProxy.lm_right .lm_header .lm_controls,\n  .lm_stack.lm_right .lm_header .lm_controls {\n    left: 3px;\n  }\n\n  .lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list,\n  .lm_stack.lm_right .lm_header .lm_tabdropdown_list {\n    top: initial;\n    right: 20px;\n  }\n\n  .lm_dragProxy.lm_bottom .lm_header .lm_tab,\n  .lm_stack.lm_bottom .lm_header .lm_tab {\n    margin-top: 0;\n    border-top: none;\n  }\n\n  .lm_dragProxy.lm_bottom .lm_header .lm_controls,\n  .lm_stack.lm_bottom .lm_header .lm_controls {\n    top: 3px;\n  }\n\n  .lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list,\n  .lm_stack.lm_bottom .lm_header .lm_tabdropdown_list {\n    top: initial;\n    bottom: 20px;\n  }\n\n  .lm_drop_tab_placeholder {\n    float: left;\n    width: 100px;\n    height: 10px;\n    visibility: hidden;\n  }\n\n  .lm_header .lm_tabdropdown_list {\n    position: absolute;\n    top: 20px;\n    right: 0;\n    z-index: 5;\n    overflow: hidden;\n  }\n\n  .lm_header .lm_tabdropdown_list .lm_tab {\n    clear: both;\n    padding-right: 10px;\n    margin: 0;\n  }\n\n  .lm_header .lm_tabdropdown_list .lm_tab .lm_title {\n    width: 100px;\n  }\n\n  .lm_header .lm_tabdropdown_list .lm_close_tab {\n    display: none !important;\n  }\n\n  .lm_dragProxy {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 30;\n  }\n\n  .lm_dragProxy .lm_header {\n    background: transparent;\n  }\n\n  .lm_dragProxy .lm_content {\n    border-top: none;\n    overflow: hidden;\n  }\n\n  .lm_dropTargetIndicator {\n    display: none;\n    position: absolute;\n    z-index: 20;\n    box-shadow: none;\n  }\n\n  .lm_dropTargetIndicator .lm_inner {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    top: 0;\n    left: 0;\n  }\n\n  .lm_transition_indicator {\n    display: none;\n    width: 20px;\n    height: 20px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 20;\n  }\n\n  .lm_popin {\n    width: 20px;\n    height: 20px;\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    z-index: 9999;\n  }\n\n  .lm_popin > * {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  .lm_popin > .lm_bg {\n    z-index: 10;\n  }\n\n  .lm_popin > .lm_icon {\n    z-index: 20;\n  } /*# sourceMappingURL=goldenlayout-base.css.map */\n`",
           "description": "`ElementStyles` which defines the css for FoundationLayout.",
           "privacy": "public"
         }

package/dist/dts/styles/layout.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.styles.d.ts","sourceRoot":"","sources":["../../../src/styles/layout.styles.ts"],"names":[],"mappings":"AA2FA;;;;;GAKG;AACH,eAAO,MAAM,YAAY,iDAgbxB,CAAC"}
+{"version":3,"file":"layout.styles.d.ts","sourceRoot":"","sources":["../../../src/styles/layout.styles.ts"],"names":[],"mappings":"AA4FA;;;;;GAKG;AACH,eAAO,MAAM,YAAY,iDAmfxB,CAAC"}

package/dist/esm/styles/layout.styles.js

@@ -30,18 +30,16 @@ const loadingSpinnerStyles = css `
   }
 
   .html-spinner {
-    -webkit-transition-property: -webkit-transform;
-    -webkit-transition-duration: 1.2s;
-    -webkit-animation-name: rotate;
-    -webkit-animation-iteration-count: infinite;
-    -webkit-animation-timing-function: linear;
-
-    -moz-transition-property: -moz-transform;
-    -moz-animation-name: rotate;
-    -moz-animation-duration: 1.2s;
-    -moz-animation-iteration-count: infinite;
-    -moz-animation-timing-function: linear;
-
+    transition-property: -webkit-transform;
+    transition-duration: 1.2s;
+    animation-name: rotate;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    transition-property: -moz-transform;
+    animation-name: rotate;
+    animation-duration: 1.2s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
     transition-property: transform;
     animation-name: rotate;
     animation-duration: 1.2s;
@@ -49,21 +47,23 @@ const loadingSpinnerStyles = css `
     animation-timing-function: linear;
   }
 
-  @-webkit-keyframes rotate {
+  @keyframes rotate {
     from {
-      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
     }
+
     to {
-      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
     }
   }
 
-  @-moz-keyframes rotate {
+  @keyframes rotate {
     from {
-      -moz-transform: rotate(0deg);
+      transform: rotate(0deg);
     }
+
     to {
-      -moz-transform: rotate(360deg);
+      transform: rotate(360deg);
     }
   }
 
@@ -71,6 +71,7 @@ const loadingSpinnerStyles = css `
     from {
       transform: rotate(0deg);
     }
+
     to {
       transform: rotate(360deg);
     }
@@ -96,7 +97,9 @@ export const layoutStyles = css `
   ${loadingSpinnerStyles}
 
   :host {
-    --foundation-tab-height: calc((( (var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 4) * 1px);
+    --foundation-tab-height: calc(
+      (((var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 4) * 1px
+    );
   }
 
   .lm_goldenlayout {
@@ -107,6 +110,7 @@ export const layoutStyles = css `
     background-color: var(--neutral-layer-3);
     border-radius: calc(var(--control-corner-radius) * 1.5px);
   }
+
   .lm_maximised .lm_header {
     background-color: var(--neutral-layer-3);
     border-radius: calc(var(--control-corner-radius) * 1.5px);
@@ -131,12 +135,13 @@ export const layoutStyles = css `
   }
 
   .lm_stack > .lm_items {
-    box-shadow: 0px -1px 15px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 -1px 15px rgb(0 0 0 / 15%);
   }
 
   .lm_header .lm_tab.lm_active.lm_focused {
     background-color: var(--neutral-layer-card-container);
   }
+
   .lm_header .lm_tab.lm_active {
     background-color: var(--neutral-layer-card-container);
     border: 1px solid;
@@ -150,9 +155,10 @@ export const layoutStyles = css `
     background-color: var(--neutral-layer-4);
     border: 0;
     border-bottom-color: transparent;
-    border-bottom: 0px solid;
+    border-bottom: 0 solid;
     border-color: var(--neutral-stroke-rest);
-    border-radius: calc(var(--control-corner-radius) * 1.5px) calc(var(--control-corner-radius) * 1.5px) 0 0;
+    border-radius: calc(var(--control-corner-radius) * 1.5px)
+      calc(var(--control-corner-radius) * 1.5px) 0 0;
     color: var(--accent-foreground-rest);
     display: flex;
     font-family: inherit;
@@ -173,6 +179,7 @@ export const layoutStyles = css `
     top: 4px;
     display: flex;
   }
+
   .lm_header .lm_controls > * {
     width: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 6px);
     height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 6px);
@@ -183,8 +190,9 @@ export const layoutStyles = css `
     border-radius: calc(var(--control-corner-radius) * 1.5px);
     margin-right: 4px;
     top: 3px;
-    opacity: 1;
+    opacity: 100%;
   }
+
   .lm_header .lm_controls > *:hover {
     background-color: color-mix(in srgb, var(--neutral-fill-strong-hover), transparent 75%);
     cursor: pointer;
@@ -193,15 +201,18 @@ export const layoutStyles = css `
   .lm_controls .lm_maximise {
     background-image: url('${LAYOUT_ICONS.maximiseSVG}');
   }
+
   .lm_maximised .lm_controls .lm_maximise {
     background-image: url('${LAYOUT_ICONS.minimiseSVG}');
   }
+
   .lm_controls .lm_close {
     background-image: url('${LAYOUT_ICONS.closeSVG}');
   }
+
   .lm_header .lm_tab .lm_close_tab {
     background-image: url('${LAYOUT_ICONS.closeSVG}');
-  background-size: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.2777);
+    background-size: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.2777);
     background-repeat: no-repeat;
     margin-left: 12px;
     position: relative;
@@ -220,9 +231,11 @@ export const layoutStyles = css `
   .lm_header .lm_controls .lm_tabdropdown::before {
     content: none;
   }
+
   .lm_header .lm_controls .lm_tabdropdown {
     background-image: url('${LAYOUT_ICONS.tabDropdownSVG}');
   }
+
   .lm_header .lm_tabdropdown_list {
     top: var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT});
     right: 108px;
@@ -230,8 +243,9 @@ export const layoutStyles = css `
     border: 1px solid;
     border-color: var(--neutral-stroke-rest);
     border-radius: calc(var(--control-corner-radius) * 1.5px);
-    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35);
+    box-shadow: 0 5px 15px rgb(0 0 0 / 35%);
   }
+
   .lm_header .lm_tabdropdown_list > .lm_tab {
     box-shadow: none;
     padding: 0 16px;
@@ -243,6 +257,7 @@ export const layoutStyles = css `
     overflow: visible;
     text-overflow: normal;
   }
+
   .lm_header .lm_tabdropdown_list > .lm_tab:last-child {
     border-bottom: 0;
   }
@@ -251,18 +266,22 @@ export const layoutStyles = css `
   .lm_root {
     position: relative;
   }
+
   .lm_row > .lm_item {
     float: left;
   }
+
   .lm_content {
     overflow: hidden;
     position: relative;
   }
+
   .lm_dragging,
   .lm_dragging * {
     cursor: move !important;
     user-select: none;
   }
+
   .lm_maximised {
     left: 0;
     padding: 1px;
@@ -270,18 +289,22 @@ export const layoutStyles = css `
     top: 0;
     z-index: 40;
   }
+
   .lm_maximise_placeholder {
     display: none;
   }
+
   .lm_splitter {
     position: relative;
     z-index: 20;
   }
+
   .lm_splitter:hover,
   .lm_splitter.lm_dragging {
     background: var(--accent-fill-rest);
     border-radius: calc(var(--control-corner-radius) * 4px);
   }
+
   .lm_splitter.lm_vertical .lm_drag_handle {
     width: 100%;
     height: 15px;
@@ -289,10 +312,12 @@ export const layoutStyles = css `
     top: -5px;
     cursor: ns-resize !important;
   }
+
   .lm_splitter.lm_horizontal {
     float: left;
     height: 100%;
   }
+
   .lm_splitter.lm_horizontal .lm_drag_handle {
     width: 15px;
     height: 100%;
@@ -300,17 +325,21 @@ export const layoutStyles = css `
     left: -5px;
     cursor: ew-resize !important;
   }
+
   .lm_header {
     overflow: visible;
     position: relative;
   }
+
   .lm_header [class^='lm_'] {
     box-sizing: content-box !important;
   }
+
   .lm_header .lm_controls {
     position: absolute;
     right: 3px;
   }
+
   .lm_header .lm_controls > li {
     cursor: pointer;
     float: left;
@@ -318,14 +347,17 @@ export const layoutStyles = css `
     height: 18px;
     text-align: center;
   }
+
   .lm_header ul {
     margin: 0;
     padding: 0;
     list-style-type: none;
   }
+
   .lm_header .lm_tabs {
     position: absolute;
   }
+
   .lm_header .lm_tab {
     cursor: pointer;
     float: left;
@@ -333,28 +365,34 @@ export const layoutStyles = css `
     padding: 3px 25px 3px 10px;
     position: relative;
   }
+
   .lm_header .lm_tab i {
     width: 2px;
     height: 19px;
     position: absolute;
   }
+
   .lm_header .lm_tab i.lm_left {
     top: 0;
     left: -2px;
   }
+
   .lm_header .lm_tab i.lm_right {
     top: 0;
     right: -2px;
   }
+
   .lm_header .lm_tab .lm_title {
     display: inline-block;
     overflow: hidden;
     text-overflow: ellipsis;
     user-select: none;
   }
+
   .lm_header .lm_tab .lm_title:only-child {
     padding-left: 10px;
   }
+
   .lm_header .lm_tab .lm_close_tab {
     width: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.3888);
     height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.3888);
@@ -363,10 +401,12 @@ export const layoutStyles = css `
     right: 0;
     text-align: center;
   }
+
   .lm_stack.lm_left .lm_header,
   .lm_stack.lm_right .lm_header {
     height: 100%;
   }
+
   .lm_dragProxy.lm_left .lm_header,
   .lm_dragProxy.lm_right .lm_header,
   .lm_stack.lm_left .lm_header,
@@ -375,6 +415,7 @@ export const layoutStyles = css `
     float: left;
     vertical-align: top;
   }
+
   .lm_dragProxy.lm_left .lm_header .lm_tabs,
   .lm_dragProxy.lm_right .lm_header .lm_tabs,
   .lm_stack.lm_left .lm_header .lm_tabs,
@@ -383,72 +424,86 @@ export const layoutStyles = css `
     top: 0;
     width: 1000px;
   }
+
   .lm_dragProxy.lm_left .lm_header .lm_controls,
   .lm_dragProxy.lm_right .lm_header .lm_controls,
   .lm_stack.lm_left .lm_header .lm_controls,
   .lm_stack.lm_right .lm_header .lm_controls {
     bottom: 0;
   }
+
   .lm_dragProxy.lm_left .lm_items,
   .lm_dragProxy.lm_right .lm_items,
   .lm_stack.lm_left .lm_items,
-  .lm_stack.lm_right .lm_items {.lm_header .lm_tab.lm_active
+  .lm_stack.lm_right .lm_items {
     float: left;
   }
+
   .lm_dragProxy.lm_left .lm_header .lm_tabs,
   .lm_stack.lm_left .lm_header .lm_tabs {
     transform: rotate(-90deg) scaleX(-1);
     left: 0;
   }
+
   .lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab,
   .lm_stack.lm_left .lm_header .lm_tabs .lm_tab {
     transform: scaleX(-1);
     margin-top: 1px;
   }
+
   .lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list,
   .lm_stack.lm_left .lm_header .lm_tabdropdown_list {
     top: initial;
     right: initial;
     left: 20px;
   }
+
   .lm_dragProxy.lm_right .lm_content {
     float: left;
   }
+
   .lm_dragProxy.lm_right .lm_header .lm_tabs,
   .lm_stack.lm_right .lm_header .lm_tabs {
     transform: rotate(90deg) scaleX(1);
     left: 100%;
     margin-left: 0;
   }
+
   .lm_dragProxy.lm_right .lm_header .lm_controls,
   .lm_stack.lm_right .lm_header .lm_controls {
     left: 3px;
   }
+
   .lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list,
   .lm_stack.lm_right .lm_header .lm_tabdropdown_list {
     top: initial;
     right: 20px;
   }
+
   .lm_dragProxy.lm_bottom .lm_header .lm_tab,
   .lm_stack.lm_bottom .lm_header .lm_tab {
     margin-top: 0;
     border-top: none;
   }
+
   .lm_dragProxy.lm_bottom .lm_header .lm_controls,
   .lm_stack.lm_bottom .lm_header .lm_controls {
     top: 3px;
   }
+
   .lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list,
   .lm_stack.lm_bottom .lm_header .lm_tabdropdown_list {
     top: initial;
     bottom: 20px;
   }
+
   .lm_drop_tab_placeholder {
     float: left;
     width: 100px;
     height: 10px;
     visibility: hidden;
   }
+
   .lm_header .lm_tabdropdown_list {
     position: absolute;
     top: 20px;
@@ -456,36 +511,44 @@ export const layoutStyles = css `
     z-index: 5;
     overflow: hidden;
   }
+
   .lm_header .lm_tabdropdown_list .lm_tab {
     clear: both;
     padding-right: 10px;
     margin: 0;
   }
+
   .lm_header .lm_tabdropdown_list .lm_tab .lm_title {
     width: 100px;
   }
+
   .lm_header .lm_tabdropdown_list .lm_close_tab {
     display: none !important;
   }
+
   .lm_dragProxy {
     position: absolute;
     top: 0;
     left: 0;
     z-index: 30;
   }
+
   .lm_dragProxy .lm_header {
     background: transparent;
   }
+
   .lm_dragProxy .lm_content {
     border-top: none;
     overflow: hidden;
   }
+
   .lm_dropTargetIndicator {
     display: none;
     position: absolute;
     z-index: 20;
     box-shadow: none;
   }
+
   .lm_dropTargetIndicator .lm_inner {
     width: 100%;
     height: 100%;
@@ -493,6 +556,7 @@ export const layoutStyles = css `
     top: 0;
     left: 0;
   }
+
   .lm_transition_indicator {
     display: none;
     width: 20px;
@@ -502,6 +566,7 @@ export const layoutStyles = css `
     left: 0;
     z-index: 20;
   }
+
   .lm_popin {
     width: 20px;
     height: 20px;
@@ -510,6 +575,7 @@ export const layoutStyles = css `
     right: 0;
     z-index: 9999;
   }
+
   .lm_popin > * {
     width: 100%;
     height: 100%;
@@ -517,9 +583,11 @@ export const layoutStyles = css `
     top: 0;
     left: 0;
   }
+
   .lm_popin > .lm_bg {
     z-index: 10;
   }
+
   .lm_popin > .lm_icon {
     z-index: 20;
   } /*# sourceMappingURL=goldenlayout-base.css.map */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-layout",
   "description": "Genesis Foundation UI App Layout",
-  "version": "14.387.2",
+  "version": "14.388.1",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
   "types": "dist/foundation-layout.d.ts",
@@ -19,6 +19,8 @@
     "clean": "rimraf dist temp tsconfig.tsbuildinfo",
     "dev": "genx dev -b webpack",
     "dev:tsc": "genx dev -b ts",
+    "lint": "genx lint --profile",
+    "lint:fix": "genx lint --fix",
     "serve": "genx serve",
     "test": "genx test",
     "test:coverage": "genx test --coverage",
@@ -36,20 +38,20 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.387.2",
-    "@genesislcap/genx": "14.387.2",
-    "@genesislcap/rollup-builder": "14.387.2",
-    "@genesislcap/ts-builder": "14.387.2",
-    "@genesislcap/uvu-playwright-builder": "14.387.2",
-    "@genesislcap/vite-builder": "14.387.2",
-    "@genesislcap/webpack-builder": "14.387.2"
+    "@genesislcap/foundation-testing": "14.388.1",
+    "@genesislcap/genx": "14.388.1",
+    "@genesislcap/rollup-builder": "14.388.1",
+    "@genesislcap/ts-builder": "14.388.1",
+    "@genesislcap/uvu-playwright-builder": "14.388.1",
+    "@genesislcap/vite-builder": "14.388.1",
+    "@genesislcap/webpack-builder": "14.388.1"
   },
   "dependencies": {
     "@genesis-community/golden-layout": "^2.11.0",
-    "@genesislcap/foundation-comms": "14.387.2",
-    "@genesislcap/foundation-logger": "14.387.2",
-    "@genesislcap/foundation-ui": "14.387.2",
-    "@genesislcap/foundation-utils": "14.387.2",
+    "@genesislcap/foundation-comms": "14.388.1",
+    "@genesislcap/foundation-logger": "14.388.1",
+    "@genesislcap/foundation-ui": "14.388.1",
+    "@genesislcap/foundation-utils": "14.388.1",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.14.0",
     "@microsoft/fast-foundation": "2.49.6"
@@ -63,5 +65,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "336bd409fe7e65df555d415fc90f28e239106d12"
+  "gitHead": "576c66a3549832786971673c3b78d5cdd6b08902"
 }