@itwin/itwinui-css 0.43.0 → 0.45.0

package/css/table.css

@@ -54,16 +54,13 @@
   .iui-table-header .iui-row{
     display:flex;
     flex-grow:1; }
-  .iui-table-header .iui-cell:not(.iui-slot):focus{
-    outline:0;
-    box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-    box-shadow:var(--iui-focus-box-shadow); }
-  .iui-table-header .iui-cell:not(.iui-slot):focus:not(:focus-visible){
-    box-shadow:none; }
   .iui-table-header .iui-cell:not(.iui-slot):focus-visible{
-    outline:0;
-    box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-    box-shadow:var(--iui-focus-box-shadow); }
+    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{
+      outline:1px solid var(--iui-color-foreground-primary);
+      outline-offset:-1px; } }
   .iui-table-header .iui-cell:not(.iui-slot).iui-actionable{
     cursor:pointer; }
   .iui-table-header .iui-cell:not(.iui-slot) > .iui-filter-button{
@@ -131,7 +128,7 @@
         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-table-body.iui-zebra-striping .iui-row:nth-child(even):not(.iui-selected){
     background-color:rgba(0, 0, 0, 0.02);
     background-color:rgba(var(--iui-color-foreground-body-rgb), 0.02); }
   .iui-table-body .iui-row{
@@ -379,25 +376,6 @@
     flex:2 1;
     color:rgba(0, 0, 0, 0.8);
     color:var(--iui-text-color); }
-    .iui-paginator > .iui-center .iui-button-group{
-      margin:0 8px; }
-      .iui-paginator > .iui-center .iui-button-group > *{
-        margin-right:0; }
-        .iui-paginator > .iui-center .iui-button-group > * > .iui-button,
-        .iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis{
-          width:38px; }
-          .iui-paginator > .iui-center .iui-button-group > * > .iui-button.iui-small,
-          .iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis.iui-small{
-            width:27px; }
-        .iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis{
-          display:flex;
-          justify-content:center;
-          align-items:center;
-          color:rgba(0, 0, 0, 0.4);
-          color:var(--iui-text-color-muted); }
-        .iui-paginator > .iui-center .iui-button-group > * > .iui-active::after{
-          top:auto;
-          bottom:2px; }
   .iui-paginator > .iui-right{
     justify-content:flex-end; }
   .iui-paginator-page-size-label{
@@ -407,6 +385,159 @@
     overflow:hidden;
     text-overflow:ellipsis; }
 
+.iui-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{
+    width:27px; }
+
+.iui-paginator-pages-group{
+  display:inline-flex;
+  align-items:center;
+  isolation:isolate;
+  margin:0 8px; }
+  .iui-paginator-pages-group > *{
+    display:flex; }
+    .iui-paginator-pages-group > * input, .iui-paginator-pages-group > * button{
+      position:relative;
+      transition-duration:0ms; }
+      .iui-paginator-pages-group > * input:hover, .iui-paginator-pages-group > * button:hover{
+        z-index:1; }
+      .iui-paginator-pages-group > * input:focus, .iui-paginator-pages-group > * button:focus{
+        z-index:2; }
+        .iui-paginator-pages-group > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-paginator-pages-group > * button:focus:where(:not(:focus-visible):not(:hover)){
+          z-index:revert; }
+      .iui-paginator-pages-group > * input:disabled, .iui-paginator-pages-group > * button:disabled{
+        z-index:-1; }
+      .iui-paginator-pages-group > * input:hover, .iui-paginator-pages-group > * input:focus, .iui-paginator-pages-group > * button:hover, .iui-paginator-pages-group > * button:focus{
+        transition-duration:0.2s; }
+      .iui-paginator-pages-group > * input.iui-active::after, .iui-paginator-pages-group > * button.iui-active::after{
+        content:'';
+        position:absolute;
+        height:2px;
+        opacity:1;
+        top:2px;
+        left:2px;
+        width:calc(100% - 4px);
+        background-color:#008BE1;
+        background-color:var(--iui-color-foreground-primary); }
+      .iui-paginator-pages-group > * input.iui-active:disabled::after, .iui-paginator-pages-group > * button.iui-active:disabled::after{
+        background-color:rgba(0, 0, 0, 0.2);
+        background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
+      .iui-paginator-pages-group > * input:not(.iui-borderless), .iui-paginator-pages-group > * button:not(.iui-borderless){
+        border-radius:0; }
+    .iui-paginator-pages-group > *:first-child input, .iui-paginator-pages-group > *:first-child button:not(.iui-borderless){
+      border-top-left-radius:3px;
+      border-bottom-left-radius:3px; }
+    .iui-paginator-pages-group > *:last-child input, .iui-paginator-pages-group > *:last-child button:not(.iui-borderless){
+      border-top-right-radius:3px;
+      border-bottom-right-radius:3px; }
+    .iui-paginator-pages-group > * + *{
+      margin-left:-1px; }
+    .iui-paginator-pages-group > *:not(:first-child) .iui-default:disabled{
+      border-left-color:#DCE0E3;
+      border-left-color:var(--iui-color-background-4); }
+  .iui-paginator-pages-group > * + *{
+    margin-left:0; }
+  .iui-paginator-pages-group button.iui-active::after{
+    top:auto;
+    bottom:2px; }
+
+.iui-paginator-page-button{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  font-family:inherit;
+  display:inline-flex;
+  align-items:center;
+  vertical-align:middle;
+  justify-content:center;
+  position:relative;
+  box-sizing:border-box;
+  border-radius:3px;
+  line-height:22px;
+  outline:none;
+  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-color:transparent;
+  background-color:transparent;
+  padding:0 8px;
+  height:38px;
+  gap:8px;
+  width:38px; }
+  @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{
+    text-decoration:none;
+    color:black;
+    color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
+  .iui-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{
+      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:#EEF0F3;
+    border-color:#EEF0F3;
+    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, 139, 225, 0.1);
+    color:#008BE1;
+    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:#EEF0F3;
+    border-color:#EEF0F3;
+    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-small{
+    padding:0 8px;
+    height:27px;
+    gap:4px;
+    width:27px; }
+
 .iui-column-filter{
   margin:0;
   padding:0;

package/css/tabs.css

@@ -69,11 +69,13 @@
       .iui-tabs .iui-tab[disabled] .iui-tab-icon{
         fill:rgba(0, 0, 0, 0.2);
         fill:var(--iui-icons-color-actionable-disabled); }
-    .iui-tabs .iui-tab:focus{
+    .iui-tabs .iui-tab:focus-visible{
       outline:1px solid var(--iui-color-foreground-primary);
       outline-offset:-1px; }
-    .iui-tabs .iui-tab:focus:not(:focus-visible){
-      outline:none; }
+    @supports not selector(*:focus-visible){
+      .iui-tabs .iui-tab:focus{
+        outline:1px solid var(--iui-color-foreground-primary);
+        outline-offset:-1px; } }
   .iui-tabs .iui-tab-icon{
     width:16px;
     height:16px;
@@ -134,6 +136,9 @@
     .iui-tabs.iui-default .iui-tab[disabled]{
       background-color:#EEF0F3;
       background-color:var(--iui-color-background-3); }
+    .iui-tabs.iui-default .iui-tab:focus{
+      outline-width:2px;
+      outline-offset:-2px; }
   .iui-horizontal .iui-tabs.iui-default .iui-tab.iui-active{
     border-bottom-color:transparent; }
   .iui-horizontal .iui-tabs.iui-default :not(:first-child) .iui-tab{

package/css/tag.css

@@ -12,16 +12,13 @@
           user-select:all;
   text-transform:lowercase;
   display:inline-flex; }
-  .iui-tag:focus{
-    outline:0;
-    box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-    box-shadow:var(--iui-focus-box-shadow); }
-  .iui-tag:focus:not(:focus-visible){
-    box-shadow:none; }
   .iui-tag:focus-visible{
-    outline:0;
-    box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-    box-shadow:var(--iui-focus-box-shadow); }
+    outline:2px solid var(--iui-color-foreground-primary);
+    outline-offset:-2px; }
+  @supports not selector(*:focus-visible){
+    .iui-tag:focus{
+      outline:2px solid var(--iui-color-foreground-primary);
+      outline-offset:-2px; } }
   .iui-tag:not(a){
     color:rgba(0, 0, 0, 0.4);
     color:var(--iui-text-color-muted); }
@@ -63,22 +60,22 @@
     .iui-tag:not(.iui-basic):hover{
       border-color:black;
       border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
+  .iui-tag.iui-basic{
+    outline-offset:1px; }
 
 a.iui-tag{
+  border-radius:3px;
   text-decoration:none;
   cursor:pointer;
   color:#008BE1;
   color:var(--iui-color-foreground-primary); }
-  a.iui-tag:focus{
-    outline:0;
-    box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-    box-shadow:var(--iui-focus-box-shadow); }
-  a.iui-tag:focus:not(:focus-visible){
-    box-shadow:none; }
   a.iui-tag:focus-visible{
-    outline:0;
-    box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-    box-shadow:var(--iui-focus-box-shadow); }
+    outline:1px solid var(--iui-color-foreground-primary);
+    outline-offset:2px; }
+  @supports not selector(*:focus-visible){
+    a.iui-tag:focus{
+      outline:1px solid var(--iui-color-foreground-primary);
+      outline-offset:2px; } }
   a.iui-tag:hover{
     color:#006bae;
     color:var(--iui-color-foreground-primary-overlay);
@@ -87,6 +84,8 @@ a.iui-tag{
 .iui-tag-container{
   color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted); }
+  .iui-tag-container > a.iui-basic{
+    margin:2px; }
   .iui-tag-container > .iui-tag:not(:last-child){
     margin-right:4px; }
   .iui-tag-container > .iui-basic:not(:last-child)::after{