@itwin/itwinui-css 0.32.0 → 0.33.0

package/css/all.css

@@ -717,6 +717,18 @@ html.iui-theme-dark{
     background-color:var(--iui-color-background-1-overlay);
     border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
     color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
+    .iui-button:enabled:hover .iui-notification-primary::before,
+    .iui-button:enabled:hover .iui-notification-positive::before,
+    .iui-button:enabled:hover .iui-notification-warning::before,
+    .iui-button:enabled:hover .iui-notification-negative::before, .iui-button:enabled:active .iui-notification-primary::before,
+    .iui-button:enabled:active .iui-notification-positive::before,
+    .iui-button:enabled:active .iui-notification-warning::before,
+    .iui-button:enabled:active .iui-notification-negative::before, .iui-button:focus-visible .iui-notification-primary::before,
+    .iui-button:focus-visible .iui-notification-positive::before,
+    .iui-button:focus-visible .iui-notification-warning::before,
+    .iui-button:focus-visible .iui-notification-negative::before{
+      border-color:#f2f2f2;
+      border-color:var(--iui-color-background-1-overlay); }
     .iui-button:enabled:hover > .iui-icon, .iui-button:enabled:active > .iui-icon, .iui-button:focus-visible > .iui-icon{
       fill:black;
       fill:var(--iui-icons-color-actionable-hover); }
@@ -1067,7 +1079,7 @@ html.iui-theme-dark{
   max-height:334px;
   box-sizing:border-box;
   border-radius:3px;
-  display:flex;
+  display:inline-flex;
   padding:11px 12px;
   -webkit-user-select:none;
      -moz-user-select:none;
@@ -1254,9 +1266,8 @@ html.iui-theme-dark{
     .iui-date-picker > .iui-calendar > .iui-dates > .iui-week > .iui-date{
       cursor:pointer;
       display:inline-block;
-      width:24px;
-      line-height:24px;
-      margin:0 4px; }
+      width:33px;
+      line-height:33px; }
       .iui-date-picker > .iui-calendar > .iui-dates > .iui-week > .iui-date:focus{
         outline:0;
         box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
@@ -1396,7 +1407,7 @@ html.iui-theme-dark{
       opacity:1; }
     @media (prefers-reduced-motion: no-preference){
       .iui-expandable-block .iui-expandable-content.iui-enter-active, .iui-expandable-block .iui-expandable-content.iui-exit-active{
-        transition:opacity 0.2s ease-out, height 0.2s ease-out; } }
+        transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
     .iui-expandable-block .iui-expandable-content > div{
       padding:11px 12px; }
   .iui-expandable-block:hover > .iui-header{
@@ -2371,6 +2382,28 @@ html.iui-theme-dark{
       margin-right:0;
       border-top-left-radius:0;
       border-bottom-left-radius:0; }
+    .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable{
+      align-items:center;
+      height:90%;
+      margin-right:1px;
+      padding:0 12px;
+      cursor:pointer;
+      background-position:center;
+      transition:background 0.4s ease-out; }
+      .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable:hover{
+        background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%; }
+      .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable:active{
+        background-color:var(--iui-color-background-2);
+        background-size:100%;
+        transition:background 0s; }
+      .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable svg{
+        width:16px;
+        height:16px;
+        fill:rgba(0, 0, 0, 0.4);
+        fill:var(--iui-icons-color);
+        transition:transform 0.2s ease-out; }
+      .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable.iui-open svg{
+        transform:rotate(180deg); }
   .iui-input-container.iui-positive *::-moz-selection{
     background-color:rgba(83, 162, 26, 0.4);
     background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4)); }
@@ -3436,7 +3469,7 @@ html.iui-theme-dark{
   .iui-menu-item:hover{
     background-color:rgba(0, 139, 225, 0.1);
     background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
-  .iui-menu-item:focus{
+  .iui-menu-item:focus, .iui-menu-item.iui-focused{
     outline:thin solid var(--iui-color-foreground-primary);
     outline-offset:-1px;
     outline:thin solid var(--iui-color-foreground-primary);
@@ -3457,7 +3490,7 @@ html.iui-theme-dark{
   .iui-menu-item.iui-active > .iui-icon{
     fill:#008BE1;
     fill:var(--iui-icons-color-primary); }
-  .iui-menu-item.iui-active:focus{
+  .iui-menu-item.iui-active:focus, .iui-menu-item.iui-active.iui-focused{
     outline-width:2px;
     outline-offset:-2px; }
   .iui-menu-item.iui-active:focus:not(:focus-visible){
@@ -3474,6 +3507,9 @@ html.iui-theme-dark{
       fill:rgba(0, 0, 0, 0.2);
       fill:var(--iui-icons-color-actionable-disabled); }
 
+.iui-menu-content{
+  padding:11px 13px; }
+
 .iui-menu-divider{
   height:1px;
   width:calc(100% - 24px);
@@ -3594,6 +3630,221 @@ html.iui-theme-dark{
     .iui-non-ideal-state > .iui-non-ideal-state-actions > .iui-button{
       margin:0 4px; }
 
+.iui-notification-primary{
+  position:relative; }
+  .iui-notification-primary::before{
+    content:'';
+    position:absolute;
+    width:8px;
+    height:8px;
+    top:-6px;
+    right:-6px;
+    border-radius:100%;
+    background-color:#008BE1;
+    border:2px solid #FFF;
+    background-color:var(--iui-color-foreground-primary);
+    border:2px solid var(--iui-color-background-1); }
+    @media (prefers-reduced-motion: no-preference){
+      .iui-notification-primary::before{
+        transition:background-color 0.2s ease-out, border-color 0.2s ease-out; } }
+  @media (prefers-reduced-motion: no-preference){
+    .iui-notification-primary.iui-urgent::before{
+      -webkit-animation:pulse-primary 2s infinite;
+              animation:pulse-primary 2s infinite; } }
+  @media (prefers-reduced-motion: no-preference){
+    @-webkit-keyframes pulse-primary{
+      0%{
+        box-shadow:0 0 0 0 #008be1;
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1)); }
+      70%{
+        box-shadow:0 0 0 7px rgba(0, 139, 225, 0);
+        box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-primary-rgb), 0); }
+      100%{
+        box-shadow:0 0 0 0 rgba(0, 139, 225, 0);
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), 0); } }
+    @keyframes pulse-primary{
+      0%{
+        box-shadow:0 0 0 0 #008be1;
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1)); }
+      70%{
+        box-shadow:0 0 0 7px rgba(0, 139, 225, 0);
+        box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-primary-rgb), 0); }
+      100%{
+        box-shadow:0 0 0 0 rgba(0, 139, 225, 0);
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), 0); } } }
+
+.iui-notification-positive{
+  position:relative; }
+  .iui-notification-positive::before{
+    content:'';
+    position:absolute;
+    width:8px;
+    height:8px;
+    top:-6px;
+    right:-6px;
+    border-radius:100%;
+    background-color:#53A21A;
+    border:2px solid #FFF;
+    background-color:var(--iui-color-foreground-positive);
+    border:2px solid var(--iui-color-background-1); }
+    @media (prefers-reduced-motion: no-preference){
+      .iui-notification-positive::before{
+        transition:background-color 0.2s ease-out, border-color 0.2s ease-out; } }
+  @media (prefers-reduced-motion: no-preference){
+    .iui-notification-positive.iui-urgent::before{
+      -webkit-animation:pulse-positive 2s infinite;
+              animation:pulse-positive 2s infinite; } }
+  @media (prefers-reduced-motion: no-preference){
+    @-webkit-keyframes pulse-positive{
+      0%{
+        box-shadow:0 0 0 0 #53a21a;
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-1)); }
+      70%{
+        box-shadow:0 0 0 7px rgba(83, 162, 26, 0);
+        box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-positive-rgb), 0); }
+      100%{
+        box-shadow:0 0 0 0 rgba(83, 162, 26, 0);
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), 0); } }
+    @keyframes pulse-positive{
+      0%{
+        box-shadow:0 0 0 0 #53a21a;
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-1)); }
+      70%{
+        box-shadow:0 0 0 7px rgba(83, 162, 26, 0);
+        box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-positive-rgb), 0); }
+      100%{
+        box-shadow:0 0 0 0 rgba(83, 162, 26, 0);
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), 0); } } }
+
+.iui-notification-warning{
+  position:relative; }
+  .iui-notification-warning::before{
+    content:'';
+    position:absolute;
+    width:8px;
+    height:8px;
+    top:-6px;
+    right:-6px;
+    border-radius:100%;
+    background-color:#F18B12;
+    border:2px solid #FFF;
+    background-color:var(--iui-color-foreground-warning);
+    border:2px solid var(--iui-color-background-1); }
+    @media (prefers-reduced-motion: no-preference){
+      .iui-notification-warning::before{
+        transition:background-color 0.2s ease-out, border-color 0.2s ease-out; } }
+  @media (prefers-reduced-motion: no-preference){
+    .iui-notification-warning.iui-urgent::before{
+      -webkit-animation:pulse-warning 2s infinite;
+              animation:pulse-warning 2s infinite; } }
+  @media (prefers-reduced-motion: no-preference){
+    @-webkit-keyframes pulse-warning{
+      0%{
+        box-shadow:0 0 0 0 #f18b12;
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-1)); }
+      70%{
+        box-shadow:0 0 0 7px rgba(241, 139, 18, 0);
+        box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-warning-rgb), 0); }
+      100%{
+        box-shadow:0 0 0 0 rgba(241, 139, 18, 0);
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), 0); } }
+    @keyframes pulse-warning{
+      0%{
+        box-shadow:0 0 0 0 #f18b12;
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-1)); }
+      70%{
+        box-shadow:0 0 0 7px rgba(241, 139, 18, 0);
+        box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-warning-rgb), 0); }
+      100%{
+        box-shadow:0 0 0 0 rgba(241, 139, 18, 0);
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), 0); } } }
+
+.iui-notification-negative{
+  position:relative; }
+  .iui-notification-negative::before{
+    content:'';
+    position:absolute;
+    width:8px;
+    height:8px;
+    top:-6px;
+    right:-6px;
+    border-radius:100%;
+    background-color:#D30A0A;
+    border:2px solid #FFF;
+    background-color:var(--iui-color-foreground-negative);
+    border:2px solid var(--iui-color-background-1); }
+    @media (prefers-reduced-motion: no-preference){
+      .iui-notification-negative::before{
+        transition:background-color 0.2s ease-out, border-color 0.2s ease-out; } }
+  @media (prefers-reduced-motion: no-preference){
+    .iui-notification-negative.iui-urgent::before{
+      -webkit-animation:pulse-negative 2s infinite;
+              animation:pulse-negative 2s infinite; } }
+  @media (prefers-reduced-motion: no-preference){
+    @-webkit-keyframes pulse-negative{
+      0%{
+        box-shadow:0 0 0 0 #d30a0a;
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-1)); }
+      70%{
+        box-shadow:0 0 0 7px rgba(211, 10, 10, 0);
+        box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-negative-rgb), 0); }
+      100%{
+        box-shadow:0 0 0 0 rgba(211, 10, 10, 0);
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), 0); } }
+    @keyframes pulse-negative{
+      0%{
+        box-shadow:0 0 0 0 #d30a0a;
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-1)); }
+      70%{
+        box-shadow:0 0 0 7px rgba(211, 10, 10, 0);
+        box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-negative-rgb), 0); }
+      100%{
+        box-shadow:0 0 0 0 rgba(211, 10, 10, 0);
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), 0); } } }
+
+.iui-notification-accessory{
+  position:relative; }
+  .iui-notification-accessory::before{
+    content:'';
+    position:absolute;
+    width:8px;
+    height:8px;
+    top:-6px;
+    right:-6px;
+    border-radius:100%;
+    background-color:#FFF;
+    border:2px solid #FFF;
+    background-color:var(--iui-color-foreground-accessory);
+    border:2px solid var(--iui-color-background-1); }
+    @media (prefers-reduced-motion: no-preference){
+      .iui-notification-accessory::before{
+        transition:background-color 0.2s ease-out, border-color 0.2s ease-out; } }
+  @media (prefers-reduced-motion: no-preference){
+    .iui-notification-accessory.iui-urgent::before{
+      -webkit-animation:pulse-accessory 2s infinite;
+              animation:pulse-accessory 2s infinite; } }
+  @media (prefers-reduced-motion: no-preference){
+    @-webkit-keyframes pulse-accessory{
+      0%{
+        box-shadow:0 0 0 0 white;
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1)); }
+      70%{
+        box-shadow:0 0 0 7px rgba(255, 255, 255, 0);
+        box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-accessory-rgb), 0); }
+      100%{
+        box-shadow:0 0 0 0 rgba(255, 255, 255, 0);
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), 0); } }
+    @keyframes pulse-accessory{
+      0%{
+        box-shadow:0 0 0 0 white;
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1)); }
+      70%{
+        box-shadow:0 0 0 7px rgba(255, 255, 255, 0);
+        box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-accessory-rgb), 0); }
+      100%{
+        box-shadow:0 0 0 0 rgba(255, 255, 255, 0);
+        box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), 0); } } }
+
 .iui-progress-indicator-linear{
   margin:0;
   padding:0;
@@ -4022,6 +4273,59 @@ html.iui-theme-dark{
           .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-icon{
             transition:transform 0.4s ease-out; } }
 
+.iui-side-navigation-submenu{
+  min-width:192px;
+  width:384px;
+  max-width:50vw;
+  height:100%;
+  box-sizing:border-box;
+  padding:0 12px 11px;
+  overflow-x:hidden;
+  overflow-y:auto;
+  overflow-y:overlay;
+  resize:horizontal;
+  background-color:#FFF;
+  border-right:1px solid #C7CCD1;
+  background-color:var(--iui-color-background-1);
+  border-right:1px solid var(--iui-color-background-5); }
+  .iui-side-navigation-submenu.iui-enter, .iui-side-navigation-submenu.iui-exit-active{
+    opacity:0; }
+  .iui-side-navigation-submenu.iui-exit, .iui-side-navigation-submenu.iui-enter-active{
+    opacity:1; }
+  @media (prefers-reduced-motion: no-preference){
+    .iui-side-navigation-submenu.iui-enter-active, .iui-side-navigation-submenu.iui-exit-active{
+      transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
+  .iui-side-navigation-submenu-header{
+    height:55px;
+    display:flex;
+    align-items:center;
+    justify-content:space-between; }
+    .iui-side-navigation-submenu-header-label{
+      margin:0;
+      padding:0;
+      border:none;
+      vertical-align:baseline;
+      font-size:24px;
+      font-weight:300;
+      line-height:33px;
+      display:flex;
+      align-items:center;
+      overflow:hidden; }
+      .iui-side-navigation-submenu-header-label .iui-button{
+        flex-shrink:0; }
+      .iui-side-navigation-submenu-header-label > *{
+        white-space:nowrap;
+        overflow:hidden;
+        text-overflow:ellipsis; }
+      .iui-side-navigation-submenu-header-label-actions{
+        flex-shrink:0;
+        margin-left:8px; }
+
+.iui-side-navigation-wrapper{
+  display:flex;
+  position:relative;
+  height:100%; }
+
 .iui-slider-component-container{
   display:flex; }
   .iui-slider-component-container .iui-slider-min,
@@ -4321,7 +4625,7 @@ html.iui-theme-dark{
         opacity:1; }
       @media (prefers-reduced-motion: no-preference){
         .iui-table-body .iui-row.iui-expanded-content.iui-enter-active, .iui-table-body .iui-row.iui-expanded-content.iui-exit-active{
-          transition:opacity 0.2s ease-out, height 0.2s ease-out; } }
+          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-table-body .iui-row.iui-selected:first-child{
       border-bottom-color:transparent; }
     .iui-table-body .iui-row.iui-selected{
@@ -5358,56 +5662,90 @@ a.iui-tag{
     border-left:1px solid var(--iui-color-background-4); }
   .iui-time-picker:first-child{
     box-shadow:0 1px 5px rgba(0, 0, 0, 0.25); }
-  .iui-time-picker > .iui-time,
-  .iui-time-picker > .iui-period{
-    padding:11px 8px;
-    overflow-y:auto; }
-    .iui-time-picker > .iui-time:not(:first-child),
-    .iui-time-picker > .iui-period:not(:first-child){
-      border-left:1px solid #DCE0E3;
-      border-left:1px solid var(--iui-color-background-4); }
-    .iui-time-picker > .iui-time > ol,
-    .iui-time-picker > .iui-period > ol{
-      margin:0;
-      padding:0;
-      border:none;
-      vertical-align:baseline;
-      list-style:none; }
-      .iui-time-picker > .iui-time > ol > li,
-      .iui-time-picker > .iui-period > ol > li{
-        padding:11px 16px;
-        border-radius:3px; }
-        .iui-time-picker > .iui-time > ol > li:focus,
-        .iui-time-picker > .iui-period > ol > li:focus{
-          outline:0;
-          box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-          box-shadow:var(--iui-focus-box-shadow); }
-        .iui-time-picker > .iui-time > ol > li:focus:not(:focus-visible),
-        .iui-time-picker > .iui-period > ol > li:focus:not(:focus-visible){
-          box-shadow:none; }
-        .iui-time-picker > .iui-time > ol > li:focus-visible,
-        .iui-time-picker > .iui-period > ol > li:focus-visible{
-          outline:0;
-          box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-          box-shadow:var(--iui-focus-box-shadow); }
-        .iui-time-picker > .iui-time > ol > li:hover,
-        .iui-time-picker > .iui-period > ol > li:hover{
-          cursor:pointer;
-          color:#008BE1;
-          background-color:rgba(0, 139, 225, 0.1);
-          color:var(--iui-color-foreground-primary);
-          background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
-        .iui-time-picker > .iui-time > ol > li.iui-selected,
-        .iui-time-picker > .iui-period > ol > li.iui-selected{
-          font-weight:600;
-          cursor:default;
-          background-color:#008BE1;
-          color:#FFF;
-          background-color:var(--iui-color-background-primary);
-          color:var(--iui-color-foreground-accessory); }
-  .iui-time-picker > .iui-period{
-    display:flex;
-    align-items:center; }
+
+.iui-time{
+  padding:11px 8px;
+  overflow-y:auto;
+  overflow-y:overlay;
+  scrollbar-width:none; }
+  .iui-time:not(:first-child){
+    border-left:1px solid #DCE0E3;
+    border-left:1px solid var(--iui-color-background-4); }
+  .iui-time > ol{
+    margin:0;
+    padding:0;
+    border:none;
+    vertical-align:baseline;
+    list-style:none; }
+    .iui-time > ol > li{
+      padding:6px 16px;
+      border-radius:3px; }
+      .iui-time > ol > li:focus{
+        outline:0;
+        box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
+        box-shadow:var(--iui-focus-box-shadow); }
+      .iui-time > ol > li:focus:not(:focus-visible){
+        box-shadow:none; }
+      .iui-time > ol > li:focus-visible{
+        outline:0;
+        box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
+        box-shadow:var(--iui-focus-box-shadow); }
+      .iui-time > ol > li:hover{
+        cursor:pointer;
+        color:#008BE1;
+        background-color:rgba(0, 139, 225, 0.1);
+        color:var(--iui-color-foreground-primary);
+        background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
+      .iui-time > ol > li.iui-selected{
+        font-weight:600;
+        cursor:default;
+        background-color:#008BE1;
+        color:#FFF;
+        background-color:var(--iui-color-background-primary);
+        color:var(--iui-color-foreground-accessory); }
+
+.iui-period{
+  padding:11px 8px;
+  overflow-y:auto;
+  overflow-y:overlay;
+  scrollbar-width:none;
+  display:flex;
+  align-items:center; }
+  .iui-period:not(:first-child){
+    border-left:1px solid #DCE0E3;
+    border-left:1px solid var(--iui-color-background-4); }
+  .iui-period > ol{
+    margin:0;
+    padding:0;
+    border:none;
+    vertical-align:baseline;
+    list-style:none; }
+    .iui-period > ol > li{
+      padding:6px 16px;
+      border-radius:3px; }
+      .iui-period > ol > li:focus{
+        outline:0;
+        box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
+        box-shadow:var(--iui-focus-box-shadow); }
+      .iui-period > ol > li:focus:not(:focus-visible){
+        box-shadow:none; }
+      .iui-period > ol > li:focus-visible{
+        outline:0;
+        box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
+        box-shadow:var(--iui-focus-box-shadow); }
+      .iui-period > ol > li:hover{
+        cursor:pointer;
+        color:#008BE1;
+        background-color:rgba(0, 139, 225, 0.1);
+        color:var(--iui-color-foreground-primary);
+        background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
+      .iui-period > ol > li.iui-selected{
+        font-weight:600;
+        cursor:default;
+        background-color:#008BE1;
+        color:#FFF;
+        background-color:var(--iui-color-background-primary);
+        color:var(--iui-color-foreground-accessory); }
 
 .iui-toast-wrapper{
   pointer-events:none;

package/css/button.css

@@ -85,6 +85,18 @@
     background-color:var(--iui-color-background-1-overlay);
     border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
     color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
+    .iui-button:enabled:hover .iui-notification-primary::before,
+    .iui-button:enabled:hover .iui-notification-positive::before,
+    .iui-button:enabled:hover .iui-notification-warning::before,
+    .iui-button:enabled:hover .iui-notification-negative::before, .iui-button:enabled:active .iui-notification-primary::before,
+    .iui-button:enabled:active .iui-notification-positive::before,
+    .iui-button:enabled:active .iui-notification-warning::before,
+    .iui-button:enabled:active .iui-notification-negative::before, .iui-button:focus-visible .iui-notification-primary::before,
+    .iui-button:focus-visible .iui-notification-positive::before,
+    .iui-button:focus-visible .iui-notification-warning::before,
+    .iui-button:focus-visible .iui-notification-negative::before{
+      border-color:#f2f2f2;
+      border-color:var(--iui-color-background-1-overlay); }
     .iui-button:enabled:hover > .iui-icon, .iui-button:enabled:active > .iui-icon, .iui-button:focus-visible > .iui-icon{
       fill:black;
       fill:var(--iui-icons-color-actionable-hover); }

package/css/color-picker.css

@@ -14,7 +14,7 @@
   max-height:334px;
   box-sizing:border-box;
   border-radius:3px;
-  display:flex;
+  display:inline-flex;
   padding:11px 12px;
   -webkit-user-select:none;
      -moz-user-select:none;

package/css/date-picker.css

@@ -72,9 +72,8 @@
     .iui-date-picker > .iui-calendar > .iui-dates > .iui-week > .iui-date{
       cursor:pointer;
       display:inline-block;
-      width:24px;
-      line-height:24px;
-      margin:0 4px; }
+      width:33px;
+      line-height:33px; }
       .iui-date-picker > .iui-calendar > .iui-dates > .iui-week > .iui-date:focus{
         outline:0;
         box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;

package/css/expandable-block.css

@@ -107,7 +107,7 @@
       opacity:1; }
     @media (prefers-reduced-motion: no-preference){
       .iui-expandable-block .iui-expandable-content.iui-enter-active, .iui-expandable-block .iui-expandable-content.iui-exit-active{
-        transition:opacity 0.2s ease-out, height 0.2s ease-out; } }
+        transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
     .iui-expandable-block .iui-expandable-content > div{
       padding:11px 12px; }
   .iui-expandable-block:hover > .iui-header{

package/css/inputs.css

@@ -147,6 +147,28 @@
       margin-right:0;
       border-top-left-radius:0;
       border-bottom-left-radius:0; }
+    .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable{
+      align-items:center;
+      height:90%;
+      margin-right:1px;
+      padding:0 12px;
+      cursor:pointer;
+      background-position:center;
+      transition:background 0.4s ease-out; }
+      .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable:hover{
+        background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%; }
+      .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable:active{
+        background-color:var(--iui-color-background-2);
+        background-size:100%;
+        transition:background 0s; }
+      .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable svg{
+        width:16px;
+        height:16px;
+        fill:rgba(0, 0, 0, 0.4);
+        fill:var(--iui-icons-color);
+        transition:transform 0.2s ease-out; }
+      .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable.iui-open svg{
+        transform:rotate(180deg); }
   .iui-input-container.iui-positive *::-moz-selection{
     background-color:rgba(83, 162, 26, 0.4);
     background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4)); }

package/css/menu.css

@@ -69,7 +69,7 @@
   .iui-menu-item:hover{
     background-color:rgba(0, 139, 225, 0.1);
     background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
-  .iui-menu-item:focus{
+  .iui-menu-item:focus, .iui-menu-item.iui-focused{
     outline:thin solid var(--iui-color-foreground-primary);
     outline-offset:-1px;
     outline:thin solid var(--iui-color-foreground-primary);
@@ -90,7 +90,7 @@
   .iui-menu-item.iui-active > .iui-icon{
     fill:#008BE1;
     fill:var(--iui-icons-color-primary); }
-  .iui-menu-item.iui-active:focus{
+  .iui-menu-item.iui-active:focus, .iui-menu-item.iui-active.iui-focused{
     outline-width:2px;
     outline-offset:-2px; }
   .iui-menu-item.iui-active:focus:not(:focus-visible){
@@ -107,6 +107,9 @@
       fill:rgba(0, 0, 0, 0.2);
       fill:var(--iui-icons-color-actionable-disabled); }
 
+.iui-menu-content{
+  padding:11px 13px; }
+
 .iui-menu-divider{
   height:1px;
   width:calc(100% - 24px);