@vuu-ui/vuu-table 0.13.111-alpha.2 → 0.13.112-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/cjs/Table.css.js +1 -1
  2. package/esm/Table.css.js +1 -1
  3. package/package.json +10 -10
package/cjs/Table.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var tableCss = ".vuuTable {\n --vuu-table-cell-outlineWidth: 1px;\n --vuu-table-col-header-row-height: var(--salt-size-base, 32px);\n --vuu-table-col-heading-height: 25px;\n --vuu-table-footer-height: 0px;\n --vuu-table-row-background-selected: var(--vuuTableRow-background-selected, var(--salt-selectable-background-selected));\n --vuu-table-row-borderColor-selected: var(--vuuTableRow-borderColor-selected, var(--salt-selectable-background-selected));\n --vuu-table-row-bookend-background-selected: var(--vuuTableRow-bookend-background-selected, var(--salt-selectable-background-selected));\n --vuu-table-row-height: var(--salt-size-base, 32px);\n --vuu-table-row-selection-borderRadius: var(--vuuTable-row-selection-borderRadius, 5px); \n\n --table-background: var(--vuuTable-background, var(--salt-container-primary-background));\n --table-height: var(--measured-px-height);\n --table-width: var(--measured-px-width);\n\n --columnResizer-color: transparent;\n --row-height: var(\n --row-height-prop,\n var(--vuu-table-row-height, var(--salt-size-base))\n );\n --col-header-row-height: var(\n --col-header-row-height-prop,\n var(--vuu-table-col-header-row-height, var(--salt-size-base))\n );\n\n --cell-borderColor: transparent;\n --row-borderColor: var(--row-background);\n --vuu-table-embedded-control-height: calc(var(--row-height) - 3px);\n\n background: var(--table-background);\n font-family: var(\n --vuuTable-fontFamily,\n var(--salt-typography-fontFamily, sans-serif)\n );\n position: relative;\n user-select: none;\n\n &.vuuTable-viewportRowLimit {\n height: fit-content;\n /* With a viewportRowLimit, table is content sized, not container sized. */\n .vuuTable-contentContainer {\n height: calc(var(--measured-px-height) + var(--total-header-height));\n }\n .vuuTable-scrollbarContainer {\n height: calc(\n var(--measured-px-height) + var(--horizontal-scrollbar-height)\n );\n }\n .vuuTable-scrollbarFiller {\n height: var(--horizontal-scrollbar-height);\n }\n }\n\n &.vuuTable-maxViewportRowLimit {\n /* With a maxVviewportRowLimit, table is content sized, not container sized. */\n height: fit-content;\n padding-bottom: var(--horizontal-scrollbar-height);\n\n .vuuTable-contentContainer {\n height: min(\n calc(var(--measured-px-height) + var(--total-header-height)),\n calc(var(--content-height) + var(--total-header-height))\n );\n }\n .vuuTable-scrollbarContainer {\n height: min(\n calc(var(--measured-px-height) + var(--horizontal-scrollbar-height)),\n calc(var(--content-height) + var(--horizontal-scrollbar-height))\n );\n }\n\n .vuuTable-scrollbarFiller {\n height: var(--horizontal-scrollbar-height);\n }\n }\n}\n\n.vuuTable-zebra {\n --table-zebraColor: var(--vuuTable-zebraColor, var(--salt-container-secondary-background));\n}\n\n.vuuTable-colLines {\n --cell-borderColor: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-rowLines {\n --row-borderColor: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-scrollbarContainer {\n border-bottom: none !important;\n border-top: none !important;\n height: var(--viewport-body-height);\n left: 0px;\n overflow: auto;\n position: absolute;\n top: var(--total-header-height);\n width: var(--table-width);\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar {\n width: 10px;\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar:horizontal {\n height: 10px;\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar-track {\n background-color: transparent;\n}\n.vuuTable-scrollbarContainer::-webkit-scrollbar-thumb {\n background-clip: padding-box;\n border-radius: 10px;\n border: 2px solid rgba(0, 0, 0, 0);\n background-color: var(--vuu-color-gray-30);\n}\n\n.vuuTable-scrollbarContent {\n height: calc(var(--content-height) + var(--horizontal-scrollbar-height));\n position: absolute;\n width: var(--content-width);\n}\n\n.vuuTable-contentContainer {\n --table-content-container-width: calc(var(--table-width) - var(--vertical-scrollbar-width));\n background: var(--table-background);\n height: calc(\n 100% - var(--horizontal-scrollbar-height) - var(--vuu-table-footer-height)\n );\n position: relative;\n overflow: auto;\n overscroll-behavior: none;\n width: var(--table-content-container-width);\n}\n\n.vuuTable-contentContainer::-webkit-scrollbar {\n display: none;\n}\n\n.vuuTable-table {\n border: none;\n border-collapse: separate;\n border-spacing: 0;\n left: 0;\n margin: 0;\n position: absolute;\n top: 0;\n table-layout: fixed;\n width: var(--content-width);\n}\n\n.vuuTable-body {\n height: var(--content-height);\n position: relative;\n}\n\n.vuuTable-focusCellPlaceholder {\n height: var(--row-height);\n position: absolute;\n width: 50px;\n z-index: -1;\n}\n\n.vuuPinLeft,\n.vuuPinRight {\n background-color: inherit;\n position: sticky;\n z-index: 1;\n}\n\n.vuuPinRight {\n .vuuColumnResizer {\n cursor: default;\n pointer-events: none;\n }\n}\n\n.vuuTableHeaderCell.vuuPinLeft,\n.vuuTableHeaderCell.vuuPinRight {\n z-index: 2;\n}\n\n.vuuTableHeader {\n --row-height: var(--vuu-table-col-header-row-height);\n background-color: var(\n --vuuTableHeader-background,\n var(--table-background)\n );\n border-bottom: solid 1px\n var(\n --vuuTableHeader-borderColor,\n var(--salt-separable-tertiary-borderColor)\n );\n color: var(--salt-content-secondary-foreground);\n font-size: var(--VuuTableHeader-fontSize, vasr(--salt-text-label-fontSize));\n position: sticky;\n top: 0;\n white-space: nowrap;\n\n /* ensure header row sits atop everything else when scrolling down */\n z-index: 1;\n\n .vuuDraggable-spacer {\n border-bottom: solid 1px #ccc;\n display: var(--vuuDraggable-display, inline-block);\n height: var(--vuu-table-col-header-row-height);\n }\n\n .vuuStickyLeft {\n z-index: 1;\n }\n .vuuStickyRight {\n z-index: 0;\n }\n}\n\n.vuuTableHeader:hover {\n --columnResizer-height: var(--vuu-table-col-header-row-height);\n --columnResizer-color: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-heading {\n height: var(--vuu-table-col-heading-height);\n}\n\n.sizer-cell {\n border: none !important;\n height: 0px;\n}\n\n.vuuDraggable-vuuTable {\n --cell-borderColor: transparent;\n --vuu-table-col-header-row-height: var(--vuuTableHeaderCell-height, 25px);\n --vuuTableHeaderCell-background: var(--salt-container-secondary-background);\n}\n.vuuDraggable-vuuTable {\n --row-height: 25px;\n}\n\n.vuuTable-pagination {\n --vuu-table-footer-height: 32px;\n .vuuTableHeader {\n position: relative;\n }\n\n .vuuTable-body {\n height: calc(var(--content-height) - var(--total-header-height));\n position: relative;\n }\n\n .vuuTableRow {\n position: relative;\n top: auto;\n }\n}\n\n.vuuTable-footer {\n align-items: center;\n display: flex;\n height: var(--vuu-table-footer-height);\n justify-content: flex-end;\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n}\n\n.vuuHighlight {\n color: blue;\n}\n\n.DragColumn {\n box-shadow: var(--salt-overlayable-shadow-drag);\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 90% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n.vuuTable-emptyDisplay {\n animation: fadeIn .8s;\n align-items: center;\n display: flex;\n inset:0;\n justify-content: center;\n position: absolute\n}\n\n.vuuTable-emptyDisplay ~ .vuuTable-contentContainer {\n visibility: hidden;\n}\n\n.vuuRowProxy {\n position: absolute !important;\n visibility: hidden;\n}\n\n.vuuTableColHeaderRow {\n height: var(--col-header-row-height);\n}\n\n.vuuTableRow {\n \n background: var(--row-background, var(--table-background));\n border-bottom: 1px solid var(--row-borderColor, var(--table-background));\n box-sizing: border-box;\n color: var(--salt-content-secondary-foreground);\n contain: layout;\n font-size: var(--VuuTableRow-fontSize, vasr(--salt-text-fontSize));\n height: var(--row-height);\n line-height: var(--row-height);\n position: absolute;\n top: 0;\n white-space: nowrap;\n width: 100%;\n}\n\n\n.vuuTableRow-even {\n --row-background: var(--table-zebraColor);\n}\n\n.vuuTableRow-highlighted {\n background: var(--salt-selectable-background-hover);\n}\n\n\n.vuuTableRow[aria-selected=\"true\"] {\n background-color: var(--vuu-table-row-background-selected);\n}\n\n.vuuTableRow[aria-expanded=\"true\"] {\n --toggle-icon-transform: rotate(90deg);\n}\n\n.vuuDraggable .vuuTableRow {\n --cell-borderColor: transparent;\n --vuu-selection-decorator-bg: transparent;\n transform: none !important;\n z-index: 1;\n}\n\n\n.vuuSelectionDecorator {\n background: var(--table-background);\n display: inline-block;\n height: var(--row-height);\n position: relative;\n width: var(--table-selection-bookend-width,4px);\n z-index: 2;\n}\n\n.vuuTableRow:not([aria-selected=\"true\"]){\n .vuuTableRowBookend {\n display: none;\n }\n}\n\n.vuuSelectionDecorator.vuuStickyLeft {\n left: 0;\n position: sticky;\n}\n\n.vuuSelectionDecorator.vuuStickyRight {\n right: 0;\n position: sticky;\n}\n\n .vuuTableRowBookend {\n position: absolute;\n top: -1px;\n right:0;\n bottom:0;\n left:0;\n }\n\n.vuuTable-rowSelection-bordered {\n\n .vuuSelectionDecorator {\n\n .vuuTableRowBookend {\n background-color: var(--vuu-table-row-bookend-background-selected);\n border-color: var(--vuu-table-row-borderColor-selected);\n border-width: 1px;\n width: var(--table-selection-bookend-width,4px);\n\n &:before {\n content: none !important;\n }\n }\n\n &.vuuStickyLeft {\n .vuuTableRowBookend {\n border-left-style: solid;\n }\n }\n &.vuuStickyRight {\n .vuuTableRowBookend {\n border-right-style: solid;\n }\n }\n }\n\n .vuuTableRow[aria-selected=\"true\"]{\n .vuuSelectionDecorator {\n background-color: var(--table-background);\n border: none;\n }\n\n }\n\n /* non-selected row immediately followed by a selected row */\n .vuuTableRow:not([aria-selected=\"true\"]):has( + .vuuTableRow[aria-selected=\"true\"]) {\n border-bottom-color: transparent;\n }\n\n /* first row in a selection block, including a selection block of one row */\n .vuuTableRow:not([aria-selected=\"true\"]) + .vuuTableRow[aria-selected=\"true\"],\n .vuuTableRow[aria-selected=\"true\"][data-first-row=\"true\"]\n {\n border-radius: none;\n\n &:after {\n background: var(--vuu-table-row-borderColor-selected);\n content: \"\";\n position: absolute;\n top: 0px;\n left: 4px;\n height: 1px;\n width: calc(var(--content-width) - 8px);\n z-index: 1;\n }\n\n .vuuStickyLeft .vuuTableRowBookend {\n border-top-left-radius: var(--vuu-table-row-selection-borderRadius);\n border-top-style: solid;\n margin-top: 1px;\n }\n\n .vuuStickyRight .vuuTableRowBookend {\n border-top-right-radius: var(--vuu-table-row-selection-borderRadius);\n border-top-style: solid;\n margin-top: 1px;\n }\n\n }\n\n /* Last row in a selection block, including a selection block of one row */\n .vuuTableRow[aria-selected=\"true\"]:has( + .vuuTableRow:not([aria-selected=\"true\"])) {\n border-bottom-color: var(--vuu-table-row-borderColor-selected);\n\n .vuuStickyLeft .vuuTableRowBookend {\n border-bottom-left-radius: var(--vuu-table-row-selection-borderRadius);\n border-bottom-style: solid;\n }\n .vuuStickyRight .vuuTableRowBookend {\n border-bottom-right-radius: var(--vuu-table-row-selection-borderRadius);\n border-bottom-style: solid;\n }\n }\n\n}";
3
+ var tableCss = ".vuuTable {\n --vuu-table-cell-outlineWidth: 1px;\n --vuu-table-col-header-row-height: var(--salt-size-base, 32px);\n --vuu-table-col-heading-height: 25px;\n --vuu-table-footer-height: 0px;\n --vuu-table-row-background-selected: var(--vuuTableRow-background-selected, var(--salt-selectable-background-selected));\n --vuu-table-row-borderColor-selected: var(--vuuTableRow-borderColor-selected, var(--salt-selectable-borderColor-selected));\n --vuu-table-row-bookend-background-selected: var(--vuuTableRow-bookend-background-selected, var(--salt-selectable-background-selected));\n --vuu-table-row-height: var(--salt-size-base, 32px);\n --vuu-table-row-selection-borderRadius: var(--vuuTable-row-selection-borderRadius, 5px); \n\n --table-background: var(--vuuTable-background, var(--salt-container-primary-background));\n --table-height: var(--measured-px-height);\n --table-width: var(--measured-px-width);\n\n --columnResizer-color: transparent;\n --row-height: var(\n --row-height-prop,\n var(--vuu-table-row-height, var(--salt-size-base))\n );\n --col-header-row-height: var(\n --col-header-row-height-prop,\n var(--vuu-table-col-header-row-height, var(--salt-size-base))\n );\n\n --cell-borderColor: transparent;\n --row-borderColor: var(--row-background);\n --vuu-table-embedded-control-height: calc(var(--row-height) - 3px);\n\n background: var(--table-background);\n font-family: var(\n --vuuTable-fontFamily,\n var(--salt-typography-fontFamily, sans-serif)\n );\n position: relative;\n user-select: none;\n\n &.vuuTable-viewportRowLimit {\n height: fit-content;\n /* With a viewportRowLimit, table is content sized, not container sized. */\n .vuuTable-contentContainer {\n height: calc(var(--measured-px-height) + var(--total-header-height));\n }\n .vuuTable-scrollbarContainer {\n height: calc(\n var(--measured-px-height) + var(--horizontal-scrollbar-height)\n );\n }\n .vuuTable-scrollbarFiller {\n height: var(--horizontal-scrollbar-height);\n }\n }\n\n &.vuuTable-maxViewportRowLimit {\n /* With a maxVviewportRowLimit, table is content sized, not container sized. */\n height: fit-content;\n padding-bottom: var(--horizontal-scrollbar-height);\n\n .vuuTable-contentContainer {\n height: min(\n calc(var(--measured-px-height) + var(--total-header-height)),\n calc(var(--content-height) + var(--total-header-height))\n );\n }\n .vuuTable-scrollbarContainer {\n height: min(\n calc(var(--measured-px-height) + var(--horizontal-scrollbar-height)),\n calc(var(--content-height) + var(--horizontal-scrollbar-height))\n );\n }\n\n .vuuTable-scrollbarFiller {\n height: var(--horizontal-scrollbar-height);\n }\n }\n}\n\n.vuuTable-zebra {\n --table-zebraColor: var(--vuuTable-zebraColor, var(--salt-container-secondary-background));\n}\n\n.vuuTable-colLines {\n --cell-borderColor: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-rowLines {\n --row-borderColor: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-scrollbarContainer {\n border-bottom: none !important;\n border-top: none !important;\n height: var(--viewport-body-height);\n left: 0px;\n overflow: auto;\n position: absolute;\n top: var(--total-header-height);\n width: var(--table-width);\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar {\n width: 10px;\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar:horizontal {\n height: 10px;\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar-track {\n background-color: transparent;\n}\n.vuuTable-scrollbarContainer::-webkit-scrollbar-thumb {\n background-clip: padding-box;\n border-radius: 10px;\n border: 2px solid rgba(0, 0, 0, 0);\n background-color: var(--vuu-color-gray-30);\n}\n\n.vuuTable-scrollbarContent {\n height: calc(var(--content-height) + var(--horizontal-scrollbar-height));\n position: absolute;\n width: var(--content-width);\n}\n\n.vuuTable-contentContainer {\n --table-content-container-width: calc(var(--table-width) - var(--vertical-scrollbar-width));\n background: var(--table-background);\n height: calc(\n 100% - var(--horizontal-scrollbar-height) - var(--vuu-table-footer-height)\n );\n position: relative;\n overflow: auto;\n overscroll-behavior: none;\n width: var(--table-content-container-width);\n}\n\n.vuuTable-contentContainer::-webkit-scrollbar {\n display: none;\n}\n\n.vuuTable-table {\n border: none;\n border-collapse: separate;\n border-spacing: 0;\n left: 0;\n margin: 0;\n position: absolute;\n top: 0;\n table-layout: fixed;\n width: var(--content-width);\n}\n\n.vuuTable-body {\n height: var(--content-height);\n position: relative;\n}\n\n.vuuTable-focusCellPlaceholder {\n height: var(--row-height);\n position: absolute;\n width: 50px;\n z-index: -1;\n}\n\n.vuuPinLeft,\n.vuuPinRight {\n background-color: inherit;\n position: sticky;\n z-index: 1;\n}\n\n.vuuPinRight {\n .vuuColumnResizer {\n cursor: default;\n pointer-events: none;\n }\n}\n\n.vuuTableHeaderCell.vuuPinLeft,\n.vuuTableHeaderCell.vuuPinRight {\n z-index: 2;\n}\n\n.vuuTableHeader {\n --row-height: var(--vuu-table-col-header-row-height);\n background-color: var(\n --vuuTableHeader-background,\n var(--table-background)\n );\n border-bottom: solid 1px\n var(\n --vuuTableHeader-borderColor,\n var(--salt-separable-tertiary-borderColor)\n );\n color: var(--salt-content-secondary-foreground);\n font-size: var(--VuuTableHeader-fontSize, vasr(--salt-text-label-fontSize));\n position: sticky;\n top: 0;\n white-space: nowrap;\n\n /* ensure header row sits atop everything else when scrolling down */\n z-index: 1;\n\n .vuuDraggable-spacer {\n border-bottom: solid 1px #ccc;\n display: var(--vuuDraggable-display, inline-block);\n height: var(--vuu-table-col-header-row-height);\n }\n\n .vuuStickyLeft {\n z-index: 1;\n }\n .vuuStickyRight {\n z-index: 0;\n }\n}\n\n.vuuTableHeader:hover {\n --columnResizer-height: var(--vuu-table-col-header-row-height);\n --columnResizer-color: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-heading {\n height: var(--vuu-table-col-heading-height);\n}\n\n.sizer-cell {\n border: none !important;\n height: 0px;\n}\n\n.vuuDraggable-vuuTable {\n --cell-borderColor: transparent;\n --vuu-table-col-header-row-height: var(--vuuTableHeaderCell-height, 25px);\n --vuuTableHeaderCell-background: var(--salt-container-secondary-background);\n}\n.vuuDraggable-vuuTable {\n --row-height: 25px;\n}\n\n.vuuTable-pagination {\n --vuu-table-footer-height: 32px;\n .vuuTableHeader {\n position: relative;\n }\n\n .vuuTable-body {\n height: calc(var(--content-height) - var(--total-header-height));\n position: relative;\n }\n\n .vuuTableRow {\n position: relative;\n top: auto;\n }\n}\n\n.vuuTable-footer {\n align-items: center;\n display: flex;\n height: var(--vuu-table-footer-height);\n justify-content: flex-end;\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n}\n\n.vuuHighlight {\n color: blue;\n}\n\n.DragColumn {\n box-shadow: var(--salt-overlayable-shadow-drag);\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 90% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n.vuuTable-emptyDisplay {\n animation: fadeIn .8s;\n align-items: center;\n display: flex;\n inset:0;\n justify-content: center;\n position: absolute\n}\n\n.vuuTable-emptyDisplay ~ .vuuTable-contentContainer {\n visibility: hidden;\n}\n\n.vuuRowProxy {\n position: absolute !important;\n visibility: hidden;\n}\n\n.vuuTableColHeaderRow {\n height: var(--col-header-row-height);\n}\n\n.vuuTableRow {\n \n background: var(--row-background, var(--table-background));\n border-bottom: 1px solid var(--row-borderColor, var(--table-background));\n box-sizing: border-box;\n color: var(--salt-content-secondary-foreground);\n contain: layout;\n font-size: var(--VuuTableRow-fontSize, vasr(--salt-text-fontSize));\n height: var(--row-height);\n line-height: var(--row-height);\n position: absolute;\n top: 0;\n white-space: nowrap;\n width: 100%;\n}\n\n\n.vuuTableRow-even {\n --row-background: var(--table-zebraColor);\n}\n\n.vuuTableRow-highlighted {\n background: var(--salt-selectable-background-hover);\n}\n\n\n.vuuTableRow[aria-selected=\"true\"] {\n background-color: var(--vuu-table-row-background-selected);\n}\n\n.vuuTableRow[aria-expanded=\"true\"] {\n --toggle-icon-transform: rotate(90deg);\n}\n\n.vuuDraggable .vuuTableRow {\n --cell-borderColor: transparent;\n --vuu-selection-decorator-bg: transparent;\n transform: none !important;\n z-index: 1;\n}\n\n\n.vuuSelectionDecorator {\n background: var(--table-background);\n display: inline-block;\n height: var(--row-height);\n position: relative;\n width: var(--table-selection-bookend-width,4px);\n z-index: 2;\n}\n\n.vuuTableRow:not([aria-selected=\"true\"]){\n .vuuTableRowBookend {\n display: none;\n }\n}\n\n.vuuSelectionDecorator.vuuStickyLeft {\n left: 0;\n position: sticky;\n}\n\n.vuuSelectionDecorator.vuuStickyRight {\n right: 0;\n position: sticky;\n}\n\n .vuuTableRowBookend {\n position: absolute;\n top: -1px;\n right:0;\n bottom:0;\n left:0;\n }\n\n.vuuTable-rowSelection-bordered {\n\n .vuuSelectionDecorator {\n\n .vuuTableRowBookend {\n background-color: var(--vuu-table-row-bookend-background-selected);\n border-color: var(--vuu-table-row-borderColor-selected);\n border-width: 1px;\n width: var(--table-selection-bookend-width,4px);\n\n &:before {\n content: none !important;\n }\n }\n\n &.vuuStickyLeft {\n .vuuTableRowBookend {\n border-left-style: solid;\n }\n }\n &.vuuStickyRight {\n .vuuTableRowBookend {\n border-right-style: solid;\n }\n }\n }\n\n .vuuTableRow[aria-selected=\"true\"]{\n .vuuSelectionDecorator {\n background-color: var(--table-background);\n border: none;\n }\n\n }\n\n /* non-selected row immediately followed by a selected row */\n .vuuTableRow:not([aria-selected=\"true\"]):has( + .vuuTableRow[aria-selected=\"true\"]) {\n border-bottom-color: transparent;\n }\n\n /* first row in a selection block, including a selection block of one row */\n .vuuTableRow:not([aria-selected=\"true\"]) + .vuuTableRow[aria-selected=\"true\"],\n .vuuTableRow[aria-selected=\"true\"][data-first-row=\"true\"]\n {\n border-radius: 0;\n\n &:after {\n background: var(--vuu-table-row-borderColor-selected);\n content: \"\";\n position: absolute;\n top: 0px;\n left: 4px;\n height: 1px;\n width: calc(var(--content-width) - 8px);\n z-index: 1;\n }\n\n .vuuStickyLeft .vuuTableRowBookend {\n border-top-left-radius: var(--vuu-table-row-selection-borderRadius);\n border-top-style: solid;\n margin-top: 1px;\n }\n\n .vuuStickyRight .vuuTableRowBookend {\n border-top-right-radius: var(--vuu-table-row-selection-borderRadius);\n border-top-style: solid;\n margin-top: 1px;\n }\n\n }\n\n /* Last row in a selection block, including a selection block of one row */\n .vuuTableRow[aria-selected=\"true\"]:has( + .vuuTableRow:not([aria-selected=\"true\"])) {\n border-bottom-color: var(--vuu-table-row-borderColor-selected);\n\n .vuuStickyLeft .vuuTableRowBookend {\n border-bottom-left-radius: var(--vuu-table-row-selection-borderRadius);\n border-bottom-style: solid;\n }\n .vuuStickyRight .vuuTableRowBookend {\n border-bottom-right-radius: var(--vuu-table-row-selection-borderRadius);\n border-bottom-style: solid;\n }\n }\n\n}";
4
4
 
