@itwin/itwinui-css 2.0.2 → 2.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,4 +2,4 @@
2
2
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
- .iui-progress-indicator-radial{--_iui-progress-indicator-radial-size:var(--iui-size-xl);vertical-align:middle;inline-size:var(--_iui-progress-indicator-radial-size);block-size:var(--_iui-progress-indicator-radial-size);border-radius:var(--iui-border-radius-round);font-size:var(--iui-font-size-0);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative}.iui-progress-indicator-radial:before,.iui-progress-indicator-radial:after{content:"";border:var(--iui-size-2xs)solid transparent;forced-color-adjust:none;border-radius:50%;position:absolute;inset:0}.iui-progress-indicator-radial:before{border-color:var(--iui-color-border)}.iui-progress-indicator-radial:after{background-color:var(--iui-color-border-accent);-webkit-mask-clip:border-box,content-box;mask-clip:border-box,content-box;-webkit-mask-composite:source-out;mask-composite:subtract}@media (forced-colors:active){.iui-progress-indicator-radial:before,.iui-progress-indicator-radial:after{border-color:#0000}}.iui-progress-indicator-radial :is(svg,img){inline-size:var(--iui-size-m);block-size:var(--iui-size-m);fill:var(--iui-color-icon);flex-shrink:0;display:flex}.iui-progress-indicator-radial[data-iui-status=positive]{color:var(--iui-color-text-positive)}.iui-progress-indicator-radial[data-iui-status=positive]:after{background-color:var(--iui-color-border-positive)}.iui-progress-indicator-radial[data-iui-status=positive] :is(svg,img){fill:var(--iui-color-border-positive)}.iui-progress-indicator-radial[data-iui-status=negative]{color:var(--iui-color-text-negative)}.iui-progress-indicator-radial[data-iui-status=negative]:after{background-color:var(--iui-color-border-negative)}.iui-progress-indicator-radial[data-iui-status=negative] :is(svg,img){fill:var(--iui-color-border-negative)}.iui-progress-indicator-radial[data-iui-size=x-small]{--_iui-progress-indicator-radial-size:var(--iui-size-m)}.iui-progress-indicator-radial[data-iui-size=x-small]:before,.iui-progress-indicator-radial[data-iui-size=x-small]:after{border-width:var(--iui-size-3xs)}.iui-progress-indicator-radial[data-iui-size=x-small]>*{display:none}.iui-progress-indicator-radial[data-iui-size=small]{--_iui-progress-indicator-radial-size:calc(1.5*var(--iui-size-m))}.iui-progress-indicator-radial[data-iui-size=small]:before,.iui-progress-indicator-radial[data-iui-size=small]:after{border-width:calc(var(--iui-size-3xs)*1.5)}.iui-progress-indicator-radial[data-iui-size=large]{--_iui-progress-indicator-radial-size:calc(3*var(--iui-size-m));font-size:var(--iui-font-size-2)}.iui-progress-indicator-radial[data-iui-size=large]:before,.iui-progress-indicator-radial[data-iui-size=large]:after{border-width:calc(var(--iui-size-2xs)*1.5)}.iui-progress-indicator-radial[data-iui-size=large] :is(svg,img){inline-size:calc(1.5*var(--iui-size-m));block-size:calc(1.5*var(--iui-size-m));flex-shrink:0;display:flex}.iui-progress-indicator-radial:where(:not([data-iui-indeterminate=true])):after{-webkit-mask-image:conic-gradient(#000 var(--iui-progress-percentage,100%),#0000 var(--iui-progress-percentage,100%)),linear-gradient(#000 0 0);mask-image:conic-gradient(#000 var(--iui-progress-percentage,100%),#0000 var(--iui-progress-percentage,100%)),linear-gradient(#000 0 0)}.iui-progress-indicator-radial:where([data-iui-indeterminate=true]):after{animation:.8s cubic-bezier(.6,.4,.4,.6) infinite iui-uevywyj;-webkit-mask-image:conic-gradient(#0000,#000),linear-gradient(#000 0 0);mask-image:conic-gradient(#0000,#000),linear-gradient(#000 0 0)}@keyframes iui-uevywyj{to{transform:rotate(360deg)}}.iui-progress-indicator-linear-label{font-size:var(--iui-font-size-0);color:var(--_iui-progress-indicator-linear-label-color);--iui-svg-fill:var(--_iui-progress-indicator-linear-label-fill);justify-content:space-between;align-items:center;display:flex}.iui-progress-indicator-linear-label>:only-child{margin-inline:auto}.iui-progress-indicator-linear{gap:var(--iui-size-2xs);display:grid}.iui-progress-indicator-linear:before{content:"";block-size:var(--iui-size-2xs);background-color:var(--iui-color-border);background-image:linear-gradient(90deg,var(--_iui-progress-indicator-track-fill,var(--iui-color-border-accent))0% 100%);background-repeat:no-repeat;background-size:var(--iui-progress-percentage,100%)100%;forced-color-adjust:none}@media (forced-colors:active){.iui-progress-indicator-linear:before{background-color:#0000;background-image:linear-gradient(90deg,CanvasText 0% 100%);border:.5px solid}}.iui-progress-indicator-linear[data-iui-status=positive]{--_iui-progress-indicator-track-fill:var(--iui-color-border-positive);--_iui-progress-indicator-linear-label-color:var(--iui-color-text-positive);--_iui-progress-indicator-linear-label-fill:var(--iui-color-icon-positive)}.iui-progress-indicator-linear[data-iui-status=positive]::selection,.iui-progress-indicator-linear[data-iui-status=positive] ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}.iui-progress-indicator-linear[data-iui-status=negative]{--_iui-progress-indicator-track-fill:var(--iui-color-border-negative);--_iui-progress-indicator-linear-label-color:var(--iui-color-text-negative);--_iui-progress-indicator-linear-label-fill:var(--iui-color-icon-negative)}.iui-progress-indicator-linear[data-iui-status=negative]::selection,.iui-progress-indicator-linear[data-iui-status=negative] ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}.iui-progress-indicator-linear:where([data-iui-animated=true]:not([data-iui-indeterminate=true])):before{transition:background-size 1s ease-in-out}.iui-progress-indicator-linear:where([data-iui-indeterminate=true]):before{animation:1.5s linear infinite iui-uevywzb}@keyframes iui-uevywzb{0%{background-position:-60% 0;background-size:30% 100%}40%{background-position:-40% 0;background-size:40% 100%}to{background-position:200% 0;background-size:50% 100%}}
5
+ .iui-progress-indicator-radial{--_iui-progress-indicator-radial-size:var(--iui-size-xl);vertical-align:middle;inline-size:var(--_iui-progress-indicator-radial-size);block-size:var(--_iui-progress-indicator-radial-size);border-radius:var(--iui-border-radius-round);font-size:var(--iui-font-size-0);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative}.iui-progress-indicator-radial:before,.iui-progress-indicator-radial:after{content:"";border:var(--iui-size-2xs)solid transparent;forced-color-adjust:none;border-radius:50%;position:absolute;inset:0}.iui-progress-indicator-radial:before{border-color:var(--iui-color-border)}.iui-progress-indicator-radial:after{background-color:var(--iui-color-border-accent);-webkit-mask-clip:border-box,content-box;mask-clip:border-box,content-box;-webkit-mask-composite:source-out;mask-composite:subtract}@media (forced-colors:active){.iui-progress-indicator-radial:before,.iui-progress-indicator-radial:after{border-color:#0000}}.iui-progress-indicator-radial :is(svg,img){inline-size:var(--iui-size-m);block-size:var(--iui-size-m);fill:var(--iui-color-icon);flex-shrink:0;display:flex}.iui-progress-indicator-radial[data-iui-status=positive]{color:var(--iui-color-text-positive)}.iui-progress-indicator-radial[data-iui-status=positive]:after{background-color:var(--iui-color-border-positive)}.iui-progress-indicator-radial[data-iui-status=positive] :is(svg,img){fill:var(--iui-color-border-positive)}.iui-progress-indicator-radial[data-iui-status=negative]{color:var(--iui-color-text-negative)}.iui-progress-indicator-radial[data-iui-status=negative]:after{background-color:var(--iui-color-border-negative)}.iui-progress-indicator-radial[data-iui-status=negative] :is(svg,img){fill:var(--iui-color-border-negative)}.iui-progress-indicator-radial[data-iui-size=x-small]{--_iui-progress-indicator-radial-size:var(--iui-size-m)}.iui-progress-indicator-radial[data-iui-size=x-small]:before,.iui-progress-indicator-radial[data-iui-size=x-small]:after{border-width:var(--iui-size-3xs)}.iui-progress-indicator-radial[data-iui-size=x-small]>*{display:none}.iui-progress-indicator-radial[data-iui-size=small]{--_iui-progress-indicator-radial-size:calc(1.5*var(--iui-size-m))}.iui-progress-indicator-radial[data-iui-size=small]:before,.iui-progress-indicator-radial[data-iui-size=small]:after{border-width:calc(var(--iui-size-3xs)*1.5)}.iui-progress-indicator-radial[data-iui-size=large]{--_iui-progress-indicator-radial-size:calc(3*var(--iui-size-m));font-size:var(--iui-font-size-2)}.iui-progress-indicator-radial[data-iui-size=large]:before,.iui-progress-indicator-radial[data-iui-size=large]:after{border-width:calc(var(--iui-size-2xs)*1.5)}.iui-progress-indicator-radial[data-iui-size=large] :is(svg,img){inline-size:calc(1.5*var(--iui-size-m));block-size:calc(1.5*var(--iui-size-m));flex-shrink:0;display:flex}.iui-progress-indicator-radial:where(:not([data-iui-indeterminate=true])):after{-webkit-mask-image:conic-gradient(#000 var(--iui-progress-percentage,100%),#0000 var(--iui-progress-percentage,100%)),linear-gradient(#000 0 0);mask-image:conic-gradient(#000 var(--iui-progress-percentage,100%),#0000 var(--iui-progress-percentage,100%)),linear-gradient(#000 0 0)}.iui-progress-indicator-radial:where([data-iui-indeterminate=true]):after{animation:.8s cubic-bezier(.6,.4,.4,.6) infinite iui-uu9on85;-webkit-mask-image:conic-gradient(#0000,#000),linear-gradient(#000 0 0);mask-image:conic-gradient(#0000,#000),linear-gradient(#000 0 0)}@keyframes iui-uu9on85{to{transform:rotate(360deg)}}.iui-progress-indicator-linear-label{font-size:var(--iui-font-size-0);color:var(--_iui-progress-indicator-linear-label-color);--iui-svg-fill:var(--_iui-progress-indicator-linear-label-fill);justify-content:space-between;align-items:center;display:flex}.iui-progress-indicator-linear-label>:only-child{margin-inline:auto}.iui-progress-indicator-linear{gap:var(--iui-size-2xs);display:grid}.iui-progress-indicator-linear:before{content:"";block-size:var(--iui-size-2xs);background-color:var(--iui-color-border);background-image:linear-gradient(90deg,var(--_iui-progress-indicator-track-fill,var(--iui-color-border-accent))0% 100%);background-repeat:no-repeat;background-size:var(--iui-progress-percentage,100%)100%;forced-color-adjust:none}@media (forced-colors:active){.iui-progress-indicator-linear:before{background-color:#0000;background-image:linear-gradient(90deg,CanvasText 0% 100%);border:.5px solid}}.iui-progress-indicator-linear[data-iui-status=positive]{--_iui-progress-indicator-track-fill:var(--iui-color-border-positive);--_iui-progress-indicator-linear-label-color:var(--iui-color-text-positive);--_iui-progress-indicator-linear-label-fill:var(--iui-color-icon-positive)}.iui-progress-indicator-linear[data-iui-status=positive]::selection,.iui-progress-indicator-linear[data-iui-status=positive] ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}.iui-progress-indicator-linear[data-iui-status=negative]{--_iui-progress-indicator-track-fill:var(--iui-color-border-negative);--_iui-progress-indicator-linear-label-color:var(--iui-color-text-negative);--_iui-progress-indicator-linear-label-fill:var(--iui-color-icon-negative)}.iui-progress-indicator-linear[data-iui-status=negative]::selection,.iui-progress-indicator-linear[data-iui-status=negative] ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}.iui-progress-indicator-linear:where([data-iui-animated=true]:not([data-iui-indeterminate=true])):before{transition:background-size 1s ease-in-out}.iui-progress-indicator-linear:where([data-iui-indeterminate=true]):before{animation:1.5s linear infinite iui-uu9on8i}@keyframes iui-uu9on8i{0%{background-position:-60% 0;background-size:30% 100%}40%{background-position:-40% 0;background-size:40% 100%}to{background-position:200% 0;background-size:50% 100%}}
package/css/select.css CHANGED
@@ -2,4 +2,4 @@
2
2
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
- .iui-select-button{--_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);border-radius:var(--iui-border-radius-1);min-block-size:var(--_iui-select-min-height);padding-block:var(--_iui-select-padding-block);padding-inline:var(--iui-size-s);gap:var(--iui-size-xs);transition:border-color var(--iui-duration-1)ease-out;-webkit-user-select:none;user-select:none;color:var(--_iui-input-text-color);background-color:var(--_iui-input-background-color);border:1px solid var(--_iui-input-border-color);line-height:var(--iui-size-l);--_iui-select-padding-block:var(--iui-size-2xs);--_iui-select-min-height:var(--iui-component-height);align-items:center;inline-size:100%;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{--_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}.iui-select-button .iui-icon svg{fill:currentColor;flex:none}.iui-select-button .iui-icon svg,.iui-select-button .iui-icon svg svg{inline-size:var(--iui-size-m);block-size:var(--iui-size-m);fill:var(--_iui-list-item-icon-fill,var(--iui-color-icon));flex-shrink:0;display:flex}.iui-select-button .iui-content{white-space:nowrap;text-overflow:ellipsis;min-block-size:var(--iui-size-l);overflow:hidden}.iui-select-button.iui-placeholder{color:var(--iui-color-text-placeholder);font-weight:var(--iui-font-weight-light)}.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-block:0;inset-inline:var(--iui-size-s)calc(var(--iui-size-m) + var(--iui-size-l));align-items:center;gap:var(--iui-size-2xs);block-size:100%;display:flex;position:absolute;overflow:hidden}.iui-select-tag-container>*+*{margin-inline-start:var(--iui-size-2xs)}@supports (gap:var(--iui-size-2xs)){.iui-select-tag-container>*+*{margin-inline-start:0}}.iui-select-tag{-webkit-user-select:all;user-select:all;text-transform:lowercase;block-size:calc(var(--iui-size-s)*3);margin-block:var(--iui-size-2xs);border-radius:var(--iui-border-radius-round);padding-inline: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);max-block-size:calc(var(--iui-size-s)*3);align-items:center;block-size:80%;margin-block:0;display:inline-flex}.iui-select-tag:hover{border-color:var(--iui-color-border-foreground-hover)}.iui-select-tag:focus-within{outline:2px solid var(--iui-color-border-accent);outline-offset:-2px}.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-inline:var(--iui-size-xs)var(--iui-size-2xs);border:none;align-items:center;padding:0;display:inline-flex;overflow:hidden}.iui-select-tag-label:only-child{margin-inline:var(--iui-size-xs)}.iui-select-button[data-iui-size=small] .iui-select-tag-label{font-size:var(--iui-font-size-0)}.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-block-size:var(--_iui-button-min-height);min-inline-size: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-inline:var(--iui-size-2xs);min-block-size:unset;min-inline-size:unset;aspect-ratio:1;flex-shrink:0;block-size:100%;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],[data-iui-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-tag-button:focus{outline:none}.iui-select-button[data-iui-size=small] .iui-select-tag-button{font-size:var(--iui-font-size-0)}.iui-select-tag-button-icon{flex-shrink:0;display:inline-flex}.iui-select-tag-button-icon svg{inline-size:var(--iui-size-m);block-size: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{inline-size:var(--iui-size-s);block-size:var(--iui-size-s);flex-shrink:0;display:flex}
5
+ .iui-select-button{--_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);border-radius:var(--iui-border-radius-1);min-block-size:var(--_iui-select-min-height);padding-block:var(--_iui-select-padding-block);padding-inline:var(--iui-size-s);gap:var(--iui-size-xs);transition:border-color var(--iui-duration-1)ease-out;-webkit-user-select:none;user-select:none;color:var(--_iui-input-text-color);background-color:var(--_iui-input-background-color);border:1px solid var(--_iui-input-border-color);line-height:var(--iui-size-l);--_iui-select-padding-block:var(--iui-size-2xs);--_iui-select-min-height:var(--iui-component-height);align-items:center;inline-size:100%;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{--_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}.iui-select-button .iui-icon svg{fill:currentColor;flex:none}.iui-select-button .iui-icon svg,.iui-select-button .iui-icon svg svg{inline-size:var(--iui-size-m);block-size:var(--iui-size-m);fill:var(--_iui-list-item-icon-fill,var(--iui-color-icon));flex-shrink:0;display:flex}.iui-select-button .iui-content{white-space:nowrap;text-overflow:ellipsis;min-block-size:var(--iui-size-l);overflow:hidden}.iui-select-button.iui-placeholder{color:var(--iui-color-text-placeholder);font-weight:var(--iui-font-weight-light)}.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-block:0;inset-inline:var(--iui-size-s)calc(var(--iui-size-m) + var(--iui-size-l));align-items:center;gap:var(--iui-size-2xs);block-size:100%;display:flex;position:absolute;overflow:hidden}.iui-select-tag-container>*+*{margin-inline-start:var(--iui-size-2xs)}@supports (gap:var(--iui-size-2xs)){.iui-select-tag-container>*+*{margin-inline-start:0}}.iui-select-tag{-webkit-user-select:all;user-select:all;text-transform:lowercase;block-size:calc(var(--iui-size-s)*3);margin-block:var(--iui-size-2xs);border-radius:var(--iui-border-radius-round);padding-inline: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);max-block-size:calc(var(--iui-size-s)*3);align-items:center;block-size:80%;max-inline-size:100%;margin-block:0;display:inline-flex}.iui-select-tag:hover{border-color:var(--iui-color-border-foreground-hover)}.iui-select-tag:focus-within{outline:2px solid var(--iui-color-border-accent);outline-offset:-2px}.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-inline:var(--iui-size-xs)var(--iui-size-2xs);border:none;padding:0;overflow:hidden}.iui-select-tag-label:only-child{margin-inline:var(--iui-size-xs)}.iui-select-button[data-iui-size=small] .iui-select-tag-label{font-size:var(--iui-font-size-0)}.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-block-size:var(--_iui-button-min-height);min-inline-size: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-inline:var(--iui-size-2xs);min-block-size:unset;min-inline-size:unset;aspect-ratio:1;flex-shrink:0;block-size:100%;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],[data-iui-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-tag-button:focus{outline:none}.iui-select-button[data-iui-size=small] .iui-select-tag-button{font-size:var(--iui-font-size-0)}.iui-select-tag-button-icon{flex-shrink:0;display:inline-flex}.iui-select-tag-button-icon svg{inline-size:var(--iui-size-m);block-size: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{inline-size:var(--iui-size-s);block-size:var(--iui-size-s);flex-shrink:0;display:flex}
package/css/tree.css CHANGED
@@ -2,4 +2,4 @@
2
2
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
- .iui-tree{vertical-align:baseline;border-radius:var(--iui-border-radius-1);background-color:var(--iui-color-background);border:none;margin:0;padding:0;list-style:none}.iui-sub-tree{vertical-align:baseline;border:none;margin:0;padding:0;list-style:none}.iui-tree-item:focus-visible{outline:none}.iui-tree-item:focus-visible>.iui-tree-node{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}.iui-tree-item:focus-visible>.iui-tree-node.iui-active{outline:2px solid var(--iui-color-border-accent);outline-offset:-2px}@supports not selector(*:focus-visible){.iui-tree-item:focus{outline:none}.iui-tree-item:focus>.iui-tree-node{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}.iui-tree-item:focus>.iui-tree-node.iui-active{outline:2px solid var(--iui-color-border-accent);outline-offset:-2px}}.iui-tree-node{cursor:pointer;padding-inline:var(--iui-size-xs);border-radius:var(--iui-border-radius-1);align-items:center;display:flex}.iui-tree-node-checkbox{margin-inline-end:var(--iui-size-xs)}.iui-tree-node-content{min-block-size:calc(var(--iui-size-s)*3);align-items:center;margin-inline-start:calc(calc(var(--iui-component-height-small) + 2px)*(var(--level,0)));padding-inline-start:var(--iui-size-3xs);display:flex;overflow:hidden}.iui-tree-node-content-icon{margin-inline:calc(var(--iui-size-2xs) + 1px)}.iui-tree-node-content-icon,.iui-tree-node-content-icon svg{inline-size:var(--iui-size-m);block-size:var(--iui-size-m);flex-shrink:0;display:flex}.iui-tree-node-content-icon svg{fill:var(--iui-color-icon-muted)}@media (forced-colors:active){.iui-tree-node-content-icon svg{fill:CanvasText}}.iui-tree-node-content-icon:first-child{margin-inline-start:calc(var(--iui-component-height-small) + 2px + var(--iui-size-2xs) + 1px)}@media (prefers-reduced-motion:no-preference){.iui-tree-node-content-expander-icon{transition:transform var(--iui-duration-1)ease-out}}.iui-tree-node-content-expander-icon-expanded{transform:rotate(90deg)}.iui-tree-node-content-label{min-inline-size:0;padding-inline-start:calc(var(--iui-size-2xs) + 1px)}.iui-tree-node-content-label:first-child{margin-inline-start:calc(var(--iui-component-height-small) + 2px)}.iui-tree-node-content-title,.iui-tree-node-content-caption{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.iui-tree-node-content-title{font-size:var(--iui-font-size-1)}.iui-tree-node-content-caption{font-size:var(--iui-font-size-0);color:var(--iui-color-text-muted)}.iui-tree-node:hover{background-color:var(--iui-color-background-hover);color:var(--iui-color-text-hover)}.iui-tree-node:hover .iui-tree-node-content-caption{color:var(--iui-color-text-hover);transition:color var(--iui-duration-1)ease}.iui-tree-node.iui-active{background-color:var(--iui-color-background-accent-muted);outline:thin solid var(--iui-color-border-accent);outline-offset:-1px}.iui-tree-node.iui-disabled{cursor:not-allowed;background-color:#0000;outline:none}.iui-tree-node.iui-disabled,.iui-tree-node.iui-disabled .iui-tree-node-content-caption{color:var(--iui-color-text-disabled)}
5
+ .iui-tree{vertical-align:baseline;border-radius:var(--iui-border-radius-1);background-color:var(--iui-color-background);border:none;margin:0;padding:0;list-style:none}.iui-sub-tree{vertical-align:baseline;border:none;margin:0;padding:0;list-style:none}.iui-tree-item:focus-visible{outline:none}.iui-tree-item:focus-visible>.iui-tree-node{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}.iui-tree-item:focus-visible>.iui-tree-node.iui-active{outline:2px solid var(--iui-color-border-accent);outline-offset:-2px}@supports not selector(*:focus-visible){.iui-tree-item:focus{outline:none}.iui-tree-item:focus>.iui-tree-node{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}.iui-tree-item:focus>.iui-tree-node.iui-active{outline:2px solid var(--iui-color-border-accent);outline-offset:-2px}}.iui-tree-node{cursor:pointer;padding-inline:var(--iui-size-xs);border-radius:var(--iui-border-radius-1);align-items:center;display:flex}.iui-tree-node-checkbox{margin-inline-end:var(--iui-size-xs)}.iui-tree-node-content{min-block-size:calc(var(--iui-size-s)*3);align-items:center;inline-size:100%;margin-inline-start:calc(calc(var(--iui-component-height-small) + 2px)*(var(--level,0)));padding-inline-start:var(--iui-size-3xs);display:flex;overflow:hidden}.iui-tree-node-content-icon{margin-inline:calc(var(--iui-size-2xs) + 1px)}.iui-tree-node-content-icon,.iui-tree-node-content-icon svg{inline-size:var(--iui-size-m);block-size:var(--iui-size-m);flex-shrink:0;display:flex}.iui-tree-node-content-icon svg{fill:var(--iui-color-icon-muted)}@media (forced-colors:active){.iui-tree-node-content-icon svg{fill:CanvasText}}.iui-tree-node-content-icon:first-child{margin-inline-start:calc(var(--iui-component-height-small) + 2px + var(--iui-size-2xs) + 1px)}@media (prefers-reduced-motion:no-preference){.iui-tree-node-content-expander-icon{transition:transform var(--iui-duration-1)ease-out}}.iui-tree-node-content-expander-icon-expanded{transform:rotate(90deg)}.iui-tree-node-content-label{flex:1;min-inline-size:0;padding-inline-start:calc(var(--iui-size-2xs) + 1px)}.iui-tree-node-content-label:first-child{margin-inline-start:calc(var(--iui-component-height-small) + 2px)}.iui-tree-node-content-title,.iui-tree-node-content-caption{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.iui-tree-node-content-title{font-size:var(--iui-font-size-1)}.iui-tree-node-content-caption{font-size:var(--iui-font-size-0);color:var(--iui-color-text-muted)}.iui-tree-node:hover{background-color:var(--iui-color-background-hover);color:var(--iui-color-text-hover)}.iui-tree-node:hover .iui-tree-node-content-caption{color:var(--iui-color-text-hover);transition:color var(--iui-duration-1)ease}.iui-tree-node.iui-active{background-color:var(--iui-color-background-accent-muted);outline:thin solid var(--iui-color-border-accent);outline-offset:-1px}.iui-tree-node.iui-disabled{cursor:not-allowed;background-color:#0000;outline:none}.iui-tree-node.iui-disabled,.iui-tree-node.iui-disabled .iui-tree-node-content-caption{color:var(--iui-color-text-disabled)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-css",
3
- "version": "2.0.2",
3
+ "version": "2.0.4",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "css/all.css",
@@ -37,39 +37,24 @@
37
37
  ],
38
38
  "dependencies": {},
39
39
  "devDependencies": {
40
- "@itwin/itwinui-icons-elements": "0.2.0",
41
- "autoprefixer": "^10.4.1",
42
- "backstopjs": "~6.2.1",
43
40
  "chokidar": "^3.5.3",
44
- "html-minifier": "^4.0.0",
45
41
  "lightningcss": "^1.21.5",
46
42
  "npm-run-all": "^4.1.5",
47
43
  "postcss": "^8.4.31",
48
- "postcss-scoper": "^1.0.11",
49
44
  "sass": "^1.63.6",
50
45
  "sass-embedded": "^1.63.6",
51
- "serve": "^14.2.1",
52
46
  "stylelint": "^15.10.1",
53
47
  "stylelint-config-sass-guidelines": "^9.0.1",
54
48
  "stylelint-csstree-validator": "^3.0.0",
55
49
  "stylelint-scss": "^5.0.1",
56
- "stylelint-use-logical": "^2.1.0",
57
- "vite": "^4.1.5"
50
+ "stylelint-use-logical": "^2.1.0"
58
51
  },
59
52
  "scripts": {
60
- "build": "yarn clean && yarn build:css && node ../../scripts/copyrightLinter.js --fix css/* && yarn build:html",
53
+ "build": "yarn clean && yarn build:css && node ../../scripts/copyrightLinter.js --fix css/*",
61
54
  "build:css": "node ./scripts/generateCss.js src css",
62
- "build:html": "vite build backstop/tests --config vite.config.ts",
63
- "build:watch:scss": "node ./scripts/watchScss.mjs",
64
- "clean": "rimraf ./css ./scss ./backstop/results/bitmaps_test",
65
- "dev": "concurrently -n scss,html -k \"yarn build:watch:scss\" \"yarn vite backstop/tests --config vite.config.ts\"",
66
- "preview": "serve backstop/minified -p 3050 -L",
67
- "lint": "stylelint \"src/**/*.scss\"",
68
- "approve": "backstop --config=./backstop/backstop.js approve",
69
- "test:only": "backstop --config=./backstop/backstop.js test --docker",
70
- "test": "npm-run-all -p -r \"preview\" \"test:only {1}\" --",
71
- "clean:images": "node scripts/removeOldTestImages.js",
72
- "print": "node scripts/print.js"
55
+ "dev": "node ./scripts/watchScss.mjs",
56
+ "clean": "rimraf ./css",
57
+ "lint": "stylelint \"src/**/*.scss\""
73
58
  },
74
59
  "prettier": "configs/prettier-scss-config.js"
75
60
  }