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

package/dist/css/Button-ButtonLoading.css

@@ -1,4 +1,4 @@
-@layer Button-ButtonLoading {
+@layer Button {
 .ButtonLoading-module_btnLoading__Rgay4 {
   position: absolute;
   top: 0;

package/dist/css/ButtonDropdown-ButtonDropdownItem.css

@@ -1,4 +1,4 @@
-@layer ButtonDropdown-ButtonDropdownItem {
+@layer ButtonDropdown {
 .ButtonDropdownItem-module_button__R-hYv {
   position: relative;
   -webkit-appearance: button;

package/dist/css/ButtonDropdown-Icon.css

@@ -1,4 +1,4 @@
-@layer ButtonDropdown-Icon {
+@layer ButtonDropdown {
 .Icon-module_icon__-dePv {
   transform: scale(0.6);
 }

package/dist/css/Card-CardContent.css

@@ -1,4 +1,4 @@
-@layer Card-CardContent {
+@layer Card {
 .CardContent-module_content__DDLlz > p:first-child {
   margin-top: 0;
 }

package/dist/css/Card-CardFooter.css

@@ -1,4 +1,4 @@
-@layer Card-CardFooter {
+@layer Card {
 .CardFooter-module_footer__8Kn09 {
   display: flex;
   align-items: center;

package/dist/css/Checkbox-CheckboxGroup.css

@@ -1,4 +1,4 @@
-@layer Checkbox-CheckboxGroup {
+@layer Checkbox {
 .CheckboxGroup-module_group__a5y2d label {
   margin-right: var(--checkbox-group-gap);
   --checkbox-size: var(--checkbox-group-item-size);

package/dist/css/Checkbox-CheckboxIcon.css

@@ -1,4 +1,4 @@
-@layer Checkbox-CheckboxIcon {
+@layer Checkbox {
 .CheckboxIcon-module_svg__-DjXx {
   display: inline-flex;
   width: calc(0.86 * var(--checkbox-size));

package/dist/css/Chip-ChipGroup.css

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

package/dist/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/dist/css/Collapse-CollapseGroup.css

@@ -1,4 +1,4 @@
-@layer Collapse-CollapseGroup {
+@layer Collapse {
 .CollapseGroup-module_collapseGroup__01F3X > div + div {
   border-top: none;
 }

package/dist/css/Collapse-CollapseIcon.css

@@ -1,4 +1,4 @@
-@layer Collapse-CollapseIcon {
+@layer Collapse {
 .CollapseIcon-module_svg__-RvD- {
   transition: transform 200ms ease;
   width: 1.5em;

package/dist/css/ColorInput.css

@@ -31,6 +31,7 @@
 
 .ColorInput-module_field__JQwJJ:focus-within {
   border-color: var(--colorinput-focus-border);
+  background-clip: padding-box;
 }
 
 .ColorInput-module_swatch__sLvyf {
@@ -41,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 {

package/dist/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 {

package/dist/css/Combobox.css

@@ -39,6 +39,7 @@
 
 .Combobox-module_input__ti3bv:focus {
   border-color: var(--combobox-focus-border-color);
+  background-clip: padding-box;
 }
 
 .Combobox-module_input__ti3bv:disabled {

package/dist/css/DatePicker.css

@@ -39,6 +39,7 @@
 
 .DatePicker-module_input__e7dhN:focus {
   border-color: var(--datepicker-focus-border-color);
+  background-clip: padding-box;
 }
 
 .DatePicker-module_input__e7dhN:disabled {

package/dist/css/DateRangePicker.css

@@ -33,6 +33,7 @@
 
 .DateRangePicker-module_field__4UZhH:focus-within {
   border-color: var(--daterange-focus-border-color);
+  background-clip: padding-box;
 }
 
 .DateRangePicker-module_input__h9sDj {

package/dist/css/Drawer-DrawerWrapper.css

@@ -1,4 +1,4 @@
-@layer Drawer-DrawerWrapper {
+@layer Drawer {
 .DrawerWrapper-module_wrapper__fBKjA {
   position: fixed;
   top: 0;

package/dist/css/Fieldset-FieldsetContent.css

@@ -1,4 +1,4 @@
-@layer Fieldset-FieldsetContent {
+@layer Fieldset {
 .FieldsetContent-module_content__x6tfV > *:first-child {
   margin-top: 0;
 }

package/dist/css/Fieldset-FieldsetFooter.css

@@ -1,4 +1,4 @@
-@layer Fieldset-FieldsetFooter {
+@layer Fieldset {
 .FieldsetFooter-module_footer__UiJ17 {
   display: flex;
   justify-content: space-between;

package/dist/css/Fieldset-FieldsetGroup.css

@@ -1,4 +1,4 @@
-@layer Fieldset-FieldsetGroup {
+@layer Fieldset {
 .FieldsetGroup-module_groupTabs__p2Txr {
   white-space: nowrap;
   overflow-y: hidden;

package/dist/css/Fieldset-FieldsetSubtitle.css

@@ -1,4 +1,4 @@
-@layer Fieldset-FieldsetSubtitle {
+@layer Fieldset {
 .FieldsetSubtitle-module_subtitle__h-9Hh {
   font-size: 0.875em;
   line-height: 1.6;

package/dist/css/Fieldset-FieldsetTitle.css

@@ -1,4 +1,4 @@
-@layer Fieldset-FieldsetTitle {
+@layer Fieldset {
 .FieldsetTitle-module_title__B1QAm {
   line-height: 1.5;
   display: inline-flex;

package/dist/css/Grid-BasicItem.css

@@ -1,4 +1,4 @@
-@layer Grid-BasicItem {
+@layer Grid {
 .BasicItem-module_item__Jar5a {
   font-size: var(--grid-font-size, inherit);
   height: var(--grid-height, auto);

package/dist/css/Image-ImageBrowser.css

@@ -1,4 +1,4 @@
-@layer Image-ImageBrowser {
+@layer Image {
 .ImageBrowser-module_title__8yGWk {
   font-size: 0.75em;
 }

package/dist/css/Image-ImageBrowserHttpsIcon.css

@@ -1,4 +1,4 @@
-@layer Image-ImageBrowserHttpsIcon {
+@layer Image {
 .ImageBrowserHttpsIcon-module_svg__xiI3S {
   width: 1em;
   height: 1em;

package/dist/css/Image-ImageSkeleton.css

@@ -1,4 +1,4 @@
-@layer Image-ImageSkeleton {
+@layer Image {
 .ImageSkeleton-module_skeleton__uWwK- {
   position: absolute;
   top: 0;

package/dist/css/Input-InputBlockLabel.css

@@ -1,4 +1,4 @@
-@layer Input-InputBlockLabel {
+@layer Input {
 .InputBlockLabel-module_label__uTays {
   display: block;
   font-weight: normal;

package/dist/css/Input-InputIcon.css

@@ -1,4 +1,4 @@
-@layer Input-InputIcon {
+@layer Input {
 .InputIcon-module_inputIcon__DYoco {
   box-sizing: border-box;
   display: inline-flex;

package/dist/css/Input-InputIconClear.css

@@ -1,4 +1,4 @@
-@layer Input-InputIconClear {
+@layer Input {
 .InputIconClear-module_clearIcon__2ODYc {
   box-sizing: border-box;
   display: inline-flex;

package/dist/css/Input-InputLabel.css

@@ -1,4 +1,4 @@
-@layer Input-InputLabel {
+@layer Input {
 .InputLabel-module_span__ek5IE {
   display: inline-flex;
   width: initial;

package/dist/css/Input.css

@@ -53,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/dist/css/Link-Icon.css

@@ -1,4 +1,4 @@
-@layer Link-Icon {
+@layer Link {
 .Icon-module_icon__CJT1r {
   margin: 0 0 -1px 0.1875em;
   display: inline-flex;

package/dist/css/MdxWidgets-MockPage.css

@@ -1,4 +1,4 @@
-@layer MdxWidgets-MockPage {
+@layer MdxWidgets {
 .MockPage-module_section__j-IxP {
   position: fixed;
   width: 100vw;

package/dist/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/dist/css/Menu-MenuItem.css

@@ -1,4 +1,4 @@
-@layer Menu-MenuItem {
+@layer Menu {
 .MenuItem-module_menuItem__hgTYG {
   display: flex;
   align-items: center;

package/dist/css/Menu-MenuList.css

@@ -1,4 +1,4 @@
-@layer Menu-MenuList {
+@layer Menu {
 .MenuList-module_menuList__8VtPL {
   box-sizing: border-box;
   min-width: 12em;

package/dist/css/Menu-MenuSub.css

@@ -1,4 +1,4 @@
-@layer Menu-MenuSub {
+@layer Menu {
 .MenuSub-module_menuSub__yZ0fN {
   position: relative;
 }

package/dist/css/Modal-ModalAction.css

@@ -1,8 +1,13 @@
-@layer Modal-ModalAction {
+@layer Modal {
 .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/dist/css/Modal-ModalActions.css

@@ -1,4 +1,4 @@
-@layer Modal-ModalActions {
+@layer Modal {
 .ModalActions-module_footer__gDr-2 {
   display: flex;
   overflow: hidden;
@@ -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/dist/css/Modal-ModalContent.css

@@ -1,4 +1,4 @@
-@layer Modal-ModalContent {
+@layer Modal {
 .ModalContent-module_content__RXGwI {
   position: relative;
   text-align: left;

package/dist/css/Modal-ModalSubtitle.css

@@ -1,4 +1,4 @@
-@layer Modal-ModalSubtitle {
+@layer Modal {
 .ModalSubtitle-module_subtitle__Hudi- {
   font-weight: normal;
   display: inline-block;

package/dist/css/Modal-ModalTitle.css

@@ -1,4 +1,4 @@
-@layer Modal-ModalTitle {
+@layer Modal {
 .ModalTitle-module_title__ThnLn {
   line-height: 1.6;
   font-weight: normal;

package/dist/css/Modal-ModalWrapper.css

@@ -1,4 +1,4 @@
-@layer Modal-ModalWrapper {
+@layer Modal {
 .ModalWrapper-module_wrapper__DGcJw {
   max-width: 100%;
   vertical-align: middle;

package/dist/css/NumberInput.css

@@ -22,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/dist/css/Page-PageHeader.css

@@ -1,4 +1,4 @@
-@layer Page-PageHeader {
+@layer Page {
 .PageHeader-module_center__yFLt0 {
   display: flex;
   justify-content: center;

package/dist/css/Pagination-PaginationEllipsis.css

@@ -1,4 +1,4 @@
-@layer Pagination-PaginationEllipsis {
+@layer Pagination {
 .PaginationEllipsis-module_svg__2Fipb {
   color: currentColor;
   stroke: currentColor;

package/dist/css/Pagination-PaginationItem.css

@@ -1,4 +1,4 @@
-@layer Pagination-PaginationItem {
+@layer Pagination {
 .PaginationItem-module_li__luFDz {
   margin-right: 0.428em;
   display: inline-block;

package/dist/css/PinInput.css

@@ -31,6 +31,7 @@
 
 .PinInput-module_box__DIU85:focus {
   border-color: var(--input-focus-border);
+  background-clip: padding-box;
 }
 
 .PinInput-module_box__DIU85:disabled {

package/dist/css/Popover-PopoverItem.css

@@ -1,4 +1,4 @@
-@layer Popover-PopoverItem {
+@layer Popover {
 .PopoverItem-module_item__ntzzC {
   display: flex;
   box-sizing: border-box;

package/dist/css/Radio-RadioGroup.css

@@ -1,4 +1,4 @@
-@layer Radio-RadioGroup {
+@layer Radio {
 .RadioGroup-module_radioGroup__6XPZE {
   display: flex;
 }

package/dist/css/SegmentedControl-SegmentedControlItem.css

@@ -1,4 +1,4 @@
-@layer SegmentedControl-SegmentedControlItem {
+@layer SegmentedControl {
 .SegmentedControlItem-module_item__R48V1 {
   position: relative;
   display: flex;

package/dist/css/Select-SelectDropdown.css

@@ -1,4 +1,4 @@
-@layer Select-SelectDropdown {
+@layer Select {
 .SelectDropdown-module_selectDropdown__gcGH- {
   border-radius: var(--select-dropdown-radius);
   border: 1px solid var(--select-dropdown-border);

package/dist/css/Select-SelectIcon.css

@@ -1,4 +1,4 @@
-@layer Select-SelectIcon {
+@layer Select {
 .SelectIcon-module_icon__vgja5 {
   color: inherit;
   stroke: currentColor;

package/dist/css/Select-SelectIconClear.css

@@ -1,4 +1,4 @@
-@layer Select-SelectIconClear {
+@layer Select {
 .SelectIconClear-module_clearIcon__p5IH4 {
   padding: 0 0 0 0.5em;
   margin: 0;

package/dist/css/Select-SelectInput.css

@@ -1,4 +1,4 @@
-@layer Select-SelectInput {
+@layer Select {
 .SelectInput-module_input__xsgNv {
   position: fixed;
   top: -10000px;

package/dist/css/Select-SelectMultipleValue.css

@@ -1,4 +1,4 @@
-@layer Select-SelectMultipleValue {
+@layer Select {
 .SelectMultipleValue-module_item__P4Dn3 {
   display: inline-flex;
   justify-items: center;

package/dist/css/Select-SelectOption.css

@@ -1,4 +1,4 @@
-@layer Select-SelectOption {
+@layer Select {
 .SelectOption-module_option__NAlFp {
   display: flex;
   max-width: 100%;

package/dist/css/Shared-backdrop.css

@@ -1,4 +1,4 @@
-@layer Shared-backdrop {
+@layer Shared {
 .backdrop-module_backdrop__fZn5s {
   position: fixed;
   top: 0;

package/dist/css/Shared-ellipsis.css

@@ -1,4 +1,4 @@
-@layer Shared-ellipsis {
+@layer Shared {
 .ellipsis-module_ellipsis__kLorN {
   overflow: hidden;
   text-overflow: ellipsis;

package/dist/css/Slider-SliderDot.css

@@ -1,4 +1,4 @@
-@layer Slider-SliderDot {
+@layer Slider {
 .SliderDot-module_dot__1VxCn {
   position: absolute;
   top: 50%;

package/dist/css/Slider-SliderMark.css

@@ -1,4 +1,4 @@
-@layer Slider-SliderMark {
+@layer Slider {
 .SliderMark-module_span__gKYKM {
   position: absolute;
   width: 2px;