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

package/css/input.css

@@ -2,169 +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-input{
-  --_iui-input-background-color:var(--iui-color-background-1);
-  --_iui-input-border-color:var(--iui-color-foreground-4);
-  --_iui-input-text-color:var(--iui-color-foreground-2);
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  width:100%;
-  font-family:inherit;
-  font-size:var(--iui-font-size-1);
-  font-weight:var(--iui-font-weight-normal);
-  line-height:var(--iui-size-l);
-  border-radius:var(--iui-border-radius-1);
-  -webkit-appearance:none;
-     -moz-appearance:none;
-          appearance:none;
-  min-height:var(--_iui-input-min-height);
-  padding-block:var(--_iui-input-padding-block);
-  padding-inline:var(--iui-size-s);
-  color:var(--_iui-input-text-color);
-  background-color:var(--_iui-input-background-color);
-  border:1px solid var(--_iui-input-border-color);
-  transition:border-color var(--iui-duration-1) ease-out;
-  --_iui-input-padding-block:var(--iui-size-2xs);
-  --_iui-input-min-height:var(--iui-component-height);
-}
-.iui-input:focus-visible{
-  outline:2px solid var(--iui-color-foreground-primary);
-  outline-offset:-2px;
-}
-@supports not selector(*:focus-visible){
-  .iui-input:focus{
-    outline:2px solid var(--iui-color-foreground-primary);
-    outline-offset:-2px;
-  }
-}
-.iui-input::-moz-placeholder{
-  --_iui-input-text-color:var(--iui-color-foreground-5);
-  -moz-user-select:none;
-       user-select:none;
-  color:var(--_iui-input-text-color);
-}
-.iui-input:-ms-input-placeholder{
-  --_iui-input-text-color:var(--iui-color-foreground-5);
-  -ms-user-select:none;
-      user-select:none;
-  color:var(--_iui-input-text-color);
-}
-.iui-input::placeholder{
-  --_iui-input-text-color:var(--iui-color-foreground-5);
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
-  color:var(--_iui-input-text-color);
-}
-.iui-input:-webkit-autofill{
-  --_iui-input-background-color:var(--iui-color-background-subtle-primary);
-  --_iui-input-border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
-  --_iui-input-text-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
-}
-.iui-input:autofill{
-  --_iui-input-background-color:var(--iui-color-background-subtle-primary);
-  --_iui-input-border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
-  --_iui-input-text-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
-}
-.iui-input:hover{
-  --_iui-input-border-color:var(--iui-color-foreground-2);
-}
-.iui-input[disabled]{
-  --_iui-input-background-color:var(--iui-color-background-disabled);
-  --_iui-input-border-color:var(--iui-color-background-disabled);
-  --_iui-input-with-icon-hover-border-color:var(--iui-color-background-disabled);
-  cursor:not-allowed;
-}
-:where(textarea.iui-input){
-  resize:vertical;
-}
-:where(textarea.iui-input)[disabled], :where(textarea.iui-input)[readonly]{
-  resize:none;
-}
-
-.iui-input[data-iui-size=small]{
-  --_iui-input-padding-block:0;
-  --_iui-input-min-height:var(--iui-component-height-small);
-}
-.iui-input[data-iui-size=large]{
-  --_iui-input-padding-block:var(--iui-size-xs);
-  --_iui-input-min-height:var(--iui-component-height-large);
-  font-size:var(--iui-font-size-2);
-}
-
-.iui-input-with-icon.iui-input-with-icon{
-  display:grid;
-  align-items:center;
-  cursor:pointer;
-}
-.iui-input-with-icon.iui-input-with-icon > :first-child{
-  grid-area:1/-1;
-  padding-right:var(--iui-component-height);
-}
-.iui-input-with-icon.iui-input-with-icon:focus-within > :first-child{
-  outline:2px solid var(--_focus-color, var(--iui-color-foreground-primary));
-  outline-offset:-2px;
-}
-.iui-input-with-icon.iui-input-with-icon:hover > :first-child{
-  border-color:var(--_iui-input-with-icon-hover-border-color, var(--iui-color-foreground-2));
-}
-
-.iui-end-icon{
-  grid-area:inputs;
-  justify-self:end;
-  margin:0 calc(var(--iui-size-xs) + 1px) 0 0;
-  position:relative;
-  display:flex;
-  grid-area:1/-1;
-}
-.iui-end-icon svg{
-  display:flex;
-  flex-shrink:0;
-  width:var(--iui-size-m);
-  height:var(--iui-size-m);
-}
-.iui-end-icon.iui-button{
-  height:100%;
-  width:-webkit-fit-content;
-  width:-moz-fit-content;
-  width:fit-content;
-  margin-right:0;
-  border-top-left-radius:0;
-  border-bottom-left-radius:0;
-  border-top-right-radius:inherit;
-  border-bottom-right-radius:inherit;
-}
-.iui-end-icon.iui-actionable{
-  align-items:center;
-  height:calc(100% - 4px);
-  margin-right:1px;
-  padding-inline:calc(var(--iui-size-xs) + 1px);
-  cursor:pointer;
-  box-sizing:content-box;
-  background-position:center;
-  transition:background var(--iui-duration-2) ease-out;
-}
-.iui-end-icon.iui-actionable:hover{
-  background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%;
-}
-.iui-end-icon.iui-actionable:active{
-  background-color:var(--iui-color-background-2);
-  background-size:100%;
-  transition:background var(--iui-duration-0);
-}
-.iui-end-icon.iui-actionable svg{
-  fill:var(--iui-color-foreground-2);
-  transition:transform var(--iui-duration-1) ease-out;
-}
-.iui-end-icon.iui-actionable.iui-open svg{
-  transform:rotate(180deg);
-}
-.iui-end-icon.iui-disabled{
-  cursor:not-allowed;
-}
-.iui-end-icon.iui-disabled svg{
-  fill:var(--iui-color-foreground-5);
-}
+.iui-input{--_iui-input-background-color:var(--iui-color-background);--_iui-input-border-color:var(--iui-color-border-foreground);--_iui-input-text-color:var(--iui-color-text);vertical-align:baseline;width:100%;font-family:inherit;font-size:var(--iui-font-size-1);font-weight:var(--iui-font-weight-normal);line-height:var(--iui-size-l);border-radius:var(--iui-border-radius-1);-webkit-appearance:none;appearance:none;min-height:var(--_iui-input-min-height);padding:0;padding-block:var(--_iui-input-padding-block);padding-inline:var(--iui-size-s);color:var(--_iui-input-text-color);background-color:var(--_iui-input-background-color);border:none;border:1px solid var(--_iui-input-border-color);transition:border-color var(--iui-duration-1)ease-out;--_iui-input-padding-block:var(--iui-size-2xs);--_iui-input-min-height:var(--iui-component-height);margin:0}.iui-input:focus-visible{outline:2px solid var(--iui-color-border-accent);outline-offset:-2px}@supports not selector(*:focus-visible){.iui-input:focus{outline:2px solid var(--iui-color-border-accent);outline-offset:-2px}}.iui-input::placeholder{--_iui-input-text-color:var(--iui-color-text-disabled);-webkit-user-select:none;user-select:none;color:var(--_iui-input-text-color)}.iui-input:-webkit-autofill{--_iui-input-background-color:var(--iui-color-background-accent-muted);--_iui-input-border-color:var(--iui-color-border-accent);--_iui-input-text-color:var(--iui-color-text-accent)}.iui-input:autofill{--_iui-input-background-color:var(--iui-color-background-accent-muted);--_iui-input-border-color:var(--iui-color-border-accent);--_iui-input-text-color:var(--iui-color-text-accent)}.iui-input:hover{--_iui-input-border-color:var(--iui-color-border-foreground-hover)}.iui-input[disabled]{--_iui-input-background-color:var(--iui-color-background-disabled);--_iui-input-border-color:var(--iui-color-border-disabled);--_iui-input-with-icon-hover-border-color:var(--iui-color-border-disabled);cursor:not-allowed}:where(textarea.iui-input){resize:vertical}:where(textarea.iui-input)[disabled],:where(textarea.iui-input)[readonly]{resize:none}.iui-input[data-iui-size=small]{--_iui-input-padding-block:0;--_iui-input-min-height:var(--iui-component-height-small)}.iui-input[data-iui-size=large]{--_iui-input-padding-block:var(--iui-size-xs);--_iui-input-min-height:var(--iui-component-height-large);font-size:var(--iui-font-size-2)}.iui-input-with-icon.iui-input-with-icon{cursor:pointer;align-items:center;display:grid}.iui-input-with-icon.iui-input-with-icon>:first-child{padding-right:var(--iui-component-height);grid-area:1/-1}.iui-input-with-icon.iui-input-with-icon:focus-within>:first-child{outline:2px solid var(--_focus-color,var(--iui-color-border-accent));outline-offset:-2px}.iui-input-with-icon.iui-input-with-icon:hover>:first-child{border-color:var(--_iui-input-with-icon-hover-border-color,var(--iui-color-border-foreground-hover))}.iui-end-icon{margin:0 calc(var(--iui-size-xs) + 1px)0 0;grid-area:1/-1;justify-self:end;display:flex;position:relative}.iui-end-icon svg{width:var(--iui-size-m);height:var(--iui-size-m);flex-shrink:0;display:flex}.iui-end-icon.iui-button{height:100%;width:-moz-fit-content;width:fit-content;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:inherit;border-bottom-right-radius:inherit;margin-right:0}.iui-end-icon.iui-actionable{height:calc(100% - 4px);border-radius:var(--iui-border-radius-1);padding-inline:calc(var(--iui-size-xs) + 1px);cursor:pointer;box-sizing:content-box;transition:background var(--iui-duration-2)ease-out;background-position:50%;align-items:center;margin-right:2px}.iui-end-icon.iui-actionable:hover{background:var(--iui-color-background)radial-gradient(circle,transparent 1%,var(--iui-color-background)1%)center/15000%}.iui-end-icon.iui-actionable:active{background-color:var(--iui-color-background-backdrop);transition:background var(--iui-duration-0);background-size:100%}.iui-end-icon.iui-actionable svg{fill:var(--iui-color-icon);transition:transform var(--iui-duration-1)ease-out}.iui-end-icon.iui-actionable.iui-open svg{transform:rotate(180deg)}.iui-end-icon.iui-disabled{cursor:not-allowed}.iui-end-icon.iui-disabled svg{fill:var(--iui-color-icon-disabled)}

