@itwin/appui-react 5.0.0-dev.2 → 5.0.0

package/lib/esm/appui-react/statusfields/toolassistance/ToolAssistanceField.scss

@@ -0,0 +1,167 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+$image-size: 22px;
+$image-size-wide: 30px;
+$image-size-medium: 16px;
+$image-size-medium-wide: 24px;
+
+$key-size: 20px;
+$key-size-small: 12px;
+$key-size-medium: 18px;
+$key-size-large: 36px;
+$key-size-modifier: 24px;
+
+.uifw-statusFields-toolAssistance-toolAssistanceField {
+  width: 30ch;
+  justify-content: flex-start;
+
+  .prompt {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .icon {
+    font-size: 16px;
+  }
+}
+
+.uifw-toolassistance-key {
+  color: var(--iui-color-text);
+  background-color: var(--iui-color-background);
+  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;
+  box-sizing: border-box;
+
+  border-radius: var(--iui-border-radius-1);
+  display: inline-block;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1;
+  width: $key-size;
+  height: $key-size;
+  white-space: nowrap;
+  cursor: default;
+  text-transform: uppercase;
+
+  &.uifw-toolassistance-key-small {
+    font-size: 8px;
+    width: $key-size-small;
+    height: $key-size-small;
+  }
+
+  &.uifw-toolassistance-key-medium {
+    font-size: 12px;
+    width: $key-size-medium;
+    height: $key-size-medium;
+  }
+
+  &.uifw-toolassistance-key-large {
+    font-size: 11px;
+    width: $key-size-large;
+    text-transform: none;
+  }
+}
+
+.uifw-toolassistance-key-group {
+  display: inline-block;
+  text-align: center;
+  line-height: 0.714em;
+
+  .row1 {
+    margin-left: 0;
+    margin-bottom: 0;
+  }
+
+  .row2 {
+    margin-top: 0;
+  }
+}
+
+.uifw-toolassistance-key-modifier {
+  font-size: 9px;
+  width: $key-size-modifier;
+  height: $key-size-medium;
+  text-transform: none;
+}
+
+.uifw-toolassistance-icon-medium {
+  width: $image-size-medium;
+  height: $image-size-medium;
+  display: inline-block;
+  font-size: $image-size-medium;
+  padding-left: 2px;
+}
+
+.uifw-toolassistance-icon-large {
+  font-size: $image-size;
+}
+
+.uifw-toolassistance-svg {
+  width: $image-size;
+  height: $image-size;
+}
+
+.uifw-toolassistance-svg-wide {
+  width: $image-size-wide;
+  height: $image-size;
+}
+
+.uifw-toolassistance-svg-medium {
+  width: $image-size-medium;
+  height: $image-size-medium;
+  display: inline-block;
+  padding-left: 2px;
+}
+
+.uifw-toolassistance-svg-medium-wide {
+  width: $image-size-medium-wide;
+  height: $image-size-medium;
+  display: inline-block;
+  padding-left: 1px;
+}
+
+.nz-footer-toolAssistance-instruction-image {
+  i {
+    font-size: 20px;
+  }
+}
+
+.uifw-toolAssistance-content {
+  $horizontal-padding: 10px;
+  $vertical-padding: 10px;
+
+  padding-left: $horizontal-padding;
+  padding-right: $horizontal-padding;
+  padding-top: $vertical-padding;
+  padding-bottom: $vertical-padding;
+
+  .uifw-toolAssistance-toggle-container {
+    flex: 1;
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+
+    .uifw-toolAssistance-toggle-label {
+      padding-left: 0.5em;
+    }
+  }
+}
+
+.uifw-toolAssistance-tabs {
+  margin: 0;
+  padding: 0;
+  border: none;
+  vertical-align: baseline;
+  font-size: var(--iui-font-size-2);
+  font-weight: var(--iui-font-weight-normal);
+  line-height: var(--iui-size-l);
+
+  > .uifw-tab {
+    width: 50%;
+    text-align: center;
+  }
+}

package/lib/esm/appui-react/statusfields/toolassistance/accept-point.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" enable-background="new 0 0 16 16"><path d="M7,1v6H1v2h6v6h2V9h6V7H9V1H7z"/></svg>

package/lib/esm/appui-react/statusfields/toolassistance/cursor-click.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2.5,5h3a.5.5,0,0,1,0,1h-3a.5.5,0,0,1,0-1Z"/><path d="M7.5,0A.5.5,0,0,1,8,.5v3a.5.5,0,1,1-1,0V.5A.5.5,0,0,1,7.5,0Z"/><path d="M3.17,9.85a.59.59,0,0,1,0-.8L4.91,7.18a.5.5,0,0,1,.74,0,.59.59,0,0,1,0,.8L3.91,9.85A.5.5,0,0,1,3.17,9.85Z"/><path d="M3.91,1.18,5.65,3a.59.59,0,0,1,0,.8.5.5,0,0,1-.74,0L3.17,2a.59.59,0,0,1,0-.8A.5.5,0,0,1,3.91,1.18Z"/><path d="M11.86,1.18a.59.59,0,0,1,0,.8L10.12,3.85a.5.5,0,0,1-.74,0,.59.59,0,0,1,0-.8l1.74-1.87A.5.5,0,0,1,11.86,1.18Z"/><path d="M9.5,5h3a.5.5,0,0,1,0,1h-3a.5.5,0,0,1,0-1Z"/><path d="M7.13,13.5a.24.24,0,0,0,.27,0l1.89-.81,1.23,3.1a.28.28,0,0,0,.27.18l.12,0L12,15.51a.32.32,0,0,0,.16-.4L10.92,12l1.89-.81A.3.3,0,0,0,13,11a.31.31,0,0,0-.08-.28L7.5,5.06A.28.28,0,0,0,7.19,5,.3.3,0,0,0,7,5.28v8A.32.32,0,0,0,7.13,13.5Z"/></svg>

package/lib/esm/appui-react/statusfields/toolassistance/gesture-one-finger-drag.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m7.01752 7h-6.01752v-6h8v2.00165l.01611-.00165a1.97336 1.97336 0 0 1 .98389.26984v-3.26984h-10v8h7.01752z" opacity=".55"/><path d="m15.9997 10.1597a1.04935 1.04935 0 0 0 -1.0842-1.0153 1.02677 1.02677 0 0 0 -.9063.4907v-.0339a1.06344 1.06344 0 0 0 -1.0843-1.0322 1.05115 1.05115 0 0 0 -.9066.4739v-.0169a1.06327 1.06327 0 0 0 -1.0843-1.0323 1.05061 1.05061 0 0 0 -.9064.4738l-.0129.0182v-3.4857a.9986.9986 0 1 0 -1.9972 0v6.2814a.12083.12083 0 0 1 -.1276-.0355l-1.0675-1a1.08419 1.08419 0 0 0 -1.3431-.1148.99825.99825 0 0 0 -.4477.6886.9515.9515 0 0 0 .2411.7869l2.6345 3.0328a3.9415 3.9415 0 0 0 3.0133 1.3606h1.6357a3.47206 3.47206 0 0 0 2.4278-.9672 3.17516 3.17516 0 0 0 1.016-2.3115z"/></svg>

package/lib/esm/appui-react/statusfields/toolassistance/gesture-one-finger-tap-double.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m13.9997 10.1597a1.04935 1.04935 0 0 0 -1.0842-1.0153 1.02677 1.02677 0 0 0 -.9063.4907v-.0339a1.06344 1.06344 0 0 0 -1.0843-1.0322 1.05115 1.05115 0 0 0 -.9066.4739v-.0169a1.06327 1.06327 0 0 0 -1.0843-1.0323 1.05061 1.05061 0 0 0 -.9064.4738l-.0129.0182v-3.4857a.9986.9986 0 1 0 -1.9972 0v6.2814a.12083.12083 0 0 1 -.1276-.0355l-1.0675-1a1.08419 1.08419 0 0 0 -1.3431-.1148.99825.99825 0 0 0 -.4477.6886.9515.9515 0 0 0 .2411.7869l2.6345 3.0328a3.9415 3.9415 0 0 0 3.0133 1.3606h1.6357a3.47206 3.47206 0 0 0 2.4278-.9672 3.17516 3.17516 0 0 0 1.016-2.3115z"/><path d="m1.999 5a5.00009 5.00009 0 1 1 9.25116 2.60193 2.10811 2.10811 0 0 0 -.32525-.033 2.20651 2.20651 0 0 0 -.48676.05383 2.08085 2.08085 0 0 0 -.26092-.22113 3.96116 3.96116 0 0 0 .82177-2.40163 4.00006 4.00006 0 1 0 -5.9815 3.45367v.71808a2.07426 2.07426 0 0 0 -.93427-.22088c-.03369 0-.06543.01281-.09894.0144a4.9746 4.9746 0 0 1 -1.98529-3.96527zm5-3a2.98913 2.98913 0 0 0 -1.9815 5.23669v-2.05383c-.00566-.06116-.0185-.12024-.0185-.18286a2.00222 2.00222 0 0 1 2-2l.00855.00085.00856-.00085a2.00157 2.00157 0 0 1 1.9986 2v1.99518c.06476.00244.12567.01733.18878.02539a2.98979 2.98979 0 0 0 -2.20449-5.02057z" opacity=".55"/></svg>

package/lib/esm/appui-react/statusfields/toolassistance/gesture-one-finger-tap.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m13.9997 9.1597a1.04935 1.04935 0 0 0 -1.0842-1.0153 1.02677 1.02677 0 0 0 -.9063.4907v-.0339a1.06344 1.06344 0 0 0 -1.0843-1.0322 1.05115 1.05115 0 0 0 -.9066.4739v-.0169a1.06327 1.06327 0 0 0 -1.0843-1.0323 1.05061 1.05061 0 0 0 -.9064.4738l-.0129.0182v-3.4857a.9986.9986 0 1 0 -1.9972 0v6.2814a.12083.12083 0 0 1 -.1276-.0355l-1.0675-1a1.08419 1.08419 0 0 0 -1.3431-.1148.99825.99825 0 0 0 -.4477.6886.9515.9515 0 0 0 .2411.7869l2.6345 3.0328a3.9415 3.9415 0 0 0 3.0133 1.3606h1.6357a3.47206 3.47206 0 0 0 2.4278-.9672 3.17516 3.17516 0 0 0 1.016-2.3115z"/><path d="m6.999 1a2.98913 2.98913 0 0 0 -1.9815 5.23669v-2.05383c-.00566-.06116-.0185-.12024-.0185-.18286a2.00222 2.00222 0 0 1 2-2l.00855.00085.00856-.00085a2.00157 2.00157 0 0 1 1.9986 2v1.99518c.06476.00244.12567.01733.18878.02539a2.98979 2.98979 0 0 0 -2.20449-5.02057z" opacity=".55"/></svg>

package/lib/esm/appui-react/statusfields/toolassistance/gesture-pinch.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m15.99969 9.15967a1.05056 1.05056 0 0 0 -1.08648-1.01526 1.02955 1.02955 0 0 0 -.90821.49066v-.03387a1.06472 1.06472 0 0 0 -1.0866-1.0322 1.054 1.054 0 0 0 -.90851.47394v-.01694a1.06445 1.06445 0 0 0 -1.08655-1.03229 1.05341 1.05341 0 0 0 -.90833.47376l-.01293.01819v-2.48566c0-.0238-.01191-.04376-.01355-.06714a.98049.98049 0 0 0 -.03453-.17041.97346.97346 0 0 0 -.07123-.21185c-.00824-.0163-.00769-.03443-.017-.05042v-.00006a.9334.9334 0 0 0 -.07263-.0824.97248.97248 0 0 0 -.148-.16778 1.35248 1.35248 0 0 0 -.3247-.18555.97163.97163 0 0 0 -.19581-.03949.94135.94135 0 0 0 -.12329-.0249c-.0213 0-.03906.0108-.06.01208a1.58764 1.58764 0 0 0 -.38257.10224c-.01911.00946-.04016.009-.0589.01984l-2.59809 1.5a.99985.99985 0 0 0 -.366 1.366v.00006a1 1 0 0 0 1.366.366l1.09888-.63446v3.54968a.12122.12122 0 0 1 -.12787-.03546l-1.06976-1a1.08823 1.08823 0 0 0 -1.346-.11481.99813.99813 0 0 0 -.44867.6886.95018.95018 0 0 0 .24164.78687l2.64014 3.03276a3.9533 3.9533 0 0 0 3.01965 1.3606h1.63921a3.48323 3.48323 0 0 0 2.43292-.96722 3.17187 3.17187 0 0 0 1.01808-2.31147z" fill-rule="evenodd"/><path d="m7.35352 1.35352-1.5 1.5 1.14648 1.14648h-3v-3l1.14648 1.14648 1.5-1.5a.5.5 0 0 1 .707.707zm-5.207 3.793-1.5 1.5a.5.5 0 0 0 .707.707l1.5-1.5 1.14648 1.14648v-3h-3z" opacity=".55"/></svg>

package/lib/esm/appui-react/statusfields/toolassistance/gesture-two-finger-drag.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m6.0083 7h-5.0083v-6h10v.50073l.0069-.00073a1.97423 1.97423 0 0 1 .9931.27484v-1.77484h-12v8h6.0083z" opacity=".55"/><path d="m10.0083 3.5a.9986.9986 0 1 1 1.99719 0v4.98566l.01288-.01819a1.05074 1.05074 0 0 1 .90643-.47376 1.06325 1.06325 0 0 1 1.08429 1.03229v.01691a1.0512 1.0512 0 0 1 .90662-.47394 1.06347 1.06347 0 0 1 1.08429 1.03223v.03387l-.00922 3.08623a3.17207 3.17207 0 0 1 -1.01814 2.3115 3.48333 3.48333 0 0 1 -2.43293.9672h-2.62846a3.94133 3.94133 0 0 1 -3.01325-1.3606l-2.63451-3.03283a.95139.95139 0 0 1 -.24109-.78687.998.998 0 0 1 .44769-.6886 1.08414 1.08414 0 0 1 1.34308.11481l1.06751 1a.12088.12088 0 0 0 .12762.03546v-6.28137a.99233.99233 0 0 1 1.98248-.07294v3.57294a.5.5 0 0 0 1 0z"/></svg>

package/lib/esm/appui-react/statusfields/toolassistance/gesture-two-finger-tap.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m8.0083 3.5a.9986.9986 0 1 1 1.99719 0v4.98566l.01288-.01819a1.05074 1.05074 0 0 1 .90643-.47376 1.06325 1.06325 0 0 1 1.08429 1.03229v.01691a1.0512 1.0512 0 0 1 .90662-.47394 1.06347 1.06347 0 0 1 1.08429 1.03223v.03387l-.00922 3.08623a3.17207 3.17207 0 0 1 -1.01814 2.3115 3.48333 3.48333 0 0 1 -2.43293.9672h-2.62846a3.94133 3.94133 0 0 1 -3.01325-1.3606l-2.63451-3.03283a.95139.95139 0 0 1 -.24109-.78687.998.998 0 0 1 .44769-.6886 1.08414 1.08414 0 0 1 1.34308.11481l1.06751 1a.12088.12088 0 0 0 .12762.03546v-6.28137a.99233.99233 0 0 1 1.98248-.07294v3.57294a.5.5 0 0 0 1 0z"/><path d="m4.0083 7.22827v-2.14618c-.00116-.02783-.0083-.05395-.0083-.08209a2.00226 2.00226 0 0 1 2-2l.0033.00037.0036-.00037c.00885 0 .01684.00342.02563.00354.05078.003.10065.00952.15015.01648l.08014.01105.67157.08923.28277-.50323a1.99994 1.99994 0 0 1 .361-.50361l.01764-.019a2.0018 2.0018 0 0 1 .40143-.31561l.013-.00653a1.9841 1.9841 0 0 1 .41126-.17615c.03644-.01147.07214-.02234.10931-.03168a1.97681 1.97681 0 0 1 .4541-.06237l.0151-.00212.00336.00037.00354-.00037a2.00152 2.00152 0 0 1 1.99859 2v2.21692a2.99031 2.99031 0 1 0 -4.611-3.67713 2.962 2.962 0 0 0 -.39449-.03979 2.98952 2.98952 0 0 0 -1.9917 5.22827z" opacity=".55"/></svg>

package/lib/esm/appui-react/statusfields/toolassistance/mouse-click-left-drag.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 22 16" xmlns="http://www.w3.org/2000/svg"><path d="m0 8 2.0625-2.0625v1.375h2.75v1.375h-2.75v1.375zm22 0-2.0625 2.0625v-1.375h-2.75v-1.375h2.75v-1.375z" fill-rule="evenodd" opacity=".55"/><path d="m9.5 9h-2v-1h2zm7-3.5v5a5.5 5.5 0 0 1 -11 0v-5a5.5 5.5 0 0 1 11 0zm-5-4.4494v1.0412a1.49569 1.49569 0 0 1 1 1.4082v2.5h3v-.5a4.49037 4.49037 0 0 0 -4-4.4494zm-.5 1.9494a.50057.50057 0 0 0 -.5.5v3a.5.5 0 0 0 1 0v-3a.50057.50057 0 0 0 -.5-.5zm4.5 7.5v-3.5h-3.0918a1.49151 1.49151 0 0 1 -2.8164 0h-3.0918v3.5a4.5 4.5 0 0 0 9 0z"/></svg>

package/lib/esm/appui-react/statusfields/toolassistance/mouse-click-left.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m6 9h-2v-1h2zm7-3.5v5a5.5 5.5 0 0 1 -11 0v-5a5.5 5.5 0 0 1 11 0zm-5-4.4494v1.0412a1.49569 1.49569 0 0 1 1 1.4082v2.5h3v-.5a4.49037 4.49037 0 0 0 -4-4.4494zm-.5 1.9494a.50057.50057 0 0 0 -.5.5v3a.5.5 0 0 0 1 0v-3a.50057.50057 0 0 0 -.5-.5zm4.5 7.5v-3.5h-3.0918a1.49151 1.49151 0 0 1 -2.8164 0h-3.0918v3.5a4.5 4.5 0 0 0 9 0z"/></svg>

package/lib/esm/appui-react/statusfields/toolassistance/mouse-click-right-drag.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 22 16" xmlns="http://www.w3.org/2000/svg"><path d="m0 8 2.0625-2.0625v1.375h2.75v1.375h-2.75v1.375zm22 0-2.0625 2.0625v-1.375h-2.75v-1.375h2.75v-1.375z" fill-rule="evenodd" opacity=".55"/><path d="m12.5 9h2v-1h-2zm-7-3.5v5a5.5 5.5 0 0 0 11 0v-5a5.5 5.5 0 0 0 -11 0zm5-4.4494v1.0412a1.49569 1.49569 0 0 0 -1 1.4082v2.5h-3v-.5a4.49037 4.49037 0 0 1 4-4.4494zm.5 1.9494a.50057.50057 0 0 1 .5.5v3a.5.5 0 0 1 -1 0v-3a.50057.50057 0 0 1 .5-.5zm-4.5 7.5v-3.5h3.0918a1.49151 1.49151 0 0 0 2.8164 0h3.0918v3.5a4.5 4.5 0 0 1 -9 0z"/></svg>

package/lib/esm/appui-react/statusfields/toolassistance/mouse-click-right.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m9 9h2v-1h-2zm-7-3.5v5a5.5 5.5 0 0 0 11 0v-5a5.5 5.5 0 0 0 -11 0zm5-4.4494v1.0412a1.49569 1.49569 0 0 0 -1 1.4082v2.5h-3v-.5a4.49037 4.49037 0 0 1 4-4.4494zm.5 1.9494a.50057.50057 0 0 1 .5.5v3a.5.5 0 0 1 -1 0v-3a.50057.50057 0 0 1 .5-.5zm-4.5 7.5v-3.5h3.0918a1.49151 1.49151 0 0 0 2.8164 0h3.0918v3.5a4.5 4.5 0 0 1 -9 0z"/></svg>

package/lib/esm/appui-react/statusfields/toolassistance/mouse-click-wheel-drag.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 22 16" xmlns="http://www.w3.org/2000/svg"><path d="m0 8 2.0625-2.0625v1.375h2.75v1.375h-2.75v1.375zm22 0-2.0625 2.0625v-1.375h-2.75v-1.375h2.75v-1.375z" fill-rule="evenodd" opacity=".55"/><path d="m11 0a5.5 5.5 0 0 0 -5.5 5.5v5a5.5 5.5 0 0 0 11 0v-5a5.5 5.5 0 0 0 -5.5-5.5zm4.5 5.5v.5h-3v-2.5a1.49569 1.49569 0 0 0 -1-1.4082v-1.0412a4.49037 4.49037 0 0 1 4 4.4494zm-5-4.4494v1.0412a1.49569 1.49569 0 0 0 -1 1.4082v2.5h-3v-.5a4.49037 4.49037 0 0 1 4-4.4494zm.5 13.9494a4.50508 4.50508 0 0 1 -4.5-4.5v-3.5h3.0918a1.49151 1.49151 0 0 0 2.8164 0h3.0918v3.5a4.50508 4.50508 0 0 1 -4.5 4.5zm-1.5-5h3v-1h-3z"/></svg>

package/lib/esm/appui-react/statusfields/toolassistance/mouse-click-wheel.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m7.5 0a5.5 5.5 0 0 0 -5.5 5.5v5a5.5 5.5 0 0 0 11 0v-5a5.5 5.5 0 0 0 -5.5-5.5zm4.5 5.5v.5h-3v-2.5a1.49569 1.49569 0 0 0 -1-1.4082v-1.0412a4.49037 4.49037 0 0 1 4 4.4494zm-5-4.4494v1.0412a1.49569 1.49569 0 0 0 -1 1.4082v2.5h-3v-.5a4.49037 4.49037 0 0 1 4-4.4494zm.5 13.9494a4.50508 4.50508 0 0 1 -4.5-4.5v-3.5h3.0918a1.49151 1.49151 0 0 0 2.8164 0h3.0918v3.5a4.50508 4.50508 0 0 1 -4.5 4.5zm-1.5-5h3v-1h-3z"/></svg>

package/lib/esm/appui-react/statusfields/toolassistance/touch-cursor-pan.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m11.86364 9h-.00139a9.06327 9.06327 0 0 0 -1.56688-3.6616c-.36107-.54315-1.59904-2.3384-2.29026-2.3384s-1.92918 1.79525-2.30053 2.34762a9.041 9.041 0 0 0 -1.56638 3.65238h-.00184l.00055.02238-.00045.00773h.00065a3.932 3.932 0 0 0 3.86289 3.96989 3.93249 3.93249 0 0 0 3.86314-3.97909h.00035l-.00025-.00406zm-3.86364 2.54167a2.50073 2.50073 0 1 1 2.44019-2.5 2.47063 2.47063 0 0 1 -2.44019 2.5z" fill-rule="evenodd"/><path d="m3.16931 8.6875h-1.10681v1.375l-2.0625-2.0625 2.0625-2.0625v1.375h1.46783a5.5664 5.5664 0 0 0 -.36102 1.375zm12.83069-.6875-2.0625-2.0625v1.375h-1.45776a5.476 5.476 0 0 1 .35333 1.375h1.10443v1.375z" opacity=".55"/></svg>

package/lib/esm/appui-react/statusfields/toolassistance/touch-cursor-point.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m12.25 11.6h-.00153c-.01447-1.33768-1.31731-3.41344-1.72356-4.02776-.39718-.59747-1.75891-2.57224-2.51929-2.57224s-2.1221 1.97477-2.53062 2.58238c-.40523.60273-1.70223 2.67945-1.723 4.01762h-.002l.0006.02462-.00049.0085h.00071a4.32523 4.32523 0 0 0 4.24918 4.36688 4.32575 4.32575 0 0 0 4.24945-4.377h.00039l-.00028-.00448zm-4.25 2.79583a2.75081 2.75081 0 1 1 2.68421-2.75 2.7177 2.7177 0 0 1 -2.68421 2.75z" fill-rule="evenodd"/><path d="m6.01337 5.23242a6.4677 6.4677 0 0 1 .71655-.7005 2 2 0 1 1 2.54669-.00537 6.37772 6.37772 0 0 1 .72077.697 3.00043 3.00043 0 1 0 -3.984.00885z" opacity=".55"/><circle cx="8" cy="3" r="1"/></svg>

package/lib/esm/appui-react/theme/ThemeManager.scss

@@ -0,0 +1,9 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+.uifw-root {
+  height: 100%;
+  position: relative;
+}

package/lib/esm/appui-react/toolbar/new-toolbars/Badge.scss

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-toolbar-group-badge {
+  position: absolute;
+  left: -1px;
+  top: -1px;
+
+  svg {
+    fill: currentColor;
+  }
+}

package/lib/esm/appui-react/toolbar/new-toolbars/ExpandIndicator.scss

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/geometry" as *;
+
+.uifw-toolbar-group-expandIndicator {
+  position: absolute;
+  bottom: 3px;
+  right: 3px;
+
+  @include triangle-bottom-right(
+    $width: 5px,
+    $height: 5px,
+    $color: currentColor
+  );
+}

package/lib/esm/appui-react/toolbar/new-toolbars/Surface.scss

@@ -0,0 +1,35 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-toolbar-group-surface {
+  display: flex;
+  width: fit-content;
+  height: fit-content;
+  border-color: var(--iui-color-border-foreground);
+  transition: border-color var(--iui-duration-1) ease;
+  // TODO: needed due to opacity on toolbar container (since pointer events are disabled for center content).
+  pointer-events: all;
+  // TODO: fixes an issues on Safari where borders and backgrounds are overlapped by the viewport.
+  position: relative;
+
+  @supports (backdrop-filter: blur(5px)) {
+    background-color: hsl(
+      var(--iui-color-background-hsl) / var(--iui-opacity-2)
+    );
+    backdrop-filter: blur(5px);
+  }
+
+  &.uifw-vertical {
+    flex-direction: column;
+  }
+
+  &:hover,
+  &:focus-within {
+    border-color: var(--iui-color-border-foreground-hover);
+  }
+
+  &:empty {
+    display: none;
+  }
+}

package/lib/esm/appui-react/toolbar/new-toolbars/ToolGroup.scss

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-toolbar-group-toolGroup_container {
+  flex: 1 1 100%;
+  min-width: 0;
+
+  &.uifw-vertical {
+    height: 100%;
+  }
+
+  &.uifw-end {
+    display: flex;
+    justify-content: flex-end;
+  }
+}

package/lib/esm/appui-react/uiprovider/DefaultDialogGridContainer.scss

@@ -0,0 +1,103 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+.uifw-default-center-across-width {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-content: center;
+  grid-column: 1 / span 2;
+}
+
+.uifw-default-inline-editor-group {
+  display: flex;
+  gap: var(--iui-size-xs);
+
+  .uifw-default-label {
+    margin-right: var(--iui-size-xs);
+  }
+}
+
+.uifw-default-lock-and-label {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.uifw-default-property-lock {
+  margin-right: var(--iui-size-s);
+}
+
+.uifw-default-inline-label-and-editor {
+  display: flex;
+  align-items: center;
+}
+
+.uifw-default-label {
+  white-space: nowrap;
+}
+
+.uifw-dockedBar .uifw-default-label {
+  margin-right: var(--iui-size-xs);
+}
+
+.uifw-default-narrow-only-display {
+  display: none;
+}
+
+.uifw-default-container {
+  min-width: 200px;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-row-gap: 0px;
+  row-gap: 0px;
+  grid-column-gap: 8px;
+  column-gap: 8px;
+  font-family: var(--iui-font-sans);
+  font-size: 14px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  align-items: center;
+  margin: var(--iui-size-2xs);
+}
+
+.uifw-default-container.uifw-tool-settings-grid-container {
+  row-gap: var(--iui-size-xs);
+}
+
+.uifw-default-container.uifw-default-narrow {
+  grid-template-columns: 1fr;
+  row-gap: var(--iui-size-2xs);
+
+  .uifw-default-label {
+    margin-left: var(--iui-size-2xs);
+  }
+
+  .uifw-default-lock-and-label {
+    justify-content: flex-start;
+  }
+
+  .uifw-default-inline-label-and-editor {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .uifw-default-narrow-only-display {
+    display: block;
+  }
+
+  .uifw-default-wide-only-display {
+    display: none;
+  }
+
+  .uifw-default-center-across-width {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-content: center;
+    grid-column: 1 / span 1;
+  }
+}

package/lib/esm/appui-react/widget-panels/DockedBar.scss

@@ -0,0 +1,18 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+.uifw-dockedBar {
+  position: relative;
+  background-color: var(--iui-color-background);
+  height: var(--iui-component-height);
+
+  &[data-placement="top"] {
+    border-block-end: 1px solid var(--iui-color-border);
+  }
+
+  &[data-placement="bottom"] {
+    border-block-start: 1px solid var(--iui-color-border);
+  }
+}

package/lib/esm/appui-react/widget-panels/Frontstage.scss

@@ -0,0 +1,19 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-widgetPanels-frontstage {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  > .uifw-widgetPanels {
+    flex: 1 1 auto;
+    min-height: 0;
+
+    > .nz-widgetPanels-content {
+      position: relative;
+      pointer-events: none;
+    }
+  }
+}

package/lib/esm/appui-react/widget-panels/ToolSettings.scss

@@ -0,0 +1,12 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+.uifw-toolSettings-label-empty {
+  padding-right: var(--iui-size-s);
+}
+
+.uifw-floating-toolSettings-container {
+  padding-top: var(--iui-size-2xs);
+}

package/lib/esm/appui-react/widget-panels/Toolbars.scss

@@ -0,0 +1,22 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-widgetPanels-toolbars {
+  display: grid;
+  height: 100%;
+  width: 100%;
+  padding: var(
+    --iui-size-s
+  ); // TODO: Change this to an AppUI global CSS variable.
+  box-sizing: border-box;
+  grid-template-columns: 1fr 1fr;
+
+  .nz-tools-widget {
+    grid-column: 1;
+
+    &.nz-widget-navigationArea {
+      grid-column: 2;
+    }
+  }
+}

package/lib/esm/appui-react/widgets/BackstageAppButton.scss

@@ -0,0 +1,46 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-widget-backstageAppButton {
+  block-size: 2.5rem;
+  aspect-ratio: 1;
+}
+
+.uifw-widget-backstageAppButton_icon {
+  font-size: 1.5rem;
+
+  svg {
+    block-size: 1.5rem;
+    inline-size: 1.5rem;
+  }
+}
+
+.uifw-widget-backstageAppButton_label {
+  pointer-events: none;
+}
+
+.uifw-widget-backstageAppButton_bars {
+  height: 100%;
+
+  position: absolute;
+  top: 0;
+  left: -1px;
+
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+
+  > .uifw-bar {
+    background-color: var(--iui-color-icon);
+    width: 4px;
+    height: 2px;
+    border-top-right-radius: var(--iui-border-radius-round);
+    border-bottom-right-radius: var(--iui-border-radius-round);
+    filter: drop-shadow(0 1px 0 var(--buic-foreground-body-reverse));
+  }
+
+  > .uifw-bar:not(:first-child) {
+    margin-top: 5px;
+  }
+}

package/lib/public/locales/en/UiFramework.json

@@ -21,6 +21,10 @@
   "general": {
     "sheet": "Sheet",
     "alert": "Alert",
+    "error": "Error",
+    "warning": "Warning",
+    "information": "Information",
+    "success": "Success",
     "settings": "Settings",
     "minimize": "Minimize",
     "overflow": "Overflow",