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

package/dist/css/Combobox.css

@@ -26,6 +26,7 @@
   transition:
     border-color 0.15s ease,
     background-color 0.15s ease;
+  background-clip: padding-box;
 }
 
 .Combobox-module_input__ti3bv::placeholder {
@@ -57,6 +58,7 @@
   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/dist/css/ContextMenu.css

@@ -0,0 +1,17 @@
+@layer ContextMenu {
+.ContextMenu-module_area__IAOF5 {
+  box-sizing: border-box;
+}
+
+/* the anchor of the menu is only a point: nothing to see or to reach */
+.ContextMenu-module_trigger__OY2LR {
+  display: block;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+}
+
+}

package/dist/css/DatePicker.css

@@ -26,6 +26,7 @@
   transition:
     border-color 0.15s ease,
     background-color 0.15s ease;
+  background-clip: padding-box;
 }
 
 .DatePicker-module_input__e7dhN::placeholder {
@@ -56,11 +57,12 @@
   height: var(--datepicker-input-height);
   color: var(--datepicker-toggle-color);
   cursor: pointer;
-  background: transparent;
+  background-color: transparent;
   border: 0;
   border-radius: var(--datepicker-radius);
   appearance: none;
   -webkit-appearance: none;
+  background-clip: padding-box;
 }
 
 .DatePicker-module_toggle__I8ARg:hover:not(:disabled) {
@@ -87,6 +89,7 @@
   border: 1px solid var(--datepicker-border-color);
   border-radius: var(--datepicker-popup-radius);
   box-shadow: var(--datepicker-shadow);
+  background-clip: padding-box;
 }
 
 }

package/dist/css/DateRangePicker.css

@@ -0,0 +1,110 @@
+@layer DateRangePicker {
+.DateRangePicker-module_daterange__id9HF {
+  position: relative;
+  display: inline-block;
+  font-size: var(--daterange-font-size);
+  width: var(--daterange-width);
+  height: var(--daterange-height);
+  padding: var(--daterange-padding-top) var(--daterange-padding-right)
+    var(--daterange-padding-bottom) var(--daterange-padding-left);
+  margin: var(--daterange-margin-top) var(--daterange-margin-right)
+    var(--daterange-margin-bottom) var(--daterange-margin-left);
+}
+
+.DateRangePicker-module_field__4UZhH {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: var(--daterange-input-height);
+  padding-left: 0.875em;
+  color: var(--daterange-field-color);
+  background-color: var(--daterange-field-bg);
+  border: 1px solid var(--daterange-field-border);
+  border-radius: var(--daterange-radius);
+  transition:
+    border-color 0.15s ease,
+    background-color 0.15s ease;
+  background-clip: padding-box;
+}
+
+.DateRangePicker-module_field__4UZhH:hover {
+  border-color: var(--daterange-field-hover-border);
+  background-color: var(--daterange-field-hover-bg);
+}
+
+.DateRangePicker-module_field__4UZhH:focus-within {
+  border-color: var(--daterange-focus-border-color);
+}
+
+.DateRangePicker-module_input__h9sDj {
+  flex: none;
+  box-sizing: border-box;
+  width: 7em;
+  height: 100%;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  background-color: transparent;
+  border: 0;
+  outline: none;
+}
+
+.DateRangePicker-module_input__h9sDj::placeholder {
+  color: var(--daterange-placeholder-color);
+}
+
+.DateRangePicker-module_input__h9sDj:disabled {
+  cursor: not-allowed;
+}
+
+.DateRangePicker-module_separator__StR3E {
+  padding: 0 0.5em;
+  color: var(--daterange-separator-color);
+}
+
+.DateRangePicker-module_toggle__gNukh {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  width: calc(var(--daterange-input-height) - 2px);
+  height: 100%;
+  padding: 0;
+  color: var(--daterange-toggle-color);
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  border-radius: var(--daterange-radius);
+  appearance: none;
+  -webkit-appearance: none;
+  background-clip: padding-box;
+}
+
+.DateRangePicker-module_toggle__gNukh:hover:not(:disabled) {
+  color: var(--daterange-toggle-hover-color);
+}
+
+.DateRangePicker-module_toggle__gNukh:focus-visible {
+  outline: 2px solid var(--daterange-focus-border-color);
+  outline-offset: -2px;
+}
+
+.DateRangePicker-module_toggle__gNukh:disabled {
+  cursor: not-allowed;
+}
+
+.DateRangePicker-module_popup__hKExw {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: 1100;
+  padding: 0.75em;
+  background-color: var(--daterange-bg);
+  border: 1px solid var(--daterange-border-color);
+  border-radius: var(--daterange-popup-radius);
+  box-shadow: var(--daterange-shadow);
+  background-clip: padding-box;
+}
+
+}

