@itwin/itwinui-css 1.0.0-dev.14 → 1.0.0-dev.16

package/css/toast.css

@@ -2,318 +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-toast-wrapper{
-  pointer-events:none;
-  position:fixed;
-  display:flex;
-  align-items:center;
-  flex-direction:column;
-  justify-content:center;
-  z-index:99999;
-}
-@media screen and (max-width: 400px){
-  .iui-toast-wrapper{
-    width:calc(100vw - 36px);
-    margin-top:var(--iui-size-s);
-  }
-}
-@media screen and (min-width: 401px){
-  .iui-toast-wrapper{
-    min-width:400px;
-    max-width:640px;
-    margin:var(--iui-size-l) 0;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-toast-wrapper .iui-toast-all{
-    transition:all 240ms cubic-bezier(0, 0, 0.2, 1);
-  }
-}
-.iui-toast-wrapper.iui-placement-top{
-  margin-left:auto;
-  margin-right:auto;
-  left:0;
-  top:0;
-  right:0;
-}
-.iui-toast-wrapper.iui-placement-top-start{
-  left:0;
-  top:0;
-  align-items:flex-start;
-}
-.iui-toast-wrapper.iui-placement-top-end{
-  right:0;
-  top:0;
-  align-items:flex-end;
-}
-.iui-toast-wrapper.iui-placement-bottom{
-  bottom:0;
-  margin-left:auto;
-  margin-right:auto;
-  left:0;
-  right:0;
-}
-.iui-toast-wrapper.iui-placement-bottom .iui-toast{
-  margin:var(--iui-size-s) var(--iui-size-m) 0 var(--iui-size-m);
-}
-.iui-toast-wrapper.iui-placement-bottom-start{
-  bottom:0;
-  left:0;
-  align-items:flex-start;
-}
-.iui-toast-wrapper.iui-placement-bottom-start .iui-toast{
-  margin:var(--iui-size-s) var(--iui-size-m) 0 var(--iui-size-m);
-}
-.iui-toast-wrapper.iui-placement-bottom-end{
-  bottom:0;
-  right:0;
-  align-items:flex-end;
-}
-.iui-toast-wrapper.iui-placement-bottom-end .iui-toast{
-  margin:var(--iui-size-s) var(--iui-size-m) 0 var(--iui-size-m);
-}
-
-.iui-toast{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  display:inline-flex;
-  align-items:center;
-  pointer-events:all;
-  margin:0 var(--iui-size-m) var(--iui-size-s) var(--iui-size-m);
-  min-height:calc(var(--iui-size-s) * 4);
-  border-radius:var(--iui-border-radius-1);
-  background-color:var(--iui-color-background);
-  border:1px solid var(--iui-color-border);
-  box-shadow:0 0 0 1px rgba(255, 255, 255, var(--iui-opacity-4)), var(--iui-shadow-5);
-  overflow:hidden;
-}
-.iui-toast > .iui-status-area{
-  display:flex;
-  align-self:stretch;
-  justify-content:center;
-  align-items:center;
-  width:calc(var(--iui-size-l) * 2);
-  flex-shrink:0;
-}
-.iui-toast > .iui-status-area > .iui-icon{
-  display:flex;
-  flex-shrink:0;
-  width:var(--iui-size-m);
-  height:var(--iui-size-m);
-  fill:var(--iui-color-icon-muted);
-}
-.iui-toast > .iui-message{
-  flex-grow:1;
-  font-size:var(--iui-font-size-1);
-  margin-top:calc(var(--iui-size-s) * 0.5);
-  margin-bottom:calc(var(--iui-size-s) * 0.5);
-  margin-right:var(--iui-size-l);
-  margin-left:var(--iui-size-m);
-  line-height:var(--iui-size-l);
-  font-weight:var(--iui-font-weight-normal);
-  font-style:normal;
-  color:var(--iui-color-text);
-}
-.iui-toast-anchor{
-  text-decoration:underline;
-  border-radius:var(--iui-border-radius-1);
-  cursor:pointer;
-  font-size:var(--iui-font-size-0);
-  margin-right:var(--iui-size-m);
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
-  white-space:nowrap;
-}
-.iui-toast-anchor:hover{
-  text-decoration:none;
-}
-.iui-toast > .iui-button{
-  margin-right:var(--iui-size-xs);
-}
-@media screen and (max-width: 400px){
-  .iui-toast{
-    width:calc(100vw - 36px);
-  }
-}
-@media screen and (min-width: 401px){
-  .iui-toast{
-    min-width:400px;
-    max-width:640px;
-  }
-}
-.iui-toast.iui-informational{
-  border-color:var(--iui-color-border-informational);
-}
-.iui-toast.iui-informational > .iui-message::-moz-selection, .iui-toast.iui-informational > .iui-message *::-moz-selection{
-  background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5));
-}
-.iui-toast.iui-informational > .iui-message::selection,
-.iui-toast.iui-informational > .iui-message *::selection{
-  background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5));
-}
-.iui-toast.iui-informational > .iui-status-area{
-  background-image:linear-gradient(to right, var(--iui-color-background-informational-muted), var(--iui-color-background));
-}
-.iui-toast.iui-informational > .iui-status-area > .iui-icon{
-  fill:var(--iui-color-icon-informational);
-}
-.iui-toast.iui-informational > .iui-toast-anchor{
-  color:var(--iui-color-text-informational);
-  -webkit-tap-highlight-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-6));
-}
-.iui-toast.iui-informational > .iui-toast-anchor:focus-visible{
-  outline:1px solid var(--iui-color-text-informational);
-  outline-offset:1px;
-}
-@supports not selector(*:focus-visible){
-  .iui-toast.iui-informational > .iui-toast-anchor:focus{
-    outline:1px solid var(--iui-color-text-informational);
-    outline-offset:1px;
-  }
-}
-.iui-toast.iui-informational > .iui-toast-anchor::-moz-selection, .iui-toast.iui-informational > .iui-toast-anchor *::-moz-selection{
-  background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5));
-}
-.iui-toast.iui-informational > .iui-toast-anchor::selection,
-.iui-toast.iui-informational > .iui-toast-anchor *::selection{
-  background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5));
-}
-.iui-toast.iui-informational > .iui-toast-anchor:hover{
-  color:var(--iui-color-text-informational-hover);
-}
-.iui-toast.iui-informational > button{
-  outline-color:var(--iui-color-text-informational);
-}
-.iui-toast.iui-positive{
-  border-color:var(--iui-color-border-positive);
-}
-.iui-toast.iui-positive > .iui-message::-moz-selection, .iui-toast.iui-positive > .iui-message *::-moz-selection{
-  background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5));
-}
-.iui-toast.iui-positive > .iui-message::selection,
-.iui-toast.iui-positive > .iui-message *::selection{
-  background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5));
-}
-.iui-toast.iui-positive > .iui-status-area{
-  background-image:linear-gradient(to right, var(--iui-color-background-positive-muted), var(--iui-color-background));
-}
-.iui-toast.iui-positive > .iui-status-area > .iui-icon{
-  fill:var(--iui-color-icon-positive);
-}
-.iui-toast.iui-positive > .iui-toast-anchor{
-  color:var(--iui-color-text-positive);
-  -webkit-tap-highlight-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-6));
-}
-.iui-toast.iui-positive > .iui-toast-anchor:focus-visible{
-  outline:1px solid var(--iui-color-text-positive);
-  outline-offset:1px;
-}
-@supports not selector(*:focus-visible){
-  .iui-toast.iui-positive > .iui-toast-anchor:focus{
-    outline:1px solid var(--iui-color-text-positive);
-    outline-offset:1px;
-  }
-}
-.iui-toast.iui-positive > .iui-toast-anchor::-moz-selection, .iui-toast.iui-positive > .iui-toast-anchor *::-moz-selection{
-  background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5));
-}
-.iui-toast.iui-positive > .iui-toast-anchor::selection,
-.iui-toast.iui-positive > .iui-toast-anchor *::selection{
-  background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5));
-}
-.iui-toast.iui-positive > .iui-toast-anchor:hover{
-  color:var(--iui-color-text-positive-hover);
-}
-.iui-toast.iui-positive > button{
-  outline-color:var(--iui-color-text-positive);
-}
-.iui-toast.iui-warning{
-  border-color:var(--iui-color-border-warning);
-}
-.iui-toast.iui-warning > .iui-message::-moz-selection, .iui-toast.iui-warning > .iui-message *::-moz-selection{
-  background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5));
-}
-.iui-toast.iui-warning > .iui-message::selection,
-.iui-toast.iui-warning > .iui-message *::selection{
-  background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5));
-}
-.iui-toast.iui-warning > .iui-status-area{
-  background-image:linear-gradient(to right, var(--iui-color-background-warning-muted), var(--iui-color-background));
-}
-.iui-toast.iui-warning > .iui-status-area > .iui-icon{
-  fill:var(--iui-color-icon-warning);
-}
-.iui-toast.iui-warning > .iui-toast-anchor{
-  color:var(--iui-color-text-warning);
-  -webkit-tap-highlight-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-6));
-}
-.iui-toast.iui-warning > .iui-toast-anchor:focus-visible{
-  outline:1px solid var(--iui-color-text-warning);
-  outline-offset:1px;
-}
-@supports not selector(*:focus-visible){
-  .iui-toast.iui-warning > .iui-toast-anchor:focus{
-    outline:1px solid var(--iui-color-text-warning);
-    outline-offset:1px;
-  }
-}
-.iui-toast.iui-warning > .iui-toast-anchor::-moz-selection, .iui-toast.iui-warning > .iui-toast-anchor *::-moz-selection{
-  background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5));
-}
-.iui-toast.iui-warning > .iui-toast-anchor::selection,
-.iui-toast.iui-warning > .iui-toast-anchor *::selection{
-  background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5));
-}
-.iui-toast.iui-warning > .iui-toast-anchor:hover{
-  color:var(--iui-color-text-warning-hover);
-}
-.iui-toast.iui-warning > button{
-  outline-color:var(--iui-color-text-warning);
-}
-.iui-toast.iui-negative{
-  border-color:var(--iui-color-border-negative);
-}
-.iui-toast.iui-negative > .iui-message::-moz-selection, .iui-toast.iui-negative > .iui-message *::-moz-selection{
-  background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
-}
-.iui-toast.iui-negative > .iui-message::selection,
-.iui-toast.iui-negative > .iui-message *::selection{
-  background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
-}
-.iui-toast.iui-negative > .iui-status-area{
-  background-image:linear-gradient(to right, var(--iui-color-background-negative-muted), var(--iui-color-background));
-}
-.iui-toast.iui-negative > .iui-status-area > .iui-icon{
-  fill:var(--iui-color-icon-negative);
-}
-.iui-toast.iui-negative > .iui-toast-anchor{
-  color:var(--iui-color-text-negative);
-  -webkit-tap-highlight-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-6));
-}
-.iui-toast.iui-negative > .iui-toast-anchor:focus-visible{
-  outline:1px solid var(--iui-color-text-negative);
-  outline-offset:1px;
-}
-@supports not selector(*:focus-visible){
-  .iui-toast.iui-negative > .iui-toast-anchor:focus{
-    outline:1px solid var(--iui-color-text-negative);
-    outline-offset:1px;
-  }
-}
-.iui-toast.iui-negative > .iui-toast-anchor::-moz-selection, .iui-toast.iui-negative > .iui-toast-anchor *::-moz-selection{
-  background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
-}
-.iui-toast.iui-negative > .iui-toast-anchor::selection,
-.iui-toast.iui-negative > .iui-toast-anchor *::selection{
-  background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
-}
-.iui-toast.iui-negative > .iui-toast-anchor:hover{
-  color:var(--iui-color-text-negative-hover);
-}
-.iui-toast.iui-negative > button{
-  outline-color:var(--iui-color-text-negative);
-}
+.iui-toast-wrapper{pointer-events:none;z-index:99999;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed}@media screen and (max-width:400px){.iui-toast-wrapper{width:calc(100vw - 36px);margin-top:var(--iui-size-s)}}@media screen and (min-width:401px){.iui-toast-wrapper{min-width:400px;max-width:640px;margin:var(--iui-size-l)0}}@media (prefers-reduced-motion:no-preference){.iui-toast-wrapper .iui-toast-all{transition:all .24s cubic-bezier(0,0,.2,1)}}.iui-toast-wrapper.iui-placement-top{margin-left:auto;margin-right:auto;top:0;left:0;right:0}.iui-toast-wrapper.iui-placement-top-start{align-items:flex-start;top:0;left:0}.iui-toast-wrapper.iui-placement-top-end{align-items:flex-end;top:0;right:0}.iui-toast-wrapper.iui-placement-bottom{margin-left:auto;margin-right:auto;bottom:0;left:0;right:0}.iui-toast-wrapper.iui-placement-bottom .iui-toast{margin:var(--iui-size-s)var(--iui-size-m)0 var(--iui-size-m)}.iui-toast-wrapper.iui-placement-bottom-start{align-items:flex-start;bottom:0;left:0}.iui-toast-wrapper.iui-placement-bottom-start .iui-toast{margin:var(--iui-size-s)var(--iui-size-m)0 var(--iui-size-m)}.iui-toast-wrapper.iui-placement-bottom-end{align-items:flex-end;bottom:0;right:0}.iui-toast-wrapper.iui-placement-bottom-end .iui-toast{margin:var(--iui-size-s)var(--iui-size-m)0 var(--iui-size-m)}.iui-toast{vertical-align:baseline;pointer-events:all;margin:0;margin:0 var(--iui-size-m)var(--iui-size-s)var(--iui-size-m);min-height:calc(var(--iui-size-s)*4);border-radius:var(--iui-border-radius-1);background-color:var(--iui-color-background);border:none;border:1px solid var(--iui-color-border);box-shadow:0 0 0 1px rgba(255,255,255,var(--iui-opacity-4)),var(--iui-shadow-5);align-items:center;padding:0;display:inline-flex;overflow:hidden}.iui-toast>.iui-status-area{width:calc(var(--iui-size-l)*2);flex-shrink:0;justify-content:center;align-self:stretch;align-items:center;display:flex}.iui-toast>.iui-status-area>.iui-icon{width:var(--iui-size-m);height:var(--iui-size-m);fill:var(--iui-color-icon-muted);flex-shrink:0;display:flex}.iui-toast>.iui-message{font-size:var(--iui-font-size-1);margin-top:calc(var(--iui-size-s)*.5);margin-bottom:calc(var(--iui-size-s)*.5);margin-right:var(--iui-size-l);margin-left:var(--iui-size-m);line-height:var(--iui-size-l);font-weight:var(--iui-font-weight-normal);color:var(--iui-color-text);flex-grow:1;font-style:normal}.iui-toast-anchor{border-radius:var(--iui-border-radius-1);cursor:pointer;font-size:var(--iui-font-size-0);margin-right:var(--iui-size-m);-webkit-user-select:none;user-select:none;white-space:nowrap;text-decoration:underline}.iui-toast-anchor:hover{text-decoration:none}.iui-toast>.iui-button{margin-right:var(--iui-size-xs)}@media screen and (max-width:400px){.iui-toast{width:calc(100vw - 36px)}}@media screen and (min-width:401px){.iui-toast{min-width:400px;max-width:640px}}.iui-toast.iui-informational{border-color:var(--iui-color-border-informational)}.iui-toast.iui-informational>.iui-message::selection,.iui-toast.iui-informational>.iui-message ::selection{background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5))}.iui-toast.iui-informational>.iui-status-area{background-image:linear-gradient(to right,var(--iui-color-background-informational-muted),var(--iui-color-background))}.iui-toast.iui-informational>.iui-status-area>.iui-icon{fill:var(--iui-color-icon-informational)}.iui-toast.iui-informational>.iui-toast-anchor{color:var(--iui-color-text-informational);-webkit-tap-highlight-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-6))}.iui-toast.iui-informational>.iui-toast-anchor:focus-visible{outline:1px solid var(--iui-color-text-informational);outline-offset:1px}@supports not selector(*:focus-visible){.iui-toast.iui-informational>.iui-toast-anchor:focus{outline:1px solid var(--iui-color-text-informational);outline-offset:1px}}.iui-toast.iui-informational>.iui-toast-anchor::selection,.iui-toast.iui-informational>.iui-toast-anchor ::selection{background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5))}.iui-toast.iui-informational>.iui-toast-anchor:hover{color:var(--iui-color-text-informational-hover)}.iui-toast.iui-informational>button{outline-color:var(--iui-color-text-informational)}.iui-toast.iui-positive{border-color:var(--iui-color-border-positive)}.iui-toast.iui-positive>.iui-message::selection,.iui-toast.iui-positive>.iui-message ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}.iui-toast.iui-positive>.iui-status-area{background-image:linear-gradient(to right,var(--iui-color-background-positive-muted),var(--iui-color-background))}.iui-toast.iui-positive>.iui-status-area>.iui-icon{fill:var(--iui-color-icon-positive)}.iui-toast.iui-positive>.iui-toast-anchor{color:var(--iui-color-text-positive);-webkit-tap-highlight-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-6))}.iui-toast.iui-positive>.iui-toast-anchor:focus-visible{outline:1px solid var(--iui-color-text-positive);outline-offset:1px}@supports not selector(*:focus-visible){.iui-toast.iui-positive>.iui-toast-anchor:focus{outline:1px solid var(--iui-color-text-positive);outline-offset:1px}}.iui-toast.iui-positive>.iui-toast-anchor::selection,.iui-toast.iui-positive>.iui-toast-anchor ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}.iui-toast.iui-positive>.iui-toast-anchor:hover{color:var(--iui-color-text-positive-hover)}.iui-toast.iui-positive>button{outline-color:var(--iui-color-text-positive)}.iui-toast.iui-warning{border-color:var(--iui-color-border-warning)}.iui-toast.iui-warning>.iui-message::selection,.iui-toast.iui-warning>.iui-message ::selection{background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5))}.iui-toast.iui-warning>.iui-status-area{background-image:linear-gradient(to right,var(--iui-color-background-warning-muted),var(--iui-color-background))}.iui-toast.iui-warning>.iui-status-area>.iui-icon{fill:var(--iui-color-icon-warning)}.iui-toast.iui-warning>.iui-toast-anchor{color:var(--iui-color-text-warning);-webkit-tap-highlight-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-6))}.iui-toast.iui-warning>.iui-toast-anchor:focus-visible{outline:1px solid var(--iui-color-text-warning);outline-offset:1px}@supports not selector(*:focus-visible){.iui-toast.iui-warning>.iui-toast-anchor:focus{outline:1px solid var(--iui-color-text-warning);outline-offset:1px}}.iui-toast.iui-warning>.iui-toast-anchor::selection,.iui-toast.iui-warning>.iui-toast-anchor ::selection{background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5))}.iui-toast.iui-warning>.iui-toast-anchor:hover{color:var(--iui-color-text-warning-hover)}.iui-toast.iui-warning>button{outline-color:var(--iui-color-text-warning)}.iui-toast.iui-negative{border-color:var(--iui-color-border-negative)}.iui-toast.iui-negative>.iui-message::selection,.iui-toast.iui-negative>.iui-message ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}.iui-toast.iui-negative>.iui-status-area{background-image:linear-gradient(to right,var(--iui-color-background-negative-muted),var(--iui-color-background))}.iui-toast.iui-negative>.iui-status-area>.iui-icon{fill:var(--iui-color-icon-negative)}.iui-toast.iui-negative>.iui-toast-anchor{color:var(--iui-color-text-negative);-webkit-tap-highlight-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-6))}.iui-toast.iui-negative>.iui-toast-anchor:focus-visible{outline:1px solid var(--iui-color-text-negative);outline-offset:1px}@supports not selector(*:focus-visible){.iui-toast.iui-negative>.iui-toast-anchor:focus{outline:1px solid var(--iui-color-text-negative);outline-offset:1px}}.iui-toast.iui-negative>.iui-toast-anchor::selection,.iui-toast.iui-negative>.iui-toast-anchor ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}.iui-toast.iui-negative>.iui-toast-anchor:hover{color:var(--iui-color-text-negative-hover)}.iui-toast.iui-negative>button{outline-color:var(--iui-color-text-negative)}

