@itwin/itwinui-css 0.59.2 → 1.0.0-dev.0

package/css/table.css

@@ -11,48 +11,48 @@
   display:flex;
   flex-direction:column;
   isolation:isolate;
+  --_iui-table-header-size:55px;
+  --_iui-table-row-size:57px;
 }
-.iui-table *{
-  box-sizing:border-box;
-}
-.iui-table .iui-cell-end-icon,
-.iui-table .iui-cell-start-icon{
+.iui-table .iui-table-cell-end-icon,
+.iui-table .iui-table-cell-start-icon{
   flex-shrink:0;
   display:flex;
   align-items:center;
   justify-content:center;
 }
-.iui-table .iui-cell-end-icon svg:not(.iui-radial),
-.iui-table .iui-cell-start-icon svg:not(.iui-radial){
+.iui-table .iui-table-cell-end-icon svg:not(.iui-radial),
+.iui-table .iui-table-cell-start-icon svg:not(.iui-radial){
   display:flex;
   width:16px;
   height:16px;
 }
-.iui-table .iui-cell-start-icon{
+.iui-table .iui-table-cell-start-icon{
   margin-right:8px;
 }
-.iui-table .iui-cell-end-icon{
+.iui-table .iui-table-cell-end-icon{
   width:24px;
   height:24px;
   margin-right:12px;
   margin-left:auto;
 }
-.iui-table.iui-condensed .iui-table-header .iui-cell,
-.iui-table.iui-condensed .iui-paginator{
-  min-height:44px;
+.iui-table[data-iui-size=condensed]{
+  --_iui-table-header-size:44px;
+  --_iui-table-row-size:46px;
 }
-.iui-table.iui-condensed .iui-row .iui-cell{
-  min-height:46px;
+.iui-table[data-iui-size=extra-condensed]{
+  --_iui-table-header-size:33px;
+  --_iui-table-row-size:35px;
 }
-.iui-table.iui-extra-condensed .iui-table-header .iui-cell,
-.iui-table.iui-extra-condensed .iui-paginator{
-  min-height:33px;
+.iui-table[data-iui-size=extra-condensed] .iui-table-header .iui-table-cell{
+  padding-block:2.75px;
 }
-.iui-table.iui-extra-condensed .iui-row .iui-cell{
-  min-height:35px;
+.iui-table .iui-table-header .iui-table-cell,
+.iui-table .iui-table-paginator{
+  min-height:var(--_iui-table-header-size);
 }
-.iui-table.iui-extra-condensed .iui-table-header .iui-cell{
-  padding-block:2.75px;
+.iui-table .iui-table-cell{
+  min-height:var(--_iui-table-row-size);
 }
 
 .iui-table-header-wrapper{
@@ -75,42 +75,35 @@
   min-width:100%;
   flex-shrink:0;
 }
-.iui-table-header .iui-row{
-  display:flex;
-  flex-grow:1;
-  min-width:100%;
-}
-.iui-table-header .iui-cell{
-  min-height:55px;
-  background-color:#edeff2;
+.iui-table-header .iui-table-cell{
   background-color:var(--iui-color-background-3);
 }
-.iui-table-header .iui-cell:not(.iui-slot){
+.iui-table-header .iui-table-cell:not(.iui-slot){
   -moz-column-gap:4px;
        column-gap:4px;
   padding-block:5.5px;
 }
-.iui-table-header .iui-cell:not(.iui-slot):focus-visible{
+.iui-table-header .iui-table-cell:not(.iui-slot):focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
   outline-offset:-1px;
 }
 @supports not selector(*:focus-visible){
-  .iui-table-header .iui-cell:not(.iui-slot):focus{
+  .iui-table-header .iui-table-cell:not(.iui-slot):focus{
     outline:1px solid var(--iui-color-foreground-primary);
     outline-offset:-1px;
   }
 }
-.iui-table-header .iui-cell:not(.iui-slot).iui-actionable{
+.iui-table-header .iui-table-cell:not(.iui-slot).iui-actionable{
   cursor:pointer;
 }
-.iui-table-header .iui-cell:not(.iui-slot).iui-grabbing{
+.iui-table-header .iui-table-cell:not(.iui-slot).iui-grabbing{
   cursor:-webkit-grabbing;
   cursor:grabbing;
 }
-.iui-table-header .iui-cell:not(.iui-slot) .iui-filter-button:not(.iui-active){
+.iui-table-header .iui-table-cell:not(.iui-slot) .iui-table-filter-button:not([data-iui-active=true]){
   visibility:hidden;
 }
-.iui-table-header .iui-cell:not(.iui-slot) > .iui-resizer{
+.iui-table-header .iui-table-cell:not(.iui-slot) > .iui-table-resizer{
   height:100%;
   width:16px;
   position:absolute;
@@ -122,306 +115,263 @@
   z-index:1;
   opacity:0;
 }
-.iui-table-header .iui-cell:not(.iui-slot) > .iui-resizer > .iui-resizer-bar{
+.iui-table-header .iui-table-cell:not(.iui-slot) > .iui-table-resizer > .iui-table-resizer-bar{
   height:100%;
   width:2px;
   margin:0 auto;
-  background-color:#c7ccd1;
+  transition:background-color 0.2s ease-out, width 0.2s ease-out;
   background-color:var(--iui-color-background-border);
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-table-header .iui-cell:not(.iui-slot) > .iui-resizer > .iui-resizer-bar{
-    transition:background-color 0.2s ease-out, width 0.2s ease-out;
-  }
-}
-.iui-table-header .iui-cell:not(.iui-slot) > .iui-resizer:hover > .iui-resizer-bar{
+.iui-table-header .iui-table-cell:not(.iui-slot) > .iui-table-resizer:hover > .iui-table-resizer-bar{
   width:4px;
-  background-color:#008ae0;
   background-color:var(--iui-color-foreground-primary);
 }
-.iui-table-header .iui-cell:not(.iui-slot):hover > .iui-resizer{
+.iui-table-header .iui-table-cell:not(.iui-slot):hover > .iui-table-resizer{
   opacity:1;
 }
-.iui-table-header .iui-cell:not(.iui-slot):hover, .iui-table-header .iui-cell:not(.iui-slot):focus, .iui-table-header .iui-cell:not(.iui-slot):focus-within{
-  background-color:#dde1e4;
+.iui-table-header .iui-table-cell:not(.iui-slot):hover, .iui-table-header .iui-table-cell:not(.iui-slot):focus, .iui-table-header .iui-table-cell:not(.iui-slot):focus-within{
   background-color:var(--iui-color-background-4);
 }
-.iui-table-header .iui-cell:not(.iui-slot):hover .iui-sort,
-.iui-table-header .iui-cell:not(.iui-slot):hover .iui-filter-button, .iui-table-header .iui-cell:not(.iui-slot):focus .iui-sort,
-.iui-table-header .iui-cell:not(.iui-slot):focus .iui-filter-button, .iui-table-header .iui-cell:not(.iui-slot):focus-within .iui-sort,
-.iui-table-header .iui-cell:not(.iui-slot):focus-within .iui-filter-button{
+.iui-table-header .iui-table-cell:not(.iui-slot):hover .iui-table-sort,
+.iui-table-header .iui-table-cell:not(.iui-slot):hover .iui-table-filter-button, .iui-table-header .iui-table-cell:not(.iui-slot):focus .iui-table-sort,
+.iui-table-header .iui-table-cell:not(.iui-slot):focus .iui-table-filter-button, .iui-table-header .iui-table-cell:not(.iui-slot):focus-within .iui-table-sort,
+.iui-table-header .iui-table-cell:not(.iui-slot):focus-within .iui-table-filter-button{
   visibility:visible;
 }
-.iui-table-header .iui-reorder-bar{
+.iui-table-header .iui-table-reorder-bar{
   position:absolute;
   height:100%;
   width:2px;
 }
-.iui-table-header .iui-reorder-column-right > .iui-reorder-bar{
+.iui-table-header .iui-table-reorder-column-right > .iui-table-reorder-bar{
   right:0;
 }
-.iui-table-header .iui-reorder-column-left > .iui-reorder-bar{
+.iui-table-header .iui-table-reorder-column-left > .iui-table-reorder-bar{
   left:0;
 }
-.iui-table-header .iui-reorder-column-left > .iui-reorder-bar,
-.iui-table-header .iui-reorder-column-right > .iui-reorder-bar{
-  background-color:#008ae0;
+.iui-table-header .iui-table-reorder-column-left > .iui-table-reorder-bar,
+.iui-table-header .iui-table-reorder-column-right > .iui-table-reorder-bar{
   background-color:var(--iui-color-foreground-primary);
 }
-.iui-table-header .iui-sort{
+.iui-table-header .iui-table-sort{
   visibility:hidden;
-  fill:rgba(0, 0, 0, 0.4);
   fill:var(--iui-icons-color);
 }
 .iui-table-header .iui-sorted{
-  background-color:#dde1e4;
   background-color:var(--iui-color-background-4);
 }
-.iui-table-header .iui-sorted .iui-sort{
+.iui-table-header .iui-sorted .iui-table-sort{
   visibility:visible;
-  fill:rgba(0, 0, 0, 0.8);
   fill:var(--iui-icons-color-actionable);
 }
 
-.iui-table-header-actions-container{
+.iui-table-row{
+  min-width:100%;
   display:flex;
-  flex-grow:1;
-  align-items:center;
-  flex-wrap:wrap;
-  justify-content:flex-end;
-  margin-right:12px;
 }
-.iui-table-header-actions-container .iui-cell-end-icon{
-  width:28px;
-  height:28px;
-  margin-right:initial;
-  margin-left:auto;
-}
-
-.iui-table-body{
-  overflow-y:scroll;
-  overflow:overlay;
-  display:flex;
-  flex-direction:column;
+.iui-table-header .iui-table-row{
   flex-grow:1;
-  align-items:flex-start;
-  background-color:white;
-  background-color:var(--iui-color-background-1);
-}
-.iui-table-body.iui-scroll-snapping{
-  -ms-scroll-snap-type:y mandatory;
-      scroll-snap-type:y mandatory;
-}
-.iui-table-body.iui-scroll-snapping .iui-row{
-  scroll-snap-align:start none;
-}
-.iui-table-body.iui-zebra-striping .iui-row:nth-child(even):not(.iui-selected) .iui-cell{
-  background-color:rgba(0, 0, 0, 0.02);
-  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.02);
-}
-.iui-table-body .iui-row{
-  min-width:100%;
-  display:flex;
 }
-.iui-table-body .iui-row .iui-cell{
+
+.iui-table-body .iui-table-row .iui-table-cell{
   border-top:solid 1px transparent;
   border-bottom:solid 1px transparent;
-  border-bottom-color:#c7ccd1;
   border-bottom-color:var(--iui-color-background-border);
-  background-color:white;
   background-color:var(--iui-color-background-1);
+  transition:border 0.2s ease-out;
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-table-body .iui-row .iui-cell{
-    transition:border 0.2s ease-out;
-  }
-}
-.iui-table-body .iui-row > .iui-slot > .iui-more-options{
+.iui-table-body .iui-table-row > .iui-slot > .iui-table-more-options{
   visibility:hidden;
 }
-.iui-table-body .iui-row:hover:not(.iui-disabled) .iui-cell{
-  background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
+.iui-table-body .iui-table-row:hover:not([aria-disabled=true]) .iui-table-cell{
   background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
 }
-.iui-table-body .iui-row:hover:not(.iui-disabled) > .iui-slot:not(.iui-disabled) > .iui-more-options{
+.iui-table-body .iui-table-row:hover:not([aria-disabled=true]) > .iui-slot:not([aria-disabled=true]) > .iui-table-more-options{
   visibility:visible;
 }
-.iui-table-body .iui-row:focus-within > .iui-slot:not(.iui-disabled) > .iui-more-options{
+.iui-table-body .iui-table-row:focus-within > .iui-slot:not([aria-disabled=true]) > .iui-table-more-options{
   visibility:visible;
 }
 @media (prefers-reduced-motion: no-preference){
-  .iui-table-body .iui-row .iui-row-expander > .iui-button-icon{
+  .iui-table-body .iui-table-row .iui-table-row-expander > .iui-button-icon{
     transition:transform 0.2s ease-out;
   }
 }
-.iui-table-body .iui-row.iui-row-expanded{
+.iui-table-body .iui-table-row.iui-table-row-expanded{
   overflow:hidden;
 }
-.iui-table-body .iui-row.iui-row-expanded .iui-cell{
-  border-left-color:#dde1e4;
-  border-right-color:#dde1e4;
+.iui-table-body .iui-table-row.iui-table-row-expanded .iui-table-cell{
   border-left-color:var(--iui-color-background-4);
   border-right-color:var(--iui-color-background-4);
   border-bottom-color:transparent;
 }
-.iui-table-body .iui-row.iui-row-expanded .iui-row-expander > .iui-button-icon{
+.iui-table-body .iui-table-row.iui-table-row-expanded .iui-table-row-expander > .iui-button-icon{
   transform:rotate(90deg);
 }
-.iui-table-body .iui-row.iui-row-expanded + .iui-expanded-content{
-  border-left-color:#dde1e4;
-  border-right-color:#dde1e4;
+.iui-table-body .iui-table-row.iui-table-row-expanded + .iui-table-expanded-content{
   border-left-color:var(--iui-color-background-4);
   border-right-color:var(--iui-color-background-4);
 }
-.iui-table-body .iui-row.iui-expanded-content{
+.iui-table-body .iui-table-row.iui-table-expanded-content{
   overflow:hidden;
   border-left:1px solid transparent;
   border-right:1px solid transparent;
-  border-bottom:1px solid #c7ccd1;
   border-bottom:1px solid var(--iui-color-background-border);
 }
-.iui-table-body .iui-row.iui-expanded-content.iui-enter{
+.iui-table-body .iui-table-row.iui-table-expanded-content.iui-enter{
   opacity:0;
 }
-.iui-table-body .iui-row.iui-expanded-content.iui-enter-active{
+.iui-table-body .iui-table-row.iui-table-expanded-content.iui-enter-active{
   opacity:1;
 }
 @media (prefers-reduced-motion: no-preference){
-  .iui-table-body .iui-row.iui-expanded-content.iui-enter-active{
+  .iui-table-body .iui-table-row.iui-table-expanded-content.iui-enter-active{
     transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
   }
 }
-.iui-table-body .iui-row.iui-expanded-content.iui-exit{
+.iui-table-body .iui-table-row.iui-table-expanded-content.iui-exit{
   opacity:1;
 }
-.iui-table-body .iui-row.iui-expanded-content.iui-exit-active{
+.iui-table-body .iui-table-row.iui-table-expanded-content.iui-exit-active{
   opacity:0;
 }
 @media (prefers-reduced-motion: no-preference){
-  .iui-table-body .iui-row.iui-expanded-content.iui-exit-active{
+  .iui-table-body .iui-table-row.iui-table-expanded-content.iui-exit-active{
     transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
   }
 }
-.iui-table-body .iui-row:not(.iui-selected) + .iui-selected .iui-cell, .iui-table-body .iui-row.iui-selected:first-child .iui-cell{
+.iui-table-body .iui-table-row:not([aria-selected=true]) + [aria-selected=true] .iui-table-cell, .iui-table-body .iui-table-row[aria-selected=true]:first-child .iui-table-cell{
   border-bottom-color:transparent;
 }
-.iui-table-body .iui-row.iui-selected .iui-cell{
-  border-color:#008ae0;
-  background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
+.iui-table-body .iui-table-row[aria-selected=true] .iui-table-cell{
   border-color:var(--iui-color-foreground-primary);
   background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
 }
-.iui-table-body .iui-row.iui-selected + .iui-selected .iui-cell{
+.iui-table-body .iui-table-row[aria-selected=true] + [aria-selected=true] .iui-table-cell{
   border-bottom-color:transparent;
-  border-top-color:rgba(0, 138, 224, 0.4);
   border-top-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
 }
-.iui-table-body .iui-row.iui-selected:last-child .iui-cell{
-  border-bottom-color:#008ae0;
+.iui-table-body .iui-table-row[aria-selected=true]:last-child .iui-table-cell{
   border-bottom-color:var(--iui-color-foreground-primary);
 }
-.iui-table-body .iui-row.iui-selected + :not(.iui-selected) .iui-cell,
-.iui-table-body .iui-row.iui-selected + .iui-expanded-content + .iui-row:not(.iui-selected) .iui-cell{
-  border-top-color:#008ae0;
+.iui-table-body .iui-table-row[aria-selected=true] + :not([aria-selected=true]) .iui-table-cell,
+.iui-table-body .iui-table-row[aria-selected=true] + .iui-table-expanded-content + .iui-table-row:not([aria-selected=true]) .iui-table-cell{
   border-top-color:var(--iui-color-foreground-primary);
 }
-.iui-table-body .iui-row.iui-selected + .iui-expanded-content{
-  border-color:transparent #008ae0;
+.iui-table-body .iui-table-row[aria-selected=true] + .iui-table-expanded-content{
   border-color:transparent var(--iui-color-foreground-primary);
 }
-.iui-table-body .iui-row.iui-selected + .iui-expanded-content:last-child{
-  border-bottom-color:#008ae0;
-}
-.iui-table-body .iui-row.iui-selected + .iui-expanded-content:last-child{
+.iui-table-body .iui-table-row[aria-selected=true] + .iui-table-expanded-content:last-child{
   border-bottom-color:var(--iui-color-foreground-primary);
 }
-.iui-table-body .iui-row.iui-new{
+.iui-table-body .iui-table-row.iui-new{
   font-weight:600;
 }
-.iui-table-body .iui-row.iui-new > .iui-main-column::before{
+.iui-table-body .iui-table-row.iui-new > .iui-main-column::before{
   content:"•";
   position:absolute;
   left:0;
   font-size:24px;
-  color:#53a21a;
   color:var(--iui-color-foreground-positive);
 }
-.iui-table-body .iui-row .iui-cell.iui-disabled, .iui-table-body .iui-row.iui-expanded-content.iui-disabled{
+.iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true], .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true]{
   font-style:italic;
   cursor:not-allowed;
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
-.iui-table-body .iui-row .iui-cell.iui-disabled.iui-slot:hover > .iui-more-options, .iui-table-body .iui-row.iui-expanded-content.iui-disabled.iui-slot:hover > .iui-more-options{
+.iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true].iui-slot:hover > .iui-table-more-options, .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true].iui-slot:hover > .iui-table-more-options{
   visibility:hidden;
 }
-.iui-table-body .iui-row .iui-cell.iui-disabled img,
-.iui-table-body .iui-row .iui-cell.iui-disabled svg:not(.iui-radial),
-.iui-table-body .iui-row .iui-cell.iui-disabled .iui-user-icon, .iui-table-body .iui-row.iui-expanded-content.iui-disabled img,
-.iui-table-body .iui-row.iui-expanded-content.iui-disabled svg:not(.iui-radial),
-.iui-table-body .iui-row.iui-expanded-content.iui-disabled .iui-user-icon{
+.iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true] img,
+.iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true] svg:not(.iui-radial),
+.iui-table-body .iui-table-row .iui-table-cell[aria-disabled=true] .iui-avatar, .iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true] img,
+.iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true] svg:not(.iui-radial),
+.iui-table-body .iui-table-row.iui-table-expanded-content[aria-disabled=true] .iui-avatar{
   filter:grayscale(100%);
 }
-.iui-table-body .iui-row.iui-positive .iui-cell:first-of-type,
-.iui-table-body .iui-row.iui-positive + .iui-expanded-content{
-  box-shadow:inset 2px 0 0 0 #53a21a;
+.iui-table-body .iui-table-row[data-iui-status=positive] .iui-table-cell:first-of-type,
+.iui-table-body .iui-table-row[data-iui-status=positive] + .iui-table-expanded-content{
   box-shadow:inset 2px 0 0 0 var(--iui-icons-color-positive);
 }
-.iui-table-body .iui-row.iui-positive .iui-cell:first-of-type::-moz-selection, .iui-table-body .iui-row.iui-positive .iui-cell:first-of-type *::-moz-selection, .iui-table-body .iui-row.iui-positive + .iui-expanded-content::-moz-selection, .iui-table-body .iui-row.iui-positive + .iui-expanded-content *::-moz-selection{
-  background-color:rgba(83, 162, 26, 0.2);
+.iui-table-body .iui-table-row[data-iui-status=positive] .iui-table-cell:first-of-type::-moz-selection, .iui-table-body .iui-table-row[data-iui-status=positive] .iui-table-cell:first-of-type *::-moz-selection, .iui-table-body .iui-table-row[data-iui-status=positive] + .iui-table-expanded-content::-moz-selection, .iui-table-body .iui-table-row[data-iui-status=positive] + .iui-table-expanded-content *::-moz-selection{
   background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
 }
-.iui-table-body .iui-row.iui-positive .iui-cell:first-of-type::selection,
-.iui-table-body .iui-row.iui-positive .iui-cell:first-of-type *::selection,
-.iui-table-body .iui-row.iui-positive + .iui-expanded-content::selection,
-.iui-table-body .iui-row.iui-positive + .iui-expanded-content *::selection{
-  background-color:rgba(83, 162, 26, 0.2);
+.iui-table-body .iui-table-row[data-iui-status=positive] .iui-table-cell:first-of-type::selection,
+.iui-table-body .iui-table-row[data-iui-status=positive] .iui-table-cell:first-of-type *::selection,
+.iui-table-body .iui-table-row[data-iui-status=positive] + .iui-table-expanded-content::selection,
+.iui-table-body .iui-table-row[data-iui-status=positive] + .iui-table-expanded-content *::selection{
   background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
 }
-.iui-table-body .iui-row.iui-positive .iui-cell-end-icon svg{
-  fill:#53a21a;
+.iui-table-body .iui-table-row[data-iui-status=positive] .iui-table-cell-end-icon svg{
   fill:var(--iui-icons-color-positive);
 }
-.iui-table-body .iui-row.iui-warning .iui-cell:first-of-type,
-.iui-table-body .iui-row.iui-warning + .iui-expanded-content{
-  box-shadow:inset 2px 0 0 0 #f18d13;
+.iui-table-body .iui-table-row[data-iui-status=warning] .iui-table-cell:first-of-type,
+.iui-table-body .iui-table-row[data-iui-status=warning] + .iui-table-expanded-content{
   box-shadow:inset 2px 0 0 0 var(--iui-icons-color-warning);
 }
-.iui-table-body .iui-row.iui-warning .iui-cell:first-of-type::-moz-selection, .iui-table-body .iui-row.iui-warning .iui-cell:first-of-type *::-moz-selection, .iui-table-body .iui-row.iui-warning + .iui-expanded-content::-moz-selection, .iui-table-body .iui-row.iui-warning + .iui-expanded-content *::-moz-selection{
-  background-color:rgba(241, 141, 19, 0.2);
+.iui-table-body .iui-table-row[data-iui-status=warning] .iui-table-cell:first-of-type::-moz-selection, .iui-table-body .iui-table-row[data-iui-status=warning] .iui-table-cell:first-of-type *::-moz-selection, .iui-table-body .iui-table-row[data-iui-status=warning] + .iui-table-expanded-content::-moz-selection, .iui-table-body .iui-table-row[data-iui-status=warning] + .iui-table-expanded-content *::-moz-selection{
   background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
 }
-.iui-table-body .iui-row.iui-warning .iui-cell:first-of-type::selection,
-.iui-table-body .iui-row.iui-warning .iui-cell:first-of-type *::selection,
-.iui-table-body .iui-row.iui-warning + .iui-expanded-content::selection,
-.iui-table-body .iui-row.iui-warning + .iui-expanded-content *::selection{
-  background-color:rgba(241, 141, 19, 0.2);
+.iui-table-body .iui-table-row[data-iui-status=warning] .iui-table-cell:first-of-type::selection,
+.iui-table-body .iui-table-row[data-iui-status=warning] .iui-table-cell:first-of-type *::selection,
+.iui-table-body .iui-table-row[data-iui-status=warning] + .iui-table-expanded-content::selection,
+.iui-table-body .iui-table-row[data-iui-status=warning] + .iui-table-expanded-content *::selection{
   background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
 }
-.iui-table-body .iui-row.iui-warning .iui-cell-end-icon svg{
-  fill:#f18d13;
+.iui-table-body .iui-table-row[data-iui-status=warning] .iui-table-cell-end-icon svg{
   fill:var(--iui-icons-color-warning);
 }
-.iui-table-body .iui-row.iui-negative .iui-cell:first-of-type,
-.iui-table-body .iui-row.iui-negative + .iui-expanded-content{
-  box-shadow:inset 2px 0 0 0 #d10a0a;
+.iui-table-body .iui-table-row[data-iui-status=negative] .iui-table-cell:first-of-type,
+.iui-table-body .iui-table-row[data-iui-status=negative] + .iui-table-expanded-content{
   box-shadow:inset 2px 0 0 0 var(--iui-icons-color-negative);
 }
-.iui-table-body .iui-row.iui-negative .iui-cell:first-of-type::-moz-selection, .iui-table-body .iui-row.iui-negative .iui-cell:first-of-type *::-moz-selection, .iui-table-body .iui-row.iui-negative + .iui-expanded-content::-moz-selection, .iui-table-body .iui-row.iui-negative + .iui-expanded-content *::-moz-selection{
-  background-color:rgba(209, 10, 10, 0.2);
+.iui-table-body .iui-table-row[data-iui-status=negative] .iui-table-cell:first-of-type::-moz-selection, .iui-table-body .iui-table-row[data-iui-status=negative] .iui-table-cell:first-of-type *::-moz-selection, .iui-table-body .iui-table-row[data-iui-status=negative] + .iui-table-expanded-content::-moz-selection, .iui-table-body .iui-table-row[data-iui-status=negative] + .iui-table-expanded-content *::-moz-selection{
   background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
 }
-.iui-table-body .iui-row.iui-negative .iui-cell:first-of-type::selection,
-.iui-table-body .iui-row.iui-negative .iui-cell:first-of-type *::selection,
-.iui-table-body .iui-row.iui-negative + .iui-expanded-content::selection,
-.iui-table-body .iui-row.iui-negative + .iui-expanded-content *::selection{
-  background-color:rgba(209, 10, 10, 0.2);
+.iui-table-body .iui-table-row[data-iui-status=negative] .iui-table-cell:first-of-type::selection,
+.iui-table-body .iui-table-row[data-iui-status=negative] .iui-table-cell:first-of-type *::selection,
+.iui-table-body .iui-table-row[data-iui-status=negative] + .iui-table-expanded-content::selection,
+.iui-table-body .iui-table-row[data-iui-status=negative] + .iui-table-expanded-content *::selection{
   background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
 }
-.iui-table-body .iui-row.iui-negative .iui-cell-end-icon svg{
-  fill:#d10a0a;
+.iui-table-body .iui-table-row[data-iui-status=negative] .iui-table-cell-end-icon svg{
   fill:var(--iui-icons-color-negative);
 }
+
+.iui-table-header-actions-container{
+  display:flex;
+  flex-grow:1;
+  align-items:center;
+  flex-wrap:wrap;
+  justify-content:flex-end;
+  margin-right:12px;
+}
+.iui-table-header-actions-container .iui-table-cell-end-icon{
+  width:28px;
+  height:28px;
+  margin-right:initial;
+  margin-left:auto;
+}
+
+.iui-table-body{
+  overflow-y:scroll;
+  overflow:overlay;
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  align-items:flex-start;
+  background-color:var(--iui-color-background-1);
+}
+.iui-table-body.iui-scroll-snapping{
+  -ms-scroll-snap-type:y mandatory;
+      scroll-snap-type:y mandatory;
+}
+.iui-table-body.iui-scroll-snapping .iui-table-row{
+  scroll-snap-align:start none;
+}
+.iui-table-body.iui-zebra-striping .iui-table-row:nth-child(even):not([aria-selected=true]) .iui-table-cell{
+  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.02);
+}
 .iui-table-body > .iui-table-empty{
   text-align:center;
   padding:32px;
@@ -430,32 +380,28 @@
   justify-content:center;
   align-items:center;
   flex-grow:1;
-  -ms-grid-row-align:center;
-      align-self:center;
-  color:rgba(0, 0, 0, 0.4);
-  background-color:white;
+  align-self:center;
   color:var(--iui-text-color-muted);
   background-color:var(--iui-color-background-1);
 }
 
-.iui-cell{
+.iui-table-cell{
   align-items:center;
   display:flex;
   flex-grow:1;
   min-width:64px;
-  min-height:57px;
   padding-left:16px;
   flex-basis:64px;
   position:relative;
   word-break:break-word;
 }
-.iui-cell:first-of-type{
+.iui-table-cell:first-of-type{
   border-left:solid 1px transparent;
 }
-.iui-cell:last-of-type{
+.iui-table-cell:last-of-type{
   border-right:solid 1px transparent;
 }
-.iui-cell.iui-slot{
+.iui-table-cell.iui-slot{
   width:48px;
   padding:0;
   flex-grow:0;
@@ -465,68 +411,57 @@
   align-items:center;
   flex-basis:48px;
 }
-.iui-cell.iui-cell-sticky{
+.iui-table-cell.iui-table-cell-sticky{
   position:-webkit-sticky;
   position:sticky;
   z-index:1;
   left:var(--iui-table-sticky-left, initial);
   right:var(--iui-table-sticky-right, initial);
 }
-.iui-cell:not(.iui-slot):last-child{
+.iui-table-cell:not(.iui-slot):last-child{
   padding-right:16px;
 }
-.iui-cell.iui-positive{
-  background:linear-gradient(rgba(83, 162, 26, 0.1), rgba(83, 162, 26, 0.1)), linear-gradient(white, white);
+.iui-table-cell[data-iui-status=positive]{
   background:linear-gradient(rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
 }
-.iui-cell.iui-positive::-moz-selection, .iui-cell.iui-positive *::-moz-selection{
-  background-color:rgba(83, 162, 26, 0.2);
+.iui-table-cell[data-iui-status=positive]::-moz-selection, .iui-table-cell[data-iui-status=positive] *::-moz-selection{
   background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
 }
-.iui-cell.iui-positive::selection,
-.iui-cell.iui-positive *::selection{
-  background-color:rgba(83, 162, 26, 0.2);
+.iui-table-cell[data-iui-status=positive]::selection,
+.iui-table-cell[data-iui-status=positive] *::selection{
   background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
 }
-.iui-cell.iui-warning{
-  background:linear-gradient(rgba(241, 141, 19, 0.1), rgba(241, 141, 19, 0.1)), linear-gradient(white, white);
+.iui-table-cell[data-iui-status=warning]{
   background:linear-gradient(rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
 }
-.iui-cell.iui-warning::-moz-selection, .iui-cell.iui-warning *::-moz-selection{
-  background-color:rgba(241, 141, 19, 0.2);
+.iui-table-cell[data-iui-status=warning]::-moz-selection, .iui-table-cell[data-iui-status=warning] *::-moz-selection{
   background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
 }
-.iui-cell.iui-warning::selection,
-.iui-cell.iui-warning *::selection{
-  background-color:rgba(241, 141, 19, 0.2);
+.iui-table-cell[data-iui-status=warning]::selection,
+.iui-table-cell[data-iui-status=warning] *::selection{
   background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
 }
-.iui-cell.iui-negative{
-  background:linear-gradient(rgba(209, 10, 10, 0.1), rgba(209, 10, 10, 0.1)), linear-gradient(white, white);
+.iui-table-cell[data-iui-status=negative]{
   background:linear-gradient(rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
 }
-.iui-cell.iui-negative::-moz-selection, .iui-cell.iui-negative *::-moz-selection{
-  background-color:rgba(209, 10, 10, 0.2);
+.iui-table-cell[data-iui-status=negative]::-moz-selection, .iui-table-cell[data-iui-status=negative] *::-moz-selection{
   background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
 }
-.iui-cell.iui-negative::selection,
-.iui-cell.iui-negative *::selection{
-  background-color:rgba(209, 10, 10, 0.2);
+.iui-table-cell[data-iui-status=negative]::selection,
+.iui-table-cell[data-iui-status=negative] *::selection{
   background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
 }
-.iui-cell[contenteditable]{
+.iui-table-cell[contenteditable]{
   outline-offset:-1px;
 }
-.iui-cell[contenteditable]:focus, .iui-cell[contenteditable]:hover{
-  outline:1px solid #008ae0;
+.iui-table-cell[contenteditable]:focus, .iui-table-cell[contenteditable]:hover{
   outline:1px solid var(--iui-color-foreground-primary);
 }
-.iui-cell[contenteditable]:focus{
-  background-color:white;
+.iui-table-cell[contenteditable]:focus{
   background-color:var(--iui-color-background-1);
 }
 
-.iui-cell-shadow-left{
+.iui-table-cell-shadow-left{
   position:absolute;
   top:-1px;
   bottom:-1px;
@@ -536,12 +471,12 @@
   transform:translate(-100%);
   box-shadow:inset -10px 0 5px -10px rgba(0, 0, 0, 0.25);
 }
-.iui-table-header .iui-cell-shadow-left{
+.iui-table-header .iui-table-cell-shadow-left{
   top:0;
   bottom:0;
 }
 
-.iui-cell-shadow-right{
+.iui-table-cell-shadow-right{
   position:absolute;
   top:-1px;
   bottom:-1px;
@@ -551,12 +486,12 @@
   transform:translate(100%);
   box-shadow:inset 10px 0 5px -10px rgba(0, 0, 0, 0.25);
 }
-.iui-table-header .iui-cell-shadow-right{
+.iui-table-header .iui-table-cell-shadow-right{
   top:0;
   bottom:0;
 }
 
-.iui-paginator{
+.iui-table-paginator{
   margin:0;
   padding:0;
   border:none;
@@ -564,62 +499,56 @@
   display:flex;
   justify-content:space-between;
   align-items:center;
-  min-height:55px;
   padding:0 16px;
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
-  background-color:#edeff2;
   background-color:var(--iui-color-background-3);
 }
-.iui-paginator > .iui-left,
-.iui-paginator > .iui-center,
-.iui-paginator > .iui-right{
+.iui-table-paginator > .iui-left,
+.iui-table-paginator > .iui-center,
+.iui-table-paginator > .iui-right{
   display:flex;
   align-items:center;
   position:relative;
   flex:1;
   min-width:0;
 }
-.iui-paginator > .iui-center{
+.iui-table-paginator > .iui-center{
   justify-content:center;
   flex:2 1;
-  color:rgba(0, 0, 0, 0.8);
   color:var(--iui-text-color);
 }
-.iui-paginator > .iui-right{
+.iui-table-paginator > .iui-right{
   justify-content:flex-end;
 }
-.iui-paginator-page-size-label{
-  color:rgba(0, 0, 0, 0.4);
+
+.iui-table-paginator-page-size-label{
   color:var(--iui-text-color-muted);
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
 }
 
-.iui-paginator-ellipsis{
+.iui-table-paginator-ellipsis{
   display:flex;
   justify-content:center;
   align-items:center;
   width:38px;
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
-.iui-paginator-ellipsis-small{
+.iui-table-paginator-ellipsis-small{
   width:27px;
 }
 
-.iui-paginator-pages-group{
+.iui-table-paginator-pages-group{
   display:inline-flex;
   align-items:center;
   margin:0 8px;
 }
 
-.iui-paginator-page-button{
-  --_iui-button-active-stripe-inset:initial;
-  --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+.iui-table-paginator-page-button{
   margin:0;
   padding:0;
   border:none;
@@ -630,117 +559,103 @@
   vertical-align:middle;
   justify-content:center;
   position:relative;
-  box-sizing:border-box;
-  border-radius:3px;
+  border-radius:4px;
   line-height:22px;
-  box-shadow:none;
   font-size:14px;
   font-weight:400;
-  text-decoration:none;
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
   cursor:pointer;
   white-space:nowrap;
-  border:1px solid transparent;
-  color:rgba(0, 0, 0, 0.8);
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+  border:1px solid var(--_iui-button-border-color);
+  background:var(--_iui-button-background-color);
   color:var(--_iui-button-text-color);
-  border-color:transparent;
-  background-color:transparent;
-  padding:0 8px;
-  height:38px;
-  gap:8px;
-  width:38px;
-  --_iui-button-active-stripe-inset:calc(100% - 4px) 2px 2px;
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-paginator-page-button{
-    transition:color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
-  }
-}
-.iui-paginator-page-button:hover{
-  --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
+  gap:var(--_iui-button-gap);
+  height:var(--_iui-button-height);
+  padding-inline:var(--_iui-button-padding-inline);
+  transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
+  -webkit-tap-highlight-color:transparent;
   text-decoration:none;
+  --_iui-button-gap:8px;
+  --_iui-button-height:38px;
+  --_iui-button-padding-inline:16px;
+  --_iui-button-text-color:var(--iui-text-color);
+  --_iui-button-background-color:transparent;
+  --_iui-button-border-color:transparent;
+  --_iui-button-icon-margin-x:3px;
+  --_iui-button-gap:8px;
+  --_iui-button-height:38px;
+  --_iui-button-padding-inline:16px;
+  --_iui-button-padding-inline:8px;
+  width:38px;
 }
-.iui-paginator-page-button:focus-visible{
+.iui-table-paginator-page-button:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
   outline-offset:-1px;
 }
 @supports not selector(*:focus-visible){
-  .iui-paginator-page-button:focus{
+  .iui-table-paginator-page-button:focus{
     outline:1px solid var(--iui-color-foreground-primary);
     outline-offset:-1px;
   }
 }
-.iui-paginator-page-button[disabled], .iui-paginator-page-button:disabled{
-  cursor:not-allowed;
-  background:#edeff2;
-  border-color:#edeff2;
-  color:rgba(0, 0, 0, 0.2);
-  background:var(--iui-color-background-disabled);
-  border-color:var(--iui-color-background-disabled);
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
-}
-.iui-paginator-page-button > .iui-button-icon:only-child{
-  margin-left:3px;
-  margin-right:3px;
-}
-.iui-paginator-page-button:hover{
-  background-color:rgba(0, 0, 0, 0.1);
-  border-color:transparent;
-  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
-  border-color:transparent;
-}
-.iui-paginator-page-button.iui-active{
-  background-color:rgba(0, 138, 224, 0.1);
-  color:#008ae0;
-  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
-  color:var(--iui-color-foreground-primary);
-  border-color:transparent;
-}
-.iui-paginator-page-button[disabled], .iui-paginator-page-button:disabled{
-  cursor:not-allowed;
-  background:#edeff2;
-  border-color:#edeff2;
-  color:rgba(0, 0, 0, 0.2);
-  background:var(--iui-color-background-disabled);
-  border-color:var(--iui-color-background-disabled);
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
-  background-color:transparent;
-  border-color:transparent;
-  background-color:transparent;
-  border-color:transparent;
-}
-.iui-paginator-page-button[disabled].iui-active, .iui-paginator-page-button:disabled.iui-active{
-  background-color:rgba(0, 0, 0, 0.05);
-  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
-}
-.iui-paginator-page-button.iui-active::after{
+.iui-table-paginator-page-button:where(:hover, :active){
+  --_iui-button-text-color:var(--iui-color-foreground-body);
+  --_iui-button-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
+}
+.iui-table-paginator-page-button:where(:focus){
+  outline-offset:-1px;
+  outline-width:1px;
+}
+.iui-table-paginator-page-button:where([disabled], :disabled, [aria-disabled="true"]){
+  --_iui-button-text-color:var(--iui-text-color-placeholder);
+  --_iui-button-background-color:transparent;
+  --_iui-button-border-color:transparent;
+}
+.iui-table-paginator-page-button-small{
+  --_iui-button-gap:4px;
+  --_iui-button-height:27px;
+  --_iui-button-padding-inline:8px;
+  width:27px;
+}
+.iui-table-paginator-page-button[data-iui-active=true]{
+  --_iui-button-active-stripe-inset:initial;
+  --_iui-button-active-stripe-color:var(--iui-color-foreground-primary);
+  --_iui-button-text-color:var(--iui-color-foreground-primary);
+  --_iui-button-background-color:linear-gradient(
+    rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)),
+    rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))
+  ),
+    linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
+  --_iui-button-background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
+  --_iui-button-active-stripe-inset:calc(100% - 4px) 2px 2px;
+}
+.iui-table-paginator-page-button[data-iui-active=true]::after{
   content:"";
   position:absolute;
   inset:var(--_iui-button-active-stripe-inset);
-  background-color:var(--iui-color-foreground-primary);
+  background-color:var(--_iui-button-active-stripe-color);
 }
-.iui-paginator-page-button.iui-active[disabled]::after, .iui-paginator-page-button.iui-active:disabled::after{
-  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
+.iui-table-paginator-page-button[data-iui-active=true][disabled], .iui-table-paginator-page-button[data-iui-active=true]:disabled, .iui-table-paginator-page-button[data-iui-active=true][aria-disabled=true]{
+  --_iui-button-active-stripe-color:var(--iui-text-color-placeholder);
+  --_iui-button-text-color:var(--iui-text-color-placeholder);
 }
-.iui-paginator-page-button-small{
-  padding:0 8px;
-  height:27px;
-  gap:4px;
-  width:27px;
+.iui-table-paginator-page-button[data-iui-active=true][disabled], .iui-table-paginator-page-button[data-iui-active=true]:disabled, .iui-table-paginator-page-button[data-iui-active=true][aria-disabled=true]{
+  --_iui-button-background-color:var(--iui-color-background-disabled);
+}
+.iui-table-paginator-page-button[data-iui-active=true]:where([disabled], :disabled, [aria-disabled="true"]){
+  --_iui-button-background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
 }
 
-.iui-column-filter{
+.iui-table-column-filter{
   --iui-surface-background-color:var(--iui-color-background-1);
   --iui-surface-border-radius:0;
   --iui-surface-elevation:0 1px 5px rgba(0, 0, 0, 0.25);
   background-color:var(--iui-surface-background-color);
   border-radius:var(--iui-surface-border-radius);
   box-shadow:var(--iui-surface-elevation);
-  box-sizing:border-box;
   color:var(--iui-text-color);
   padding:11px 12px;
   display:inline-flex;
@@ -748,25 +663,23 @@
   align-items:flex-end;
 }
 @media (forced-colors: active){
-  .iui-column-filter{
+  .iui-table-column-filter{
     border:1px solid transparent;
   }
 }
-.iui-column-filter > .iui-input-container:not(.iui-inline-label){
+.iui-table-column-filter > .iui-input-container:not(.iui-inline-label){
   width:100%;
 }
-.iui-column-filter > .iui-input-container,
-.iui-column-filter > .iui-input{
+.iui-table-column-filter > .iui-input-container,
+.iui-table-column-filter > .iui-input{
   margin-bottom:11px;
 }
-.iui-column-filter > .iui-button-bar{
+.iui-table-column-filter > .iui-button-bar{
   display:flex;
   width:100%;
   align-content:center;
+  gap:8px;
 }
-.iui-column-filter > .iui-button-bar > .iui-button:first-of-type{
+.iui-table-column-filter > .iui-button-bar > .iui-button:first-of-type{
   margin-left:auto;
-}
-.iui-column-filter > .iui-button-bar > .iui-button:not(:last-child){
-  margin-right:8px;
 }