@itwin/itwinui-css 1.0.0-dev.9 → 1.1.0

package/css/select.css

@@ -2,238 +2,4 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-.iui-select-button{
-  width:100%;
-  border-radius:var(--iui-border-radius-1);
-  min-height:var(--_iui-select-min-height);
-  padding-block:var(--_iui-select-padding-block);
-  padding-inline:var(--iui-size-s);
-  transition:border-color var(--iui-duration-1) ease-out;
-  display:flex;
-  align-items:center;
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
-  position:relative;
-  overflow:hidden;
-  color:var(--iui-color-foreground-2);
-  background-color:var(--iui-color-background-1);
-  border:1px solid var(--iui-color-foreground-4);
-  --_iui-select-padding-block:var(--iui-size-2xs);
-  --_iui-select-min-height:var(--iui-component-height);
-}
-.iui-select-button:focus-visible{
-  outline:2px solid var(--iui-color-foreground-primary);
-  outline-offset:-2px;
-}
-@supports not selector(*:focus-visible){
-  .iui-select-button:focus{
-    outline:2px solid var(--iui-color-foreground-primary);
-    outline-offset:-2px;
-  }
-}
-.iui-select-button.iui-disabled{
-  background-color:var(--iui-color-background-disabled);
-  border-color:var(--iui-color-background-disabled);
-  --_iui-input-with-icon-hover-border-color:var(--iui-color-background-disabled);
-  cursor:not-allowed;
-}
-.iui-select-button .iui-icon{
-  display:flex;
-  flex-shrink:0;
-  width:var(--iui-size-m);
-  height:var(--iui-size-m);
-  flex:0 0 auto;
-  fill:var(--iui-color-foreground-2);
-  fill:currentColor;
-}
-.iui-select-button .iui-icon + .iui-content{
-  margin-left:var(--iui-size-xs);
-}
-.iui-select-button .iui-content{
-  overflow:hidden;
-  white-space:nowrap;
-  text-overflow:ellipsis;
-  min-height:var(--iui-size-l);
-}
-.iui-select-button.iui-placeholder{
-  color:var(--iui-color-foreground-5);
-}
-.iui-select-button[data-iui-size=small]{
-  --_iui-select-padding-block:0;
-  --_iui-select-min-height:var(--iui-component-height-small);
-}
-.iui-select-button[data-iui-size=large]{
-  --_iui-select-padding-block:var(--iui-size-xs);
-  --_iui-select-min-height:var(--iui-component-height-large);
-  font-size:var(--iui-font-size-2);
-}
-
-.iui-select-tag-container{
-  position:absolute;
-  inset:0 calc(var(--iui-size-m) + var(--iui-size-l)) 0 var(--iui-size-s);
-  height:100%;
-  display:flex;
-  align-items:center;
-  gap:var(--iui-size-2xs);
-  overflow:hidden;
-}
-.iui-select-tag-container > * + *{
-  margin-left:var(--iui-size-2xs);
-}
-@supports (gap: var(--iui-size-2xs)){
-  .iui-select-tag-container > * + *{
-    margin-left:0;
-  }
-}
-
-.iui-select-tag{
-  -webkit-user-select:all;
-     -moz-user-select:all;
-          user-select:all;
-  text-transform:lowercase;
-  display:inline-flex;
-  height:calc(var(--iui-size-s) * 3);
-  margin-block:var(--iui-size-2xs);
-  border-radius:var(--iui-border-radius-round);
-  padding:0 var(--iui-size-3xs);
-  align-items:center;
-  transition:border-color var(--iui-duration-1) ease-out;
-  font-size:var(--iui-font-size-1);
-  text-transform:none;
-  cursor:default;
-  -webkit-tap-highlight-color:transparent;
-  border:1px solid var(--iui-color-foreground-4);
-  background-color:var(--iui-color-background-1);
-  color:var(--iui-color-foreground-2);
-  margin-top:0;
-  margin-bottom:0;
-  display:inline-flex;
-  align-items:center;
-  height:80%;
-  max-height:calc(var(--iui-size-s) * 3);
-}
-.iui-select-tag:hover{
-  border-color:var(--iui-color-foreground-1);
-}
-
-.iui-select-tag-label{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  font-size:var(--iui-font-size-1);
-  font-weight:var(--iui-font-weight-normal);
-  line-height:var(--iui-size-l);
-  white-space:nowrap;
-  text-overflow:ellipsis;
-  overflow:hidden;
-  margin:0 var(--iui-size-2xs) 0 var(--iui-size-xs);
-  display:inline-flex;
-  align-items:center;
-}
-.iui-select-tag-label:only-child{
-  margin:0 var(--iui-size-xs);
-}
-.iui-select-button[data-iui-size=small] .iui-select-tag-label{
-  font-size:var(--iui-font-size-0);
-  line-height:calc(var(--iui-size-s) * 1.5);
-}
-
-.iui-select-tag-button{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  font-family:inherit;
-  display:inline-flex;
-  flex-shrink:0;
-  align-items:center;
-  vertical-align:middle;
-  justify-content:center;
-  position:relative;
-  border-radius:var(--iui-border-radius-1);
-  line-height:var(--iui-size-l);
-  font-size:var(--iui-font-size-1);
-  font-weight:var(--iui-font-weight-normal);
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
-  cursor:pointer;
-  white-space:nowrap;
-  border:1px solid var(--_iui-button-border-color);
-  background:var(--_iui-button-background-color);
-  color:var(--_iui-button-text-color);
-  gap:var(--_iui-button-gap);
-  min-height:var(--_iui-button-min-height);
-  min-width:var(--_iui-button-min-height);
-  padding-block:var(--_iui-button-padding-block);
-  padding-inline:var(--_iui-button-padding-inline);
-  transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
-  -webkit-tap-highlight-color:transparent;
-  text-decoration:none;
-  --_iui-button-gap:var(--iui-size-xs);
-  --_iui-button-padding-block:var(--iui-size-2xs);
-  --_iui-button-padding-inline:var(--iui-size-m);
-  --_iui-button-min-height:var(--iui-component-height);
-  --_iui-button-text-color:var(--iui-color-foreground-2);
-  --_iui-button-background-color:transparent;
-  --_iui-button-border-color:transparent;
-  --_iui-button-gap:var(--iui-size-xs);
-  --_iui-button-padding-block:var(--iui-size-2xs);
-  --_iui-button-padding-inline:var(--iui-size-m);
-  --_iui-button-min-height:var(--iui-component-height);
-  --_iui-button-padding-inline:var(--iui-size-xs);
-  border-radius:var(--iui-border-radius-round);
-  padding:0 var(--iui-size-2xs);
-  min-height:unset;
-  min-width:unset;
-  height:100%;
-  aspect-ratio:1/1;
-}
-.iui-select-tag-button:focus-visible{
-  outline:1px solid var(--iui-color-foreground-primary);
-  outline-offset:-1px;
-}
-@supports not selector(*:focus-visible){
-  .iui-select-tag-button:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
-    outline-offset:-1px;
-  }
-}
-.iui-select-tag-button:where(:hover, :active){
-  --_iui-button-text-color:var(--iui-color-foreground-1);
-  --_iui-button-background-color:var(--iui-color-background-transparent-hover);
-}
-.iui-select-tag-button:where(:focus){
-  outline-offset:-1px;
-  outline-width:1px;
-}
-.iui-select-tag-button:where([disabled], :disabled, [aria-disabled="true"]){
-  --_iui-button-text-color:var(--iui-color-foreground-5);
-  --_iui-button-background-color:transparent;
-  --_iui-button-border-color:transparent;
-}
-.iui-select-button[data-iui-size=small] .iui-select-tag-button{
-  font-size:var(--iui-font-size-0);
-  line-height:calc(var(--iui-size-s) * 1.5);
-}
-
-.iui-select-tag-button-icon{
-  display:flex;
-  flex-shrink:0;
-  width:var(--iui-size-m);
-  height:var(--iui-size-m);
-  transition:fill var(--iui-duration-1) ease-out;
-  fill:currentColor;
-  margin-block:var(--iui-size-2xs);
-  flex-shrink:0;
-}
-.iui-select-button[data-iui-size=small] .iui-select-tag-button-icon{
-  display:flex;
-  flex-shrink:0;
-  width:var(--iui-size-s);
-  height:var(--iui-size-s);
-}
+.iui-select-button{width:100%;border-radius:var(--iui-border-radius-1);min-height:var(--_iui-select-min-height);padding-block:var(--_iui-select-padding-block);padding-inline:var(--iui-size-s);transition:border-color var(--iui-duration-1)ease-out;-webkit-user-select:none;user-select:none;color:var(--iui-color-text);background-color:var(--iui-color-background);border:1px solid var(--iui-color-border-foreground);--_iui-select-padding-block:var(--iui-size-2xs);--_iui-select-min-height:var(--iui-component-height);align-items:center;display:flex;position:relative;overflow:hidden}.iui-select-button:focus-visible{outline:2px solid var(--iui-color-border-accent);outline-offset:-2px}@supports not selector(*:focus-visible){.iui-select-button:focus{outline:2px solid var(--iui-color-border-accent);outline-offset:-2px}}.iui-select-button.iui-disabled{background-color:var(--iui-color-background-disabled);border-color:var(--iui-color-border-disabled);--_iui-input-with-icon-hover-border-color:var(--iui-color-border-disabled);cursor:not-allowed}.iui-select-button .iui-icon{width:var(--iui-size-m);height:var(--iui-size-m);fill:var(--iui-color-icon);fill:currentColor;flex:none;display:flex}.iui-select-button .iui-icon+.iui-content{margin-left:var(--iui-size-xs)}.iui-select-button .iui-content{white-space:nowrap;text-overflow:ellipsis;min-height:var(--iui-size-l);overflow:hidden}.iui-select-button.iui-placeholder{color:var(--iui-color-text-muted)}.iui-select-button[data-iui-size=small]{--_iui-select-padding-block:0;--_iui-select-min-height:var(--iui-component-height-small)}.iui-select-button[data-iui-size=large]{--_iui-select-padding-block:var(--iui-size-xs);--_iui-select-min-height:var(--iui-component-height-large);font-size:var(--iui-font-size-2)}.iui-select-tag-container{inset:0 calc(var(--iui-size-m) + var(--iui-size-l))0 var(--iui-size-s);height:100%;align-items:center;gap:var(--iui-size-2xs);display:flex;position:absolute;overflow:hidden}.iui-select-tag-container>*+*{margin-left:var(--iui-size-2xs)}@supports (gap: var(--iui-size-2xs)){.iui-select-tag-container>*+*{margin-left:0}}.iui-select-tag{-webkit-user-select:all;user-select:all;text-transform:lowercase;height:calc(var(--iui-size-s)*3);margin-block:var(--iui-size-2xs);border-radius:var(--iui-border-radius-round);padding:0 var(--iui-size-3xs);transition:border-color var(--iui-duration-1)ease-out;font-size:var(--iui-font-size-1);text-transform:none;cursor:default;-webkit-tap-highlight-color:transparent;border:1px solid var(--iui-color-border-foreground);background-color:var(--iui-color-background);color:var(--iui-color-text);height:80%;max-height:calc(var(--iui-size-s)*3);align-items:center;margin-top:0;margin-bottom:0;display:inline-flex}.iui-select-tag:hover{border-color:var(--iui-color-border-foreground-hover)}.iui-select-tag-label{vertical-align:baseline;font-size:var(--iui-font-size-1);font-weight:var(--iui-font-weight-normal);line-height:var(--iui-size-l);white-space:nowrap;text-overflow:ellipsis;margin:0;margin:0 var(--iui-size-2xs)0 var(--iui-size-xs);border:none;align-items:center;padding:0;display:inline-flex;overflow:hidden}.iui-select-tag-label:only-child{margin:0 var(--iui-size-xs)}.iui-select-button[data-iui-size=small] .iui-select-tag-label{font-size:var(--iui-font-size-0);line-height:calc(var(--iui-size-s)*1.5)}.iui-select-tag-button{vertical-align:baseline;vertical-align:middle;border-radius:var(--iui-border-radius-1);font-family:inherit;line-height:1.2;font-size:var(--iui-font-size-1);font-weight:var(--iui-font-weight-normal);-webkit-user-select:none;user-select:none;cursor:pointer;white-space:nowrap;border:none;border:1px solid var(--_iui-button-border-color);background:var(--_iui-button-background-color);color:var(--_iui-button-text-color);justify-content:center;align-items:center;gap:var(--_iui-button-gap);min-height:var(--_iui-button-min-height);min-width:var(--_iui-button-min-height);padding:0;padding-block:var(--_iui-button-padding-block);padding-inline:var(--_iui-button-padding-inline);transition:background-color var(--iui-duration-1)ease-out,border-color var(--iui-duration-1)ease-out;-webkit-tap-highlight-color:transparent;--_iui-button-gap:var(--iui-size-xs);--_iui-button-padding-block:var(--iui-size-2xs);--_iui-button-padding-inline:var(--iui-size-m);--_iui-button-min-height:var(--iui-component-height);--_iui-button-text-color:var(--iui-color-text);--_iui-button-background-color:transparent;--_iui-button-border-color:transparent;--_iui-button-icon-fill:var(--iui-color-icon);--_iui-button-gap:var(--iui-size-xs);--_iui-button-padding-block:var(--iui-size-2xs);--_iui-button-padding-inline:var(--iui-size-m);--_iui-button-min-height:var(--iui-component-height);--_iui-button-padding-inline:var(--iui-size-xs);border-radius:var(--iui-border-radius-round);padding:0 var(--iui-size-2xs);min-height:unset;min-width:unset;height:100%;aspect-ratio:1/1;flex-shrink:0;margin:0;text-decoration:none;display:inline-flex;position:relative}.iui-select-tag-button:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){.iui-select-tag-button:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}.iui-select-tag-button:where(:hover,:active){--_iui-button-text-color:var(--iui-color-text-hover);--_iui-button-background-color:var(--iui-color-background-transparent-hover);--_iui-button-icon-fill:var(--iui-color-icon-hover)}.iui-select-tag-button:where(:focus){outline-offset:-1px;outline-width:1px}.iui-select-tag-button:where([disabled],:disabled,[aria-disabled=true]){--_iui-button-text-color:var(--iui-color-text-disabled);--_iui-button-background-color:transparent;--_iui-button-border-color:transparent;--_iui-button-icon-fill:var(--iui-color-icon-disabled)}.iui-select-button[data-iui-size=small] .iui-select-tag-button{font-size:var(--iui-font-size-0);line-height:calc(var(--iui-size-s)*1.5)}.iui-select-tag-button-icon{flex-shrink:0}.iui-select-tag-button-icon svg{width:var(--iui-size-m);height:var(--iui-size-m);transition:fill var(--iui-duration-1)ease-out;fill:var(--_iui-button-icon-fill,currentColor);flex-shrink:0;display:flex}.iui-select-button[data-iui-size=small] .iui-select-tag-button-icon svg{width:var(--iui-size-s);height:var(--iui-size-s);flex-shrink:0;display:flex}