package/css/toggle-switch.css

@@ -2,210 +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-toggle-switch-wrapper{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  display:grid;
-  grid-template-areas:"toggle";
-  align-items:center;
-  gap:var(--iui-size-xs);
-  font-size:var(--iui-font-size-1);
-  width:-webkit-fit-content;
-  width:-moz-fit-content;
-  width:fit-content;
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
-  cursor:pointer;
-  isolation:isolate;
-  color:var(--iui-color-text);
-}
-.iui-toggle-switch-wrapper.iui-disabled{
-  cursor:not-allowed;
-  color:var(--iui-color-text-disabled);
-}
-@media (forced-colors: active){
-  .iui-toggle-switch-wrapper.iui-disabled{
-    color:GrayText;
-  }
-}
-.iui-toggle-switch-wrapper.iui-label-on-left{
-  grid-template-areas:"label toggle";
-}
-.iui-toggle-switch-wrapper.iui-label-on-right{
-  grid-template-areas:"toggle label";
-}
-
-.iui-toggle-switch{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  grid-area:toggle;
-  display:flex;
-  position:relative;
-  cursor:pointer;
-  -webkit-appearance:none;
-     -moz-appearance:none;
-          appearance:none;
-  width:calc((var(--iui-size-m) + var(--iui-size-2xs) * 2) * 2);
-  border-radius:var(--iui-border-radius-round);
-  transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
-  background-color:var(--iui-color-background);
-  border:1px solid var(--iui-color-border-foreground);
-  background-color:var(--iui-color-background);
-  border-color:var(--iui-color-border-foreground);
-}
-.iui-toggle-switch:focus-visible{
-  outline:1px solid var(--iui-color-border-accent);
-  outline-offset:1px;
-}
-@supports not selector(*:focus-visible){
-  .iui-toggle-switch:focus{
-    outline:1px solid var(--iui-color-border-accent);
-    outline-offset:1px;
-  }
-}
-.iui-toggle-switch-label{
-  grid-area:label;
-}
-.iui-toggle-switch::after{
-  content:"";
-  height:var(--iui-size-m);
-  width:var(--iui-size-m);
-  margin:var(--iui-size-2xs);
-  aspect-ratio:1/1;
-  border-radius:50%;
-  transition:background-color var(--iui-duration-1) ease-out;
-  z-index:2;
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-toggle-switch::after{
-    transition:transform var(--iui-duration-1) ease-out, background-color var(--iui-duration-1) ease-out;
-  }
-}
-@media (forced-colors: active){
-  .iui-toggle-switch{
-    border-color:CanvasText;
-  }
-}
-.iui-toggle-switch::after{
-  background-color:var(--iui-color-icon);
-}
-@media (forced-colors: active){
-  .iui-toggle-switch::after{
-    background-color:CanvasText;
-  }
-}
-.iui-toggle-switch:hover{
-  border-color:var(--iui-color-border-foreground-hover);
-}
-@media (forced-colors: active){
-  .iui-toggle-switch:hover{
-    border-color:CanvasText;
-  }
-}
-.iui-toggle-switch:hover::after{
-  background-color:var(--iui-color-icon-hover);
-}
-.iui-toggle-switch:hover:focus-visible::after{
-  background-color:var(--iui-color-icon-hover);
-}
-@supports not selector(*:focus-visible){
-  .iui-toggle-switch:hover:focus::after{
-    background-color:var(--iui-color-icon-hover);
-  }
-}
-.iui-toggle-switch:focus-visible{
-  border-color:var(--iui-color-border-foreground-hover);
-}
-@supports not selector(*:focus-visible){
-  .iui-toggle-switch:focus{
-    border-color:var(--iui-color-border-foreground-hover);
-  }
-}
-.iui-toggle-switch:checked{
-  background-color:var(--iui-color-background-accent);
-  border-color:var(--iui-color-background-accent);
-}
-@media (forced-colors: active){
-  .iui-toggle-switch:checked{
-    background-color:Highlight;
-    border-color:Highlight;
-  }
-}
-.iui-toggle-switch:checked::after{
-  transform:translateX(calc(var(--iui-size-m) + var(--iui-size-2xs)));
-  background-color:var(--iui-color-white);
-}
-@media (forced-colors: active){
-  .iui-toggle-switch:checked::after{
-    background-color:HighlightText;
-  }
-}
-.iui-toggle-switch:checked ~ .iui-toggle-switch-icon{
-  opacity:var(--iui-opacity-1);
-}
-.iui-toggle-switch:disabled{
-  cursor:not-allowed;
-  background-color:var(--iui-color-background-disabled);
-  border-color:var(--iui-color-border-disabled);
-}
-@media (forced-colors: active){
-  .iui-toggle-switch:disabled{
-    border-color:GrayText;
-  }
-}
-.iui-toggle-switch:disabled::after{
-  background-color:var(--iui-color-icon-disabled);
-}
-@media (forced-colors: active){
-  .iui-toggle-switch:disabled::after{
-    background-color:GrayText;
-    opacity:0.75;
-  }
-}
-.iui-toggle-switch:disabled ~ .iui-toggle-switch-icon{
-  opacity:0;
-  fill:var(--iui-color-icon);
-}
-@media (forced-colors: active){
-  .iui-toggle-switch:disabled:checked{
-    background-color:GrayText;
-  }
-}
-@media (forced-colors: active){
-  .iui-toggle-switch:disabled:checked::after{
-    background-color:Canvas;
-  }
-}
-.iui-toggle-switch:disabled:checked ~ .iui-toggle-switch-icon{
-  opacity:var(--iui-opacity-5);
-}
-@media (forced-colors: active){
-  .iui-toggle-switch:disabled:checked ~ .iui-toggle-switch-icon{
-    fill:Canvas;
-    opacity:0.75;
-  }
-}
-.iui-toggle-switch-icon{
-  opacity:0;
-  grid-area:toggle;
-  width:var(--iui-size-m);
-  height:var(--iui-size-m);
-  padding:calc(var(--iui-size-m) * 0.125);
-  margin:calc(var(--iui-size-2xs) + 1px);
-  display:flex;
-  z-index:1;
-  transition:opacity var(--iui-duration-1) ease-out;
-  pointer-events:none;
-  fill:var(--iui-color-white);
-}
-@media (forced-colors: active){
-  .iui-toggle-switch-icon{
-    fill:HighlightText;
-  }
-}
+.iui-toggle-switch-wrapper{vertical-align:baseline;align-items:center;gap:var(--iui-size-xs);font-size:var(--iui-font-size-1);width:-moz-fit-content;width:fit-content;-webkit-user-select:none;user-select:none;cursor:pointer;isolation:isolate;color:var(--iui-color-text);border:none;grid-template-areas:"toggle";margin:0;padding:0;display:grid}.iui-toggle-switch-wrapper.iui-disabled{cursor:not-allowed;color:var(--iui-color-text-disabled)}@media (forced-colors:active){.iui-toggle-switch-wrapper.iui-disabled{color:GrayText}}.iui-toggle-switch-wrapper.iui-label-on-left{grid-template-areas:"label toggle"}.iui-toggle-switch-wrapper.iui-label-on-right{grid-template-areas:"toggle label"}.iui-toggle-switch{vertical-align:baseline;cursor:pointer;-webkit-appearance:none;appearance:none;width:calc((var(--iui-size-m) + var(--iui-size-2xs)*2)*2);border-radius:var(--iui-border-radius-round);transition:background-color var(--iui-duration-1)ease-out,border-color var(--iui-duration-1)ease-out;background-color:var(--iui-color-background);border:none;border:1px solid var(--iui-color-border-foreground);background-color:var(--iui-color-background);border-color:var(--iui-color-border-foreground);grid-area:toggle;margin:0;padding:0;display:flex;position:relative}.iui-toggle-switch:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:1px}@supports not selector(*:focus-visible){.iui-toggle-switch:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:1px}}.iui-toggle-switch-label{grid-area:label}.iui-toggle-switch:after{content:"";height:var(--iui-size-m);width:var(--iui-size-m);margin:var(--iui-size-2xs);aspect-ratio:1/1;transition:background-color var(--iui-duration-1)ease-out;z-index:2;border-radius:50%}@media (prefers-reduced-motion:no-preference){.iui-toggle-switch:after{transition:transform var(--iui-duration-1)ease-out,background-color var(--iui-duration-1)ease-out}}@media (forced-colors:active){.iui-toggle-switch{border-color:CanvasText}}.iui-toggle-switch:after{background-color:var(--iui-color-icon)}@media (forced-colors:active){.iui-toggle-switch:after{background-color:CanvasText}}.iui-toggle-switch:hover{border-color:var(--iui-color-border-foreground-hover)}@media (forced-colors:active){.iui-toggle-switch:hover{border-color:CanvasText}}.iui-toggle-switch:hover:after,.iui-toggle-switch:hover:focus-visible:after{background-color:var(--iui-color-icon-hover)}@supports not selector(*:focus-visible){.iui-toggle-switch:hover:focus:after{background-color:var(--iui-color-icon-hover)}}.iui-toggle-switch:focus-visible{border-color:var(--iui-color-border-foreground-hover)}@supports not selector(*:focus-visible){.iui-toggle-switch:focus{border-color:var(--iui-color-border-foreground-hover)}}.iui-toggle-switch:checked{background-color:var(--iui-color-background-accent);border-color:var(--iui-color-background-accent)}@media (forced-colors:active){.iui-toggle-switch:checked{background-color:Highlight;border-color:Highlight}}.iui-toggle-switch:checked:after{transform:translateX(calc(var(--iui-size-m) + var(--iui-size-2xs)));background-color:var(--iui-color-white)}@media (forced-colors:active){.iui-toggle-switch:checked:after{background-color:HighlightText}}.iui-toggle-switch:checked~.iui-toggle-switch-icon{opacity:var(--iui-opacity-1)}.iui-toggle-switch:disabled{cursor:not-allowed;background-color:var(--iui-color-background-disabled);border-color:var(--iui-color-border-disabled)}@media (forced-colors:active){.iui-toggle-switch:disabled{border-color:GrayText}}.iui-toggle-switch:disabled:after{background-color:var(--iui-color-icon-disabled)}@media (forced-colors:active){.iui-toggle-switch:disabled:after{background-color:GrayText;opacity:.75}}.iui-toggle-switch:disabled~.iui-toggle-switch-icon{opacity:0;fill:var(--iui-color-icon)}@media (forced-colors:active){.iui-toggle-switch:disabled:checked{background-color:GrayText}.iui-toggle-switch:disabled:checked:after{background-color:Canvas}}.iui-toggle-switch:disabled:checked~.iui-toggle-switch-icon{opacity:var(--iui-opacity-5)}@media (forced-colors:active){.iui-toggle-switch:disabled:checked~.iui-toggle-switch-icon{fill:Canvas;opacity:.75}}.iui-toggle-switch-icon{opacity:0;width:var(--iui-size-m);height:var(--iui-size-m);padding:calc(var(--iui-size-m)*.125);margin:calc(var(--iui-size-2xs) + 1px);z-index:1;transition:opacity var(--iui-duration-1)ease-out;pointer-events:none;fill:var(--iui-color-white);grid-area:toggle;display:flex}@media (forced-colors:active){.iui-toggle-switch-icon{fill:HighlightText}}

