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

package/css/button.css

@@ -2,384 +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-button{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  font-family:inherit;
-  display:inline-flex;
-  flex-shrink:0;
-  align-items:center;
-  vertical-align:middle;
-  justify-content:center;
-  position:relative;
-  border-radius:var(--iui-border-radius-1);
-  line-height:var(--iui-size-l);
-  font-size:var(--iui-font-size-1);
-  font-weight:var(--iui-font-weight-normal);
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
-  cursor:pointer;
-  white-space:nowrap;
-  border:1px solid var(--_iui-button-border-color);
-  background:var(--_iui-button-background-color);
-  color:var(--_iui-button-text-color);
-  gap:var(--_iui-button-gap);
-  min-height:var(--_iui-button-min-height);
-  min-width:var(--_iui-button-min-height);
-  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;
-  text-decoration:none;
-  --_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-foreground-2);
-  --_iui-button-background-color:var(--iui-color-background-1);
-  --_iui-button-border-color:var(--iui-color-foreground-4);
-}
-.iui-button:focus-visible{
-  outline:1px solid var(--iui-color-foreground-primary);
-  outline-offset:-1px;
-}
-@supports not selector(*:focus-visible){
-  .iui-button:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
-    outline-offset:-1px;
-  }
-}
-.iui-button:hover, .iui-button:active{
-  --_iui-button-text-color:var(--iui-color-foreground-1);
-  --_iui-button-background-color:var(--iui-color-background-1-hover);
-  --_iui-button-border-color:var(--iui-color-foreground-1);
-}
-.iui-button:hover .iui-notification-primary::before,
-.iui-button:hover .iui-notification-positive::before,
-.iui-button:hover .iui-notification-warning::before,
-.iui-button:hover .iui-notification-negative::before, .iui-button:active .iui-notification-primary::before,
-.iui-button:active .iui-notification-positive::before,
-.iui-button:active .iui-notification-warning::before,
-.iui-button:active .iui-notification-negative::before{
-  border-color:var(--iui-color-background-1-hover);
-}
-.iui-button:focus{
-  outline-offset:-2px;
-  outline-width:2px;
-}
-.iui-button[disabled], .iui-button:disabled, .iui-button[aria-disabled=true]{
-  --_iui-button-text-color:var(--iui-color-foreground-5);
-  --_iui-button-background-color:var(--iui-color-background-disabled);
-  --_iui-button-border-color:var(--iui-color-background-disabled);
-  cursor:not-allowed;
-  outline-offset:-1px;
-  outline-width:1px;
-  outline-color:var(--iui-color-foreground-primary);
-}
-.iui-button[data-iui-size=small]{
-  --_iui-button-gap:var(--iui-size-2xs);
-  --_iui-button-padding-block:0;
-  --_iui-button-padding-inline:var(--iui-size-xs);
-  --_iui-button-min-height:var(--iui-component-height-small);
-}
-.iui-button[data-iui-size=large]{
-  font-size:var(--iui-font-size-2);
-  --_iui-button-gap:var(--iui-size-s);
-  --_iui-button-padding-block:var(--iui-size-xs);
-  --_iui-button-padding-inline:var(--iui-size-l);
-  --_iui-button-min-height:var(--iui-component-height-large);
-}
-.iui-button[data-iui-variant=borderless]{
-  --_iui-button-text-color:var(--iui-color-foreground-2);
-  --_iui-button-background-color:transparent;
-  --_iui-button-border-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-padding-inline:var(--iui-size-xs);
-}
-.iui-button[data-iui-variant=borderless]:where(:hover, :active){
-  --_iui-button-text-color:var(--iui-color-foreground-1);
-  --_iui-button-background-color:var(--iui-color-background-transparent-hover);
-}
-.iui-button[data-iui-variant=borderless]:where(:focus){
-  outline-offset:-1px;
-  outline-width:1px;
-}
-.iui-button[data-iui-variant=borderless]:where([disabled], :disabled, [aria-disabled="true"]){
-  --_iui-button-text-color:var(--iui-color-foreground-5);
-  --_iui-button-background-color:transparent;
-  --_iui-button-border-color:transparent;
-}
-.iui-button[data-iui-variant=borderless][data-iui-size=small]{
-  --_iui-button-gap:var(--iui-size-2xs);
-  --_iui-button-padding-block:0;
-  --_iui-button-padding-inline:var(--iui-size-xs);
-  --_iui-button-min-height:var(--iui-component-height-small);
-  --_iui-button-padding-inline:var(--iui-size-2xs);
-}
-.iui-button[data-iui-variant=borderless][data-iui-size=large]{
-  font-size:var(--iui-font-size-2);
-  --_iui-button-gap:var(--iui-size-s);
-  --_iui-button-padding-block:var(--iui-size-xs);
-  --_iui-button-padding-inline:var(--iui-size-l);
-  --_iui-button-min-height:var(--iui-component-height-large);
-  --_iui-button-padding-inline:var(--iui-size-s);
-}
-.iui-button[data-iui-active=true]{
-  --_iui-button-active-stripe-inset:initial;
-  --_iui-button-active-stripe-color:var(--iui-color-foreground-primary);
-  --_iui-button-text-color:var(--iui-color-foreground-primary);
-  --_iui-button-background-color:var(--iui-color-background-subtle-primary);
-}
-.iui-button[data-iui-active=true]::after{
-  content:"";
-  position:absolute;
-  inset:var(--_iui-button-active-stripe-inset);
-  background-color:var(--_iui-button-active-stripe-color);
-}
-.iui-button[data-iui-active=true][disabled], .iui-button[data-iui-active=true]:disabled, .iui-button[data-iui-active=true][aria-disabled=true]{
-  --_iui-button-active-stripe-color:var(--iui-color-foreground-5);
-  --_iui-button-text-color:var(--iui-color-foreground-5);
-}
-.iui-button[data-iui-active=true][data-iui-variant=borderless]{
-  --_iui-button-background-color:hsl(var(--iui-color-foreground-primary-hsl) / var(--iui-opacity-6));
-}
-.iui-button[data-iui-active=true][disabled], .iui-button[data-iui-active=true]:disabled, .iui-button[data-iui-active=true][aria-disabled=true]{
-  --_iui-button-background-color:var(--iui-color-background-disabled);
-}
-.iui-button[data-iui-variant=high-visibility]{
-  --_iui-button-background-color:var(--iui-color-background-primary);
-  --_iui-button-text-color:var(--iui-color-foreground-accessory);
-  --_iui-button-border-color:var(--_iui-button-background-color);
-}
-.iui-button[data-iui-variant=high-visibility]:hover, .iui-button[data-iui-variant=high-visibility]:active{
-  --_iui-button-background-color:var(--iui-color-background-primary-hover);
-}
-.iui-button[data-iui-variant=high-visibility]:focus{
-  outline-color:var(--iui-color-foreground-accessory);
-  outline-offset:-3px;
-  outline-width:1px;
-}
-.iui-button[data-iui-variant=high-visibility][disabled], .iui-button[data-iui-variant=high-visibility]:disabled, .iui-button[data-iui-variant=high-visibility][aria-disabled=true]{
-  --_iui-button-background-color:var(--iui-color-background-disabled);
-  --_iui-button-text-color:var(--iui-color-foreground-5);
-  outline-offset:-1px;
-  outline-width:1px;
-  outline-color:var(--iui-color-foreground-primary);
-}
-.iui-button[data-iui-variant=cta]{
-  --_iui-button-background-color:var(--iui-color-background-positive);
-  --_iui-button-text-color:var(--iui-color-foreground-accessory);
-  --_iui-button-border-color:var(--_iui-button-background-color);
-}
-.iui-button[data-iui-variant=cta]:hover, .iui-button[data-iui-variant=cta]:active{
-  --_iui-button-background-color:var(--iui-color-background-positive-hover);
-}
-.iui-button[data-iui-variant=cta]:focus{
-  outline-color:var(--iui-color-foreground-accessory);
-  outline-offset:-3px;
-  outline-width:1px;
-}
-.iui-button[data-iui-variant=cta][disabled], .iui-button[data-iui-variant=cta]:disabled, .iui-button[data-iui-variant=cta][aria-disabled=true]{
-  --_iui-button-background-color:var(--iui-color-background-disabled);
-  --_iui-button-text-color:var(--iui-color-foreground-5);
-  outline-offset:-1px;
-  outline-width:1px;
-  outline-color:var(--iui-color-foreground-primary);
-}
-.iui-button[data-iui-variant=idea]{
-  --_iui-button-background-color:var(--iui-color-background-primary);
-  --_iui-button-text-color:var(--iui-color-foreground-accessory);
-  --_iui-button-border-color:var(--_iui-button-background-color);
-  border-radius:var(--iui-border-radius-round);
-  box-shadow:var(--iui-shadow-5);
-  position:fixed;
-  bottom:var(--iui-size-s);
-  right:var(--iui-size-m);
-}
-.iui-button[data-iui-variant=idea]:hover, .iui-button[data-iui-variant=idea]:active{
-  --_iui-button-background-color:var(--iui-color-background-primary-hover);
-}
-.iui-button[data-iui-variant=idea]:focus{
-  outline-color:var(--iui-color-foreground-accessory);
-  outline-offset:-3px;
-  outline-width:1px;
-}
-.iui-button[data-iui-variant=idea][disabled], .iui-button[data-iui-variant=idea]:disabled, .iui-button[data-iui-variant=idea][aria-disabled=true]{
-  --_iui-button-background-color:var(--iui-color-background-disabled);
-  --_iui-button-text-color:var(--iui-color-foreground-5);
-  outline-offset:-1px;
-  outline-width:1px;
-  outline-color:var(--iui-color-foreground-primary);
-}
-
-.iui-button-icon{
-  display:flex;
-  flex-shrink:0;
-  width:var(--iui-size-m);
-  height:var(--iui-size-m);
-  transition:fill var(--iui-duration-1) ease-out;
-  fill:currentColor;
-  margin-block:var(--iui-size-2xs);
-}
-
-.iui-button-dropdown{
-  padding-right:calc(var(--iui-size-xs) - 1px);
-}
-.iui-button-dropdown[data-iui-size=small]{
-  padding-right:calc(var(--iui-size-2xs) - 1px);
-}
-.iui-button-dropdown[data-iui-size=large]{
-  padding-right:calc(var(--iui-size-s) - 1px);
-}
-
-.iui-button-split{
-  display:inline-flex;
-  align-items:center;
-  isolation:isolate;
-}
-.iui-button-split :where(.iui-button:first-child){
-  border-top-right-radius:0;
-  border-bottom-right-radius:0;
-}
-.iui-button-split :where(.iui-button:first-child)[data-iui-variant=high-visibility], .iui-button-split :where(.iui-button:first-child)[data-iui-variant=cta]{
-  border-right-color:rgba(255, 255, 255, var(--iui-opacity-4));
-}
-.iui-button-split :where(.iui-button:first-child):hover{
-  z-index:1;
-}
-.iui-button-split :where(.iui-button:first-child)[disabled], .iui-button-split :where(.iui-button:first-child):disabled, .iui-button-split :where(.iui-button:first-child)[aria-disabled=true]{
-  border-right-color:var(--iui-color-background-4);
-  z-index:-1;
-}
-.iui-button-split :where(.iui-button:last-child){
-  --_iui-button-padding-inline:var(--iui-size-2xs);
-  border-top-left-radius:0;
-  border-bottom-left-radius:0;
-  margin-left:-1px;
-  min-width:unset;
-}
-.iui-button-split :where(.iui-button:last-child)[data-iui-variant=high-visibility], .iui-button-split :where(.iui-button:last-child)[data-iui-variant=cta]{
-  border-left-color:rgba(255, 255, 255, var(--iui-opacity-4));
-}
-.iui-button-split :where(.iui-button:last-child)[disabled], .iui-button-split :where(.iui-button:last-child):disabled, .iui-button-split :where(.iui-button:last-child)[aria-disabled=true]{
-  border-left-color:var(--iui-color-background-4);
-  z-index:-1;
-}
-.iui-button-split :where(.iui-button:last-child)[data-iui-size=small]{
-  --_iui-button-padding-inline:var(--iui-size-3xs);
-}
-.iui-button-split :where(.iui-button:last-child)[data-iui-size=large]{
-  --_iui-button-padding-inline:var(--iui-size-xs);
-}
-
-.iui-button-group{
-  display:inline-flex;
-  align-items:center;
-  isolation:isolate;
-  pointer-events:none;
-}
-.iui-button-group > *{
-  display:flex;
-}
-.iui-button-group > * > *{
-  pointer-events:all;
-}
-.iui-button-group > * .iui-input-container, .iui-button-group > * .iui-button, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)){
-  position:relative;
-  --_iui-button-active-stripe-inset:var(--iui-size-3xs)
-    var(--iui-size-3xs)
-    calc(100% - var(--iui-size-2xs));
-}
-.iui-button-group > * .iui-input-container:hover, .iui-button-group > * .iui-button:hover, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
-  z-index:1;
-}
-.iui-button-group > * .iui-input-container:disabled, .iui-button-group > * .iui-input-container.iui-disabled, .iui-button-group > * .iui-input-container[aria-disabled=true], .iui-button-group > * .iui-button:disabled, .iui-button-group > * .iui-button.iui-disabled, .iui-button-group > * .iui-button[aria-disabled=true], .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled=true]{
-  z-index:-1;
-}
-.iui-button-group > * .iui-input-container:focus, .iui-button-group > * .iui-input-container:focus:where([aria-disabled="true"]), .iui-button-group > * .iui-input-container:focus-within, .iui-button-group > * .iui-input-container:focus-within:where([aria-disabled="true"]), .iui-button-group > * .iui-button:focus, .iui-button-group > * .iui-button:focus:where([aria-disabled="true"]), .iui-button-group > * .iui-button:focus-within, .iui-button-group > * .iui-button:focus-within:where([aria-disabled="true"]), .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus:where([aria-disabled="true"]), .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within:where([aria-disabled="true"]){
-  z-index:2;
-}
-.iui-button-group > * .iui-input, .iui-button-group > * .iui-button:where(:not([data-iui-variant="borderless"])){
-  border-radius:0;
-  transition-duration:0ms;
-}
-.iui-button-group > * .iui-input:hover, .iui-button-group > * .iui-input:focus, .iui-button-group > * .iui-button:where(:not([data-iui-variant="borderless"])):hover, .iui-button-group > * .iui-button:where(:not([data-iui-variant="borderless"])):focus{
-  transition-duration:var(--iui-duration-1);
-}
-.iui-button-group > *:first-child .iui-input, .iui-button-group > *:first-child .iui-button:where(:not([data-iui-variant="borderless"])){
-  border-top-left-radius:var(--iui-border-radius-1);
-  border-bottom-left-radius:var(--iui-border-radius-1);
-}
-.iui-button-group > *:last-child .iui-input, .iui-button-group > *:last-child .iui-button:where(:not([data-iui-variant="borderless"])){
-  border-bottom-right-radius:var(--iui-border-radius-1);
-  border-top-right-radius:var(--iui-border-radius-1);
-}
-.iui-button-group > * + *{
-  margin-left:-1px;
-}
-.iui-button-group > *:not(:first-child) :not([data-iui-variant=borderless]):disabled, .iui-button-group > *:not(:first-child) :not([data-iui-variant=borderless]).iui-disabled, .iui-button-group > *:not(:first-child) :not([data-iui-variant=borderless])[aria-disabled=true]{
-  border-left-color:var(--iui-color-background-4);
-}
-
-.iui-button-group-vertical{
-  display:inline-flex;
-  align-items:center;
-  isolation:isolate;
-  pointer-events:none;
-  flex-direction:column;
-  max-height:100%;
-}
-.iui-button-group-vertical > *{
-  display:flex;
-}
-.iui-button-group-vertical > * > *{
-  pointer-events:all;
-}
-.iui-button-group-vertical > * .iui-input-container, .iui-button-group-vertical > * .iui-button, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)){
-  position:relative;
-  --_iui-button-active-stripe-inset:var(--iui-size-3xs)
-    calc(100% - var(--iui-size-2xs))
-    var(--iui-size-3xs)
-    var(--iui-size-3xs);
-}
-.iui-button-group-vertical > * .iui-input-container:hover, .iui-button-group-vertical > * .iui-button:hover, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
-  z-index:1;
-}
-.iui-button-group-vertical > * .iui-input-container:disabled, .iui-button-group-vertical > * .iui-input-container.iui-disabled, .iui-button-group-vertical > * .iui-input-container[aria-disabled=true], .iui-button-group-vertical > * .iui-button:disabled, .iui-button-group-vertical > * .iui-button.iui-disabled, .iui-button-group-vertical > * .iui-button[aria-disabled=true], .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled=true]{
-  z-index:-1;
-}
-.iui-button-group-vertical > * .iui-input-container:focus, .iui-button-group-vertical > * .iui-input-container:focus:where([aria-disabled="true"]), .iui-button-group-vertical > * .iui-input-container:focus-within, .iui-button-group-vertical > * .iui-input-container:focus-within:where([aria-disabled="true"]), .iui-button-group-vertical > * .iui-button:focus, .iui-button-group-vertical > * .iui-button:focus:where([aria-disabled="true"]), .iui-button-group-vertical > * .iui-button:focus-within, .iui-button-group-vertical > * .iui-button:focus-within:where([aria-disabled="true"]), .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus:where([aria-disabled="true"]), .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within:where([aria-disabled="true"]){
-  z-index:2;
-}
-.iui-button-group-vertical > * .iui-input, .iui-button-group-vertical > * .iui-button:where(:not([data-iui-variant="borderless"])){
-  border-radius:0;
-  transition-duration:0ms;
-}
-.iui-button-group-vertical > * .iui-input:hover, .iui-button-group-vertical > * .iui-input:focus, .iui-button-group-vertical > * .iui-button:where(:not([data-iui-variant="borderless"])):hover, .iui-button-group-vertical > * .iui-button:where(:not([data-iui-variant="borderless"])):focus{
-  transition-duration:var(--iui-duration-1);
-}
-.iui-button-group-vertical > *:first-child .iui-input, .iui-button-group-vertical > *:first-child .iui-button:where(:not([data-iui-variant="borderless"])){
-  border-top-left-radius:var(--iui-border-radius-1);
-  border-top-right-radius:var(--iui-border-radius-1);
-}
-.iui-button-group-vertical > *:last-child .iui-input, .iui-button-group-vertical > *:last-child .iui-button:where(:not([data-iui-variant="borderless"])){
-  border-bottom-right-radius:var(--iui-border-radius-1);
-  border-bottom-left-radius:var(--iui-border-radius-1);
-}
-.iui-button-group-vertical > * + *{
-  margin-top:-1px;
-}
-.iui-button-group-vertical > *:not(:first-child) :not([data-iui-variant=borderless]):disabled, .iui-button-group-vertical > *:not(:first-child) :not([data-iui-variant=borderless]).iui-disabled, .iui-button-group-vertical > *:not(:first-child) :not([data-iui-variant=borderless])[aria-disabled=true]{
-  border-top-color:var(--iui-color-background-4);
-}
-
-.iui-button-group-overflow-x{
-  width:100%;
-}
+.iui-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-height:var(--_iui-button-min-height);min-width: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:var(--iui-color-background);--_iui-button-border-color:var(--iui-color-border-foreground);--_iui-button-icon-fill:var(--iui-color-icon);flex-shrink:0;margin:0;text-decoration:none;display:inline-flex;position:relative}.iui-button:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){.iui-button:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}.iui-button:hover,.iui-button:active{--_iui-button-text-color:var(--iui-color-text-hover);--_iui-button-background-color:var(--iui-color-background-hover);--_iui-button-border-color:var(--iui-color-border-foreground-hover);--_iui-button-icon-fill:var(--iui-color-icon-hover)}.iui-button:focus{outline-offset:-2px;outline-width:2px}.iui-button[disabled],.iui-button:disabled,.iui-button[aria-disabled=true]{--_iui-button-text-color:var(--iui-color-text-disabled);--_iui-button-background-color:var(--iui-color-background-disabled);--_iui-button-border-color:var(--iui-color-border-disabled);--_iui-button-icon-fill:var(--iui-color-icon-disabled);cursor:not-allowed;outline-offset:-1px;outline-width:1px;outline-color:var(--iui-color-text-accent)}.iui-button[data-iui-size=small]{--_iui-button-gap:var(--iui-size-2xs);--_iui-button-padding-block:0;--_iui-button-padding-inline:var(--iui-size-xs);--_iui-button-min-height:var(--iui-component-height-small)}.iui-button[data-iui-size=large]{font-size:var(--iui-font-size-2);--_iui-button-gap:var(--iui-size-s);--_iui-button-padding-block:var(--iui-size-xs);--_iui-button-padding-inline:var(--iui-size-l);--_iui-button-min-height:var(--iui-component-height-large)}.iui-button[data-iui-variant=borderless]{--_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)}.iui-button[data-iui-variant=borderless]: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-button[data-iui-variant=borderless]:where(:focus){outline-offset:-1px;outline-width:1px}.iui-button[data-iui-variant=borderless]:where([disabled],:disabled,[aria-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-button[data-iui-variant=borderless][data-iui-size=small]{--_iui-button-gap:var(--iui-size-2xs);--_iui-button-padding-block:0;--_iui-button-padding-inline:var(--iui-size-xs);--_iui-button-min-height:var(--iui-component-height-small);--_iui-button-padding-inline:var(--iui-size-2xs)}.iui-button[data-iui-variant=borderless][data-iui-size=large]{font-size:var(--iui-font-size-2);--_iui-button-gap:var(--iui-size-s);--_iui-button-padding-block:var(--iui-size-xs);--_iui-button-padding-inline:var(--iui-size-l);--_iui-button-min-height:var(--iui-component-height-large);--_iui-button-padding-inline:var(--iui-size-s)}.iui-button[data-iui-active=true]{--_iui-button-active-stripe-inset:initial;--_iui-button-active-stripe-background:var(--iui-color-border-accent);--_iui-button-text-color:var(--iui-color-text-accent);--_iui-button-icon-fill:var(--iui-color-text-accent);--_iui-button-background-color:var(--iui-color-background-accent-muted)}.iui-button[data-iui-active=true]:after{content:"";inset:var(--_iui-button-active-stripe-inset);background:var(--_iui-button-active-stripe-background);position:absolute}.iui-button[data-iui-active=true][disabled],.iui-button[data-iui-active=true]:disabled,.iui-button[data-iui-active=true][aria-disabled=true]{--_iui-button-active-stripe-background:var(--iui-color-icon-disabled);--_iui-button-text-color:var(--iui-color-text-disabled);--_iui-button-icon-fill:var(--iui-color-icon-disabled)}.iui-button[data-iui-active=true][data-iui-variant=borderless]{--_iui-button-background-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6))}.iui-button[data-iui-active=true][disabled],.iui-button[data-iui-active=true]:disabled,.iui-button[data-iui-active=true][aria-disabled=true]{--_iui-button-background-color:var(--iui-color-background-disabled)}.iui-button[data-iui-variant=high-visibility]{--_iui-button-background-color:var(--iui-color-background-accent);--_iui-button-text-color:var(--iui-color-white);--_iui-button-border-color:var(--_iui-button-background-color);--_iui-button-icon-fill:var(--iui-color-white)}.iui-button[data-iui-variant=high-visibility]:hover,.iui-button[data-iui-variant=high-visibility]:active{--_iui-button-background-color:var(--iui-color-background-accent-hover)}.iui-button[data-iui-variant=high-visibility]:focus{outline-color:var(--iui-color-white);outline-offset:-3px;outline-width:1px}.iui-button[data-iui-variant=high-visibility][disabled],.iui-button[data-iui-variant=high-visibility]:disabled,.iui-button[data-iui-variant=high-visibility][aria-disabled=true]{--_iui-button-background-color:var(--iui-color-background-disabled);--_iui-button-border-color:var(--iui-color-border-disabled);--_iui-button-text-color:var(--iui-color-text-disabled);--_iui-button-icon-fill:var(--iui-color-icon-disabled);outline-offset:-1px;outline-width:1px;outline-color:var(--iui-color-text-accent)}.iui-button[data-iui-variant=cta]{--_iui-button-background-color:var(--iui-color-background-positive);--_iui-button-text-color:var(--iui-color-white);--_iui-button-border-color:var(--_iui-button-background-color);--_iui-button-icon-fill:var(--iui-color-white)}.iui-button[data-iui-variant=cta]:hover,.iui-button[data-iui-variant=cta]:active{--_iui-button-background-color:var(--iui-color-background-positive-hover)}.iui-button[data-iui-variant=cta]:focus{outline-color:var(--iui-color-white);outline-offset:-3px;outline-width:1px}.iui-button[data-iui-variant=cta][disabled],.iui-button[data-iui-variant=cta]:disabled,.iui-button[data-iui-variant=cta][aria-disabled=true]{--_iui-button-background-color:var(--iui-color-background-disabled);--_iui-button-border-color:var(--iui-color-border-disabled);--_iui-button-text-color:var(--iui-color-text-disabled);--_iui-button-icon-fill:var(--iui-color-icon-disabled);outline-offset:-1px;outline-width:1px;outline-color:var(--iui-color-text-accent)}.iui-button[data-iui-variant=idea]{--_iui-button-background-color:var(--iui-color-background-accent);--_iui-button-text-color:var(--iui-color-white);--_iui-button-border-color:var(--_iui-button-background-color);--_iui-button-icon-fill:var(--iui-color-white);border-radius:var(--iui-border-radius-round);box-shadow:var(--iui-shadow-5);bottom:var(--iui-size-s);right:var(--iui-size-m);position:fixed}.iui-button[data-iui-variant=idea]:hover,.iui-button[data-iui-variant=idea]:active{--_iui-button-background-color:var(--iui-color-background-accent-hover)}.iui-button[data-iui-variant=idea]:focus{outline-color:var(--iui-color-white);outline-offset:-3px;outline-width:1px}.iui-button[data-iui-variant=idea][disabled],.iui-button[data-iui-variant=idea]:disabled,.iui-button[data-iui-variant=idea][aria-disabled=true]{--_iui-button-background-color:var(--iui-color-background-disabled);--_iui-button-border-color:var(--iui-color-border-disabled);--_iui-button-text-color:var(--iui-color-text-disabled);--_iui-button-icon-fill:var(--iui-color-icon-disabled);outline-offset:-1px;outline-width:1px;outline-color:var(--iui-color-text-accent)}.iui-button-icon svg{width:var(--iui-size-m);height: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-button-dropdown{padding-right:calc(var(--iui-size-xs) - 1px)}.iui-button-dropdown[data-iui-size=small]{padding-right:calc(var(--iui-size-2xs) - 1px)}.iui-button-dropdown[data-iui-size=large]{padding-right:calc(var(--iui-size-s) - 1px)}.iui-button-split{isolation:isolate;align-items:center;display:inline-flex}.iui-button-split :where(.iui-button:first-child){border-top-right-radius:0;border-bottom-right-radius:0}.iui-button-split :where(.iui-button:first-child)[data-iui-variant=high-visibility],.iui-button-split :where(.iui-button:first-child)[data-iui-variant=cta]{border-right-color:rgba(255,255,255,var(--iui-opacity-4))}.iui-button-split :where(.iui-button:first-child):hover{z-index:1}.iui-button-split :where(.iui-button:first-child)[disabled],.iui-button-split :where(.iui-button:first-child):disabled,.iui-button-split :where(.iui-button:first-child)[aria-disabled=true]{border-right-color:var(--iui-color-border-subtle);z-index:-1}.iui-button-split :where(.iui-button:last-child){--_iui-button-padding-inline:var(--iui-size-2xs);min-width:unset;border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.iui-button-split :where(.iui-button:last-child)[data-iui-variant=high-visibility],.iui-button-split :where(.iui-button:last-child)[data-iui-variant=cta]{border-left-color:rgba(255,255,255,var(--iui-opacity-4))}.iui-button-split :where(.iui-button:last-child)[disabled],.iui-button-split :where(.iui-button:last-child):disabled,.iui-button-split :where(.iui-button:last-child)[aria-disabled=true]{border-left-color:var(--iui-color-border-subtle);z-index:-1}.iui-button-split :where(.iui-button:last-child)[data-iui-size=small]{--_iui-button-padding-inline:var(--iui-size-3xs)}.iui-button-split :where(.iui-button:last-child)[data-iui-size=large]{--_iui-button-padding-inline:var(--iui-size-xs)}.iui-button-group{isolation:isolate;pointer-events:none;align-items:center;display:inline-flex}.iui-button-group>*{display:flex}.iui-button-group>*>*{pointer-events:all}.iui-button-group>* .iui-input-container,.iui-button-group>* .iui-button,.iui-button-group>* .iui-input:where(:not(.iui-input-container .iui-input)){--_iui-button-active-stripe-inset:var(--iui-size-3xs)var(--iui-size-3xs)calc(100% - var(--iui-size-2xs));position:relative}.iui-button-group>* .iui-input-container:hover,.iui-button-group>* .iui-button:hover,.iui-button-group>* .iui-input:where(:not(.iui-input-container .iui-input)):hover{z-index:1}.iui-button-group>* .iui-input-container:disabled,.iui-button-group>* .iui-input-container.iui-disabled,.iui-button-group>* .iui-input-container[aria-disabled=true],.iui-button-group>* .iui-button:disabled,.iui-button-group>* .iui-button.iui-disabled,.iui-button-group>* .iui-button[aria-disabled=true],.iui-button-group>* .iui-input:where(:not(.iui-input-container .iui-input)):disabled,.iui-button-group>* .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled,.iui-button-group>* .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled=true]{z-index:-1}.iui-button-group>* .iui-input-container:focus,.iui-button-group>* .iui-input-container:focus:where([aria-disabled=true]),.iui-button-group>* .iui-input-container:focus-within,.iui-button-group>* .iui-input-container:focus-within:where([aria-disabled=true]),.iui-button-group>* .iui-button:focus,.iui-button-group>* .iui-button:focus:where([aria-disabled=true]),.iui-button-group>* .iui-button:focus-within,.iui-button-group>* .iui-button:focus-within:where([aria-disabled=true]),.iui-button-group>* .iui-input:where(:not(.iui-input-container .iui-input)):focus,.iui-button-group>* .iui-input:where(:not(.iui-input-container .iui-input)):focus:where([aria-disabled=true]),.iui-button-group>* .iui-input:where(:not(.iui-input-container .iui-input)):focus-within,.iui-button-group>* .iui-input:where(:not(.iui-input-container .iui-input)):focus-within:where([aria-disabled=true]){z-index:2}.iui-button-group>* .iui-input,.iui-button-group>* .iui-button:where(:not([data-iui-variant=borderless])){border-radius:0;transition-duration:0s}.iui-button-group>* .iui-input:hover,.iui-button-group>* .iui-input:focus,.iui-button-group>* .iui-button:where(:not([data-iui-variant=borderless])):hover,.iui-button-group>* .iui-button:where(:not([data-iui-variant=borderless])):focus{transition-duration:var(--iui-duration-1)}.iui-button-group>:first-child .iui-input,.iui-button-group>:first-child .iui-button:where(:not([data-iui-variant=borderless])){border-top-left-radius:var(--iui-border-radius-1);border-bottom-left-radius:var(--iui-border-radius-1)}.iui-button-group>:last-child .iui-input,.iui-button-group>:last-child .iui-button:where(:not([data-iui-variant=borderless])){border-bottom-right-radius:var(--iui-border-radius-1);border-top-right-radius:var(--iui-border-radius-1)}.iui-button-group>*+*{margin-left:-1px}.iui-button-group>:not(:first-child) :not([data-iui-variant=borderless]):disabled,.iui-button-group>:not(:first-child) :not([data-iui-variant=borderless]).iui-disabled,.iui-button-group>:not(:first-child) :not([data-iui-variant=borderless])[aria-disabled=true]{border-left-color:var(--iui-color-border-subtle)}.iui-button-group-vertical{isolation:isolate;pointer-events:none;max-height:100%;flex-direction:column;align-items:center;display:inline-flex}.iui-button-group-vertical>*{display:flex}.iui-button-group-vertical>*>*{pointer-events:all}.iui-button-group-vertical>* .iui-input-container,.iui-button-group-vertical>* .iui-button,.iui-button-group-vertical>* .iui-input:where(:not(.iui-input-container .iui-input)){--_iui-button-active-stripe-inset:var(--iui-size-3xs)calc(100% - var(--iui-size-2xs))var(--iui-size-3xs)var(--iui-size-3xs);position:relative}.iui-button-group-vertical>* .iui-input-container:hover,.iui-button-group-vertical>* .iui-button:hover,.iui-button-group-vertical>* .iui-input:where(:not(.iui-input-container .iui-input)):hover{z-index:1}.iui-button-group-vertical>* .iui-input-container:disabled,.iui-button-group-vertical>* .iui-input-container.iui-disabled,.iui-button-group-vertical>* .iui-input-container[aria-disabled=true],.iui-button-group-vertical>* .iui-button:disabled,.iui-button-group-vertical>* .iui-button.iui-disabled,.iui-button-group-vertical>* .iui-button[aria-disabled=true],.iui-button-group-vertical>* .iui-input:where(:not(.iui-input-container .iui-input)):disabled,.iui-button-group-vertical>* .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled,.iui-button-group-vertical>* .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled=true]{z-index:-1}.iui-button-group-vertical>* .iui-input-container:focus,.iui-button-group-vertical>* .iui-input-container:focus:where([aria-disabled=true]),.iui-button-group-vertical>* .iui-input-container:focus-within,.iui-button-group-vertical>* .iui-input-container:focus-within:where([aria-disabled=true]),.iui-button-group-vertical>* .iui-button:focus,.iui-button-group-vertical>* .iui-button:focus:where([aria-disabled=true]),.iui-button-group-vertical>* .iui-button:focus-within,.iui-button-group-vertical>* .iui-button:focus-within:where([aria-disabled=true]),.iui-button-group-vertical>* .iui-input:where(:not(.iui-input-container .iui-input)):focus,.iui-button-group-vertical>* .iui-input:where(:not(.iui-input-container .iui-input)):focus:where([aria-disabled=true]),.iui-button-group-vertical>* .iui-input:where(:not(.iui-input-container .iui-input)):focus-within,.iui-button-group-vertical>* .iui-input:where(:not(.iui-input-container .iui-input)):focus-within:where([aria-disabled=true]){z-index:2}.iui-button-group-vertical>* .iui-input,.iui-button-group-vertical>* .iui-button:where(:not([data-iui-variant=borderless])){border-radius:0;transition-duration:0s}.iui-button-group-vertical>* .iui-input:hover,.iui-button-group-vertical>* .iui-input:focus,.iui-button-group-vertical>* .iui-button:where(:not([data-iui-variant=borderless])):hover,.iui-button-group-vertical>* .iui-button:where(:not([data-iui-variant=borderless])):focus{transition-duration:var(--iui-duration-1)}.iui-button-group-vertical>:first-child .iui-input,.iui-button-group-vertical>:first-child .iui-button:where(:not([data-iui-variant=borderless])){border-top-left-radius:var(--iui-border-radius-1);border-top-right-radius:var(--iui-border-radius-1)}.iui-button-group-vertical>:last-child .iui-input,.iui-button-group-vertical>:last-child .iui-button:where(:not([data-iui-variant=borderless])){border-bottom-right-radius:var(--iui-border-radius-1);border-bottom-left-radius:var(--iui-border-radius-1)}.iui-button-group-vertical>*+*{margin-top:-1px}.iui-button-group-vertical>:not(:first-child) :not([data-iui-variant=borderless]):disabled,.iui-button-group-vertical>:not(:first-child) :not([data-iui-variant=borderless]).iui-disabled,.iui-button-group-vertical>:not(:first-child) :not([data-iui-variant=borderless])[aria-disabled=true]{border-top-color:var(--iui-color-border-subtle)}.iui-button-group-overflow-x{width:100%}