package/css/side-navigation.css

@@ -2,201 +2,4 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-.iui-side-navigation{
-  display:inline-flex;
-  flex:0 0 auto;
-  flex-direction:column;
-  height:100%;
-  background-color:var(--iui-color-background-3);
-  border-right:1px solid var(--iui-color-background-border);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-side-navigation{
-    transition:max-width var(--iui-duration-1) ease-out;
-  }
-}
-.iui-side-navigation > .iui-sidenav-content{
-  display:flex;
-  flex-direction:column;
-  flex-grow:1;
-  width:100%;
-}
-.iui-side-navigation > .iui-sidenav-content > .iui-top,
-.iui-side-navigation > .iui-sidenav-content > .iui-bottom{
-  flex-grow:1;
-  display:flex;
-  flex-direction:column;
-}
-.iui-side-navigation > .iui-sidenav-content > .iui-top .iui-sidenav-button:first-of-type{
-  border-top:none;
-}
-.iui-side-navigation > .iui-sidenav-content > .iui-top .iui-sidenav-button:not(:last-of-type){
-  border-bottom:none;
-}
-.iui-side-navigation > .iui-sidenav-content > .iui-bottom{
-  justify-content:flex-end;
-}
-.iui-side-navigation > .iui-sidenav-content > .iui-bottom .iui-sidenav-button{
-  border-bottom:none;
-}
-.iui-side-navigation > .iui-sidenav-content + .iui-sidenav-button.iui-expand{
-  border:none;
-  border-top:1px solid var(--iui-color-background-border);
-}
-.iui-side-navigation.iui-collapsed{
-  box-sizing:content-box;
-  min-width:calc(1.5 * var(--iui-size-m) + 1.5 * var(--iui-size-m) * 2);
-  max-width:calc(1.5 * var(--iui-size-m) + 1.5 * var(--iui-size-m) * 2);
-}
-@supports (min-width: max(0px)){
-  .iui-side-navigation.iui-collapsed{
-    min-width:max(calc(1.5 * var(--iui-size-m)) + calc(1.5 * var(--iui-size-m)) * 2, calc(1.5 * var(--iui-size-m)) + calc(1.5 * var(--iui-size-m)) * 2 + env(safe-area-inset-left));
-    max-width:max(calc(1.5 * var(--iui-size-m)) + calc(1.5 * var(--iui-size-m)) * 2, calc(1.5 * var(--iui-size-m)) + calc(1.5 * var(--iui-size-m)) * 2 + env(safe-area-inset-left));
-  }
-}
-.iui-side-navigation.iui-expanded,
-.iui-side-navigation > .iui-sidenav-content{
-  max-width:calc(var(--iui-size-3xl) * 3);
-}
-.iui-side-navigation.iui-expanded > .iui-sidenav-button.iui-expand > .iui-button-icon,
-.iui-side-navigation > .iui-sidenav-content > .iui-sidenav-button.iui-expand > .iui-button-icon{
-  transform:scaleX(-1);
-}
-.iui-side-navigation .iui-sidenav-button{
-  gap:calc(1.5 * var(--iui-size-m));
-  border-radius:0;
-  border-left:none;
-  border-right:none;
-  overflow:hidden;
-  justify-content:flex-start;
-  --_iui-button-active-stripe-inset:0 0 0 calc(100% - var(--iui-size-3xs));
-}
-.iui-side-navigation .iui-sidenav-button:not(.iui-expand){
-  height:calc(var(--iui-size-s) * 5);
-}
-@supports (padding: max(0px)){
-  .iui-side-navigation .iui-sidenav-button:not(.iui-expand){
-    padding-left:max(calc(1.5 * var(--iui-size-m)), calc(1.5 * var(--iui-size-m)) + env(safe-area-inset-left));
-  }
-}
-.iui-side-navigation .iui-sidenav-button > span{
-  white-space:nowrap;
-  overflow:hidden;
-  text-overflow:ellipsis;
-}
-.iui-side-navigation .iui-sidenav-button, .iui-side-navigation .iui-sidenav-button:hover, .iui-side-navigation .iui-sidenav-button[disabled]{
-  border-color:var(--iui-color-background-border);
-}
-.iui-side-navigation .iui-sidenav-button > .iui-button-icon:not(.iui-avatar){
-  display:flex;
-  flex-shrink:0;
-  width:calc(1.5 * var(--iui-size-m));
-  height:calc(1.5 * var(--iui-size-m));
-}
-.iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-button-icon{
-  fill:var(--iui-color-foreground-primary);
-}
-.iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:disabled{
-  background-color:var(--iui-color-background-2);
-}
-.iui-side-navigation .iui-sidenav-button.iui-expand{
-  --_iui-button-padding-block:0;
-  --_iui-button-min-height:var(--iui-size-l);
-  justify-content:center;
-  border:none;
-  border-bottom:1px solid var(--iui-color-background-border);
-}
-.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
-  display:flex;
-  flex-shrink:0;
-  width:var(--iui-size-s);
-  height:var(--iui-size-s);
-  fill:var(--iui-color-foreground-4);
-}
-@media (forced-colors: active){
-  .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
-    fill:CanvasText;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
-    transition:transform var(--iui-duration-2) ease-out;
-  }
-}
-
-.iui-side-navigation-submenu{
-  min-width:calc(var(--iui-size-3xl) * 2);
-  max-width:50vw;
-  height:100%;
-  overflow-x:hidden;
-  overflow-y:auto;
-  overflow-y:overlay;
-  resize:horizontal;
-  background-color:var(--iui-color-background-1);
-  border-right:1px solid var(--iui-color-background-border);
-}
-.iui-side-navigation-submenu.iui-enter{
-  opacity:0;
-}
-.iui-side-navigation-submenu.iui-enter-active{
-  opacity:1;
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-side-navigation-submenu.iui-enter-active{
-    transition:opacity var(--iui-duration-1) ease-out, width var(--iui-duration-1) ease-out, height var(--iui-duration-1) ease-out;
-  }
-}
-.iui-side-navigation-submenu.iui-exit{
-  opacity:1;
-}
-.iui-side-navigation-submenu.iui-exit-active{
-  opacity:0;
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-side-navigation-submenu.iui-exit-active{
-    transition:opacity var(--iui-duration-1) ease-out, width var(--iui-duration-1) ease-out, height var(--iui-duration-1) ease-out;
-  }
-}
-.iui-side-navigation-submenu.iui-enter-active, .iui-side-navigation-submenu.iui-exit-active{
-  display:flex;
-}
-.iui-side-navigation-submenu-content{
-  padding:0 var(--iui-size-s) var(--iui-size-s);
-  flex-shrink:0;
-}
-.iui-side-navigation-submenu-header{
-  height:calc(var(--iui-size-s) * 5);
-  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:var(--iui-font-size-4);
-  font-weight:var(--iui-font-weight-light);
-  line-height:calc(1.5 * var(--iui-size-l));
-  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-actions{
-  flex-shrink:0;
-  margin-left:var(--iui-size-xs);
-}
-
-.iui-side-navigation-wrapper{
-  display:flex;
-  position:relative;
-  height:100%;
-}
+.iui-side-navigation{height:100%;background-color:var(--iui-color-background);border-right:2px solid var(--iui-color-border);flex-direction:column;flex:none;display:inline-flex}@media (prefers-reduced-motion:no-preference){.iui-side-navigation{transition:max-width var(--iui-duration-1)ease-out}}.iui-side-navigation>.iui-sidenav-content{width:100%;flex-direction:column;flex-grow:1;display:flex}.iui-side-navigation>.iui-sidenav-content>.iui-top,.iui-side-navigation>.iui-sidenav-content>.iui-bottom{flex-direction:column;flex-grow:1;display:flex}.iui-side-navigation>.iui-sidenav-content>.iui-top .iui-sidenav-button:first-of-type{border-top:none}.iui-side-navigation>.iui-sidenav-content>.iui-top .iui-sidenav-button:not(:last-of-type){border-bottom:none}.iui-side-navigation>.iui-sidenav-content>.iui-bottom{justify-content:flex-end}.iui-side-navigation>.iui-sidenav-content>.iui-bottom .iui-sidenav-button{border-bottom:none}.iui-side-navigation>.iui-sidenav-content+.iui-sidenav-button.iui-expand{border:none;border-top:1px solid var(--iui-color-border)}.iui-side-navigation.iui-collapsed{box-sizing:content-box;min-width:calc(1.5*var(--iui-size-m) + 1.5*var(--iui-size-m)*2);max-width:calc(1.5*var(--iui-size-m) + 1.5*var(--iui-size-m)*2)}@supports (min-width: max(0px)){.iui-side-navigation.iui-collapsed{min-width:max(calc(1.5*var(--iui-size-m)) + calc(1.5*var(--iui-size-m))*2,calc(1.5*var(--iui-size-m)) + calc(1.5*var(--iui-size-m))*2 + env(safe-area-inset-left));max-width:max(calc(1.5*var(--iui-size-m)) + calc(1.5*var(--iui-size-m))*2,calc(1.5*var(--iui-size-m)) + calc(1.5*var(--iui-size-m))*2 + env(safe-area-inset-left))}}.iui-side-navigation.iui-expanded,.iui-side-navigation>.iui-sidenav-content{max-width:calc(var(--iui-size-3xl)*3)}.iui-side-navigation.iui-expanded>.iui-sidenav-button.iui-expand>.iui-button-icon,.iui-side-navigation>.iui-sidenav-content>.iui-sidenav-button.iui-expand>.iui-button-icon{transform:scaleX(-1)}.iui-side-navigation .iui-sidenav-button{gap:calc(1.5*var(--iui-size-m));isolation:isolate;--_iui-button-active-stripe-inset:0 -2px 0 100%;border-left:none;border-right:none;border-radius:0;justify-content:flex-start}.iui-side-navigation .iui-sidenav-button:not(.iui-expand){height:calc(var(--iui-size-s)*5)}@supports (padding: max(0px)){.iui-side-navigation .iui-sidenav-button:not(.iui-expand){padding-left:max(calc(1.5*var(--iui-size-m)),calc(1.5*var(--iui-size-m)) + env(safe-area-inset-left))}}.iui-side-navigation .iui-sidenav-button>span:where(:not(.iui-button-icon)){white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.iui-side-navigation .iui-sidenav-button,.iui-side-navigation .iui-sidenav-button:hover,.iui-side-navigation .iui-sidenav-button[disabled]{border-color:var(--iui-color-border)}.iui-side-navigation .iui-sidenav-button .iui-button-icon:not(.iui-avatar) svg{width:calc(1.5*var(--iui-size-m));height:calc(1.5*var(--iui-size-m));flex-shrink:0;display:flex}.iui-side-navigation .iui-sidenav-button.iui-submenu-open{--_iui-button-active-stripe-background:linear-gradient( 0deg,var(--iui-color-background-accent-muted)25%,var(--iui-color-border-accent)25%,var(--iui-color-border-accent)75%,var(--iui-color-background-accent-muted)75% )}.iui-side-navigation .iui-sidenav-button.iui-submenu-open:before{content:"";z-index:-1;background-color:inherit;position:absolute;top:0;bottom:0;left:0;right:-2px}.iui-side-navigation .iui-sidenav-button[disabled],.iui-side-navigation .iui-sidenav-button:disabled{background-color:var(--iui-color-background-backdrop)}.iui-side-navigation .iui-sidenav-button.iui-expand{--_iui-button-padding-block:0;--_iui-button-min-height:var(--iui-size-l);border:none;border-bottom:1px solid var(--iui-color-border);justify-content:center}.iui-side-navigation .iui-sidenav-button.iui-expand>.iui-button-icon svg{width:var(--iui-size-s);height:var(--iui-size-s);fill:var(--iui-color-icon-muted);flex-shrink:0;display:flex}@media (forced-colors:active){.iui-side-navigation .iui-sidenav-button.iui-expand>.iui-button-icon svg{fill:CanvasText}}@media (prefers-reduced-motion:no-preference){.iui-side-navigation .iui-sidenav-button.iui-expand>.iui-button-icon svg{transition:transform var(--iui-duration-2)ease-out}}.iui-side-navigation-submenu{min-width:calc(var(--iui-size-3xl)*2);max-width:50vw;height:100%;overflow-x:hidden;overflow-y:auto;overflow-y:overlay;resize:horizontal;background-color:var(--iui-color-background);border-right:1px solid var(--iui-color-border)}.iui-side-navigation-submenu.iui-enter{opacity:0}.iui-side-navigation-submenu.iui-enter-active{opacity:1}@media (prefers-reduced-motion:no-preference){.iui-side-navigation-submenu.iui-enter-active{transition:opacity var(--iui-duration-1)ease-out,width var(--iui-duration-1)ease-out,height var(--iui-duration-1)ease-out}}.iui-side-navigation-submenu.iui-exit{opacity:1}.iui-side-navigation-submenu.iui-exit-active{opacity:0}@media (prefers-reduced-motion:no-preference){.iui-side-navigation-submenu.iui-exit-active{transition:opacity var(--iui-duration-1)ease-out,width var(--iui-duration-1)ease-out,height var(--iui-duration-1)ease-out}}.iui-side-navigation-submenu.iui-enter-active,.iui-side-navigation-submenu.iui-exit-active{display:flex}.iui-side-navigation-submenu-content{padding:0 var(--iui-size-s)var(--iui-size-s);flex-shrink:0}.iui-side-navigation-submenu-header{height:calc(var(--iui-size-s)*5);justify-content:space-between;align-items:center;display:flex}.iui-side-navigation-submenu-header-label{vertical-align:baseline;font-size:var(--iui-font-size-4);font-weight:var(--iui-font-weight-light);line-height:calc(1.5*var(--iui-size-l));border:none;align-items:center;margin:0;padding:0;display:flex;overflow:hidden}.iui-side-navigation-submenu-header-label .iui-button{flex-shrink:0}.iui-side-navigation-submenu-header-label>*{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.iui-side-navigation-submenu-header-actions{margin-left:var(--iui-size-xs);flex-shrink:0}.iui-side-navigation-wrapper{height:100%;display:flex;position:relative}

package/css/skip-to-content.css

@@ -2,64 +2,4 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-.iui-skip-to-content-link{
-  background-color:Hsl(0 0% 0%/var(--iui-opacity-2));
-  color:var(--iui-color-foreground-accessory);
-  border-radius:var(--iui-border-radius-round);
-  text-decoration:none;
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
-  padding:calc(var(--iui-size-s) * 0.75) var(--iui-size-m);
-  position:fixed;
-  text-align:center;
-  left:50%;
-  top:calc(var(--iui-size-s) * 2);
-  opacity:0;
-  z-index:99;
-  transform:translateX(-50%) translateY(-170%);
-  transition:background-color var(--iui-duration-1) ease-in-out;
-}
-@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
-  .iui-skip-to-content-link{
-    background-color:Hsl(0 0% 0%/var(--iui-opacity-3));
-    -webkit-backdrop-filter:blur(5px);
-            backdrop-filter:blur(5px);
-  }
-}
-.iui-skip-to-content-link:focus-visible{
-  outline:2px solid var(--iui-color-foreground-primary);
-  outline-offset:2px;
-}
-@supports not selector(*:focus-visible){
-  .iui-skip-to-content-link:focus{
-    outline:2px solid var(--iui-color-foreground-primary);
-    outline-offset:2px;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-skip-to-content-link{
-    transition:opacity var(--iui-duration-3) ease-in-out, background-color var(--iui-duration-3) ease-in-out, transform var(--iui-duration-3) ease-in-out, box-shadow var(--iui-duration-3) ease-in-out;
-  }
-}
-.iui-skip-to-content-link:hover{
-  background-color:Hsl(0 0% 0%/var(--iui-opacity-1));
-}
-@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
-  .iui-skip-to-content-link:hover{
-    background-color:Hsl(0 0% 0%/var(--iui-opacity-2));
-    -webkit-backdrop-filter:blur(5px);
-            backdrop-filter:blur(5px);
-  }
-}
-.iui-skip-to-content-link:focus{
-  opacity:1;
-  transform:translateX(-50%) translateY(0);
-  box-shadow:var(--iui-shadow-4);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-skip-to-content-link:focus{
-    transition:opacity var(--iui-duration-0) ease-in-out, background-color var(--iui-duration-1) ease-in-out, transform var(--iui-duration-1) ease-in-out, box-shadow var(--iui-duration-1) ease-in-out;
-  }
-}
+.iui-skip-to-content-link{background-color:hsl(0 0% 0%/var(--iui-opacity-2));color:var(--iui-color-white);border-radius:var(--iui-border-radius-round);-webkit-user-select:none;user-select:none;padding:calc(var(--iui-size-s)*.75)var(--iui-size-m);text-align:center;left:50%;top:calc(var(--iui-size-s)*2);opacity:0;z-index:99;transition:background-color var(--iui-duration-1)ease-in-out;text-decoration:none;position:fixed;transform:translate(-50%)translateY(-170%)}@supports (backdrop-filter: blur(5px)){.iui-skip-to-content-link{background-color:hsl(0 0% 0%/var(--iui-opacity-3));-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}}.iui-skip-to-content-link:focus-visible{outline:2px solid var(--iui-color-border-accent);outline-offset:2px}@supports not selector(*:focus-visible){.iui-skip-to-content-link:focus{outline:2px solid var(--iui-color-border-accent);outline-offset:2px}}@media (prefers-reduced-motion:no-preference){.iui-skip-to-content-link{transition:opacity var(--iui-duration-3)ease-in-out,background-color var(--iui-duration-3)ease-in-out,transform var(--iui-duration-3)ease-in-out,box-shadow var(--iui-duration-3)ease-in-out}}.iui-skip-to-content-link:hover{background-color:hsl(0 0% 0%/var(--iui-opacity-1))}@supports (backdrop-filter: blur(5px)){.iui-skip-to-content-link:hover{background-color:hsl(0 0% 0%/var(--iui-opacity-2));-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}}.iui-skip-to-content-link:focus{opacity:1;box-shadow:var(--iui-shadow-4);transform:translate(-50%)translateY(0)}@media (prefers-reduced-motion:no-preference){.iui-skip-to-content-link:focus{transition:opacity var(--iui-duration-0)ease-in-out,background-color var(--iui-duration-1)ease-in-out,transform var(--iui-duration-1)ease-in-out,box-shadow var(--iui-duration-1)ease-in-out}}