package/css/tooltip.css

@@ -2,51 +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-tooltip-container{
-  width:-webkit-fit-content;
-  width:-moz-fit-content;
-  width:fit-content;
-  height:-webkit-fit-content;
-  height:-moz-fit-content;
-  height:fit-content;
-  position:relative;
-}
-.iui-tooltip-container > .iui-tooltip{
-  position:absolute;
-  visibility:hidden;
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
-  opacity:0;
-  transition:visibility var(--iui-duration-0) linear var(--iui-duration-1), opacity var(--iui-duration-1) ease-out;
-}
-.iui-tooltip-container > .iui-tooltip.iui-tooltip-visible, .iui-tooltip-container:hover > .iui-tooltip{
-  visibility:visible;
-  opacity:1;
-}
-
-.iui-tooltip{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  display:block;
-  text-align:center;
-  border-radius:var(--iui-border-radius-1);
-  font-size:var(--iui-font-size-0);
-  overflow:hidden;
-  max-width:400px;
-  width:-webkit-max-content;
-  width:-moz-max-content;
-  width:max-content;
-  overflow-wrap:break-word;
-  box-sizing:content-box;
-  padding:calc(var(--iui-size-s) * 0.33) var(--iui-size-xs);
-  z-index:999;
-  box-shadow:var(--iui-shadow-3);
-  pointer-events:none;
-  background-color:rgba(0, 0, 0, var(--iui-opacity-3));
-  color:var(--iui-color-white);
-  border:1px solid rgba(255, 255, 255, var(--iui-opacity-4));
-}
+.iui-tooltip-container{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;position:relative}.iui-tooltip-container>.iui-tooltip{visibility:hidden;-webkit-user-select:none;user-select:none;opacity:0;transition:visibility var(--iui-duration-0)linear var(--iui-duration-1),opacity var(--iui-duration-1)ease-out;position:absolute}.iui-tooltip-container>.iui-tooltip.iui-tooltip-visible,.iui-tooltip-container:hover>.iui-tooltip{visibility:visible;opacity:1}.iui-tooltip{vertical-align:baseline;text-align:center;border-radius:var(--iui-border-radius-1);font-size:var(--iui-font-size-0);max-width:400px;width:max-content;overflow-wrap:break-word;box-sizing:content-box;padding:0;padding:calc(var(--iui-size-s)*.33)var(--iui-size-xs);z-index:999;box-shadow:var(--iui-shadow-3);pointer-events:none;background-color:rgba(0,0,0,var(--iui-opacity-3));color:var(--iui-color-white);border:none;border:1px solid rgba(255,255,255,var(--iui-opacity-4));margin:0;display:block;overflow:hidden}