package/css/keyboard.css

@@ -2,30 +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-keyboard{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  border-radius:var(--iui-border-radius-1);
-  display:inline-block;
-  font-size:var(--iui-font-size-0);
-  font-weight:var(--iui-font-weight-semibold);
-  font-family:var(--iui-font-mono);
-  line-height:1;
-  padding:calc(var(--iui-size-s) * 0.33) var(--iui-size-xs);
-  white-space:nowrap;
-  text-transform:uppercase;
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
-  cursor:default;
-  background-color:var(--iui-color-background-1);
-  border:1px solid var(--iui-color-background-5);
-  box-shadow:0 1px 1px var(--iui-color-background-5), 0 1px 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset;
-  transition:box-shadow var(--iui-duration-1) ease-out;
-}
-.iui-keyboard:hover{
-  box-shadow:0 0 0 var(--iui-color-background-5), 0 0 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset;
-}
+.iui-keyboard{vertical-align:baseline;border-radius:var(--iui-border-radius-1);font-size:var(--iui-font-size-0);font-weight:var(--iui-font-weight-semibold);font-family:var(--iui-font-mono);padding:0;padding:calc(var(--iui-size-s)*.33)var(--iui-size-xs);white-space:nowrap;text-transform:uppercase;-webkit-user-select:none;user-select:none;cursor:default;background-color:var(--iui-color-background);border:none;border:1px solid var(--iui-color-border);box-shadow:0 1px 1px var(--iui-color-border),0 1px 0 0 rgba(255,255,255,var(--iui-opacity-5))inset;transition:box-shadow var(--iui-duration-1)ease-out;margin:0;line-height:1;display:inline-block}.iui-keyboard:hover{box-shadow:0 0 0 var(--iui-color-border),0 0 0 0 rgba(255,255,255,var(--iui-opacity-5))inset}