package/dist/css/Dropzone.css

@@ -0,0 +1,163 @@
+@layer Dropzone {
+.Dropzone-module_dropzone__-6nFN {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+}
+
+.Dropzone-module_input__-FpKo {
+  position: absolute;
+  opacity: 0;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  font-size: 0;
+}
+
+.Dropzone-module_content__Uafwo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5em;
+  box-sizing: border-box;
+  min-height: 8em;
+  padding: 1.5em;
+  text-align: center;
+  color: var(--dropzone-color);
+  background-color: var(--dropzone-bg);
+  border: 1px dashed var(--dropzone-border);
+  border-radius: var(--dropzone-radius);
+  cursor: pointer;
+  transition:
+    border-color 0.2s ease,
+    background-color 0.2s ease;
+  background-clip: padding-box;
+}
+
+.Dropzone-module_dropzone__-6nFN:hover .Dropzone-module_content__Uafwo {
+  border-color: var(--dropzone-hover-border);
+}
+
+.Dropzone-module_dragging__z9VG8 .Dropzone-module_content__Uafwo {
+  border-color: var(--dropzone-active);
+  background-color: color-mix(in srgb, var(--dropzone-active) 8%, var(--dropzone-bg));
+}
+
+.Dropzone-module_input__-FpKo:focus-visible + .Dropzone-module_content__Uafwo {
+  border-color: var(--dropzone-active);
+  outline: 2px solid var(--dropzone-active);
+  outline-offset: 2px;
+}
+
+.Dropzone-module_disabled__rvXlc .Dropzone-module_content__Uafwo {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.Dropzone-module_disabled__rvXlc:hover .Dropzone-module_content__Uafwo {
+  border-color: var(--dropzone-border);
+}
+
+.Dropzone-module_thumbnails__x67bm {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75em;
+  margin: 0.75em 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.Dropzone-module_thumbnail__-ke6R {
+  width: 6em;
+  margin: 0;
+  padding: 0;
+}
+
+.Dropzone-module_tile__o-TLL {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 6em;
+  height: 6em;
+  overflow: hidden;
+  color: var(--dropzone-tile-color);
+  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 {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.Dropzone-module_fileIcon__hnpZV {
+  flex-shrink: 0;
+}
+
+.Dropzone-module_format__oEMEw {
+  position: absolute;
+  bottom: 0.375em;
+  left: 0.375em;
+  padding: 0.125em 0.4em;
+  font-size: 0.75em;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--dropzone-badge-color);
+  background-color: var(--dropzone-badge-bg);
+  border-radius: 4px;
+}
+
+.Dropzone-module_remove__pjfHy {
+  position: absolute;
+  top: 0.25em;
+  right: 0.25em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75em;
+  height: 1.75em;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  color: var(--dropzone-remove-color);
+  cursor: pointer;
+  background-color: var(--dropzone-remove-bg);
+  border: 1px solid var(--dropzone-border);
+  border-radius: 50%;
+  appearance: none;
+  -webkit-appearance: none;
+  background-clip: padding-box;
+}
+
+.Dropzone-module_remove__pjfHy:hover:not(:disabled) {
+  color: var(--dropzone-remove-hover-color);
+}
+
+.Dropzone-module_remove__pjfHy:focus-visible {
+  outline: 2px solid var(--dropzone-active);
+  outline-offset: 1px;
+}
+
+.Dropzone-module_remove__pjfHy:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.Dropzone-module_name__OAPKM {
+  display: block;
+  margin-top: 0.375em;
+  overflow: hidden;
+  font-size: 0.8125em;
+  color: var(--dropzone-name-color);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+}

package/dist/css/Fieldset-FieldsetGroup.css

@@ -35,6 +35,7 @@
   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/dist/css/Input.css

@@ -22,15 +22,16 @@
   box-sizing: border-box;
   border: 1px solid var(--input-border);
   border-radius: var(--input-radius);
-  background: var(--input-bg);
+  background-color: var(--input-bg);
   transition:
     border 0.2s ease 0s,
     color 0.2s ease 0s;
+  background-clip: padding-box;
 }
 
 .Input-module_inputWrapper__WpYTp:hover {
   border-color: var(--input-hover-border);
-  background: var(--input-hover-bg);
+  background-color: var(--input-hover-bg);
 }
 
 .Input-module_inputWrapper__WpYTp.Input-module_leftLabel__7MeVJ {
@@ -101,7 +102,7 @@
   transform: translateY(-50%);
   padding: 0 4px;
   color: var(--input-placeholder-color, inherit);
-  background: var(--input-floating-bg);
+  background-color: var(--input-floating-bg);
   pointer-events: none;
   transition:
     top 0.15s ease,

package/dist/css/Menu-MenuList.css

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

package/dist/css/NumberInput.css

@@ -11,13 +11,14 @@
   height: var(--input-height);
   border: 1px solid var(--input-border);
   border-radius: var(--input-radius);
-  background: var(--input-bg);
+  background-color: var(--input-bg);
   transition: border 0.2s ease;
+  background-clip: padding-box;
 }
 
 .NumberInput-module_numberInput__hOY3x:hover {
   border-color: var(--input-hover-border);
-  background: var(--input-hover-bg);
+  background-color: var(--input-hover-bg);
 }
 
 .NumberInput-module_numberInput__hOY3x:focus-within {
@@ -36,7 +37,7 @@
   padding: 0;
   font: inherit;
   color: var(--input-color);
-  background: transparent;
+  background-color: transparent;
   border: none;
   outline: none;
 }
@@ -60,7 +61,7 @@
   padding: 0;
   font: inherit;
   color: var(--control-color);
-  background: none;
+  background-color: none;
   border: 0;
   appearance: none;
   -webkit-appearance: none;

package/dist/css/PinInput.css

@@ -0,0 +1,41 @@
+@layer PinInput {
+.PinInput-module_pin__XgaDZ {
+  display: inline-flex;
+  gap: 0.5em;
+  box-sizing: border-box;
+}
+
+.PinInput-module_box__DIU85 {
+  box-sizing: border-box;
+  width: var(--pin-size);
+  height: var(--pin-size);
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  font-weight: 500;
+  text-align: center;
+  color: var(--input-color);
+  background-color: var(--input-bg);
+  border: 1px solid var(--input-border);
+  border-radius: var(--input-radius);
+  outline: none;
+  transition:
+    border-color 0.2s ease,
+    background-color 0.2s ease;
+  background-clip: padding-box;
+}
+
+.PinInput-module_box__DIU85:hover {
+  border-color: var(--input-hover-border);
+  background-color: var(--input-hover-bg);
+}
+
+.PinInput-module_box__DIU85:focus {
+  border-color: var(--input-focus-border);
+}
+
+.PinInput-module_box__DIU85:disabled {
+  cursor: not-allowed;
+}
+
+}

package/dist/css/Radio.css

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

package/dist/css/SegmentedControl-SegmentedControlItem.css

@@ -0,0 +1,65 @@
+@layer SegmentedControl-SegmentedControlItem {
+.SegmentedControlItem-module_item__R48V1 {
+  position: relative;
+  display: flex;
+  flex: 1 1 auto;
+}
+
+.SegmentedControlItem-module_input__Q8UWL {
+  position: absolute;
+  opacity: 0;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  font-size: 0;
+}
+
+.SegmentedControlItem-module_text__7YVZC {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5em;
+  box-sizing: border-box;
+  padding: 0 0.875em;
+  font-weight: 500;
+  white-space: nowrap;
+  color: var(--segmented-color);
+  border-radius: calc(var(--segmented-radius) - 2px);
+  cursor: pointer;
+  user-select: none;
+  transition:
+    color 0.15s ease,
+    background-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.SegmentedControlItem-module_text__7YVZC:hover {
+  color: var(--segmented-hover-color);
+}
+
+.SegmentedControlItem-module_input__Q8UWL:checked + .SegmentedControlItem-module_text__7YVZC {
+  color: var(--segmented-active-color);
+  background: var(--segmented-active-bg);
+  box-shadow: var(--segmented-shadow);
+}
+
+.SegmentedControlItem-module_input__Q8UWL:focus-visible + .SegmentedControlItem-module_text__7YVZC {
+  box-shadow: 0 0 0 2px var(--segmented-focus);
+}
+
+.SegmentedControlItem-module_input__Q8UWL:disabled + .SegmentedControlItem-module_text__7YVZC {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.SegmentedControlItem-module_input__Q8UWL:disabled + .SegmentedControlItem-module_text__7YVZC:hover {
+  color: var(--segmented-color);
+}
+
+.SegmentedControlItem-module_input__Q8UWL:disabled:checked + .SegmentedControlItem-module_text__7YVZC:hover {
+  color: var(--segmented-active-color);
+}
+
+}

package/dist/css/SegmentedControl.css

@@ -0,0 +1,14 @@
+@layer SegmentedControl {
+.SegmentedControl-module_segmented__DCgXM {
+  display: flex;
+  align-items: stretch;
+  box-sizing: border-box;
+  gap: 2px;
+  padding: 3px;
+  background-color: var(--segmented-bg);
+  border: 1px solid var(--segmented-border);
+  border-radius: var(--segmented-radius);
+  background-clip: padding-box;
+}
+
+}

package/dist/css/Select-SelectDropdown.css

@@ -1,13 +1,16 @@
 @layer Select-SelectDropdown {
 .SelectDropdown-module_selectDropdown__gcGH- {
   border-radius: var(--select-dropdown-radius);
+  border: 1px solid var(--select-dropdown-border);
   box-shadow: var(--select-dropdown-shadow);
   background-color: var(--select-dropdown-bg);
-  max-height: 17em;
+  color: var(--select-dropdown-color);
+  max-height: 15em;
   overflow-y: auto;
   overflow-anchor: none;
-  padding: 0.38em 0;
+  padding: 0.25em;
   scroll-behavior: smooth;
+  background-clip: padding-box;
 }
 
 }

package/dist/css/Select-SelectMultipleValue.css

@@ -19,6 +19,7 @@
   padding: 0;
   margin: 0;
   color: inherit;
+  font-weight: inherit;
 }
 
 }

package/dist/css/Select-SelectOption.css

@@ -6,10 +6,10 @@
   justify-content: flex-start;
   align-items: center;
   font-weight: normal;
-  background-color: var(--select-option-bg);
-  color: var(--select-option-color);
+  color: inherit;
   user-select: none;
   border: 0;
+  border-radius: 4px;
   cursor: var(--select-option-cursor);
   transition:
     background 0.2s ease 0s,
@@ -21,17 +21,32 @@
     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 {
-  background-color: var(--select-option-hover-bg);
-  color: var(--select-option-hover-color);
+  background-color: color-mix(in srgb, currentColor 12%, transparent);
+}
+
+.SelectOption-module_label__NtVM7:hover,
+.SelectOption-module_divider__mmqJj:hover {
+  background-color: transparent;
+}
+
+.SelectOption-module_disabled__cDMWS,
+.SelectOption-module_disabled__cDMWS:hover {
+  opacity: 0.5;
+  background-color: transparent;
+}
+
+.SelectOption-module_selected__HOwTO {
+  font-weight: 600;
 }
 
 .SelectOption-module_divider__mmqJj {
   line-height: 0;
   overflow: hidden;
-  border-top: 1px solid var(--select-option-divider-border);
+  border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
   width: var(--select-option-width);
   height: var(--select-option-divider-height);
   padding: var(--select-option-divider-padding-top)
@@ -44,9 +59,15 @@
     var(--select-option-divider-margin-left);
 }
 
+.SelectOption-module_label__NtVM7:not(:first-child) {
+  margin-top: 0.25em;
+}
+
 .SelectOption-module_label__NtVM7 {
-  color: var(--select-option-label-color);
-  border-bottom: 1px solid var(--select-option-divider-border);
+  color: color-mix(in srgb, currentColor 80%, transparent);
+  border-radius: 0;
+  margin-bottom: 0.25em;
+  border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent);
   text-transform: capitalize;
   cursor: default;
   font-size: var(--select-option-label-font-size);

package/dist/css/Select.css

@@ -15,13 +15,14 @@
   border: 1px solid var(--select-border-color);
   border-radius: var(--select-radius);
   background-color: var(--select-bg-color);
-  min-width: 11.5em;
+  min-width: 12.5em;
   width: var(--select-width);
   height: var(--select-height);
   padding: var(--select-padding-top) var(--select-padding-right)
     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 {
@@ -65,6 +66,7 @@
   padding: 0;
   margin: 0;
   color: inherit;
+  font-weight: inherit;
 }
 
 .Select-module_placeholder__dhhM0 {