5
5
  module.exports = tableCss;
6
6
  //# sourceMappingURL=Table.css.js.map
package/esm/Table.css.js CHANGED
@@ -1,4 +1,4 @@
1
- var tableCss = ".vuuTable {\n --vuu-table-cell-outlineWidth: 1px;\n --vuu-table-col-header-row-height: var(--salt-size-base, 32px);\n --vuu-table-col-heading-height: 25px;\n --vuu-table-footer-height: 0px;\n --vuu-table-row-background-selected: var(--vuuTableRow-background-selected, var(--salt-selectable-background-selected));\n --vuu-table-row-borderColor-selected: var(--vuuTableRow-borderColor-selected, var(--salt-selectable-background-selected));\n --vuu-table-row-bookend-background-selected: var(--vuuTableRow-bookend-background-selected, var(--salt-selectable-background-selected));\n --vuu-table-row-height: var(--salt-size-base, 32px);\n --vuu-table-row-selection-borderRadius: var(--vuuTable-row-selection-borderRadius, 5px); \n\n --table-background: var(--vuuTable-background, var(--salt-container-primary-background));\n --table-height: var(--measured-px-height);\n --table-width: var(--measured-px-width);\n\n --columnResizer-color: transparent;\n --row-height: var(\n --row-height-prop,\n var(--vuu-table-row-height, var(--salt-size-base))\n );\n --col-header-row-height: var(\n --col-header-row-height-prop,\n var(--vuu-table-col-header-row-height, var(--salt-size-base))\n );\n\n --cell-borderColor: transparent;\n --row-borderColor: var(--row-background);\n --vuu-table-embedded-control-height: calc(var(--row-height) - 3px);\n\n background: var(--table-background);\n font-family: var(\n --vuuTable-fontFamily,\n var(--salt-typography-fontFamily, sans-serif)\n );\n position: relative;\n user-select: none;\n\n &.vuuTable-viewportRowLimit {\n height: fit-content;\n /* With a viewportRowLimit, table is content sized, not container sized. */\n .vuuTable-contentContainer {\n height: calc(var(--measured-px-height) + var(--total-header-height));\n }\n .vuuTable-scrollbarContainer {\n height: calc(\n var(--measured-px-height) + var(--horizontal-scrollbar-height)\n );\n }\n .vuuTable-scrollbarFiller {\n height: var(--horizontal-scrollbar-height);\n }\n }\n\n &.vuuTable-maxViewportRowLimit {\n /* With a maxVviewportRowLimit, table is content sized, not container sized. */\n height: fit-content;\n padding-bottom: var(--horizontal-scrollbar-height);\n\n .vuuTable-contentContainer {\n height: min(\n calc(var(--measured-px-height) + var(--total-header-height)),\n calc(var(--content-height) + var(--total-header-height))\n );\n }\n .vuuTable-scrollbarContainer {\n height: min(\n calc(var(--measured-px-height) + var(--horizontal-scrollbar-height)),\n calc(var(--content-height) + var(--horizontal-scrollbar-height))\n );\n }\n\n .vuuTable-scrollbarFiller {\n height: var(--horizontal-scrollbar-height);\n }\n }\n}\n\n.vuuTable-zebra {\n --table-zebraColor: var(--vuuTable-zebraColor, var(--salt-container-secondary-background));\n}\n\n.vuuTable-colLines {\n --cell-borderColor: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-rowLines {\n --row-borderColor: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-scrollbarContainer {\n border-bottom: none !important;\n border-top: none !important;\n height: var(--viewport-body-height);\n left: 0px;\n overflow: auto;\n position: absolute;\n top: var(--total-header-height);\n width: var(--table-width);\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar {\n width: 10px;\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar:horizontal {\n height: 10px;\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar-track {\n background-color: transparent;\n}\n.vuuTable-scrollbarContainer::-webkit-scrollbar-thumb {\n background-clip: padding-box;\n border-radius: 10px;\n border: 2px solid rgba(0, 0, 0, 0);\n background-color: var(--vuu-color-gray-30);\n}\n\n.vuuTable-scrollbarContent {\n height: calc(var(--content-height) + var(--horizontal-scrollbar-height));\n position: absolute;\n width: var(--content-width);\n}\n\n.vuuTable-contentContainer {\n --table-content-container-width: calc(var(--table-width) - var(--vertical-scrollbar-width));\n background: var(--table-background);\n height: calc(\n 100% - var(--horizontal-scrollbar-height) - var(--vuu-table-footer-height)\n );\n position: relative;\n overflow: auto;\n overscroll-behavior: none;\n width: var(--table-content-container-width);\n}\n\n.vuuTable-contentContainer::-webkit-scrollbar {\n display: none;\n}\n\n.vuuTable-table {\n border: none;\n border-collapse: separate;\n border-spacing: 0;\n left: 0;\n margin: 0;\n position: absolute;\n top: 0;\n table-layout: fixed;\n width: var(--content-width);\n}\n\n.vuuTable-body {\n height: var(--content-height);\n position: relative;\n}\n\n.vuuTable-focusCellPlaceholder {\n height: var(--row-height);\n position: absolute;\n width: 50px;\n z-index: -1;\n}\n\n.vuuPinLeft,\n.vuuPinRight {\n background-color: inherit;\n position: sticky;\n z-index: 1;\n}\n\n.vuuPinRight {\n .vuuColumnResizer {\n cursor: default;\n pointer-events: none;\n }\n}\n\n.vuuTableHeaderCell.vuuPinLeft,\n.vuuTableHeaderCell.vuuPinRight {\n z-index: 2;\n}\n\n.vuuTableHeader {\n --row-height: var(--vuu-table-col-header-row-height);\n background-color: var(\n --vuuTableHeader-background,\n var(--table-background)\n );\n border-bottom: solid 1px\n var(\n --vuuTableHeader-borderColor,\n var(--salt-separable-tertiary-borderColor)\n );\n color: var(--salt-content-secondary-foreground);\n font-size: var(--VuuTableHeader-fontSize, vasr(--salt-text-label-fontSize));\n position: sticky;\n top: 0;\n white-space: nowrap;\n\n /* ensure header row sits atop everything else when scrolling down */\n z-index: 1;\n\n .vuuDraggable-spacer {\n border-bottom: solid 1px #ccc;\n display: var(--vuuDraggable-display, inline-block);\n height: var(--vuu-table-col-header-row-height);\n }\n\n .vuuStickyLeft {\n z-index: 1;\n }\n .vuuStickyRight {\n z-index: 0;\n }\n}\n\n.vuuTableHeader:hover {\n --columnResizer-height: var(--vuu-table-col-header-row-height);\n --columnResizer-color: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-heading {\n height: var(--vuu-table-col-heading-height);\n}\n\n.sizer-cell {\n border: none !important;\n height: 0px;\n}\n\n.vuuDraggable-vuuTable {\n --cell-borderColor: transparent;\n --vuu-table-col-header-row-height: var(--vuuTableHeaderCell-height, 25px);\n --vuuTableHeaderCell-background: var(--salt-container-secondary-background);\n}\n.vuuDraggable-vuuTable {\n --row-height: 25px;\n}\n\n.vuuTable-pagination {\n --vuu-table-footer-height: 32px;\n .vuuTableHeader {\n position: relative;\n }\n\n .vuuTable-body {\n height: calc(var(--content-height) - var(--total-header-height));\n position: relative;\n }\n\n .vuuTableRow {\n position: relative;\n top: auto;\n }\n}\n\n.vuuTable-footer {\n align-items: center;\n display: flex;\n height: var(--vuu-table-footer-height);\n justify-content: flex-end;\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n}\n\n.vuuHighlight {\n color: blue;\n}\n\n.DragColumn {\n box-shadow: var(--salt-overlayable-shadow-drag);\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 90% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n.vuuTable-emptyDisplay {\n animation: fadeIn .8s;\n align-items: center;\n display: flex;\n inset:0;\n justify-content: center;\n position: absolute\n}\n\n.vuuTable-emptyDisplay ~ .vuuTable-contentContainer {\n visibility: hidden;\n}\n\n.vuuRowProxy {\n position: absolute !important;\n visibility: hidden;\n}\n\n.vuuTableColHeaderRow {\n height: var(--col-header-row-height);\n}\n\n.vuuTableRow {\n \n background: var(--row-background, var(--table-background));\n border-bottom: 1px solid var(--row-borderColor, var(--table-background));\n box-sizing: border-box;\n color: var(--salt-content-secondary-foreground);\n contain: layout;\n font-size: var(--VuuTableRow-fontSize, vasr(--salt-text-fontSize));\n height: var(--row-height);\n line-height: var(--row-height);\n position: absolute;\n top: 0;\n white-space: nowrap;\n width: 100%;\n}\n\n\n.vuuTableRow-even {\n --row-background: var(--table-zebraColor);\n}\n\n.vuuTableRow-highlighted {\n background: var(--salt-selectable-background-hover);\n}\n\n\n.vuuTableRow[aria-selected=\"true\"] {\n background-color: var(--vuu-table-row-background-selected);\n}\n\n.vuuTableRow[aria-expanded=\"true\"] {\n --toggle-icon-transform: rotate(90deg);\n}\n\n.vuuDraggable .vuuTableRow {\n --cell-borderColor: transparent;\n --vuu-selection-decorator-bg: transparent;\n transform: none !important;\n z-index: 1;\n}\n\n\n.vuuSelectionDecorator {\n background: var(--table-background);\n display: inline-block;\n height: var(--row-height);\n position: relative;\n width: var(--table-selection-bookend-width,4px);\n z-index: 2;\n}\n\n.vuuTableRow:not([aria-selected=\"true\"]){\n .vuuTableRowBookend {\n display: none;\n }\n}\n\n.vuuSelectionDecorator.vuuStickyLeft {\n left: 0;\n position: sticky;\n}\n\n.vuuSelectionDecorator.vuuStickyRight {\n right: 0;\n position: sticky;\n}\n\n .vuuTableRowBookend {\n position: absolute;\n top: -1px;\n right:0;\n bottom:0;\n left:0;\n }\n\n.vuuTable-rowSelection-bordered {\n\n .vuuSelectionDecorator {\n\n .vuuTableRowBookend {\n background-color: var(--vuu-table-row-bookend-background-selected);\n border-color: var(--vuu-table-row-borderColor-selected);\n border-width: 1px;\n width: var(--table-selection-bookend-width,4px);\n\n &:before {\n content: none !important;\n }\n }\n\n &.vuuStickyLeft {\n .vuuTableRowBookend {\n border-left-style: solid;\n }\n }\n &.vuuStickyRight {\n .vuuTableRowBookend {\n border-right-style: solid;\n }\n }\n }\n\n .vuuTableRow[aria-selected=\"true\"]{\n .vuuSelectionDecorator {\n background-color: var(--table-background);\n border: none;\n }\n\n }\n\n /* non-selected row immediately followed by a selected row */\n .vuuTableRow:not([aria-selected=\"true\"]):has( + .vuuTableRow[aria-selected=\"true\"]) {\n border-bottom-color: transparent;\n }\n\n /* first row in a selection block, including a selection block of one row */\n .vuuTableRow:not([aria-selected=\"true\"]) + .vuuTableRow[aria-selected=\"true\"],\n .vuuTableRow[aria-selected=\"true\"][data-first-row=\"true\"]\n {\n border-radius: none;\n\n &:after {\n background: var(--vuu-table-row-borderColor-selected);\n content: \"\";\n position: absolute;\n top: 0px;\n left: 4px;\n height: 1px;\n width: calc(var(--content-width) - 8px);\n z-index: 1;\n }\n\n .vuuStickyLeft .vuuTableRowBookend {\n border-top-left-radius: var(--vuu-table-row-selection-borderRadius);\n border-top-style: solid;\n margin-top: 1px;\n }\n\n .vuuStickyRight .vuuTableRowBookend {\n border-top-right-radius: var(--vuu-table-row-selection-borderRadius);\n border-top-style: solid;\n margin-top: 1px;\n }\n\n }\n\n /* Last row in a selection block, including a selection block of one row */\n .vuuTableRow[aria-selected=\"true\"]:has( + .vuuTableRow:not([aria-selected=\"true\"])) {\n border-bottom-color: var(--vuu-table-row-borderColor-selected);\n\n .vuuStickyLeft .vuuTableRowBookend {\n border-bottom-left-radius: var(--vuu-table-row-selection-borderRadius);\n border-bottom-style: solid;\n }\n .vuuStickyRight .vuuTableRowBookend {\n border-bottom-right-radius: var(--vuu-table-row-selection-borderRadius);\n border-bottom-style: solid;\n }\n }\n\n}";
1
+ var tableCss = ".vuuTable {\n --vuu-table-cell-outlineWidth: 1px;\n --vuu-table-col-header-row-height: var(--salt-size-base, 32px);\n --vuu-table-col-heading-height: 25px;\n --vuu-table-footer-height: 0px;\n --vuu-table-row-background-selected: var(--vuuTableRow-background-selected, var(--salt-selectable-background-selected));\n --vuu-table-row-borderColor-selected: var(--vuuTableRow-borderColor-selected, var(--salt-selectable-borderColor-selected));\n --vuu-table-row-bookend-background-selected: var(--vuuTableRow-bookend-background-selected, var(--salt-selectable-background-selected));\n --vuu-table-row-height: var(--salt-size-base, 32px);\n --vuu-table-row-selection-borderRadius: var(--vuuTable-row-selection-borderRadius, 5px); \n\n --table-background: var(--vuuTable-background, var(--salt-container-primary-background));\n --table-height: var(--measured-px-height);\n --table-width: var(--measured-px-width);\n\n --columnResizer-color: transparent;\n --row-height: var(\n --row-height-prop,\n var(--vuu-table-row-height, var(--salt-size-base))\n );\n --col-header-row-height: var(\n --col-header-row-height-prop,\n var(--vuu-table-col-header-row-height, var(--salt-size-base))\n );\n\n --cell-borderColor: transparent;\n --row-borderColor: var(--row-background);\n --vuu-table-embedded-control-height: calc(var(--row-height) - 3px);\n\n background: var(--table-background);\n font-family: var(\n --vuuTable-fontFamily,\n var(--salt-typography-fontFamily, sans-serif)\n );\n position: relative;\n user-select: none;\n\n &.vuuTable-viewportRowLimit {\n height: fit-content;\n /* With a viewportRowLimit, table is content sized, not container sized. */\n .vuuTable-contentContainer {\n height: calc(var(--measured-px-height) + var(--total-header-height));\n }\n .vuuTable-scrollbarContainer {\n height: calc(\n var(--measured-px-height) + var(--horizontal-scrollbar-height)\n );\n }\n .vuuTable-scrollbarFiller {\n height: var(--horizontal-scrollbar-height);\n }\n }\n\n &.vuuTable-maxViewportRowLimit {\n /* With a maxVviewportRowLimit, table is content sized, not container sized. */\n height: fit-content;\n padding-bottom: var(--horizontal-scrollbar-height);\n\n .vuuTable-contentContainer {\n height: min(\n calc(var(--measured-px-height) + var(--total-header-height)),\n calc(var(--content-height) + var(--total-header-height))\n );\n }\n .vuuTable-scrollbarContainer {\n height: min(\n calc(var(--measured-px-height) + var(--horizontal-scrollbar-height)),\n calc(var(--content-height) + var(--horizontal-scrollbar-height))\n );\n }\n\n .vuuTable-scrollbarFiller {\n height: var(--horizontal-scrollbar-height);\n }\n }\n}\n\n.vuuTable-zebra {\n --table-zebraColor: var(--vuuTable-zebraColor, var(--salt-container-secondary-background));\n}\n\n.vuuTable-colLines {\n --cell-borderColor: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-rowLines {\n --row-borderColor: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-scrollbarContainer {\n border-bottom: none !important;\n border-top: none !important;\n height: var(--viewport-body-height);\n left: 0px;\n overflow: auto;\n position: absolute;\n top: var(--total-header-height);\n width: var(--table-width);\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar {\n width: 10px;\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar:horizontal {\n height: 10px;\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar-track {\n background-color: transparent;\n}\n.vuuTable-scrollbarContainer::-webkit-scrollbar-thumb {\n background-clip: padding-box;\n border-radius: 10px;\n border: 2px solid rgba(0, 0, 0, 0);\n background-color: var(--vuu-color-gray-30);\n}\n\n.vuuTable-scrollbarContent {\n height: calc(var(--content-height) + var(--horizontal-scrollbar-height));\n position: absolute;\n width: var(--content-width);\n}\n\n.vuuTable-contentContainer {\n --table-content-container-width: calc(var(--table-width) - var(--vertical-scrollbar-width));\n background: var(--table-background);\n height: calc(\n 100% - var(--horizontal-scrollbar-height) - var(--vuu-table-footer-height)\n );\n position: relative;\n overflow: auto;\n overscroll-behavior: none;\n width: var(--table-content-container-width);\n}\n\n.vuuTable-contentContainer::-webkit-scrollbar {\n display: none;\n}\n\n.vuuTable-table {\n border: none;\n border-collapse: separate;\n border-spacing: 0;\n left: 0;\n margin: 0;\n position: absolute;\n top: 0;\n table-layout: fixed;\n width: var(--content-width);\n}\n\n.vuuTable-body {\n height: var(--content-height);\n position: relative;\n}\n\n.vuuTable-focusCellPlaceholder {\n height: var(--row-height);\n position: absolute;\n width: 50px;\n z-index: -1;\n}\n\n.vuuPinLeft,\n.vuuPinRight {\n background-color: inherit;\n position: sticky;\n z-index: 1;\n}\n\n.vuuPinRight {\n .vuuColumnResizer {\n cursor: default;\n pointer-events: none;\n }\n}\n\n.vuuTableHeaderCell.vuuPinLeft,\n.vuuTableHeaderCell.vuuPinRight {\n z-index: 2;\n}\n\n.vuuTableHeader {\n --row-height: var(--vuu-table-col-header-row-height);\n background-color: var(\n --vuuTableHeader-background,\n var(--table-background)\n );\n border-bottom: solid 1px\n var(\n --vuuTableHeader-borderColor,\n var(--salt-separable-tertiary-borderColor)\n );\n color: var(--salt-content-secondary-foreground);\n font-size: var(--VuuTableHeader-fontSize, vasr(--salt-text-label-fontSize));\n position: sticky;\n top: 0;\n white-space: nowrap;\n\n /* ensure header row sits atop everything else when scrolling down */\n z-index: 1;\n\n .vuuDraggable-spacer {\n border-bottom: solid 1px #ccc;\n display: var(--vuuDraggable-display, inline-block);\n height: var(--vuu-table-col-header-row-height);\n }\n\n .vuuStickyLeft {\n z-index: 1;\n }\n .vuuStickyRight {\n z-index: 0;\n }\n}\n\n.vuuTableHeader:hover {\n --columnResizer-height: var(--vuu-table-col-header-row-height);\n --columnResizer-color: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-heading {\n height: var(--vuu-table-col-heading-height);\n}\n\n.sizer-cell {\n border: none !important;\n height: 0px;\n}\n\n.vuuDraggable-vuuTable {\n --cell-borderColor: transparent;\n --vuu-table-col-header-row-height: var(--vuuTableHeaderCell-height, 25px);\n --vuuTableHeaderCell-background: var(--salt-container-secondary-background);\n}\n.vuuDraggable-vuuTable {\n --row-height: 25px;\n}\n\n.vuuTable-pagination {\n --vuu-table-footer-height: 32px;\n .vuuTableHeader {\n position: relative;\n }\n\n .vuuTable-body {\n height: calc(var(--content-height) - var(--total-header-height));\n position: relative;\n }\n\n .vuuTableRow {\n position: relative;\n top: auto;\n }\n}\n\n.vuuTable-footer {\n align-items: center;\n display: flex;\n height: var(--vuu-table-footer-height);\n justify-content: flex-end;\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n}\n\n.vuuHighlight {\n color: blue;\n}\n\n.DragColumn {\n box-shadow: var(--salt-overlayable-shadow-drag);\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 90% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n.vuuTable-emptyDisplay {\n animation: fadeIn .8s;\n align-items: center;\n display: flex;\n inset:0;\n justify-content: center;\n position: absolute\n}\n\n.vuuTable-emptyDisplay ~ .vuuTable-contentContainer {\n visibility: hidden;\n}\n\n.vuuRowProxy {\n position: absolute !important;\n visibility: hidden;\n}\n\n.vuuTableColHeaderRow {\n height: var(--col-header-row-height);\n}\n\n.vuuTableRow {\n \n background: var(--row-background, var(--table-background));\n border-bottom: 1px solid var(--row-borderColor, var(--table-background));\n box-sizing: border-box;\n color: var(--salt-content-secondary-foreground);\n contain: layout;\n font-size: var(--VuuTableRow-fontSize, vasr(--salt-text-fontSize));\n height: var(--row-height);\n line-height: var(--row-height);\n position: absolute;\n top: 0;\n white-space: nowrap;\n width: 100%;\n}\n\n\n.vuuTableRow-even {\n --row-background: var(--table-zebraColor);\n}\n\n.vuuTableRow-highlighted {\n background: var(--salt-selectable-background-hover);\n}\n\n\n.vuuTableRow[aria-selected=\"true\"] {\n background-color: var(--vuu-table-row-background-selected);\n}\n\n.vuuTableRow[aria-expanded=\"true\"] {\n --toggle-icon-transform: rotate(90deg);\n}\n\n.vuuDraggable .vuuTableRow {\n --cell-borderColor: transparent;\n --vuu-selection-decorator-bg: transparent;\n transform: none !important;\n z-index: 1;\n}\n\n\n.vuuSelectionDecorator {\n background: var(--table-background);\n display: inline-block;\n height: var(--row-height);\n position: relative;\n width: var(--table-selection-bookend-width,4px);\n z-index: 2;\n}\n\n.vuuTableRow:not([aria-selected=\"true\"]){\n .vuuTableRowBookend {\n display: none;\n }\n}\n\n.vuuSelectionDecorator.vuuStickyLeft {\n left: 0;\n position: sticky;\n}\n\n.vuuSelectionDecorator.vuuStickyRight {\n right: 0;\n position: sticky;\n}\n\n .vuuTableRowBookend {\n position: absolute;\n top: -1px;\n right:0;\n bottom:0;\n left:0;\n }\n\n.vuuTable-rowSelection-bordered {\n\n .vuuSelectionDecorator {\n\n .vuuTableRowBookend {\n background-color: var(--vuu-table-row-bookend-background-selected);\n border-color: var(--vuu-table-row-borderColor-selected);\n border-width: 1px;\n width: var(--table-selection-bookend-width,4px);\n\n &:before {\n content: none !important;\n }\n }\n\n &.vuuStickyLeft {\n .vuuTableRowBookend {\n border-left-style: solid;\n }\n }\n &.vuuStickyRight {\n .vuuTableRowBookend {\n border-right-style: solid;\n }\n }\n }\n\n .vuuTableRow[aria-selected=\"true\"]{\n .vuuSelectionDecorator {\n background-color: var(--table-background);\n border: none;\n }\n\n }\n\n /* non-selected row immediately followed by a selected row */\n .vuuTableRow:not([aria-selected=\"true\"]):has( + .vuuTableRow[aria-selected=\"true\"]) {\n border-bottom-color: transparent;\n }\n\n /* first row in a selection block, including a selection block of one row */\n .vuuTableRow:not([aria-selected=\"true\"]) + .vuuTableRow[aria-selected=\"true\"],\n .vuuTableRow[aria-selected=\"true\"][data-first-row=\"true\"]\n {\n border-radius: 0;\n\n &:after {\n background: var(--vuu-table-row-borderColor-selected);\n content: \"\";\n position: absolute;\n top: 0px;\n left: 4px;\n height: 1px;\n width: calc(var(--content-width) - 8px);\n z-index: 1;\n }\n\n .vuuStickyLeft .vuuTableRowBookend {\n border-top-left-radius: var(--vuu-table-row-selection-borderRadius);\n border-top-style: solid;\n margin-top: 1px;\n }\n\n .vuuStickyRight .vuuTableRowBookend {\n border-top-right-radius: var(--vuu-table-row-selection-borderRadius);\n border-top-style: solid;\n margin-top: 1px;\n }\n\n }\n\n /* Last row in a selection block, including a selection block of one row */\n .vuuTableRow[aria-selected=\"true\"]:has( + .vuuTableRow:not([aria-selected=\"true\"])) {\n border-bottom-color: var(--vuu-table-row-borderColor-selected);\n\n .vuuStickyLeft .vuuTableRowBookend {\n border-bottom-left-radius: var(--vuu-table-row-selection-borderRadius);\n border-bottom-style: solid;\n }\n .vuuStickyRight .vuuTableRowBookend {\n border-bottom-right-radius: var(--vuu-table-row-selection-borderRadius);\n border-bottom-style: solid;\n }\n }\n\n}";
2
2
 