package/css/location-marker.css

@@ -2,117 +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-location-marker-default{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  display:inline-block;
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
-  position:relative;
-  display:flex;
-  flex-shrink:0;
-  width:calc(1.5 * var(--iui-size-m));
-  height:calc(1.5 * var(--iui-size-m));
-  cursor:pointer;
-}
-.iui-location-marker-default > .iui-location-marker-default-pin{
-  filter:drop-shadow(var(--iui-shadow-1));
-}
-.iui-location-marker-default > .iui-location-marker-default-pin > .iui-location-marker-default-pin-dot{
-  fill:var(--iui-color-foreground-accessory);
-}
-
-.iui-location-marker-data-rich{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  display:inline-block;
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
-  position:relative;
-  cursor:pointer;
-}
-.iui-location-marker-data-rich > .iui-location-marker-data-rich-body{
-  min-width:var(--iui-size-xl);
-  border-radius:var(--iui-border-radius-1);
-  text-align:center;
-  font-size:var(--iui-font-size-2);
-  padding:calc(var(--iui-size-s) * 0.25) var(--iui-size-xs);
-  filter:drop-shadow(var(--iui-shadow-1));
-  position:relative;
-  border:solid 1px var(--iui-color-foreground-accessory);
-  background-color:var(--iui-color-foreground-accessory);
-  color:var(--iui-color-foreground-accessory);
-}
-.iui-location-marker-data-rich > .iui-location-marker-data-rich-body::before{
-  content:"";
-  position:absolute;
-  display:block;
-  width:0;
-  height:0;
-  bottom:-9px;
-  left:0;
-  right:0;
-  margin:auto;
-  border-width:var(--iui-size-2xs);
-  border-style:solid;
-  border-color:var(--iui-color-foreground-accessory) transparent transparent transparent;
-}
-.iui-location-marker-data-rich > .iui-location-marker-data-rich-body > .iui-location-marker-data-rich-icon{
-  display:flex;
-  flex-shrink:0;
-  width:var(--iui-size-m);
-  height:var(--iui-size-m);
-  display:inline-block;
-  font-size:inherit;
-  vertical-align:-2px;
-}
-.iui-location-marker-data-rich > .iui-location-marker-data-rich-body > .iui-location-marker-data-rich-icon.iui-location-marker-data-rich-icon-monochrome{
-  fill:var(--iui-color-foreground-accessory);
-}
-
-.iui-location-marker-me{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  display:inline-block;
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
-  position:relative;
-  display:flex;
-  flex-shrink:0;
-  width:calc(1.5 * var(--iui-size-m));
-  height:calc(1.5 * var(--iui-size-m));
-  position:relative;
-  border-radius:50%;
-  cursor:default;
-}
-.iui-location-marker-me::before{
-  content:"";
-  position:absolute;
-  inset:0;
-  z-index:-1;
-  opacity:var(--iui-opacity-5);
-  background-color:var(--iui-color-foreground-primary);
-  border-radius:inherit;
-}
-.iui-location-marker-me > .iui-location-marker-me-dot{
-  width:var(--iui-size-s);
-  height:var(--iui-size-s);
-  position:absolute;
-  top:calc(var(--iui-size-2xs) * 1.5);
-  left:calc(var(--iui-size-2xs) * 1.5);
-  border-radius:50%;
-  border:1px solid var(--iui-color-foreground-accessory);
-  background-color:var(--iui-color-background-primary);
-}
+.iui-location-marker-default{vertical-align:baseline;-webkit-user-select:none;user-select:none;width:calc(1.5*var(--iui-size-m));height:calc(1.5*var(--iui-size-m));cursor:pointer;border:none;flex-shrink:0;margin:0;padding:0;display:flex;position:relative}.iui-location-marker-default>.iui-location-marker-default-pin{filter:drop-shadow(var(--iui-shadow-1))}.iui-location-marker-default>.iui-location-marker-default-pin>.iui-location-marker-default-pin-dot{fill:var(--iui-color-white)}.iui-location-marker-data-rich{vertical-align:baseline;-webkit-user-select:none;user-select:none;cursor:pointer;border:none;margin:0;padding:0;display:inline-block;position:relative}.iui-location-marker-data-rich>.iui-location-marker-data-rich-body{min-width:var(--iui-size-xl);border-radius:var(--iui-border-radius-1);text-align:center;font-size:var(--iui-font-size-2);padding:calc(var(--iui-size-s)*.25)var(--iui-size-xs);filter:drop-shadow(var(--iui-shadow-1));border:solid 1px var(--iui-color-white);background-color:var(--iui-color-white);color:var(--iui-color-white);position:relative}.iui-location-marker-data-rich>.iui-location-marker-data-rich-body:before{content:"";width:0;height:0;border-width:var(--iui-size-2xs);border-style:solid;border-color:var(--iui-color-white)transparent transparent transparent;margin:auto;display:block;position:absolute;bottom:-9px;left:0;right:0}.iui-location-marker-data-rich>.iui-location-marker-data-rich-body>.iui-location-marker-data-rich-icon{width:var(--iui-size-m);height:var(--iui-size-m);font-size:inherit;vertical-align:-2px;flex-shrink:0;display:inline-block}.iui-location-marker-data-rich>.iui-location-marker-data-rich-body>.iui-location-marker-data-rich-icon.iui-location-marker-data-rich-icon-monochrome{fill:var(--iui-color-white)}.iui-location-marker-me{vertical-align:baseline;-webkit-user-select:none;user-select:none;width:calc(1.5*var(--iui-size-m));height:calc(1.5*var(--iui-size-m));cursor:default;border:none;border-radius:50%;flex-shrink:0;margin:0;padding:0;display:flex;position:relative}.iui-location-marker-me:before{content:"";z-index:-1;opacity:var(--iui-opacity-5);background-color:var(--iui-color-icon-accent);border-radius:inherit;position:absolute;top:0;bottom:0;left:0;right:0}.iui-location-marker-me>.iui-location-marker-me-dot{width:var(--iui-size-s);height:var(--iui-size-s);top:calc(var(--iui-size-2xs)*1.5);left:calc(var(--iui-size-2xs)*1.5);border:1px solid var(--iui-color-white);background-color:var(--iui-color-icon-accent);border-radius:50%;position:absolute}

