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

package/esm/css/Dropzone.css

@@ -0,0 +1,160 @@
+@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;
+}
+
+.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);
+}
+
+.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;
+}
+
+.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/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

@@ -22,7 +22,7 @@
   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;
@@ -30,7 +30,7 @@
 
 .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 +101,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/esm/css/NumberInput.css

@@ -11,13 +11,13 @@
   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;
 }
 
 .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 +36,7 @@
   padding: 0;
   font: inherit;
   color: var(--input-color);
-  background: transparent;
+  background-color: transparent;
   border: none;
   outline: none;
 }
@@ -60,7 +60,7 @@
   padding: 0;
   font: inherit;
   color: var(--control-color);
-  background: none;
+  background-color: none;
   border: 0;
   appearance: none;
   -webkit-appearance: none;

package/esm/css/PinInput.css

@@ -0,0 +1,40 @@
+@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;
+}
+
+.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/esm/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/esm/css/SegmentedControl.css

@@ -0,0 +1,13 @@
+@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);
+}
+
+}

package/esm/css/Select-SelectDropdown.css

@@ -1,12 +1,14 @@
 @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;
 }
 

package/esm/css/Select-SelectMultipleValue.css

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

package/esm/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,
@@ -24,14 +24,28 @@
 }
 
 .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 +58,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/esm/css/Select.css

@@ -15,7 +15,7 @@
   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)
@@ -65,6 +65,7 @@
   padding: 0;
   margin: 0;
   color: inherit;
+  font-weight: inherit;
 }
 
 .Select-module_placeholder__dhhM0 {

package/esm/css/Splitter.css

@@ -0,0 +1,77 @@
+@layer Splitter {
+.Splitter-module_splitter__ZxGeO {
+  display: grid;
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+}
+
+.Splitter-module_horizontal__1LuP6 {
+  grid-template-columns: var(--splitter-template);
+  grid-template-rows: minmax(0, 1fr);
+}
+
+.Splitter-module_vertical__APNTT {
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: var(--splitter-template);
+}
+
+/* the panels share the room in proportion to their size, and the lines keep
+   their own width */
+.Splitter-module_panel__UyXwt {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+.Splitter-module_handle__zkBUq {
+  position: relative;
+  background: var(--splitter-line);
+  outline: none;
+  touch-action: none;
+  transition: background-color 0.15s ease;
+}
+
+.Splitter-module_horizontal__1LuP6 > .Splitter-module_handle__zkBUq {
+  width: 1px;
+  cursor: col-resize;
+}
+
+.Splitter-module_vertical__APNTT > .Splitter-module_handle__zkBUq {
+  height: 1px;
+  cursor: row-resize;
+}
+
+/* a wider area to grab, around the line */
+.Splitter-module_handle__zkBUq::before {
+  position: absolute;
+  content: '';
+}
+
+.Splitter-module_horizontal__1LuP6 > .Splitter-module_handle__zkBUq::before {
+  inset: 0 -4px;
+}
+
+.Splitter-module_vertical__APNTT > .Splitter-module_handle__zkBUq::before {
+  inset: -4px 0;
+}
+
+.Splitter-module_handle__zkBUq:hover,
+.Splitter-module_handle__zkBUq:focus-visible,
+.Splitter-module_handle__zkBUq:active {
+  background: var(--splitter-active);
+}
+
+.Splitter-module_horizontal__1LuP6 > .Splitter-module_handle__zkBUq:hover,
+.Splitter-module_horizontal__1LuP6 > .Splitter-module_handle__zkBUq:focus-visible,
+.Splitter-module_horizontal__1LuP6 > .Splitter-module_handle__zkBUq:active {
+  box-shadow: 0 0 0 1px var(--splitter-active);
+}
+
+.Splitter-module_vertical__APNTT > .Splitter-module_handle__zkBUq:hover,
+.Splitter-module_vertical__APNTT > .Splitter-module_handle__zkBUq:focus-visible,
+.Splitter-module_vertical__APNTT > .Splitter-module_handle__zkBUq:active {
+  box-shadow: 0 0 0 1px var(--splitter-active);
+}
+
+}

package/esm/css/Table-TableBody.css

@@ -24,4 +24,14 @@
   flex-flow: row wrap;
 }
 
+.TableBody-module_selected__7adtQ,
+.TableBody-module_selected__7adtQ:hover {
+  background-color: var(--table-body-selected-bg);
+}
+
+.TableBody-module_tr__lTn-M td.TableBody-module_selectCell__S8ZZn {
+  width: 1%;
+  white-space: nowrap;
+}
+
 }

package/esm/css/Table-TableHead.css

@@ -44,4 +44,45 @@
   text-transform: uppercase;
 }
 
+.TableHead-module_selectCell__JRdGg {
+  width: 1%;
+  white-space: nowrap;
+}
+
+.TableHead-module_sortButton__whwp3 {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375em;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  text-transform: inherit;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.TableHead-module_sortButton__whwp3:hover {
+  color: var(--table-head-sorted-color);
+}
+
+.TableHead-module_sortButton__whwp3:focus-visible {
+  outline: 2px solid var(--table-head-focus-color);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+.TableHead-module_sortIcon__VsHqp {
+  opacity: 0.5;
+  transition: opacity 0.15s ease;
+}
+
+.TableHead-module_sorted__-6XtK {
+  color: var(--table-head-sorted-color);
+  opacity: 1;
+}
+
 }

package/esm/css/Table-TableSelectBox.css

@@ -0,0 +1,11 @@
+@layer Table-TableSelectBox {
+.TableSelectBox-module_box__UXj-E {
+  display: block;
+  width: 1em;
+  height: 1em;
+  margin: 0;
+  cursor: pointer;
+  accent-color: var(--table-select-accent);
+}
+
+}