3
3
  export { tableCss as default };
4
4
  //# sourceMappingURL=Table.css.js.map
package/package.json CHANGED
@@ -1,22 +1,22 @@
1
1
  {
2
- "version": "0.13.111-alpha.2",
2
+ "version": "0.13.112-alpha.1",
3
3
  "author": "heswell",
4
4
  "license": "Apache-2.0",
5
5
  "devDependencies": {
6
- "@vuu-ui/vuu-data-types": "0.13.111-alpha.2",
7
- "@vuu-ui/vuu-table-types": "0.13.111-alpha.2",
8
- "@vuu-ui/vuu-protocol-types": "0.13.111-alpha.2"
6
+ "@vuu-ui/vuu-data-types": "0.13.112-alpha.1",
7
+ "@vuu-ui/vuu-table-types": "0.13.112-alpha.1",
8
+ "@vuu-ui/vuu-protocol-types": "0.13.112-alpha.1"
9
9
  },
10
10
  "dependencies": {
11
11
  "@salt-ds/core": "1.54.1",
12
12
  "@salt-ds/styles": "0.2.1",
13
13
  "@salt-ds/window": "0.1.1",
14
- "@vuu-ui/vuu-context-menu": "0.13.111-alpha.2",
15
- "@vuu-ui/vuu-data-react": "0.13.111-alpha.2",
16
- "@vuu-ui/vuu-popups": "0.13.111-alpha.2",
17
- "@vuu-ui/vuu-table-extras": "0.13.111-alpha.2",
18
- "@vuu-ui/vuu-ui-controls": "0.13.111-alpha.2",
19
- "@vuu-ui/vuu-utils": "0.13.111-alpha.2"
14
+ "@vuu-ui/vuu-context-menu": "0.13.112-alpha.1",
15
+ "@vuu-ui/vuu-data-react": "0.13.112-alpha.1",
16
+ "@vuu-ui/vuu-popups": "0.13.112-alpha.1",
17
+ "@vuu-ui/vuu-table-extras": "0.13.112-alpha.1",
18
+ "@vuu-ui/vuu-ui-controls": "0.13.112-alpha.1",
19
+ "@vuu-ui/vuu-utils": "0.13.112-alpha.1"
20
20
  },
21
21
  "peerDependencies": {
22
22
  "clsx": "^2.0.0",