package/css/menu.css

@@ -2,174 +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-menu{
-  --iui-surface-background-color:var(--iui-color-background-1);
-  --iui-surface-border-radius:0;
-  --iui-surface-elevation:var(--iui-shadow-1);
-  background-color:var(--iui-surface-background-color);
-  border-radius:var(--iui-surface-border-radius);
-  box-shadow:var(--iui-surface-elevation);
-  color:var(--iui-color-foreground-2);
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  list-style-type:none;
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
-  width:100%;
-  margin:0;
-  padding:0;
-  max-height:var(--iui-menu-max-height);
-  border-radius:var(--iui-border-radius-1);
-}
-@media (forced-colors: active){
-  .iui-menu{
-    border:1px solid transparent;
-  }
-}
-.iui-menu .iui-header-menu-icon{
-  margin:0 var(--iui-size-2xs);
-}
-.iui-menu div.iui-header-menu-icon{
-  display:flex;
-  flex-shrink:0;
-  width:calc(1.5 * var(--iui-size-m));
-  height:calc(1.5 * var(--iui-size-m));
-  margin:0;
-  border-radius:var(--iui-border-radius-1);
-}
-.iui-menu.iui-scroll{
-  overflow-y:auto;
-  overflow-y:overlay;
-  --iui-menu-max-height:calc((var(--iui-component-height) - 1px) * 8.5);
-}
-
-.iui-menu-item{
-  display:flex;
-  align-items:center;
-  font-size:var(--iui-font-size-1);
-  padding-block:var(--iui-size-2xs);
-  padding-inline:calc(var(--iui-size-s) + 1px);
-  min-height:var(--iui-component-height);
-  cursor:pointer;
-  line-height:normal;
-  color:var(--iui-color-foreground-2);
-  border-radius:var(--iui-border-radius-1);
-}
-.iui-menu-item + .iui-menu-item{
-  margin-top:-1px;
-}
-.iui-menu-item .iui-content,
-.iui-menu-item .iui-menu-label,
-.iui-menu-item .iui-menu-description{
-  white-space:nowrap;
-  overflow:hidden;
-  text-overflow:ellipsis;
-}
-.iui-menu-item .iui-content{
-  flex:1 1 auto;
-}
-.iui-menu-item .iui-content + .iui-icon{
-  margin-right:0;
-  margin-left:var(--iui-size-xs);
-}
-.iui-menu-item .iui-menu-description{
-  display:none;
-  font-size:var(--iui-font-size-0);
-  opacity:var(--iui-opacity-3);
-}
-.iui-menu-item > .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);
-}
-.iui-menu-item > .iui-icon + .iui-content{
-  margin-left:var(--iui-size-xs);
-}
-.iui-menu-item:hover{
-  background-color:var(--iui-color-background-transparent-hover);
-}
-.iui-menu-item:focus, .iui-menu-item.iui-focused{
-  outline:thin solid var(--iui-color-foreground-primary);
-  outline-offset:-1px;
-}
-.iui-menu-item:focus:not(:focus-visible){
-  outline:none;
-}
-.iui-menu-item.iui-large{
-  min-height:var(--iui-component-height-large);
-}
-.iui-menu-item.iui-large .iui-menu-description{
-  display:block;
-}
-.iui-menu-item.iui-active, .iui-menu-item.iui-active:hover{
-  background-color:var(--iui-color-background-subtle-primary);
-  color:var(--iui-color-foreground-primary);
-  outline:thin solid var(--iui-color-foreground-primary);
-  outline-offset:-1px;
-}
-.iui-menu-item.iui-active .iui-menu-description{
-  opacity:1;
-}
-.iui-menu-item.iui-active > .iui-icon{
-  fill:var(--iui-color-foreground-primary);
-}
-.iui-menu-item.iui-active:focus, .iui-menu-item.iui-active.iui-focused{
-  outline-width:var(--iui-size-3xs);
-  outline-offset:-2px;
-}
-.iui-menu-item.iui-active:focus:not(:focus-visible){
-  outline:thin solid var(--iui-color-foreground-primary);
-  outline-offset:-1px;
-}
-.iui-menu-item.iui-disabled, .iui-menu-item.iui-disabled:hover{
-  cursor:not-allowed;
-  outline:none;
-  background-color:var(--iui-color-background-1);
-  color:var(--iui-color-foreground-5);
-}
-.iui-menu-item.iui-disabled > .iui-icon, .iui-menu-item.iui-disabled:hover > .iui-icon{
-  fill:var(--iui-color-foreground-5);
-}
-.iui-menu-item-skeleton{
-  --iui-menu-item-content-skeleton-max-width:30%;
-  cursor:auto;
-}
-.iui-menu-item-skeleton .iui-content{
-  max-width:var(--iui-menu-item-content-skeleton-max-width);
-}
-.iui-menu-item-skeleton .iui-menu-label{
-  width:100%;
-  height:var(--iui-font-size-1);
-  vertical-align:middle;
-}
-.iui-menu-item-skeleton .iui-menu-description{
-  width:70%;
-  height:var(--iui-font-size-0);
-  vertical-align:middle;
-  margin-top:var(--iui-size-2xs);
-}
-.iui-menu-item-skeleton:hover{
-  background-color:unset;
-}
-
-.iui-menu-content{
-  padding-block:var(--iui-size-xs);
-  padding-inline:calc(var(--iui-size-m) + 1px);
-  min-height:var(--iui-component-height);
-  display:grid;
-  align-items:center;
-}
-
-.iui-menu-divider{
-  height:1px;
-  width:calc(100% - var(--iui-size-l));
-  margin:1px auto;
-  background-color:var(--iui-color-background-border);
-}
+.iui-menu{vertical-align:baseline;--iui-surface-background-color:var(--iui-color-background);--iui-surface-border-color:var(--iui-color-border-subtle);--iui-surface-border-radius:var(--iui-border-radius-1);--iui-surface-elevation:var(--iui-shadow-1);background-color:var(--iui-surface-background-color);border:none;border:1px solid var(--iui-surface-border-color);border-radius:var(--iui-surface-border-radius);box-shadow:var(--iui-surface-elevation);color:var(--iui-color-text);-webkit-user-select:none;user-select:none;width:100%;max-height:var(--iui-menu-max-height);border-radius:var(--iui-border-radius-1);margin:0;padding:0;list-style-type:none}.iui-menu .iui-header-menu-icon{margin:0 var(--iui-size-2xs)}.iui-menu div.iui-header-menu-icon{width:calc(1.5*var(--iui-size-m));height:calc(1.5*var(--iui-size-m));border-radius:var(--iui-border-radius-1);box-shadow:inset 0 0 0 2px hsl(var(--iui-color-foreground-hsl)/var(--iui-opacity-6));flex-shrink:0;margin:0;display:flex}.iui-menu.iui-scroll{overflow-y:auto;overflow-y:overlay;--iui-menu-max-height:calc((var(--iui-component-height) - 1px)*8.5)}.iui-menu-item{font-size:var(--iui-font-size-1);padding-block:var(--iui-size-2xs);padding-inline:var(--iui-size-s);min-height:var(--iui-component-height);cursor:pointer;color:var(--iui-color-text);border-radius:var(--iui-border-radius-1);align-items:center;line-height:normal;display:flex}.iui-menu-item+.iui-menu-item{margin-top:-1px}.iui-menu-item .iui-content,.iui-menu-item .iui-menu-label,.iui-menu-item .iui-menu-description{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.iui-menu-item .iui-content{flex:auto}.iui-menu-item .iui-content+.iui-icon{margin-right:0;margin-left:var(--iui-size-xs)}.iui-menu-item .iui-menu-description{font-size:var(--iui-font-size-0);color:var(--iui-color-text-muted);display:none}.iui-menu-item>.iui-icon{width:var(--iui-size-m);height:var(--iui-size-m);fill:var(--iui-color-icon);flex:none;display:flex}.iui-menu-item>.iui-icon+.iui-content{margin-left:var(--iui-size-xs)}.iui-menu-item:hover{background-color:var(--iui-color-background-hover)}.iui-menu-item:focus,.iui-menu-item.iui-focused{outline:thin solid var(--iui-color-border-accent);outline-offset:-1px}.iui-menu-item:focus:not(:focus-visible){outline:none}.iui-menu-item.iui-large{min-height:var(--iui-component-height-large)}.iui-menu-item.iui-large .iui-menu-description{display:block}.iui-menu-item.iui-active,.iui-menu-item.iui-active:hover{background-color:var(--iui-color-background-accent-muted);color:var(--iui-color-text-accent);outline:thin solid var(--iui-color-border-accent);outline-offset:-1px}.iui-menu-item.iui-active .iui-menu-description{color:inherit}.iui-menu-item.iui-active>.iui-icon{fill:currentColor}.iui-menu-item.iui-active:focus,.iui-menu-item.iui-active.iui-focused{outline-width:var(--iui-size-3xs);outline-offset:-2px}.iui-menu-item.iui-active:focus:not(:focus-visible){outline:thin solid var(--iui-color-border-accent);outline-offset:-1px}.iui-menu-item.iui-disabled,.iui-menu-item.iui-disabled:hover{cursor:not-allowed;background-color:var(--iui-color-background);color:var(--iui-color-text-disabled);outline:none}.iui-menu-item.iui-disabled>.iui-icon,.iui-menu-item.iui-disabled:hover>.iui-icon{fill:var(--iui-color-icon-disabled)}.iui-menu-item-skeleton{--iui-menu-item-content-skeleton-max-width:30%;cursor:auto}.iui-menu-item-skeleton .iui-content{max-width:var(--iui-menu-item-content-skeleton-max-width)}.iui-menu-item-skeleton .iui-menu-label{width:100%;height:var(--iui-font-size-1);vertical-align:middle}.iui-menu-item-skeleton .iui-menu-description{width:70%;height:var(--iui-font-size-0);vertical-align:middle;margin-top:var(--iui-size-2xs)}.iui-menu-item-skeleton:hover{background-color:unset}.iui-menu-content{padding-block:var(--iui-size-xs);padding-inline:var(--iui-size-m);min-height:var(--iui-component-height);align-items:center;display:grid}.iui-menu-divider{height:1px;width:calc(100% - var(--iui-size-l));background-color:var(--iui-color-border);margin:1px auto}

package/css/non-ideal-state.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-non-ideal-state{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  display:flex;
-  flex-direction:column;
-  align-items:center;
-  justify-content:center;
-  text-align:center;
-  position:absolute;
-  left:50%;
-  top:40%;
-  min-width:220px;
-  transform:translate(-50%, -40%);
-}
-.iui-non-ideal-state > .iui-non-ideal-state-illustration{
-  max-width:220px;
-  max-height:242px;
-  margin-bottom:var(--iui-size-l);
-  text-align:center;
-  display:flex;
-  justify-content:center;
-  align-items:center;
-}
-.iui-non-ideal-state > .iui-non-ideal-state-title{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  font-size:var(--iui-font-size-5);
-  font-weight:var(--iui-font-weight-light);
-  line-height:calc(2 * var(--iui-size-l));
-  padding:0;
-  margin:0 0 var(--iui-size-l);
-}
-.iui-non-ideal-state > .iui-non-ideal-state-description{
-  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);
-  padding:0;
-  margin:0 0 var(--iui-size-l);
-}
-.iui-non-ideal-state > .iui-non-ideal-state-actions{
-  display:flex;
-  align-items:center;
-  margin-bottom:var(--iui-size-xs);
-}
-.iui-non-ideal-state > .iui-non-ideal-state-actions > .iui-input-container{
-  display:inline-block;
-  width:200px;
-  text-align:left;
-  margin:0 var(--iui-size-2xs) 0 0;
-}
-.iui-non-ideal-state > .iui-non-ideal-state-actions > .iui-button{
-  margin:0 var(--iui-size-2xs);
-}
+.iui-non-ideal-state{text-align:center;min-width:220px;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;top:40%;left:50%;transform:translate(-50%,-40%)}.iui-non-ideal-state-illustration{width:calc(var(--iui-size-3xl)*3);height:calc(var(--iui-size-3xl)*2);justify-content:center;align-items:center;display:flex}.iui-non-ideal-state-title{vertical-align:baseline;font-size:var(--iui-font-size-5);font-weight:var(--iui-font-weight-light);line-height:calc(2*var(--iui-size-l));margin:0;margin:0 0 var(--iui-size-l);border:none;padding:0}.iui-non-ideal-state-description{vertical-align:baseline;font-size:var(--iui-font-size-1);font-weight:var(--iui-font-weight-normal);line-height:var(--iui-size-l);margin:0;margin:0 0 var(--iui-size-l);border:none;padding:0}.iui-non-ideal-state-actions{margin-bottom:var(--iui-size-xs);align-items:center;display:flex}.iui-non-ideal-state-actions>.iui-input-container{width:200px;text-align:left;margin:0 var(--iui-size-2xs)0 0;display:inline-block}.iui-non-ideal-state-actions>.iui-button{margin:0 var(--iui-size-2xs)}