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

package/css/tabs.css

@@ -2,324 +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-tabs-wrapper{
-  display:flex;
-  position:relative;
-}
-.iui-tabs-wrapper.iui-horizontal{
-  flex-direction:column;
-}
-.iui-tabs-wrapper.iui-horizontal .iui-tabs{
-  display:flex;
-}
-.iui-tabs-wrapper.iui-horizontal .iui-tab::after{
-  width:100%;
-  height:0;
-}
-.iui-tabs-wrapper.iui-horizontal .iui-tab.iui-active::after{
-  height:var(--iui-size-3xs);
-}
-.iui-tabs-wrapper.iui-vertical .iui-tabs li,
-.iui-tabs-wrapper.iui-vertical .iui-tabs .iui-tab{
-  width:100%;
-  white-space:nowrap;
-}
-.iui-tabs-wrapper.iui-vertical .iui-tabs ~ .iui-tabs-content{
-  flex-grow:1;
-}
-.iui-tabs-wrapper.iui-vertical .iui-tab::after{
-  width:0;
-  height:100%;
-}
-.iui-tabs-wrapper.iui-vertical .iui-tab.iui-active::after{
-  width:var(--iui-size-3xs);
-}
-
-.iui-tabs{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  position:relative;
-  list-style:none;
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
-}
-.iui-tabs .iui-tab{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  font-family:inherit;
-  position:relative;
-  display:flex;
-  align-items:center;
-  font-size:var(--iui-font-size-1);
-  min-height:calc(var(--iui-size-m) * 2.5);
-  height:100%;
-  cursor:pointer;
-  color:var(--iui-color-foreground-2);
-  transition:background-color var(--iui-duration-1) ease-out;
-}
-.iui-tabs .iui-tab.iui-active{
-  color:var(--iui-color-foreground-primary);
-}
-.iui-tabs .iui-tab.iui-active .iui-tab-icon{
-  fill:var(--iui-color-foreground-primary);
-}
-.iui-tabs .iui-tab.iui-active .iui-tab-description{
-  opacity:var(--iui-opacity-1);
-}
-.iui-tabs .iui-tab[disabled]{
-  cursor:not-allowed;
-  color:var(--iui-color-foreground-4);
-}
-.iui-tabs .iui-tab[disabled] .iui-tab-icon{
-  fill:var(--iui-color-foreground-5);
-}
-.iui-tabs .iui-tab:focus-visible{
-  outline:1px solid var(--iui-color-foreground-primary);
-  outline-offset:-1px;
-}
-@supports not selector(*:focus-visible){
-  .iui-tabs .iui-tab:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
-    outline-offset:-1px;
-  }
-}
-.iui-tabs .iui-tab-icon{
-  display:flex;
-  flex-shrink:0;
-  width:var(--iui-size-m);
-  height:var(--iui-size-m);
-  fill:var(--iui-color-foreground-2);
-  transition:fill var(--iui-duration-1) ease-out;
-}
-.iui-tabs .iui-tab-icon + .iui-tab-label{
-  margin-left:var(--iui-size-xs);
-}
-.iui-tabs .iui-tab-description{
-  display:none;
-  font-size:var(--iui-font-size-0);
-  opacity:var(--iui-opacity-3);
-}
-.iui-tabs.iui-green .iui-tab:focus{
-  outline-color:var(--iui-color-foreground-positive);
-}
-.iui-tabs.iui-green .iui-tab.iui-active{
-  color:var(--iui-color-foreground-positive);
-}
-.iui-tabs.iui-green .iui-tab.iui-active .iui-tab-icon{
-  fill:var(--iui-color-foreground-positive);
-}
-.iui-tabs ~ .iui-tabs-content{
-  padding-top:var(--iui-size-s);
-  padding-bottom:var(--iui-size-s);
-}
-.iui-tabs.iui-default .iui-tab::after{
-  content:"";
-  position:absolute;
-  background-color:var(--iui-color-foreground-primary);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-tabs.iui-default .iui-active::after{
-    transition:width var(--iui-duration-1) ease, height var(--iui-duration-1) ease;
-  }
-}
-.iui-tabs.iui-default.iui-green .iui-tab::after{
-  background-color:var(--iui-color-foreground-positive);
-}
-.iui-tabs.iui-default .iui-tab{
-  padding:var(--iui-size-2xs) var(--iui-size-m);
-  background-color:var(--iui-color-background-2);
-  border:1px solid var(--iui-color-background-5);
-}
-.iui-tabs.iui-default .iui-tab::after{
-  top:0;
-  left:0;
-}
-.iui-tabs.iui-default .iui-tab:hover{
-  background-color:var(--iui-color-background-1);
-}
-.iui-tabs.iui-default .iui-tab.iui-active{
-  background-color:var(--iui-color-background-1);
-}
-.iui-tabs.iui-default .iui-tab[disabled]{
-  background-color:var(--iui-color-background-3);
-}
-.iui-tabs.iui-default .iui-tab:focus{
-  outline-width:2px;
-  outline-offset:-2px;
-}
-.iui-horizontal .iui-tabs.iui-default .iui-tab.iui-active{
-  border-bottom-color:transparent;
-}
-.iui-horizontal .iui-tabs.iui-default :not(:first-child) .iui-tab{
-  border-left:none;
-}
-.iui-horizontal .iui-tabs.iui-default ~ .iui-tabs-content{
-  margin-top:-1px;
-}
-.iui-horizontal .iui-tabs.iui-default :where(.iui-button){
-  height:100%;
-}
-
-.iui-vertical .iui-tabs.iui-default .iui-tab.iui-active{
-  border-right-color:transparent;
-}
-.iui-vertical .iui-tabs.iui-default :not(:first-child) .iui-tab{
-  border-top:none;
-}
-.iui-vertical .iui-tabs.iui-default ~ .iui-tabs-content{
-  margin-left:-1px;
-}
-.iui-vertical .iui-tabs.iui-default :where(.iui-button){
-  width:100%;
-}
-
-.iui-tabs.iui-default.iui-large .iui-tab{
-  min-height:calc(var(--iui-size-m) * 3.5);
-}
-.iui-tabs.iui-default.iui-large .iui-tab-description{
-  display:-webkit-box;
-}
-.iui-tabs.iui-default.iui-green .iui-tab::after{
-  background-color:var(--iui-color-foreground-positive);
-}
-.iui-tabs.iui-default ~ .iui-tabs-content{
-  padding-left:var(--iui-size-m);
-  padding-right:var(--iui-size-m);
-  background-color:var(--iui-color-background-1);
-  border:1px solid var(--iui-color-background-5);
-}
-.iui-tabs.iui-borderless .iui-tab{
-  padding-block:var(--iui-size-2xs);
-  padding-inline:calc(var(--iui-size-s) * 2);
-  background-color:transparent;
-}
-.iui-tabs.iui-borderless .iui-tab::after{
-  bottom:0;
-  right:0;
-}
-.iui-tabs.iui-borderless .iui-tab:hover{
-  background-color:var(--iui-color-background-transparent-hover);
-}
-.iui-tabs.iui-borderless .iui-tab.iui-active{
-  background-color:var(--iui-color-background-subtle-primary);
-}
-.iui-horizontal .iui-tabs.iui-borderless ~ .iui-tabs-content{
-  margin-top:calc(0px - var(--iui-size-3xs));
-  border-top:var(--iui-size-3xs) solid var(--iui-color-background-4);
-}
-
-.iui-vertical .iui-tabs.iui-borderless ~ .iui-tabs-content{
-  margin-left:calc(0px - var(--iui-size-3xs));
-  padding-left:var(--iui-size-s);
-  padding-right:var(--iui-size-s);
-  border-left:var(--iui-size-3xs) solid var(--iui-color-background-4);
-}
-
-.iui-tabs.iui-borderless.iui-green .iui-active{
-  background-color:var(--iui-color-background-subtle-positive);
-}
-.iui-tabs.iui-borderless.iui-large .iui-tab{
-  min-height:calc(var(--iui-size-m) * 3.5);
-}
-.iui-tabs.iui-borderless.iui-large .iui-tab-description{
-  display:-webkit-box;
-}
-.iui-tabs.iui-borderless .iui-tab[disabled]:hover{
-  background-color:transparent;
-}
-.iui-tabs.iui-pill{
-  justify-content:space-evenly;
-  gap:var(--iui-size-3xs);
-}
-.iui-tabs.iui-pill > li{
-  flex:1 1 0;
-}
-.iui-tabs.iui-pill.iui-green .iui-tab:hover{
-  background-color:var(--iui-color-background-transparent-hover);
-}
-.iui-tabs.iui-pill.iui-green .iui-tab.iui-active:hover{
-  background-color:var(--iui-color-background-subtle-positive);
-}
-.iui-tabs.iui-pill .iui-tab{
-  padding:var(--iui-size-2xs);
-  background-color:transparent;
-  width:100%;
-  justify-content:center;
-  border-radius:var(--iui-border-radius-1);
-}
-.iui-tabs.iui-pill .iui-tab::after{
-  bottom:0;
-  left:0;
-}
-.iui-tabs.iui-pill .iui-tab:hover{
-  background-color:var(--iui-color-background-transparent-hover);
-}
-.iui-tabs.iui-pill .iui-tab.iui-active:hover{
-  background-color:var(--iui-color-background-subtle-primary);
-}
-.iui-tabs.iui-pill .iui-tab[disabled]:hover{
-  background-color:transparent;
-}
-.iui-tabs.iui-animated::after{
-  position:absolute;
-  content:" ";
-  background-color:var(--iui-color-foreground-primary);
-}
-.iui-tabs.iui-animated.iui-green::after{
-  background-color:var(--iui-color-foreground-positive);
-}
-.iui-horizontal .iui-tabs.iui-animated::after{
-  top:calc(100% - var(--iui-size-3xs));
-  height:var(--iui-size-3xs);
-  left:var(--stripe-left);
-  width:var(--stripe-width);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-horizontal .iui-tabs.iui-animated::after{
-    transition:width var(--iui-duration-1) ease-out, left var(--iui-duration-1) ease-out;
-  }
-}
-
-.iui-vertical .iui-tabs.iui-animated::after{
-  left:calc(100% - var(--iui-size-3xs));
-  width:var(--iui-size-3xs);
-  top:var(--stripe-top);
-  height:var(--stripe-height);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-vertical .iui-tabs.iui-animated::after{
-    transition:top var(--iui-duration-1) ease-out;
-  }
-}
-
-.iui-tabs.iui-not-animated .iui-tab::after{
-  content:"";
-  position:absolute;
-  background-color:var(--iui-color-foreground-primary);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-tabs.iui-not-animated .iui-active::after{
-    transition:width var(--iui-duration-1) ease, height var(--iui-duration-1) ease;
-  }
-}
-.iui-tabs.iui-not-animated.iui-green .iui-tab::after{
-  background-color:var(--iui-color-foreground-positive);
-}
-
-.iui-tab-label{
-  text-align:left;
-  max-width:60ch;
-}
-.iui-tab-label > *{
-  overflow:hidden;
-  text-overflow:ellipsis;
-  display:-webkit-box;
-  -webkit-line-clamp:3;
-  -webkit-box-orient:vertical;
-}
+.iui-tabs-wrapper{display:flex;position:relative}.iui-tabs-wrapper.iui-horizontal{flex-direction:column}.iui-tabs-wrapper.iui-horizontal .iui-tabs{display:flex}.iui-tabs-wrapper.iui-horizontal .iui-tab:after{width:100%;height:0}.iui-tabs-wrapper.iui-horizontal .iui-tab.iui-active:after{height:var(--iui-size-3xs)}.iui-tabs-wrapper.iui-vertical .iui-tabs li,.iui-tabs-wrapper.iui-vertical .iui-tabs .iui-tab{width:100%;white-space:nowrap}.iui-tabs-wrapper.iui-vertical .iui-tabs~.iui-tabs-content{flex-grow:1}.iui-tabs-wrapper.iui-vertical .iui-tab:after{width:0;height:100%}.iui-tabs-wrapper.iui-vertical .iui-tab.iui-active:after{width:var(--iui-size-3xs)}.iui-tabs{vertical-align:baseline;-webkit-user-select:none;user-select:none;border:none;margin:0;padding:0;list-style:none;position:relative}.iui-tabs .iui-tab{vertical-align:baseline;font-family:inherit;font-size:var(--iui-font-size-1);min-height:calc(var(--iui-size-m)*2.5);height:100%;cursor:pointer;color:var(--iui-color-text);transition:background-color var(--iui-duration-1)ease-out;border:none;align-items:center;margin:0;padding:0;display:flex;position:relative}.iui-tabs .iui-tab.iui-active{color:var(--iui-color-text-accent)}.iui-tabs .iui-tab.iui-active .iui-tab-icon{fill:currentColor}.iui-tabs .iui-tab.iui-active .iui-tab-description{color:inherit}.iui-tabs .iui-tab[disabled]{cursor:not-allowed;color:var(--iui-color-text-disabled)}.iui-tabs .iui-tab[disabled] .iui-tab-description{color:inherit}.iui-tabs .iui-tab[disabled] .iui-tab-icon{fill:var(--iui-color-icon-disabled)}.iui-tabs .iui-tab:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){.iui-tabs .iui-tab:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}.iui-tabs .iui-tab-icon{width:var(--iui-size-m);height:var(--iui-size-m);fill:var(--iui-color-icon);transition:fill var(--iui-duration-1)ease-out;flex-shrink:0;display:flex}.iui-tabs .iui-tab-icon+.iui-tab-label{margin-left:var(--iui-size-xs)}.iui-tabs .iui-tab-description{font-size:var(--iui-font-size-0);color:var(--iui-color-text-muted);display:none}.iui-tabs.iui-green .iui-tab:focus{outline-color:var(--iui-color-text-positive)}.iui-tabs.iui-green .iui-tab.iui-active{color:var(--iui-color-text-positive)}.iui-tabs.iui-green .iui-tab.iui-active .iui-tab-icon{fill:currentColor}.iui-tabs~.iui-tabs-content{padding-top:var(--iui-size-s);padding-bottom:var(--iui-size-s)}.iui-tabs.iui-default .iui-tab:after{content:"";background-color:var(--iui-color-border-accent);position:absolute}@media (prefers-reduced-motion:no-preference){.iui-tabs.iui-default .iui-active:after{transition:width var(--iui-duration-1)ease,height var(--iui-duration-1)ease}}.iui-tabs.iui-default.iui-green .iui-tab:after{background-color:var(--iui-color-border-positive)}.iui-tabs.iui-default .iui-tab{padding:var(--iui-size-2xs)var(--iui-size-m);background-color:var(--iui-color-background-backdrop);border:1px solid var(--iui-color-border)}.iui-tabs.iui-default .iui-tab:after{top:0;left:0}.iui-tabs.iui-default .iui-tab:hover,.iui-tabs.iui-default .iui-tab.iui-active{background-color:var(--iui-color-background)}.iui-tabs.iui-default .iui-tab[disabled]{background-color:var(--iui-color-background-disabled)}.iui-tabs.iui-default .iui-tab:focus{outline-offset:-2px;outline-width:2px}.iui-horizontal .iui-tabs.iui-default .iui-tab.iui-active{border-bottom-color:#0000}.iui-horizontal .iui-tabs.iui-default :not(:first-child) .iui-tab{border-left:none}.iui-horizontal .iui-tabs.iui-default~.iui-tabs-content{margin-top:-1px}.iui-horizontal .iui-tabs.iui-default :where(.iui-button){height:100%}.iui-vertical .iui-tabs.iui-default .iui-tab.iui-active{border-right-color:#0000}.iui-vertical .iui-tabs.iui-default :not(:first-child) .iui-tab{border-top:none}.iui-vertical .iui-tabs.iui-default~.iui-tabs-content{margin-left:-1px}.iui-vertical .iui-tabs.iui-default :where(.iui-button){width:100%}.iui-tabs.iui-default.iui-large .iui-tab{min-height:calc(var(--iui-size-m)*3.5)}.iui-tabs.iui-default.iui-large .iui-tab-description{display:-webkit-box}.iui-tabs.iui-default.iui-green .iui-tab:after{background-color:var(--iui-color-border-positive)}.iui-tabs.iui-default~.iui-tabs-content{padding-left:var(--iui-size-m);padding-right:var(--iui-size-m);background-color:var(--iui-color-background);border:1px solid var(--iui-color-border)}.iui-tabs.iui-borderless .iui-tab{padding-block:var(--iui-size-2xs);padding-inline:calc(var(--iui-size-s)*2);background-color:#0000}.iui-tabs.iui-borderless .iui-tab:after{bottom:0;right:0}.iui-tabs.iui-borderless .iui-tab:hover{background-color:var(--iui-color-background-transparent-hover)}.iui-tabs.iui-borderless .iui-tab.iui-active{background-color:var(--iui-color-background-accent-muted)}.iui-horizontal .iui-tabs.iui-borderless~.iui-tabs-content{margin-top:calc(0px - var(--iui-size-3xs));border-top:var(--iui-size-3xs)solid var(--iui-color-border)}.iui-vertical .iui-tabs.iui-borderless~.iui-tabs-content{margin-left:calc(0px - var(--iui-size-3xs));padding-left:var(--iui-size-s);padding-right:var(--iui-size-s);border-left:var(--iui-size-3xs)solid var(--iui-color-border)}.iui-tabs.iui-borderless.iui-green .iui-active{background-color:var(--iui-color-background-positive-muted)}.iui-tabs.iui-borderless.iui-large .iui-tab{min-height:calc(var(--iui-size-m)*3.5)}.iui-tabs.iui-borderless.iui-large .iui-tab-description{display:-webkit-box}.iui-tabs.iui-borderless .iui-tab[disabled]:hover{background-color:#0000}.iui-tabs.iui-pill{justify-content:space-evenly;gap:var(--iui-size-3xs)}.iui-tabs.iui-pill>li{flex:1 1 0}.iui-tabs.iui-pill.iui-green .iui-tab:hover{background-color:var(--iui-color-background-transparent-hover)}.iui-tabs.iui-pill.iui-green .iui-tab.iui-active:hover{background-color:var(--iui-color-background-positive-muted)}.iui-tabs.iui-pill .iui-tab{padding:var(--iui-size-2xs);width:100%;border-radius:var(--iui-border-radius-1);background-color:#0000;justify-content:center}.iui-tabs.iui-pill .iui-tab:after{bottom:0;left:0}.iui-tabs.iui-pill .iui-tab:hover{background-color:var(--iui-color-background-transparent-hover)}.iui-tabs.iui-pill .iui-tab.iui-active:hover{background-color:var(--iui-color-background-accent-muted)}.iui-tabs.iui-pill .iui-tab[disabled]:hover{background-color:#0000}.iui-tabs.iui-animated:after{content:" ";background-color:var(--iui-color-border-accent);position:absolute}.iui-tabs.iui-animated.iui-green:after{background-color:var(--iui-color-border-positive)}.iui-horizontal .iui-tabs.iui-animated:after{top:calc(100% - var(--iui-size-3xs));height:var(--iui-size-3xs);left:var(--stripe-left);width:var(--stripe-width)}@media (prefers-reduced-motion:no-preference){.iui-horizontal .iui-tabs.iui-animated:after{transition:width var(--iui-duration-1)ease-out,left var(--iui-duration-1)ease-out}}.iui-vertical .iui-tabs.iui-animated:after{left:calc(100% - var(--iui-size-3xs));width:var(--iui-size-3xs);top:var(--stripe-top);height:var(--stripe-height)}@media (prefers-reduced-motion:no-preference){.iui-vertical .iui-tabs.iui-animated:after{transition:top var(--iui-duration-1)ease-out}}.iui-tabs.iui-not-animated .iui-tab:after{content:"";background-color:var(--iui-color-border-accent);position:absolute}@media (prefers-reduced-motion:no-preference){.iui-tabs.iui-not-animated .iui-active:after{transition:width var(--iui-duration-1)ease,height var(--iui-duration-1)ease}}.iui-tabs.iui-not-animated.iui-green .iui-tab:after{background-color:var(--iui-color-border-positive)}.iui-tab-label{text-align:left;max-width:60ch}.iui-tab-label>*{text-overflow:ellipsis;-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}

package/css/tag.css

@@ -2,143 +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-tag{
-  -webkit-user-select:all;
-     -moz-user-select:all;
-          user-select:all;
-  text-transform:lowercase;
-  display:inline-flex;
-  height:calc(var(--iui-size-s) * 3);
-  margin-block:var(--iui-size-2xs);
-  border-radius:var(--iui-border-radius-round);
-  padding:0 var(--iui-size-3xs);
-  align-items:center;
-  transition:border-color var(--iui-duration-1) ease-out;
-  font-size:var(--iui-font-size-1);
-  text-transform:none;
-  cursor:default;
-  -webkit-tap-highlight-color:transparent;
-  border:1px solid var(--iui-color-foreground-4);
-  background-color:var(--iui-color-background-1);
-  color:var(--iui-color-foreground-2);
-}
-.iui-tag:hover{
-  border-color:var(--iui-color-foreground-1);
-}
-
-.iui-tag-basic{
-  -webkit-user-select:all;
-     -moz-user-select:all;
-          user-select:all;
-  text-transform:lowercase;
-  display:inline-flex;
-}
-.iui-tag-basic:not(a){
-  color:var(--iui-color-foreground-4);
-}
-
-.iui-tag-label{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  font-size:var(--iui-font-size-1);
-  font-weight:var(--iui-font-weight-normal);
-  line-height:var(--iui-size-l);
-  white-space:nowrap;
-  text-overflow:ellipsis;
-  overflow:hidden;
-  margin:0 var(--iui-size-2xs) 0 var(--iui-size-xs);
-}
-.iui-tag-label:only-child{
-  margin:0 var(--iui-size-xs);
-}
-
-.iui-tag-button{
-  border-radius:var(--iui-border-radius-round);
-}
-
-a.iui-tag-basic{
-  color:var(--iui-color-foreground-primary);
-  -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
-  border-radius:var(--iui-border-radius-1);
-  cursor:pointer;
-  text-decoration:none;
-}
-a.iui-tag-basic:focus-visible{
-  outline:1px solid var(--iui-color-foreground-primary);
-  outline-offset:1px;
-}
-@supports not selector(*:focus-visible){
-  a.iui-tag-basic:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
-    outline-offset:1px;
-  }
-}
-a.iui-tag-basic:hover{
-  color:var(--iui-color-foreground-primary-hover);
-}
-a.iui-tag-basic:hover{
-  text-decoration:underline;
-}
-@media (prefers-contrast: more){
-  a.iui-tag-basic{
-    text-decoration:underline;
-  }
-  a.iui-tag-basic:hover{
-    text-decoration:none;
-  }
-}
-.iui-theme-light a.iui-tag-basic, .iui-theme-dark a.iui-tag-basic{
-  text-decoration:none;
-}
-.iui-theme-light a.iui-tag-basic:hover, .iui-theme-dark a.iui-tag-basic:hover{
-  text-decoration:underline;
-}
-
-.iui-theme-light-hc a.iui-tag-basic, .iui-theme-dark-hc a.iui-tag-basic{
-  text-decoration:underline;
-}
-.iui-theme-light-hc a.iui-tag-basic:hover, .iui-theme-dark-hc a.iui-tag-basic:hover{
-  text-decoration:none;
-}
-
-a.iui-tag-basic:focus-visible{
-  outline:1px solid var(--iui-color-foreground-primary);
-  outline-offset:1px;
-}
-@supports not selector(*:focus-visible){
-  a.iui-tag-basic:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
-    outline-offset:1px;
-  }
-}
-
-.iui-tag-container{
-  color:var(--iui-color-foreground-4);
-}
-.iui-tag-container > a.iui-tag-basic{
-  margin:var(--iui-size-3xs);
-}
-.iui-tag-container > *:not(last-child){
-  margin-right:var(--iui-size-2xs);
-}
-.iui-tag-container > .iui-tag-basic:not(:last-child)::after{
-  content:",";
-}
-.iui-tag-container.iui-truncate{
-  overflow:hidden;
-  text-overflow:ellipsis;
-  display:-webkit-box;
-  -webkit-line-clamp:1;
-  -webkit-box-orient:vertical;
-}
-.iui-tag-container.iui-scroll{
-  white-space:nowrap;
-  overflow-x:scroll;
-}
-.iui-tag-container.iui-visible{
-  border-radius:var(--iui-border-radius-1);
-  padding:var(--iui-size-2xs) var(--iui-size-s);
-  background-color:var(--iui-color-background-3);
-}
+.iui-tag{-webkit-user-select:all;user-select:all;text-transform:lowercase;height:calc(var(--iui-size-s)*3);margin-block:var(--iui-size-2xs);border-radius:var(--iui-border-radius-round);padding:0 var(--iui-size-3xs);transition:border-color var(--iui-duration-1)ease-out;font-size:var(--iui-font-size-1);text-transform:none;cursor:default;-webkit-tap-highlight-color:transparent;border:1px solid var(--iui-color-border-foreground);background-color:var(--iui-color-background);color:var(--iui-color-text);align-items:center;display:inline-flex}.iui-tag:hover{border-color:var(--iui-color-border-foreground-hover)}.iui-tag-basic{-webkit-user-select:all;user-select:all;text-transform:lowercase;display:inline-flex}.iui-tag-basic:not(a){color:var(--iui-color-text-muted)}.iui-tag-label{vertical-align:baseline;font-size:var(--iui-font-size-1);font-weight:var(--iui-font-weight-normal);line-height:var(--iui-size-l);white-space:nowrap;text-overflow:ellipsis;margin:0;margin:0 var(--iui-size-2xs)0 var(--iui-size-xs);border:none;padding:0;overflow:hidden}.iui-tag-label:only-child{margin:0 var(--iui-size-xs)}.iui-tag-button{border-radius:var(--iui-border-radius-round)}a.iui-tag-basic{color:var(--iui-color-text-accent);-webkit-tap-highlight-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6));border-radius:var(--iui-border-radius-1);cursor:pointer;text-decoration:none}a.iui-tag-basic:focus-visible{outline:1px solid var(--iui-color-text-accent);outline-offset:1px}@supports not selector(*:focus-visible){a.iui-tag-basic:focus{outline:1px solid var(--iui-color-text-accent);outline-offset:1px}}a.iui-tag-basic:hover{color:var(--iui-color-text-accent-hover);text-decoration:underline}@media (prefers-contrast:more){a.iui-tag-basic{text-decoration:underline}a.iui-tag-basic:hover{text-decoration:none}}[data-iui-contrast=high] a.iui-tag-basic{text-decoration:underline}[data-iui-contrast=high] a.iui-tag-basic:hover{text-decoration:none}a.iui-tag-basic:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:1px}@supports not selector(*:focus-visible){a.iui-tag-basic:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:1px}}.iui-tag-container{color:var(--iui-color-text-muted)}.iui-tag-container>a.iui-tag-basic{margin:var(--iui-size-3xs)}.iui-tag-container>:not(last-child){margin-right:var(--iui-size-2xs)}.iui-tag-container>.iui-tag-basic:not(:last-child):after{content:","}.iui-tag-container.iui-truncate{text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.iui-tag-container.iui-scroll{white-space:nowrap;overflow-x:scroll}.iui-tag-container.iui-visible{border-radius:var(--iui-border-radius-1);padding:var(--iui-size-2xs)var(--iui-size-s);background-color:var(--iui-color-background)}

package/css/text.css

@@ -2,118 +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-text-headline{
-  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));
-}
-
-.iui-text-title{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  font-size:var(--iui-font-size-4);
-  font-weight:var(--iui-font-weight-light);
-  line-height:calc(1.5 * var(--iui-size-l));
-}
-
-.iui-text-subheading{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  font-size:var(--iui-font-size-3);
-  font-weight:var(--iui-font-weight-normal);
-  line-height:calc(1.5 * var(--iui-size-l));
-}
-
-.iui-text-leading{
-  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);
-}
-
-.iui-text-block{
-  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);
-}
-
-.iui-text-small{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  font-size:var(--iui-font-size-0);
-  font-weight:var(--iui-font-weight-normal);
-  line-height:var(--iui-size-l);
-}
-
-.iui-text-muted{
-  color:var(--iui-color-foreground-4);
-}
-
-.iui-skeleton{
-  display:inline-block;
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
-  color:transparent;
-  border-radius:var(--iui-border-radius-1);
-  cursor:progress;
-  background:linear-gradient(292deg, var(--iui-color-foreground-4), var(--iui-color-foreground-4), var(--iui-color-foreground-5), var(--iui-color-foreground-4), var(--iui-color-foreground-4));
-  background-size:200% 100%;
-}
-@media (forced-colors: active){
-  .iui-skeleton{
-    forced-color-adjust:none;
-    background:linear-gradient(292deg, CanvasText, CanvasText, Canvas, CanvasText, CanvasText);
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-skeleton{
-    -webkit-animation:skeleton-shimmer var(--iui-duration-3) linear infinite;
-            animation:skeleton-shimmer var(--iui-duration-3) linear infinite;
-  }
-  @-webkit-keyframes skeleton-shimmer{
-    0%{
-      background-position:200% 50%;
-    }
-    50%{
-      background-position:100% 50%;
-    }
-    100%{
-      background-position:0% 50%;
-    }
-  }
-  @keyframes skeleton-shimmer{
-    0%{
-      background-position:200% 50%;
-    }
-    50%{
-      background-position:100% 50%;
-    }
-    100%{
-      background-position:0% 50%;
-    }
-  }
-}
-
-.iui-text-spacing{
-  padding:0;
-  margin:0 0 var(--iui-size-l);
-}
+.iui-text-headline{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));border:none;margin:0;padding:0}.iui-text-title{vertical-align:baseline;font-size:var(--iui-font-size-4);font-weight:var(--iui-font-weight-light);line-height:calc(1.5*var(--iui-size-l));border:none;margin:0;padding:0}.iui-text-subheading{vertical-align:baseline;font-size:var(--iui-font-size-3);font-weight:var(--iui-font-weight-normal);line-height:calc(1.5*var(--iui-size-l));border:none;margin:0;padding:0}.iui-text-leading{vertical-align:baseline;font-size:var(--iui-font-size-2);font-weight:var(--iui-font-weight-normal);line-height:var(--iui-size-l);border:none;margin:0;padding:0}.iui-text-block{vertical-align:baseline;font-size:var(--iui-font-size-1);font-weight:var(--iui-font-weight-normal);line-height:var(--iui-size-l);border:none;margin:0;padding:0}.iui-text-small{vertical-align:baseline;font-size:var(--iui-font-size-0);font-weight:var(--iui-font-weight-normal);line-height:var(--iui-size-l);border:none;margin:0;padding:0}.iui-text-muted{color:var(--iui-color-text-muted)}.iui-skeleton{-webkit-user-select:none;user-select:none;color:#0000;border-radius:var(--iui-border-radius-1);cursor:progress;background:linear-gradient(292deg,var(--iui-color-icon-muted),var(--iui-color-icon-muted),var(--iui-color-icon-disabled),var(--iui-color-icon-muted),var(--iui-color-icon-muted));background-size:200% 100%;display:inline-block}@media (forced-colors:active){.iui-skeleton{forced-color-adjust:none;background:linear-gradient(292deg,CanvasText,CanvasText,Canvas,CanvasText,CanvasText)}}@media (prefers-reduced-motion:no-preference){.iui-skeleton{animation:skeleton-shimmer var(--iui-duration-3)linear infinite}@keyframes skeleton-shimmer{0%{background-position:200%}50%{background-position:100%}to{background-position:0%}}}.iui-text-spacing{margin:0 0 var(--iui-size-l);padding:0}