bromcom-ui 2.8.0-rc.10-c → 2.8.0-rc.10-e

package/dist/collection/components/molecules/{colorful/colorful.css → radio/radio.css}

@@ -125,9 +125,7 @@
   margin-right: 8px;
 }
 
-:root,
-::after,
-::before {
+:root {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -430,9 +428,7 @@
   min-height: calc(14px + 8px);
 }
 
-:root,
-::after,
-::before {
+:root {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -780,9 +776,7 @@
   margin: 0;
 }
 
-:root,
-::after,
-::before {
+:root {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -1036,218 +1030,251 @@
   box-sizing: border-box;
 }
 
-.bcm-input {
+.bcm-checkbox {
+  outline: none;
+  border: none;
+  --bcm-checkbox-primary-color-default: var(--bcm-new-ds-color-blue-500);
+  --bcm-checkbox-secondary-color-default: var(--bcm-new-ds-color-white);
+  --bcm-checkbox-primary-color-hover: var(--bcm-new-ds-color-blue-600);
+  --bcm-checkbox-secondary-color-hover: var(--bcm-new-ds-color-slate-50);
+  --bcm-checkbox-primary-color-focus-visible: var(--bcm-new-ds-color-blue-800);
+  --bcm-checkbox-secondary-color-focus-visible: var(--bcm-new-ds-color-slate-50);
+  --bcm-checkbox-primary-color-active: var(--bcm-new-ds-color-blue-700);
+  --bcm-checkbox-secondary-color-active: var(--bcm-new-ds-color-slate-50);
+  --bcm-checkbox-primary-color-disabled: var(--bcm-new-ds-color-slate-300);
+  --bcm-checkbox-secondary-color-disabled: var(--bcm-new-ds-color-slate-200);
   display: inline-flex;
+  width: fit-content;
   flex-direction: column;
-  width: 100%;
-  max-width: 256px;
   margin-bottom: 8px;
 }
-.bcm-input.full-width {
-  max-width: 100%;
+.bcm-checkbox:focus, .bcm-checkbox:hover, .bcm-checkbox:active {
+  outline: none;
+  border: none;
 }
-.bcm-input.hidden {
-  display: none;
+.bcm-checkbox * {
+  box-sizing: border-box;
 }
-.bcm-input__container {
-  font-family: "Inter", sans-serif;
-  font-size: 14px;
-  line-height: calc(14px + 8px);
-  font-weight: 400;
+.bcm-checkbox input[type=radio],
+.bcm-checkbox input[type=checkbox] {
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: #fff;
+  margin: 0;
+}
+.bcm-checkbox__input {
   display: flex;
-  align-items: stretch;
   flex-direction: row;
-  background-color: var(--bcm-new-ds-color-white);
-  border: 1px solid var(--bcm-new-ds-color-slate-300);
-  border-radius: 4px;
-  box-sizing: border-box;
-  cursor: text;
-  padding: 0 0 0 4px;
-  position: relative;
-  width: 100%;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+  padding-top: 4px;
 }
-.bcm-input__container.disabled {
-  background-color: var(--bcm-new-ds-color-slate-50);
-  cursor: not-allowed;
+.bcm-checkbox.hidden {
+  display: none;
 }
-.bcm-input__container.disabled .bcm-input-element {
-  color: var(--bcm-new-ds-color-slate-500);
+.bcm-checkbox :hover {
+  cursor: pointer;
 }
-.bcm-input__container.readonly {
-  background-color: var(--bcm-new-ds-color-slate-50);
-  cursor: default;
+.bcm-checkbox[disabled] :hover, .bcm-checkbox.disabled :hover {
+  cursor: not-allowed;
 }
-.bcm-input__container.readonly .bcm-input-element {
+.bcm-checkbox .slot {
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  line-height: calc(14px + 8px);
+  font-weight: 400;
+  font-weight: 500;
   color: var(--bcm-new-ds-color-slate-600);
 }
-.bcm-input__container:not(.disabled):hover .caret-container, .bcm-input__container:not(.disabled).focused .caret-container {
-  opacity: 1;
+.bcm-checkbox .slot:not(:empty) {
+  margin-left: 8px;
+  margin-right: 8px;
 }
-.bcm-input__container:not(.disabled):hover .input-clear-button, .bcm-input__container:not(.disabled).focused .input-clear-button {
-  opacity: 1;
+.bcm-checkbox-size-small .slot {
+  font-size: 12px;
+  line-height: calc(12px + 8px);
+  margin-top: -2.5px;
 }
-.bcm-input__container:not(.disabled).focused {
-  background-color: var(--bcm-new-ds-color-slate-50);
+.bcm-checkbox-size-small .bcm-checkbox__input {
+  min-height: calc(24px - 4px);
 }
-.bcm-input__container:not(.disabled):hover {
-  border-color: var(--bcm-color-prime-blue-6);
+.bcm-checkbox-size-small .bcm-checkbox__label-icon {
+  width: 14px;
+  height: 14px;
+  min-width: 14px;
+  font-size: calc(10px - 2px);
 }
-.bcm-input__container.empty .input-clear-button {
-  display: none;
+.bcm-checkbox-size-medium .slot {
+  font-size: calc(12px + 1px);
+  line-height: calc(12px + 8px);
+  margin-top: -1.5px;
 }
-.bcm-input__container.invalid, .bcm-input__container.error {
-  border-color: var(--bcm-new-ds-color-red-500);
+.bcm-checkbox-size-medium .bcm-checkbox__input {
+  min-height: calc(32px - 4px);
 }
-.bcm-input__container .bcm-input-element {
-  width: 100%;
-  color: var(--bcm-new-ds-color-slate-600);
-  flex: 1;
-  border: none;
-  background: transparent;
-  box-shadow: unset;
-  padding: 0 4px;
-  font-family: "Inter", sans-serif;
-  cursor: inherit;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  outline: none;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.bcm-checkbox-size-medium .bcm-checkbox__label-icon {
+  width: 16px;
+  height: 16px;
+  min-width: 16px;
+  font-size: 10px;
 }
-.bcm-input__container .bcm-input-element::placeholder {
-  font-family: "Inter", sans-serif;
-  color: var(--bcm-new-ds-color-slate-300);
-  user-select: none;
+.bcm-checkbox-size-large .slot {
+  font-size: 16px;
+  line-height: calc(16px + 8px);
+  margin-top: -1.5px;
 }
-.bcm-input__container .bcm-input-element::-webkit-search-decoration, .bcm-input__container .bcm-input-element::-webkit-search-cancel-button, .bcm-input__container .bcm-input-element::-webkit-search-results-button, .bcm-input__container .bcm-input-element::-webkit-search-results-decoration, .bcm-input__container .bcm-input-element::-webkit-calendar-picker-indicator, .bcm-input__container .bcm-input-element::-webkit-inner-spin-button, .bcm-input__container .bcm-input-element::-webkit-outer-spin-button {
-  -webkit-appearance: none;
+.bcm-checkbox-size-large .bcm-checkbox__input {
+  min-height: calc(32px - 4px);
+}
+.bcm-checkbox-size-large .bcm-checkbox__label-icon {
+  width: 18px;
+  height: 18px;
+  min-width: 18px;
+  font-size: 12px;
 }
-.bcm-input__container .caret-container {
-  width: 30px;
+.bcm-checkbox__label {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: stretch;
-  border-left: 1px solid #D9D9D9;
-  transition: 0.2s opacity;
-  user-select: none;
-  box-sizing: border-box;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-wrap: nowrap;
 }
-.bcm-input__container .caret-container .bcm-input-caret {
+.bcm-checkbox__label-icon {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  color: var(--bcm-color-grey-7);
-  cursor: pointer;
-  flex: 1;
+  flex-wrap: nowrap;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 2px;
 }
-.bcm-input__container .caret-container .bcm-input-caret bcm-icon {
-  line-height: 1;
+.bcm-checkbox__label-icon-indeterminate {
+  position: relative;
 }
-.bcm-input__container .caret-container .bcm-input-caret:hover {
-  color: var(--bcm-color-prime-blue-6);
+.bcm-checkbox__label-icon-indeterminate:after {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 70%;
+  height: 1.5px;
+  background: var(--bcm-new-ds-color-white);
 }
-.bcm-input__container .caret-container .bcm-input-caret:active {
-  background-color: var(--bcm-color-grey-3);
+.bcm-checkbox__label-icon.bcm-radio__icon {
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  border-radius: 100px;
 }
-.bcm-input__container .caret-container .bcm-input-caret:last-child {
-  border-top: 1px solid #D9D9D9;
+.bcm-checkbox__label-icon.bcm-radio__icon .bcm-radio__icon-inner {
+  width: 10px;
+  height: 10px;
+  border-radius: 100px;
+  background-color: var(--bcm-new-ds-color-white);
 }
-.bcm-input__container .caret-container.disabled {
-  background-color: var(--bcm-color-grey-3);
+.bcm-checkbox .bcm-checkbox__label-icon {
+  background: var(--bcm-checkbox-secondary-color-default);
+  color: var(--bcm-checkbox-secondary-color-default);
+  border-color: var(--bcm-new-ds-color-slate-300);
 }
-.bcm-input__container .caret-container.disabled .bcm-input-caret {
-  cursor: not-allowed;
+.bcm-checkbox .bcm-checkbox__label-icon-checked, .bcm-checkbox .bcm-checkbox__label-icon-indeterminate {
+  color: var(--bcm-new-ds-color-white);
+  background-color: var(--bcm-checkbox-primary-color-default);
+  border-color: var(--bcm-checkbox-primary-color-default);
 }
-.bcm-input__container .input-suffix-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon, .bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon {
+  border-color: var(--bcm-checkbox-primary-color-default);
+  background-color: var(--bcm-checkbox-secondary-color-default);
 }
-.bcm-input__container .input-prefix:not(:empty) {
-  padding-left: 4px;
+.bcm-checkbox .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner, .bcm-checkbox .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner {
+  background-color: var(--bcm-checkbox-primary-color-default);
 }
-.bcm-input__container .input-suffix:not(:empty) {
-  min-width: 24px;
-  padding-right: 4px;
+.bcm-checkbox .bcm-checkbox__label-icon-indeterminate {
+  color: var(--bcm-checkbox-primary-color-default);
 }
-.bcm-input__container .input-prefix:not(:empty),
-.bcm-input__container .input-suffix:not(:empty) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: default;
-  color: #64748a;
+.bcm-checkbox:hover .bcm-checkbox__label-icon {
+  background: var(--bcm-checkbox-secondary-color-hover);
+  color: var(--bcm-checkbox-secondary-color-hover);
+  border-color: var(--bcm-checkbox-primary-color-hover);
 }
-.bcm-input__container .input-prefix:not(:empty) .unit-prefix,
-.bcm-input__container .input-suffix:not(:empty) .unit-prefix {
-  color: #64748a;
+.bcm-checkbox:hover .bcm-checkbox__label-icon-checked, .bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate {
+  color: var(--bcm-new-ds-color-white);
+  background-color: var(--bcm-checkbox-primary-color-hover);
+  border-color: var(--bcm-checkbox-primary-color-hover);
 }
-.bcm-input__container .input-prefix-button:not(:empty),
-.bcm-input__container .input-suffix-button:not(:empty) {
-  cursor: pointer;
+.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon, .bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon {
+  border-color: var(--bcm-checkbox-primary-color-hover);
+  background-color: var(--bcm-checkbox-secondary-color-hover);
 }
-.bcm-input__container .caret-container,
-.bcm-input__container .input-clear-button {
-  opacity: 0;
+.bcm-checkbox:hover .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner, .bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner {
+  background-color: var(--bcm-checkbox-primary-color-hover);
 }
-.bcm-input__container--small {
-  font-size: 12px;
+.bcm-checkbox:hover .bcm-checkbox__label-icon-indeterminate {
+  color: var(--bcm-checkbox-primary-color-hover);
 }
-.bcm-input__container--medium {
-  font-size: 14px;
+.bcm-checkbox:focus-visible .bcm-checkbox__label-icon {
+  background: var(--bcm-checkbox-secondary-color-focus-visible);
+  color: var(--bcm-checkbox-secondary-color-focus-visible);
+  border-color: var(--bcm-checkbox-primary-color-focus-visible);
 }
-.bcm-input__container--large {
-  font-size: 16px;
+.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked, .bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate {
+  color: var(--bcm-new-ds-color-white);
+  background-color: var(--bcm-checkbox-primary-color-focus-visible);
+  border-color: var(--bcm-checkbox-primary-color-focus-visible);
 }
-.bcm-input__textarea .bcm-input-element {
-  white-space: normal;
+.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon, .bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon {
+  border-color: var(--bcm-checkbox-primary-color-focus-visible);
+  background-color: var(--bcm-checkbox-secondary-color-focus-visible);
 }
-.bcm-input__textarea.clearable .bcm-input-element {
-  padding-right: 24px;
+.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner, .bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner {
+  background-color: var(--bcm-checkbox-primary-color-focus-visible);
 }
-.bcm-input__textarea .input-clear-button {
-  position: absolute;
-  top: 4px;
-  right: 0;
+.bcm-checkbox:focus-visible .bcm-checkbox__label-icon-indeterminate {
+  color: var(--bcm-checkbox-primary-color-focus-visible);
 }
-
-bcm-colorful {
-  display: flex;
-  flex-direction: column;
-  width: 256px;
-  padding: 8px;
-  background-color: var(--bcm-new-ds-color-white);
-  border-radius: 4px;
+.bcm-checkbox:active .bcm-checkbox__label-icon {
+  background: var(--bcm-checkbox-secondary-color-active);
+  color: var(--bcm-checkbox-secondary-color-active);
+  border-color: var(--bcm-checkbox-primary-color-active);
 }
-
-/* Custom layout */
-bcm-colorful .react-colorful {
-  width: 100%;
-  gap: 4px;
+.bcm-checkbox:active .bcm-checkbox__label-icon-checked, .bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate {
+  color: var(--bcm-new-ds-color-white);
+  background-color: var(--bcm-checkbox-primary-color-active);
+  border-color: var(--bcm-checkbox-primary-color-active);
 }
-
-bcm-colorful .react-colorful__saturation {
-  margin: 0 0 4px 0;
-  border-radius: 2px;
-  border-bottom: none;
+.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon, .bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon {
+  border-color: var(--bcm-checkbox-primary-color-active);
+  background-color: var(--bcm-checkbox-secondary-color-active);
 }
-
-bcm-colorful .react-colorful__hue,
-bcm-colorful .react-colorful__alpha {
-  height: 20px;
-  border-radius: 2px;
+.bcm-checkbox:active .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner, .bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner {
+  background-color: var(--bcm-checkbox-primary-color-active);
 }
-
-bcm-colorful .react-colorful__hue-pointer,
-bcm-colorful .react-colorful__alpha-pointer {
-  width: 15px;
-  height: 15px;
+.bcm-checkbox:active .bcm-checkbox__label-icon-indeterminate {
+  color: var(--bcm-checkbox-primary-color-active);
 }
-
-bcm-colorful .react-colorful__saturation-pointer {
-  width: 20px;
-  height: 20px;
+.bcm-checkbox[disabled] .bcm-checkbox__label-icon, .bcm-checkbox.disabled .bcm-checkbox__label-icon {
+  background: var(--bcm-checkbox-secondary-color-disabled);
+  color: var(--bcm-checkbox-secondary-color-disabled);
+  border-color: var(--bcm-checkbox-primary-color-disabled);
+}
+.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked, .bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate, .bcm-checkbox.disabled .bcm-checkbox__label-icon-checked, .bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate {
+  color: var(--bcm-new-ds-color-white);
+  background-color: var(--bcm-checkbox-primary-color-disabled);
+  border-color: var(--bcm-checkbox-primary-color-disabled);
+}
+.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon, .bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon, .bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon, .bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon {
+  border-color: var(--bcm-checkbox-primary-color-disabled);
+  background-color: var(--bcm-checkbox-secondary-color-disabled);
+}
+.bcm-checkbox[disabled] .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner, .bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner, .bcm-checkbox.disabled .bcm-checkbox__label-icon-checked.bcm-radio__icon .bcm-radio__icon-inner, .bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate.bcm-radio__icon .bcm-radio__icon-inner {
+  background-color: var(--bcm-checkbox-primary-color-disabled);
+}
+.bcm-checkbox[disabled] .bcm-checkbox__label-icon-indeterminate, .bcm-checkbox.disabled .bcm-checkbox__label-icon-indeterminate {
+  color: var(--bcm-checkbox-primary-color-disabled);
+}
+.bcm-checkbox[no-margin] .bcm-checkbox__input {
+  margin: 0;
+  min-height: 0;
+  padding: 0;
 }