@bolio-ui/core 3.0.0-alpha.1 → 3.0.0

package/esm/css/Alert.css

@@ -0,0 +1,53 @@
+@layer Alert {
+.Alert-module_alert__Ghxl7 {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75em;
+  box-sizing: border-box;
+  line-height: 1.6;
+}
+
+.Alert-module_alert__Ghxl7 p {
+  margin: 0;
+}
+
+.Alert-module_icon__hcZdu {
+  display: inline-flex;
+  flex: none;
+  margin-top: 0.2em;
+}
+
+.Alert-module_body__SuUYD {
+  flex: 1;
+  min-width: 0;
+}
+
+.Alert-module_title__8yipK {
+  font-weight: 600;
+}
+
+.Alert-module_close__ZPg5d {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  margin: 0.15em -0.25em 0 0;
+  padding: 0.25em;
+  color: inherit;
+  background: none;
+  border: 0;
+  border-radius: 4px;
+  opacity: 0.7;
+  cursor: pointer;
+}
+
+.Alert-module_close__ZPg5d:hover {
+  opacity: 1;
+}
+
+.Alert-module_close__ZPg5d:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 1px;
+}
+
+}

package/esm/css/ButtonDropdown-ButtonDropdownItem.css

@@ -2,7 +2,6 @@
 .ButtonDropdownItem-module_button__R-hYv {
   position: relative;
   -webkit-appearance: button;
-  text-rendering: auto;
   display: inline-flex;
   flex: 1;
   justify-content: center;

package/esm/css/ButtonGroup.css

@@ -5,7 +5,6 @@
   overflow: hidden;
   border: 1px solid var(--btn-group-border);
   border-radius: var(--btn-group-radius);
-  background-clip: padding-box;
 }
 
 .ButtonGroup-module_vertical__ueNfm {

package/esm/css/Calendar.css

@@ -62,7 +62,6 @@
   border-radius: var(--calendar-radius);
   appearance: none;
   -webkit-appearance: none;
-  background-clip: padding-box;
 }
 
 .Calendar-module_navButton__jmnwu {

package/esm/css/Carousel.css

@@ -64,7 +64,6 @@
   border-radius: 50%;
   appearance: none;
   -webkit-appearance: none;
-  background-clip: padding-box;
 }
 
 .Carousel-module_control__SdAV-:hover:not(:disabled) {

package/esm/css/Chip-ChipGroup.css

@@ -0,0 +1,8 @@
+@layer Chip-ChipGroup {
+.ChipGroup-module_group__6ARIk {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+
+}

package/esm/css/Chip.css

@@ -0,0 +1,65 @@
+@layer Chip {
+.Chip-module_chip__r494r {
+  position: relative;
+  display: inline-flex;
+}
+
+.Chip-module_input__GhNGk {
+  position: absolute;
+  opacity: 0;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  font-size: 0;
+}
+
+.Chip-module_text__sYRMh {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4em;
+  box-sizing: border-box;
+  height: 100%;
+  padding: 0 0.875em;
+  font-weight: 500;
+  white-space: nowrap;
+  color: var(--chip-color);
+  border: 1px solid var(--chip-border);
+  border-radius: 999px;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    color 0.15s ease,
+    background-color 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.Chip-module_text__sYRMh:hover {
+  background-color: var(--chip-hover-bg);
+}
+
+.Chip-module_input__GhNGk:checked + .Chip-module_text__sYRMh {
+  color: var(--chip-checked-color);
+  background-color: var(--chip-checked-bg);
+  border-color: var(--chip-checked-border);
+}
+
+.Chip-module_input__GhNGk:focus-visible + .Chip-module_text__sYRMh {
+  outline: 2px solid var(--chip-focus);
+  outline-offset: 2px;
+}
+
+.Chip-module_input__GhNGk:disabled + .Chip-module_text__sYRMh {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.Chip-module_input__GhNGk:disabled + .Chip-module_text__sYRMh:hover {
+  background-color: transparent;
+}
+
+.Chip-module_input__GhNGk:disabled:checked + .Chip-module_text__sYRMh:hover {
+  background-color: var(--chip-checked-bg);
+}
+
+}

package/esm/css/ColorInput.css

@@ -22,7 +22,6 @@
   transition:
     border-color 0.15s ease,
     background-color 0.15s ease;
-  background-clip: padding-box;
 }
 
 .ColorInput-module_field__JQwJJ:hover {
@@ -32,6 +31,7 @@
 
 .ColorInput-module_field__JQwJJ:focus-within {
   border-color: var(--colorinput-focus-border);
+  background-clip: padding-box;
 }
 
 .ColorInput-module_swatch__sLvyf {
@@ -42,10 +42,15 @@
   margin: 0;
   padding: 0;
   cursor: pointer;
-  border: 1px solid var(--colorinput-popup-border);
+  border: 0;
   border-radius: 6px;
   appearance: none;
   -webkit-appearance: none;
+  transition: transform 0.15s ease;
+}
+
+.ColorInput-module_swatch__sLvyf:not(:disabled):active {
+  transform: scale(0.9);
 }
 
 .ColorInput-module_swatch__sLvyf:focus-visible {
@@ -91,7 +96,6 @@
   border: 1px solid var(--colorinput-popup-border);
   border-radius: var(--colorinput-popup-radius);
   box-shadow: var(--colorinput-shadow);
-  background-clip: padding-box;
 }
 
 }

package/esm/css/ColorPicker.css

@@ -19,7 +19,6 @@
   height: 10em;
   cursor: crosshair;
   touch-action: none;
-  border: 1px solid var(--picker-border);
   border-radius: var(--picker-radius);
   background-image:
     linear-gradient(to top, #000, transparent),
@@ -40,6 +39,11 @@
   border-radius: 50%;
   box-shadow: 0 0 0 1px rgb(0 0 0 / 40%);
   outline: none;
+  transition: transform 0.15s ease;
+}
+
+.ColorPicker-module_picker__b-U0f:not(.ColorPicker-module_disabled__jM1X3) .ColorPicker-module_panel__kComH:active .ColorPicker-module_thumb__Vi5yp {
+  transform: scale(1.2);
 }
 
 .ColorPicker-module_thumb__Vi5yp:focus-visible {
@@ -82,7 +86,6 @@
   box-shadow: 0 0 0 1px rgb(0 0 0 / 40%);
   appearance: none;
   -webkit-appearance: none;
-  background-clip: padding-box;
 }
 
 .ColorPicker-module_hue__VKHj-::-moz-range-thumb {
@@ -93,7 +96,6 @@
   border: 2px solid #fff;
   border-radius: 50%;
   box-shadow: 0 0 0 1px rgb(0 0 0 / 40%);
-  background-clip: padding-box;
 }
 
 .ColorPicker-module_hue__VKHj-:focus-visible {
@@ -112,7 +114,6 @@
   border-radius: var(--picker-radius);
   background-color: var(--picker-bg);
   transition: border-color 0.15s ease;
-  background-clip: padding-box;
 }
 
 .ColorPicker-module_field__v7-7F:hover {

package/esm/css/Combobox.css

@@ -26,7 +26,6 @@
   transition:
     border-color 0.15s ease,
     background-color 0.15s ease;
-  background-clip: padding-box;
 }
 
 .Combobox-module_input__ti3bv::placeholder {
@@ -40,6 +39,7 @@
 
 .Combobox-module_input__ti3bv:focus {
   border-color: var(--combobox-focus-border-color);
+  background-clip: padding-box;
 }
 
 .Combobox-module_input__ti3bv:disabled {
@@ -58,7 +58,6 @@
   border: 1px solid var(--combobox-border-color);
   border-radius: var(--combobox-popup-radius);
   box-shadow: var(--combobox-shadow);
-  background-clip: padding-box;
 }
 
 .Combobox-module_list__2otmP {

package/esm/css/DatePicker.css

@@ -26,7 +26,6 @@
   transition:
     border-color 0.15s ease,
     background-color 0.15s ease;
-  background-clip: padding-box;
 }
 
 .DatePicker-module_input__e7dhN::placeholder {
@@ -40,6 +39,7 @@
 
 .DatePicker-module_input__e7dhN:focus {
   border-color: var(--datepicker-focus-border-color);
+  background-clip: padding-box;
 }
 
 .DatePicker-module_input__e7dhN:disabled {
@@ -62,7 +62,6 @@
   border-radius: var(--datepicker-radius);
   appearance: none;
   -webkit-appearance: none;
-  background-clip: padding-box;
 }
 
 .DatePicker-module_toggle__I8ARg:hover:not(:disabled) {
@@ -89,7 +88,6 @@
   border: 1px solid var(--datepicker-border-color);
   border-radius: var(--datepicker-popup-radius);
   box-shadow: var(--datepicker-shadow);
-  background-clip: padding-box;
 }
 
 }

package/esm/css/DateRangePicker.css

@@ -24,7 +24,6 @@
   transition:
     border-color 0.15s ease,
     background-color 0.15s ease;
-  background-clip: padding-box;
 }
 
 .DateRangePicker-module_field__4UZhH:hover {
@@ -34,6 +33,7 @@
 
 .DateRangePicker-module_field__4UZhH:focus-within {
   border-color: var(--daterange-focus-border-color);
+  background-clip: padding-box;
 }
 
 .DateRangePicker-module_input__h9sDj {
@@ -78,7 +78,6 @@
   border-radius: var(--daterange-radius);
   appearance: none;
   -webkit-appearance: none;
-  background-clip: padding-box;
 }
 
 .DateRangePicker-module_toggle__gNukh:hover:not(:disabled) {
@@ -104,7 +103,12 @@
   border: 1px solid var(--daterange-border-color);
   border-radius: var(--daterange-popup-radius);
   box-shadow: var(--daterange-shadow);
-  background-clip: padding-box;
+}
+
+/* a field near the right edge: the popup grows to the left */
+.DateRangePicker-module_alignEnd__DgOia {
+  right: 0;
+  left: auto;
 }
 
 }

package/esm/css/Dropzone.css

@@ -33,7 +33,6 @@
   transition:
     border-color 0.2s ease,
     background-color 0.2s ease;
-  background-clip: padding-box;
 }
 
 .Dropzone-module_dropzone__-6nFN:hover .Dropzone-module_content__Uafwo {
@@ -88,7 +87,6 @@
   background-color: var(--dropzone-tile-bg);
   border: 1px solid var(--dropzone-border);
   border-radius: var(--dropzone-radius);
-  background-clip: padding-box;
 }
 
 .Dropzone-module_preview__pQ3gz {
@@ -133,7 +131,6 @@
   border-radius: 50%;
   appearance: none;
   -webkit-appearance: none;
-  background-clip: padding-box;
 }
 
 .Dropzone-module_remove__pjfHy:hover:not(:disabled) {

package/esm/css/Fieldset-FieldsetGroup.css

@@ -35,7 +35,6 @@
   border: 1px solid var(--fieldset-group-border);
   text-decoration: none;
   outline: none;
-  background-clip: padding-box;
 }
 
 .FieldsetGroup-module_button__kXAoU.FieldsetGroup-module_active__tJFHM {

package/esm/css/ImageZoom.css

@@ -0,0 +1,93 @@
+@layer ImageZoom {
+.ImageZoom-module_trigger__-42Bz {
+  display: inline-block;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+  line-height: 0;
+  color: inherit;
+  cursor: zoom-in;
+  background: none;
+  border: 0;
+  border-radius: inherit;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.ImageZoom-module_trigger__-42Bz:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.ImageZoom-module_dialog__TjA9E {
+  box-sizing: border-box;
+  max-width: 100vw;
+  max-height: 100vh;
+  padding: 1rem;
+  overflow: visible;
+  color: #fff;
+  background: transparent;
+  border: 0;
+}
+
+.ImageZoom-module_dialog__TjA9E::backdrop {
+  background: rgb(0 0 0 / 85%);
+}
+
+/* the page behind does not scroll while it is open */
+body:has(.ImageZoom-module_dialog__TjA9E[open]) {
+  overflow: hidden;
+}
+
+.ImageZoom-module_figure__YIBq1 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  margin: 0;
+}
+
+.ImageZoom-module_zoomed__7gfCP {
+  display: block;
+  max-width: calc(100vw - 2rem);
+  max-height: calc(100vh - 6rem);
+  object-fit: contain;
+  cursor: zoom-out;
+  border-radius: 8px;
+}
+
+.ImageZoom-module_caption__6SFRA {
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+.ImageZoom-module_close__iEiwJ {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  margin: 0;
+  padding: 0;
+  color: #fff;
+  cursor: pointer;
+  background: rgb(255 255 255 / 12%);
+  border: 0;
+  border-radius: 50%;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.ImageZoom-module_close__iEiwJ:hover {
+  background: rgb(255 255 255 / 24%);
+}
+
+.ImageZoom-module_close__iEiwJ:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+
+}

package/esm/css/Input.css

@@ -26,7 +26,6 @@
   transition:
     border 0.2s ease 0s,
     color 0.2s ease 0s;
-  background-clip: padding-box;
 }
 
 .Input-module_inputWrapper__WpYTp:hover {
@@ -54,6 +53,7 @@
 
 .Input-module_inputWrapper__WpYTp.Input-module_hover__Gq-MR {
   border-color: var(--input-focus-border);
+  background-clip: padding-box;
 }
 
 .Input-module_input__hCma0 {

package/esm/css/Mention.css

@@ -0,0 +1,93 @@
+@layer Mention {
+.Mention-module_mention__R3-5t {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  font-size: var(--mention-font-size);
+  width: var(--mention-width);
+  height: var(--mention-height);
+  margin: var(--mention-margin-top) var(--mention-margin-right)
+    var(--mention-margin-bottom) var(--mention-margin-left);
+}
+
+.Mention-module_field__U5FXf {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 12.5em;
+  padding: 0.625em 0.875em;
+  font: inherit;
+  line-height: 1.5;
+  color: var(--mention-field-color);
+  background-color: var(--mention-field-bg);
+  border: 1px solid var(--mention-field-border);
+  border-radius: var(--mention-radius);
+  outline: none;
+  resize: vertical;
+  transition:
+    border-color 0.15s ease,
+    background-color 0.15s ease;
+}
+
+.Mention-module_field__U5FXf::placeholder {
+  color: var(--mention-placeholder-color);
+}
+
+.Mention-module_field__U5FXf:hover {
+  border-color: var(--mention-field-hover-border);
+  background-color: var(--mention-field-hover-bg);
+}
+
+.Mention-module_field__U5FXf:focus {
+  border-color: var(--mention-focus-border-color);
+  background-clip: padding-box;
+}
+
+.Mention-module_field__U5FXf:disabled {
+  cursor: not-allowed;
+}
+
+.Mention-module_list__QQ5RM,
+.Mention-module_empty__YkZOO {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: 1100;
+  box-sizing: border-box;
+  background-color: var(--mention-bg);
+  border: 1px solid var(--mention-border-color);
+  border-radius: var(--mention-radius);
+  box-shadow: var(--mention-shadow);
+}
+
+.Mention-module_list__QQ5RM {
+  max-height: 15em;
+  overflow-y: auto;
+  margin: 0;
+  padding: 0.25em;
+  list-style: none;
+}
+
+.Mention-module_option__8CupI {
+  padding: 0.5em 0.75em;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--mention-text-color);
+}
+
+.Mention-module_active__8GmDl {
+  background-color: var(--mention-active-bg);
+}
+
+.Mention-module_disabled__4PL94 {
+  cursor: not-allowed;
+  color: var(--mention-empty-color);
+}
+
+.Mention-module_empty__YkZOO {
+  padding: 0.75em;
+  color: var(--mention-empty-color);
+}
+
+}

package/esm/css/Menu-MenuList.css

@@ -10,7 +10,6 @@
   border-radius: var(--menu-list-radius);
   box-shadow: var(--menu-list-shadow);
   outline: none;
-  background-clip: padding-box;
 }
 
 .MenuList-module_sub__Bjn8e {

package/esm/css/Modal-ModalAction.css

@@ -1,8 +1,13 @@
 @layer Modal-ModalAction {
 .ModalAction-module_action__hEtmQ.ModalAction-module_btn__If5jI:hover,
-.ModalAction-module_action__hEtmQ.ModalAction-module_btn__If5jI:focus {
+.ModalAction-module_action__hEtmQ.ModalAction-module_btn__If5jI:focus-visible {
   color: var(--modal-action-hover-color);
   background-color: var(--modal-action-hover-bg);
 }
 
+/* Shrinking the pressed action exposes the footer around it as an edge */
+.ModalAction-module_action__hEtmQ.btn:active {
+  transform: none;
+}
+
 }

package/esm/css/Modal-ModalActions.css

@@ -10,8 +10,15 @@
   right: 0;
 }
 
-.ModalActions-module_footer__gDr-2 > button.btn + button.btn {
-  border-left: 1px solid var(--modal-actions-border);
+/* The action sets its border inline, so the divider is drawn as a pseudo-element */
+.ModalActions-module_footer__gDr-2 > button.btn + button.btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 1px;
+  background-color: var(--modal-actions-border);
 }
 
 .ModalActions-module_spacer__zek5w {

package/esm/css/NumberInput.css

@@ -13,7 +13,6 @@
   border-radius: var(--input-radius);
   background-color: var(--input-bg);
   transition: border 0.2s ease;
-  background-clip: padding-box;
 }
 
 .NumberInput-module_numberInput__hOY3x:hover {
@@ -23,6 +22,7 @@
 
 .NumberInput-module_numberInput__hOY3x:focus-within {
   border-color: var(--input-focus-border);
+  background-clip: padding-box;
 }
 
 .NumberInput-module_numberInput__hOY3x.NumberInput-module_disabled__gDhCu {

package/esm/css/PinInput.css

@@ -22,7 +22,6 @@
   transition:
     border-color 0.2s ease,
     background-color 0.2s ease;
-  background-clip: padding-box;
 }
 
 .PinInput-module_box__DIU85:hover {
@@ -32,6 +31,7 @@
 
 .PinInput-module_box__DIU85:focus {
   border-color: var(--input-focus-border);
+  background-clip: padding-box;
 }
 
 .PinInput-module_box__DIU85:disabled {

package/esm/css/Radio.css

@@ -53,7 +53,6 @@
   display: inline-grid;
   place-items: center;
   margin-right: calc(var(--radio-size) * 0.5);
-  background-clip: padding-box;
 }
 
 .Radio-module_point__O2nmm:before {

package/esm/css/SegmentedControl.css

@@ -8,7 +8,6 @@
   background-color: var(--segmented-bg);
   border: 1px solid var(--segmented-border);
   border-radius: var(--segmented-radius);
-  background-clip: padding-box;
 }
 
 }

package/esm/css/Select-SelectDropdown.css

@@ -10,7 +10,6 @@
   overflow-anchor: none;
   padding: 0.25em;
   scroll-behavior: smooth;
-  background-clip: padding-box;
 }
 
 }

package/esm/css/Select-SelectOption.css

@@ -21,7 +21,6 @@
     var(--select-option-padding-bottom) var(--select-option-padding-left);
   margin: var(--select-option-margin-top) var(--select-option-margin-right)
     var(--select-option-margin-bottom) var(--select-option-margin-left);
-  background-clip: padding-box;
 }
 
 .SelectOption-module_option__NAlFp:hover {

package/esm/css/Select.css

@@ -22,7 +22,6 @@
     var(--select-padding-bottom) var(--select-padding-left);
   margin: var(--select-margin-top) var(--select-margin-right)
     var(--select-margin-bottom) var(--select-margin-left);
-  background-clip: padding-box;
 }
 
 .Select-module_multiple__QrOT5 {