package/css/carousel.css

@@ -2,124 +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-carousel{
-  overflow:hidden;
-  border-radius:var(--iui-border-radius-1);
-}
-.iui-carousel:focus-visible{
-  outline:1px solid var(--iui-color-foreground-primary);
-  outline-offset:4px;
-}
-@supports not selector(*:focus-visible){
-  .iui-carousel:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
-    outline-offset:4px;
-  }
-}
-
-.iui-carousel-slider{
-  display:flex;
-  gap:var(--iui-size-xs);
-  list-style:none;
-  margin:0;
-  padding:0;
-  -ms-scroll-snap-type:x mandatory;
-      scroll-snap-type:x mandatory;
-  overflow-x:auto;
-  overflow-x:overlay;
-  scrollbar-width:none;
-}
-.iui-carousel-slider::-webkit-scrollbar{
-  display:none;
-}
-.iui-carousel-slider-item{
-  width:100%;
-  flex-shrink:0;
-  scroll-snap-align:center;
-}
-
-.iui-carousel-navigation{
-  display:flex;
-  align-items:center;
-  height:calc(var(--iui-size-s) * 3);
-  border-top:var(--iui-size-3xs) solid var(--iui-color-background-4);
-}
-.iui-carousel-navigation-left, .iui-carousel-navigation-right{
-  display:flex;
-  align-items:center;
-  flex:1;
-}
-.iui-carousel-navigation-left button[data-pressed=true], .iui-carousel-navigation-right button[data-pressed=true]{
-  outline-offset:-1px;
-  outline:1px solid var(--iui-color-foreground-primary);
-}
-.iui-carousel-navigation-dots{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  max-width:calc(var(--iui-size-2xl) * 4);
-  border-radius:var(--iui-border-radius-1);
-  white-space:nowrap;
-  overflow-x:auto;
-  overflow-x:overlay;
-  scrollbar-width:none;
-}
-.iui-carousel-navigation-dots:focus-visible{
-  outline:1px solid var(--iui-color-foreground-primary);
-  outline-offset:-1px;
-}
-@supports not selector(*:focus-visible){
-  .iui-carousel-navigation-dots:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
-    outline-offset:-1px;
-  }
-}
-.iui-carousel-navigation-dots::-webkit-scrollbar{
-  display:none;
-}
-.iui-carousel-navigation-dot{
-  --_iui-button-gap:var(--iui-size-2xs);
-  --_iui-button-padding-block:0;
-  --_iui-button-padding-inline:var(--iui-size-xs);
-  --_iui-button-min-height:var(--iui-component-height-small);
-  background-color:transparent;
-  border:none;
-  cursor:pointer;
-  height:var(--_iui-button-height);
-  padding-left:var(--_iui-button-padding-inline);
-  padding-right:var(--_iui-button-padding-inline);
-}
-.iui-carousel-navigation-dot:hover::after{
-  background-color:var(--iui-color-foreground-3);
-}
-.iui-carousel-navigation-dot::after{
-  display:flex;
-  flex-shrink:0;
-  width:var(--iui-size-s);
-  height:var(--iui-size-s);
-  content:"";
-  border-radius:50%;
-  border:1px solid transparent;
-  background-color:var(--iui-color-foreground-4);
-  box-shadow:inset 0 0 0 0 var(--iui-color-background-1);
-}
-.iui-carousel-navigation-dot.iui-first::after{
-  transform:scale(0.5);
-}
-.iui-carousel-navigation-dot.iui-second::after{
-  transform:scale(0.75);
-}
-.iui-carousel-navigation-dot.iui-active::after{
-  background-color:var(--iui-color-foreground-primary);
-  border-color:var(--iui-color-foreground-primary);
-  box-shadow:inset 0 0 0 1px var(--iui-color-background-1);
-}
-@media (forced-colors: active){
-  .iui-carousel-navigation-dot.iui-active::after{
-    border-width:var(--iui-size-xs);
-  }
-}
-.iui-carousel-navigation-right{
-  justify-content:flex-end;
-}
+.iui-carousel{border-radius:var(--iui-border-radius-1);overflow:hidden}.iui-carousel:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:4px}@supports not selector(*:focus-visible){.iui-carousel:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:4px}}.iui-carousel-slider{gap:var(--iui-size-xs);scroll-snap-type:x mandatory;overflow-x:auto;overflow-x:overlay;scrollbar-width:none;margin:0;padding:0;list-style:none;display:flex}.iui-carousel-slider::-webkit-scrollbar{display:none}.iui-carousel-slider-item{width:100%;scroll-snap-align:center;flex-shrink:0}.iui-carousel-navigation{height:calc(var(--iui-size-s)*3);border-top:var(--iui-size-3xs)solid var(--iui-color-border);align-items:center;display:flex}.iui-carousel-navigation-left,.iui-carousel-navigation-right{flex:1;align-items:center;display:flex}.iui-carousel-navigation-left button[data-pressed=true],.iui-carousel-navigation-right button[data-pressed=true]{outline-offset:-1px;outline:1px solid var(--iui-color-border-accent)}.iui-carousel-navigation-dots{vertical-align:baseline;max-width:calc(var(--iui-size-2xl)*4);border-radius:var(--iui-border-radius-1);white-space:nowrap;overflow-x:auto;overflow-x:overlay;scrollbar-width:none;border:none;margin:0;padding:0}.iui-carousel-navigation-dots:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){.iui-carousel-navigation-dots:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}.iui-carousel-navigation-dots::-webkit-scrollbar{display:none}.iui-carousel-navigation-dot{--_iui-button-gap:var(--iui-size-2xs);--_iui-button-padding-block:0;--_iui-button-padding-inline:var(--iui-size-xs);--_iui-button-min-height:var(--iui-component-height-small);cursor:pointer;height:var(--_iui-button-height);padding-left:var(--_iui-button-padding-inline);padding-right:var(--_iui-button-padding-inline);background-color:#0000;border:none}.iui-carousel-navigation-dot:hover:after{background-color:var(--iui-color-icon-muted-hover)}.iui-carousel-navigation-dot:after{width:var(--iui-size-s);height:var(--iui-size-s);content:"";background-color:var(--iui-color-icon-muted);box-shadow:inset 0 0 0 0 var(--iui-color-background);border:1px solid #0000;border-radius:50%;flex-shrink:0;display:flex}.iui-carousel-navigation-dot.iui-first:after{transform:scale(.5)}.iui-carousel-navigation-dot.iui-second:after{transform:scale(.75)}.iui-carousel-navigation-dot.iui-active:after{background-color:var(--iui-color-icon-accent);border-color:var(--iui-color-icon-accent);box-shadow:inset 0 0 0 1px var(--iui-color-background)}@media (forced-colors:active){.iui-carousel-navigation-dot.iui-active:after{border-width:var(--iui-size-xs)}}.iui-carousel-navigation-right{justify-content:flex-end}