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

package/dist/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/dist/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/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,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/dist/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/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,
@@ -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/dist/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/dist/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/dist/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/dist/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/dist/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);
+}
+
+}

package/dist/css/TagsInput.css

@@ -0,0 +1,99 @@
+@layer TagsInput {
+.TagsInput-module_withLabel__-n8Kq {
+  display: inline-block;
+  box-sizing: border-box;
+}
+
+.TagsInput-module_field__ieR7N {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375em;
+  box-sizing: border-box;
+  min-height: var(--input-height);
+  padding: 0.25em 0.625em;
+  border: 1px solid var(--input-border);
+  border-radius: var(--input-radius);
+  background-color: var(--input-bg);
+  cursor: text;
+  transition: border 0.2s ease;
+}
+
+.TagsInput-module_field__ieR7N:hover {
+  border-color: var(--input-hover-border);
+  background-color: var(--input-hover-bg);
+}
+
+.TagsInput-module_field__ieR7N:focus-within {
+  border-color: var(--input-focus-border);
+}
+
+.TagsInput-module_field__ieR7N.TagsInput-module_disabled__cCN-w {
+  cursor: not-allowed;
+}
+
+.TagsInput-module_tag__dhER4 {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25em;
+  box-sizing: border-box;
+  max-width: 100%;
+  padding: 0.125em 0.25em 0.125em 0.625em;
+  line-height: 1.5;
+  color: var(--tag-color);
+  background-color: var(--tag-bg);
+  border-radius: calc(var(--input-radius) - 2px);
+  overflow-wrap: anywhere;
+}
+
+.TagsInput-module_remove__oullb {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0.125em;
+  font: inherit;
+  color: var(--tag-remove-color);
+  background-color: none;
+  border: 0;
+  border-radius: 50%;
+  appearance: none;
+  -webkit-appearance: none;
+  cursor: pointer;
+}
+
+.TagsInput-module_remove__oullb:hover:not(:disabled) {
+  color: var(--tag-remove-hover-color);
+}
+
+.TagsInput-module_remove__oullb:focus-visible {
+  outline: 2px solid var(--input-focus-border);
+}
+
+.TagsInput-module_remove__oullb:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.TagsInput-module_input__RFYNn {
+  flex: 1;
+  min-width: 6em;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  color: var(--input-color);
+  background-color: transparent;
+  border: none;
+  outline: none;
+}
+
+.TagsInput-module_input__RFYNn::placeholder {
+  color: var(--input-placeholder-color);
+}
+
+.TagsInput-module_input__RFYNn:disabled {
+  cursor: not-allowed;
+}
+
+}

package/dist/css/Tour.css

@@ -0,0 +1,81 @@
+@layer Tour {
+.Tour-module_tour__FLAxG {
+  position: fixed;
+  inset: 0;
+  z-index: 1300;
+}
+
+/* the page is dimmed by a shadow around the target, so the target itself
+   stays clear */
+.Tour-module_spotlight__o7ukV {
+  position: fixed;
+  pointer-events: none;
+  border-radius: 8px;
+  box-shadow: 0 0 0 100vmax var(--tour-dim);
+  transition:
+    left 0.2s ease,
+    top 0.2s ease,
+    width 0.2s ease,
+    height 0.2s ease;
+}
+
+.Tour-module_dim__ZPmGZ {
+  position: fixed;
+  inset: 0;
+  background: var(--tour-dim);
+}
+
+.Tour-module_card__p9LCI {
+  position: fixed;
+  box-sizing: border-box;
+  max-width: calc(100vw - 16px);
+  padding: 1rem;
+  color: var(--tour-color);
+  background: var(--tour-bg);
+  border-radius: var(--tour-radius);
+  box-shadow: var(--tour-shadow);
+  outline: none;
+}
+
+.Tour-module_centered__KJvbZ {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.Tour-module_count__2K7-G {
+  font-size: 0.75rem;
+  color: var(--tour-muted);
+}
+
+.Tour-module_title__Z-spV {
+  margin-top: 0.25rem;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.Tour-module_content__qLvnb {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--tour-muted);
+}
+
+.Tour-module_actions__HKbHi {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.Tour-module_spacer__dkdPy {
+  flex: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .Tour-module_spotlight__o7ukV {
+    transition: none;
+  }
+}
+
+}

package/dist/css/Tree.css

@@ -0,0 +1,88 @@
+@layer Tree {
+.Tree-module_tree__2jgbS {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: var(--tree-color);
+}
+
+.Tree-module_group__H2325 {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.Tree-module_item__wk8rO {
+  margin: 0;
+  padding: 0;
+  outline: none;
+}
+
+.Tree-module_row__lm4LA {
+  display: flex;
+  align-items: center;
+  gap: 0.375em;
+  box-sizing: border-box;
+  padding: 0.375em 0.5em 0.375em calc(0.5em + var(--tree-level) * 1.25em);
+  cursor: pointer;
+  user-select: none;
+  border-radius: var(--tree-radius);
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.Tree-module_row__lm4LA:hover {
+  background: var(--tree-hover-bg);
+}
+
+.Tree-module_selected__DwSTb,
+.Tree-module_selected__DwSTb:hover {
+  color: var(--tree-selected-color);
+  background: var(--tree-selected-bg);
+}
+
+.Tree-module_item__wk8rO:focus-visible > .Tree-module_row__lm4LA {
+  outline: 2px solid var(--tree-focus);
+  outline-offset: -2px;
+}
+
+.Tree-module_disabled__9ghlS,
+.Tree-module_disabled__9ghlS:hover {
+  color: var(--tree-disabled-color);
+  cursor: not-allowed;
+  background: transparent;
+}
+
+.Tree-module_chevron__V-147 {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 1em;
+  height: 1em;
+}
+
+.Tree-module_chevronIcon__YhP38 {
+  transition: transform 0.15s ease;
+}
+
+.Tree-module_open__kBS5H {
+  transform: rotate(90deg);
+}
+
+.Tree-module_icon__wiWbw {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--tree-icon-color);
+}
+
+.Tree-module_label__EoRFb {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+}