bkui-vue 1.0.3-beta.24 → 1.0.3-beta.26

package/lib/table/table.variable.css

@@ -12,13 +12,13 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
-  --border-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
   --line-height-base: 16px;
   --line-height-medium: 16px;
   --line-height-large: 18px;
+  --border-color: #dcdee5;
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
@@ -111,7 +111,7 @@
   --table-border-color: #dcdee5;
   --table-head-bg-color: #fafbfd;
   --table-head-font-color: #313238;
-  --table-body-font-color: #63656E;
+  --table-body-font-color: #63656e;
   --table-row-hover-bg-color: #f5f7fa;
   --table-row-active-bg-color: #f0f1f5;
   --cascader-panel-border-color: #dcdee5;
@@ -127,28 +127,28 @@
   --select-active-color: #e1ecff;
   --select-hover-color: #f5f7fa;
 }
-.bk-F-scroll-x {
+:where(.bk-F-scroll-x) {
   overflow-x: auto;
   scrollbar-color: #a0a0a0 transparent;
   scrollbar-width: thin;
 }
-.bk-F-scroll-x::-webkit-scrollbar {
+:where(.bk-F-scroll-x)::-webkit-scrollbar {
   height: 6px;
 }
-.bk-F-scroll-y {
+:where(.bk-F-scroll-y) {
   overflow-y: auto;
 }
-.bk-F-scroll-y::-webkit-scrollbar {
+:where(.bk-F-scroll-y)::-webkit-scrollbar {
   width: 4px;
 }
-.bk-F-scroll-y::-webkit-scrollbar-thumb {
+:where(.bk-F-scroll-y)::-webkit-scrollbar-thumb {
   border-radius: 4px;
 }
-.bk-virtual-render {
+:where(.bk-virtual-render) {
   position: relative;
 }
-.bk-virtual-render .bk-virtual-content,
-.bk-virtual-render.bk-virtual-content {
+:where(.bk-virtual-render) .bk-virtual-content,
+:where(.bk-virtual-render).bk-virtual-content {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -156,15 +156,15 @@
   width: 100%;
   height: 100%;
 }
-.bk-virtual-render .bk-virtual-section {
+:where(.bk-virtual-render) .bk-virtual-section {
   width: 1px;
   background: transparent;
 }
-.bk-checkbox-group {
+:where(.bk-checkbox-group) {
   display: inline-flex;
   letter-spacing: normal;
 }
-.bk-checkbox {
+:where(.bk-checkbox) {
   display: inline-flex;
   justify-self: center;
   align-items: center;
@@ -174,19 +174,19 @@
   cursor: pointer;
   user-select: none;
 }
-.bk-checkbox ~ .bk-checkbox {
+:where(.bk-checkbox) ~ .bk-checkbox {
   margin-left: 24px;
 }
-.bk-checkbox.is-checked .bk-checkbox-input {
+:where(.bk-checkbox).is-checked .bk-checkbox-input {
   background: #3a84ff;
   border-color: #3a84ff;
   transition: all 0.1s;
 }
-.bk-checkbox.is-checked .bk-checkbox-input.small::after {
+:where(.bk-checkbox).is-checked .bk-checkbox-input.small::after {
   width: 3px;
   height: 6px;
 }
-.bk-checkbox.is-checked .bk-checkbox-input::after {
+:where(.bk-checkbox).is-checked .bk-checkbox-input::after {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -199,16 +199,16 @@
   transform: translate(-50%, -60%) scaleY(1) rotate(45deg);
   transform-origin: center;
 }
-.bk-checkbox.is-indeterminated .bk-checkbox-input {
+:where(.bk-checkbox).is-indeterminated .bk-checkbox-input {
   background: #3a84ff;
   border-color: #3a84ff;
   transition: all 0.1s;
 }
-.bk-checkbox.is-indeterminated .bk-checkbox-input.small::after {
+:where(.bk-checkbox).is-indeterminated .bk-checkbox-input.small::after {
   width: 6px;
   height: 2px;
 }
-.bk-checkbox.is-indeterminated .bk-checkbox-input::after {
+:where(.bk-checkbox).is-indeterminated .bk-checkbox-input::after {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -220,31 +220,31 @@
   content: '';
   transform: translate(-50%, -50%);
 }
-.bk-checkbox.is-disabled {
+:where(.bk-checkbox).is-disabled {
   color: #c4c6cc;
   cursor: not-allowed;
 }
-.bk-checkbox.is-disabled .bk-checkbox-input {
+:where(.bk-checkbox).is-disabled .bk-checkbox-input {
   background: #fafbfd;
   border-color: #dcdee5;
 }
-.bk-checkbox.is-disabled .bk-checkbox-input::after {
+:where(.bk-checkbox).is-disabled .bk-checkbox-input::after {
   background: #dcdee5;
 }
-.bk-checkbox.is-disabled.is-checked .bk-checkbox-input {
+:where(.bk-checkbox).is-disabled.is-checked .bk-checkbox-input {
   background: #a3c5fd;
   border-color: #a3c5fd;
 }
-.bk-checkbox.is-disabled.is-checked .bk-checkbox-input::after {
+:where(.bk-checkbox).is-disabled.is-checked .bk-checkbox-input::after {
   background: #a3c5fd;
 }
-.bk-checkbox.is-prechecking {
+:where(.bk-checkbox).is-prechecking {
   position: relative;
 }
-.bk-checkbox.is-prechecking .bk-checkbox-input {
+:where(.bk-checkbox).is-prechecking .bk-checkbox-input {
   visibility: hidden;
 }
-.bk-checkbox-input {
+:where(.bk-checkbox-input) {
   position: relative;
   display: inline-block;
   width: 16px;
@@ -253,11 +253,11 @@
   border: 1px solid #979ba5;
   border-radius: 2px;
 }
-.bk-checkbox-input.small {
+:where(.bk-checkbox-input).small {
   width: 14px;
   height: 14px;
 }
-.bk-checkbox-original {
+:where(.bk-checkbox-original) {
   position: absolute;
   top: 0;
   left: 0;
@@ -265,18 +265,18 @@
   width: 0;
   height: 0;
 }
-.bk-checkbox-label {
+:where(.bk-checkbox-label) {
   display: inline-block;
   margin-left: 6px;
   vertical-align: middle;
 }
-.bk-checkbox-checking {
+:where(.bk-checkbox-checking) {
   position: absolute;
   font-size: 16px;
   color: #3a84ff;
   animation: loading 1s linear infinite;
 }
-.bk-button {
+:where(.bk-button) {
   display: inline-flex;
   height: 32px;
   padding: 0 14px;
@@ -295,242 +295,242 @@
   align-items: center;
   justify-content: center;
 }
-.bk-button.bk-button-primary {
+:where(.bk-button).bk-button-primary {
   background-color: #3a84ff;
   color: white;
   border-color: #3a84ff;
 }
-.bk-button.bk-button-primary:hover {
+:where(.bk-button).bk-button-primary:hover {
   background-color: #5594fa;
   border-color: #5594fa;
 }
-.bk-button.bk-button-primary:active {
+:where(.bk-button).bk-button-primary:active {
   background-color: #2c77f4;
   border-color: #2c77f4;
   color: white;
 }
-.bk-button.bk-button-primary.is-outline {
+:where(.bk-button).bk-button-primary.is-outline {
   color: #3a84ff;
   border-color: #3a84ff;
   background-color: white;
 }
-.bk-button.bk-button-primary.is-outline:hover {
+:where(.bk-button).bk-button-primary.is-outline:hover {
   background-color: #5594fa;
   border-color: #5594fa;
   color: white;
 }
-.bk-button.bk-button-primary.is-outline:active {
+:where(.bk-button).bk-button-primary.is-outline:active {
   background-color: #2c77f4;
   border-color: #2c77f4;
   color: white;
 }
-.bk-button.bk-button-primary.is-text {
+:where(.bk-button).bk-button-primary.is-text {
   color: #3a84ff;
   background-color: transparent;
   border: none;
 }
-.bk-button.bk-button-primary.is-text:not(.is-disabled):hover {
+:where(.bk-button).bk-button-primary.is-text:not(.is-disabled):hover {
   color: #5594fa;
 }
-.bk-button.bk-button-primary.is-disabled {
+:where(.bk-button).bk-button-primary.is-disabled {
   color: #dcdee5;
   cursor: not-allowed;
 }
-.bk-button.bk-button-primary.is-disabled:not(.is-text) {
+:where(.bk-button).bk-button-primary.is-disabled:not(.is-text) {
   background-color: #dcdee5;
   color: white;
   border-color: #dcdee5;
 }
-.bk-button.bk-button-hover-primary:hover {
+:where(.bk-button).bk-button-hover-primary:hover {
   background-color: #5594fa;
   border-color: #5594fa;
   color: white;
 }
-.bk-button.bk-button-warning {
+:where(.bk-button).bk-button-warning {
   background-color: #ff9c01;
   color: white;
   border-color: #ff9c01;
 }
-.bk-button.bk-button-warning:hover {
+:where(.bk-button).bk-button-warning:hover {
   background-color: #ffb848;
   border-color: #ffb848;
 }
-.bk-button.bk-button-warning:active {
+:where(.bk-button).bk-button-warning:active {
   background-color: #eb9000;
   border-color: #eb9000;
   color: white;
 }
-.bk-button.bk-button-warning.is-outline {
+:where(.bk-button).bk-button-warning.is-outline {
   color: #ff9c01;
   border-color: #ff9c01;
   background-color: white;
 }
-.bk-button.bk-button-warning.is-outline:hover {
+:where(.bk-button).bk-button-warning.is-outline:hover {
   background-color: #ffb848;
   border-color: #ffb848;
   color: white;
 }
-.bk-button.bk-button-warning.is-outline:active {
+:where(.bk-button).bk-button-warning.is-outline:active {
   background-color: #eb9000;
   border-color: #eb9000;
   color: white;
 }
-.bk-button.bk-button-warning.is-text {
+:where(.bk-button).bk-button-warning.is-text {
   color: #ff9c01;
   background-color: transparent;
   border: none;
 }
-.bk-button.bk-button-warning.is-text:not(.is-disabled):hover {
+:where(.bk-button).bk-button-warning.is-text:not(.is-disabled):hover {
   color: #ffb848;
 }
-.bk-button.bk-button-warning.is-disabled {
+:where(.bk-button).bk-button-warning.is-disabled {
   color: #dcdee5;
   cursor: not-allowed;
 }
-.bk-button.bk-button-warning.is-disabled:not(.is-text) {
+:where(.bk-button).bk-button-warning.is-disabled:not(.is-text) {
   background-color: #dcdee5;
   color: white;
   border-color: #dcdee5;
 }
-.bk-button.bk-button-hover-warning:hover {
+:where(.bk-button).bk-button-hover-warning:hover {
   background-color: #ffb848;
   border-color: #ffb848;
   color: white;
 }
-.bk-button.bk-button-success {
+:where(.bk-button).bk-button-success {
   background-color: #2dcb56;
   color: white;
   border-color: #2dcb56;
 }
-.bk-button.bk-button-success:hover {
+:where(.bk-button).bk-button-success:hover {
   background-color: #45e35f;
   border-color: #45e35f;
 }
-.bk-button.bk-button-success:active {
+:where(.bk-button).bk-button-success:active {
   background-color: #1ab943;
   border-color: #1ab943;
   color: white;
 }
-.bk-button.bk-button-success.is-outline {
+:where(.bk-button).bk-button-success.is-outline {
   color: #2dcb56;
   border-color: #2dcb56;
   background-color: white;
 }
-.bk-button.bk-button-success.is-outline:hover {
+:where(.bk-button).bk-button-success.is-outline:hover {
   background-color: #45e35f;
   border-color: #45e35f;
   color: white;
 }
-.bk-button.bk-button-success.is-outline:active {
+:where(.bk-button).bk-button-success.is-outline:active {
   background-color: #1ab943;
   border-color: #1ab943;
   color: white;
 }
-.bk-button.bk-button-success.is-text {
+:where(.bk-button).bk-button-success.is-text {
   color: #2dcb56;
   background-color: transparent;
   border: none;
 }
-.bk-button.bk-button-success.is-text:not(.is-disabled):hover {
+:where(.bk-button).bk-button-success.is-text:not(.is-disabled):hover {
   color: #45e35f;
 }
-.bk-button.bk-button-success.is-disabled {
+:where(.bk-button).bk-button-success.is-disabled {
   color: #dcdee5;
   cursor: not-allowed;
 }
-.bk-button.bk-button-success.is-disabled:not(.is-text) {
+:where(.bk-button).bk-button-success.is-disabled:not(.is-text) {
   background-color: #dcdee5;
   color: white;
   border-color: #dcdee5;
 }
-.bk-button.bk-button-hover-success:hover {
+:where(.bk-button).bk-button-hover-success:hover {
   background-color: #45e35f;
   border-color: #45e35f;
   color: white;
 }
-.bk-button.bk-button-danger {
+:where(.bk-button).bk-button-danger {
   background-color: #ea3636;
   color: white;
   border-color: #ea3636;
 }
-.bk-button.bk-button-danger:hover {
+:where(.bk-button).bk-button-danger:hover {
   background-color: #ff5656;
   border-color: #ff5656;
 }
-.bk-button.bk-button-danger:active {
+:where(.bk-button).bk-button-danger:active {
   background-color: #db2626;
   border-color: #db2626;
   color: white;
 }
-.bk-button.bk-button-danger.is-outline {
+:where(.bk-button).bk-button-danger.is-outline {
   color: #ea3636;
   border-color: #ea3636;
   background-color: white;
 }
-.bk-button.bk-button-danger.is-outline:hover {
+:where(.bk-button).bk-button-danger.is-outline:hover {
   background-color: #ff5656;
   border-color: #ff5656;
   color: white;
 }
-.bk-button.bk-button-danger.is-outline:active {
+:where(.bk-button).bk-button-danger.is-outline:active {
   background-color: #db2626;
   border-color: #db2626;
   color: white;
 }
-.bk-button.bk-button-danger.is-text {
+:where(.bk-button).bk-button-danger.is-text {
   color: #ea3636;
   background-color: transparent;
   border: none;
 }
-.bk-button.bk-button-danger.is-text:not(.is-disabled):hover {
+:where(.bk-button).bk-button-danger.is-text:not(.is-disabled):hover {
   color: #ff5656;
 }
-.bk-button.bk-button-danger.is-disabled {
+:where(.bk-button).bk-button-danger.is-disabled {
   color: #dcdee5;
   cursor: not-allowed;
 }
-.bk-button.bk-button-danger.is-disabled:not(.is-text) {
+:where(.bk-button).bk-button-danger.is-disabled:not(.is-text) {
   background-color: #dcdee5;
   color: white;
   border-color: #dcdee5;
 }
-.bk-button.bk-button-hover-danger:hover {
+:where(.bk-button).bk-button-hover-danger:hover {
   background-color: #ff5656;
   border-color: #ff5656;
   color: white;
 }
-.bk-button.bk-button-small {
+:where(.bk-button).bk-button-small {
   height: 26px;
   padding: 0 12px;
   font-size: 12px;
 }
-.bk-button.bk-button-large {
+:where(.bk-button).bk-button-large {
   height: 40px;
   padding: 0 16px;
   font-size: 16px;
 }
-.bk-button .bk-button-text {
+:where(.bk-button) .bk-button-text {
   display: inline-flex;
   align-items: center;
   line-height: 1;
 }
-.bk-button.is-loading {
+:where(.bk-button).is-loading {
   position: relative;
 }
-.bk-button.is-loading .bk-button-loading:not(:last-child) {
+:where(.bk-button).is-loading .bk-button-loading:not(:last-child) {
   position: absolute;
 }
-.bk-button.is-loading .bk-button-text {
+:where(.bk-button).is-loading .bk-button-text {
   visibility: hidden;
 }
-.bk-button:hover {
+:where(.bk-button):hover {
   border-color: #979ba5;
 }
-.bk-button:active {
+:where(.bk-button):active {
   color: #3a84ff;
   border-color: #3a84ff;
 }
-.bk-button.is-text {
+:where(.bk-button).is-text {
   height: auto;
   padding: 0;
   font-size: inherit;
@@ -541,65 +541,65 @@
   border: none;
   outline: none;
 }
-.bk-button.is-disabled {
+:where(.bk-button).is-disabled {
   color: #dcdee5;
   cursor: not-allowed;
   border-color: #dcdee5;
 }
-.bk-button.is-disabled:not(.is-text) {
+:where(.bk-button).is-disabled:not(.is-text) {
   background-color: #f9fafd;
 }
-.bk-button-group {
+:where(.bk-button-group) {
   display: inline-block;
   font-size: 0;
 }
-.bk-button-group.bk-button-group-small .bk-button {
+:where(.bk-button-group).bk-button-group-small .bk-button {
   height: 26px;
   padding: 0 12px;
   font-size: 12px;
 }
-.bk-button-group.bk-button-group-large .bk-button {
+:where(.bk-button-group).bk-button-group-large .bk-button {
   height: 40px;
   padding: 0 16px;
   font-size: 16px;
 }
-.bk-button-group .bk-button {
+:where(.bk-button-group) .bk-button {
   height: 32px;
   margin: 0 0 0 -1px;
   border-radius: 0;
 }
-.bk-button-group .bk-button:not(.is-disabled) {
+:where(.bk-button-group) .bk-button:not(.is-disabled) {
   color: #63656e;
   background-color: white;
   border-color: #c4c6cc;
 }
-.bk-button-group .bk-button.is-disabled {
+:where(.bk-button-group) .bk-button.is-disabled {
   color: #c4c6cc;
 }
-.bk-button-group .bk-button:first-child {
+:where(.bk-button-group) .bk-button:first-child {
   border-radius: 2px 0 0 2px;
 }
-.bk-button-group .bk-button:last-child {
+:where(.bk-button-group) .bk-button:last-child {
   border-radius: 0 2px 2px 0;
 }
-.bk-button-group .bk-button:only-child {
+:where(.bk-button-group) .bk-button:only-child {
   border-radius: 2px;
 }
-.bk-button-group .bk-button:hover:not(.is-disabled),
-.bk-button-group .bk-button.is-selected:not(.is-disabled) {
+:where(.bk-button-group) .bk-button:hover:not(.is-disabled),
+:where(.bk-button-group) .bk-button.is-selected:not(.is-disabled) {
   position: relative;
   z-index: 1;
   color: #3a84ff;
   background-color: white;
   border-color: #3a84ff;
 }
-.bk-button-group .bk-button.is-selected:not(.is-disabled) {
+:where(.bk-button-group) .bk-button.is-selected:not(.is-disabled) {
   background-color: #e1ecff;
 }
-.bk-button-group .bk-button.is-selected.is-disabled {
+:where(.bk-button-group) .bk-button.is-selected.is-disabled {
   background-color: #f0f1f5;
 }
-.bk-exception {
+:where(.bk-exception) {
   position: relative;
   display: flex;
   width: 100%;
@@ -607,57 +607,57 @@
   flex-direction: column;
   text-align: center;
 }
-.bk-exception-img {
+:where(.bk-exception-img) {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.bk-exception-img .exception-image {
+:where(.bk-exception-img) .exception-image {
   display: block;
   height: 100%;
   object-fit: contain;
 }
-.bk-exception-title {
+:where(.bk-exception-title) {
   color: #313238;
 }
-.bk-exception-description {
+:where(.bk-exception-description) {
   color: #63656e;
 }
-.bk-exception-page .bk-exception-img {
+:where(.bk-exception-page) .bk-exception-img {
   width: 480px;
   height: 240px;
 }
-.bk-exception-page .bk-exception-title {
+:where(.bk-exception-page) .bk-exception-title {
   margin-top: 18px;
   font-size: 24px;
   line-height: 32px;
 }
-.bk-exception-page .bk-exception-description {
+:where(.bk-exception-page) .bk-exception-description {
   margin-top: 16px;
   font-size: 14px;
   line-height: 22px;
 }
-.bk-exception-page .bk-exception-footer {
+:where(.bk-exception-page) .bk-exception-footer {
   margin-top: 24px;
 }
-.bk-exception-part .bk-exception-img {
+:where(.bk-exception-part) .bk-exception-img {
   width: 120px;
   height: 100px;
 }
-.bk-exception-part .bk-exception-title {
+:where(.bk-exception-part) .bk-exception-title {
   margin-top: 8px;
   font-size: 14px;
   line-height: 22px;
 }
-.bk-exception-part .bk-exception-description {
+:where(.bk-exception-part) .bk-exception-description {
   margin-top: 8px;
   font-size: 12px;
   line-height: 20px;
 }
-.bk-exception-part .bk-exception-footer {
+:where(.bk-exception-part) .bk-exception-footer {
   margin-top: 8px;
 }
-.bk-pagination {
+:where(.bk-pagination) {
   display: flex;
   align-items: center;
   font-size: 12px;
@@ -665,43 +665,43 @@
   color: #63656e;
   user-select: none;
 }
-.bk-pagination.is-disabled {
+:where(.bk-pagination).is-disabled {
   cursor: not-allowed;
 }
-.bk-pagination.is-align-left {
+:where(.bk-pagination).is-align-left {
   justify-content: flex-start;
 }
-.bk-pagination.is-align-center {
+:where(.bk-pagination).is-align-center {
   justify-content: center;
 }
-.bk-pagination.is-align-right {
+:where(.bk-pagination).is-align-right {
   justify-content: flex-end;
 }
-.bk-pagination > * {
+:where(.bk-pagination) > * {
   margin: 0 6px;
 }
-.bk-pagination > .is-first {
+:where(.bk-pagination) > .is-first {
   margin-left: 0;
 }
-.bk-pagination > .is-last {
+:where(.bk-pagination) > .is-last {
   margin-right: 0;
 }
-.bk-pagination-total {
+:where(.bk-pagination-total) {
   display: flex;
   user-select: none;
 }
-.bk-pagination-total-num {
+:where(.bk-pagination-total-num) {
   padding: 0 2px;
 }
-.bk-pagination-list {
+:where(.bk-pagination-list) {
   display: flex;
   margin-right: 8px;
 }
-.bk-pagination-list-pre-batch,
-.bk-pagination-list-next-batch,
-.bk-pagination-list-pre,
-.bk-pagination-list-next,
-.bk-pagination-list-item {
+:where(.bk-pagination-list-pre-batch),
+:where(.bk-pagination-list-next-batch),
+:where(.bk-pagination-list-pre),
+:where(.bk-pagination-list-next),
+:where(.bk-pagination-list-item) {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -716,78 +716,78 @@
   border-radius: 2px;
   user-select: none;
 }
-.bk-pagination-list-pre-batch.is-active,
-.bk-pagination-list-next-batch.is-active,
-.bk-pagination-list-pre.is-active,
-.bk-pagination-list-next.is-active,
-.bk-pagination-list-item.is-active {
+:where(.bk-pagination-list-pre-batch).is-active,
+:where(.bk-pagination-list-next-batch).is-active,
+:where(.bk-pagination-list-pre).is-active,
+:where(.bk-pagination-list-next).is-active,
+:where(.bk-pagination-list-item).is-active {
   color: #3a84ff;
   background: #e1ecff;
 }
-.bk-pagination-list-pre-batch:hover,
-.bk-pagination-list-next-batch:hover,
-.bk-pagination-list-pre:hover,
-.bk-pagination-list-next:hover,
-.bk-pagination-list-item:hover {
+:where(.bk-pagination-list-pre-batch):hover,
+:where(.bk-pagination-list-next-batch):hover,
+:where(.bk-pagination-list-pre):hover,
+:where(.bk-pagination-list-next):hover,
+:where(.bk-pagination-list-item):hover {
   background: #f0f1f5;
 }
-.bk-pagination-list-pre-batch.is-disabled,
-.bk-pagination-list-next-batch.is-disabled,
-.bk-pagination-list-pre.is-disabled,
-.bk-pagination-list-next.is-disabled,
-.bk-pagination-list-item.is-disabled {
+:where(.bk-pagination-list-pre-batch).is-disabled,
+:where(.bk-pagination-list-next-batch).is-disabled,
+:where(.bk-pagination-list-pre).is-disabled,
+:where(.bk-pagination-list-next).is-disabled,
+:where(.bk-pagination-list-item).is-disabled {
   color: #c4c6cc;
   cursor: not-allowed;
   background-color: #fafbfd;
   border-color: #dcdee5;
 }
-.bk-pagination-list-pre,
-.bk-pagination-list-next {
+:where(.bk-pagination-list-pre),
+:where(.bk-pagination-list-next) {
   font-size: 20px;
   color: #979ba5;
 }
-.bk-pagination-list-pre.is-disabled,
-.bk-pagination-list-next.is-disabled {
+:where(.bk-pagination-list-pre).is-disabled,
+:where(.bk-pagination-list-next).is-disabled {
   color: #dcdee5;
   cursor: not-allowed;
   background-color: transparent;
 }
-.bk-pagination-list-item {
+:where(.bk-pagination-list-item) {
   margin-right: 2px;
   margin-left: 2px;
 }
-.bk-pagination-limit {
+:where(.bk-pagination-limit) {
   display: flex;
   align-items: center;
   user-select: none;
 }
-.bk-pagination-limit-select {
+:where(.bk-pagination-limit-select) {
   width: 60px;
   margin: 0 4px;
 }
-.bk-pagination-limit-select .bk-input {
+:where(.bk-pagination-limit-select) .bk-input {
   border-color: #f0f1f5;
 }
-.bk-pagination-limit-select .bk-input--text {
+:where(.bk-pagination-limit-select) .bk-input--text {
   background-color: #f0f1f5;
 }
-.bk-pagination-limit-select:hover .bk-input {
+:where(.bk-pagination-limit-select):hover .bk-input {
   border-color: #eaebf0;
 }
-.bk-pagination-limit-select:hover .bk-input--text {
+:where(.bk-pagination-limit-select):hover .bk-input--text {
   background-color: #eaebf0;
 }
-.bk-pagination-limit-select .bk-input.is-focused {
+:where(.bk-pagination-limit-select) .bk-input.is-focused {
   border-color: #3a84ff;
 }
-.bk-pagination-limit-select .bk-input.is-focused .bk-input--text {
+:where(.bk-pagination-limit-select) .bk-input.is-focused .bk-input--text {
   background-color: #fff;
 }
-.bk-pagination-small-list {
+:where(.bk-pagination-small-list) {
   display: flex;
   align-items: center;
 }
-.bk-pagination-small-list .bk-pagination-picker {
+:where(.bk-pagination-small-list) .bk-pagination-picker {
   display: flex;
   height: 26px;
   margin: 0 4px;
@@ -797,16 +797,16 @@
   border-radius: 2px;
   align-items: center;
 }
-.bk-pagination-small-list .bk-pagination-picker:hover {
+:where(.bk-pagination-small-list) .bk-pagination-picker:hover {
   background-color: #eaebf0;
   border-color: #eaebf0;
 }
-.bk-pagination-small-list .bk-pagination-picker.is-focused {
+:where(.bk-pagination-small-list) .bk-pagination-picker.is-focused {
   background-color: #fff;
   border-color: #3a84ff;
   box-shadow: 0px 0px 4px rgba(58, 132, 255, 0.4);
 }
-.bk-pagination-editor {
+:where(.bk-pagination-editor) {
   height: 16px;
   min-width: 23px;
   padding-right: 4px;
@@ -819,12 +819,12 @@
   outline: none;
   transition: all 0.15s;
 }
-.bk-pagination-small-list-total {
+:where(.bk-pagination-small-list-total) {
   padding-right: 8px;
   padding-left: 4px;
 }
-.bk-pagination-btn-pre,
-.bk-pagination-btn-next {
+:where(.bk-pagination-btn-pre),
+:where(.bk-pagination-btn-next) {
   display: flex;
   width: 26px;
   height: 26px;
@@ -834,23 +834,23 @@
   justify-content: center;
   align-items: center;
 }
-.bk-pagination-btn-pre:hover,
-.bk-pagination-btn-next:hover {
+:where(.bk-pagination-btn-pre):hover,
+:where(.bk-pagination-btn-next):hover {
   color: #3a84ff;
   background: #f0f1f5;
 }
-.bk-pagination-btn-pre.is-disabled,
-.bk-pagination-btn-next.is-disabled {
+:where(.bk-pagination-btn-pre).is-disabled,
+:where(.bk-pagination-btn-next).is-disabled {
   color: #dcdee5;
   cursor: not-allowed;
 }
-.bk-pagination-picker-list {
+:where(.bk-pagination-picker-list) {
   max-height: 216px;
   padding: 7px 0;
   margin: -7px -14px;
   overflow: auto;
 }
-.bk-pagination-picker-list .item {
+:where(.bk-pagination-picker-list) .item {
   height: 32px;
   padding: 0 10px;
   font-size: 12px;
@@ -858,12 +858,12 @@
   color: #63656e;
   cursor: pointer;
 }
-.bk-pagination-picker-list .item:hover,
-.bk-pagination-picker-list .item.is-actived {
+:where(.bk-pagination-picker-list) .item:hover,
+:where(.bk-pagination-picker-list) .item.is-actived {
   color: #3a84ff;
   background: #f4f6fa;
 }
-.bk-popover.bk-pop2-content {
+:where(.bk-popover).bk-pop2-content {
   position: absolute;
   padding: 12px;
   font-size: 12px;
@@ -872,10 +872,10 @@
   border-radius: 4px;
   box-sizing: border-box;
 }
-.bk-popover.bk-pop2-content.hidden {
+:where(.bk-popover).bk-pop2-content.hidden {
   display: none;
 }
-.bk-popover.bk-pop2-content .bk-pop2-arrow {
+:where(.bk-popover).bk-pop2-content .bk-pop2-arrow {
   position: absolute;
   z-index: -1;
   width: 8px;
@@ -883,15 +883,15 @@
   background: #333;
   transform: rotate(45deg);
 }
-.bk-popover.bk-pop2-content[data-theme^='light'] {
+:where(.bk-popover).bk-pop2-content[data-theme^='light'] {
   color: #26323d;
   background-color: #fff;
   box-shadow: 0 0 6px 0 #dcdee5;
 }
-.bk-popover.bk-pop2-content[data-theme^='light'] .bk-pop2-arrow {
+:where(.bk-popover).bk-pop2-content[data-theme^='light'] .bk-pop2-arrow {
   background-color: #fff;
 }
-.bk-table-head-action {
+:where(.bk-table-head-action) {
   display: flex;
   height: var(--row-height);
   padding: 0 10px 0 6px;
@@ -900,31 +900,31 @@
   cursor: pointer;
   align-items: center;
 }
-.bk-table-head-action:last-of-type {
+:where(.bk-table-head-action):last-of-type {
   margin-right: -10px;
 }
-.bk-table-head-action.active {
+:where(.bk-table-head-action).active {
   color: #3a84ff;
 }
-.bk-table-head-action.opened {
+:where(.bk-table-head-action).opened {
   color: inherit;
 }
-.bk-popover.bk-pop2-content.bk-table-head-filter {
+:where(.bk-popover).bk-pop2-content.bk-table-head-filter {
   padding: 5px 0 0 0;
   background-color: #fff;
   border-radius: 2px;
   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
 }
-.bk-popover.bk-pop2-content.bk-table-head-filter .content-list {
+:where(.bk-popover).bk-pop2-content.bk-table-head-filter .content-list {
   display: inline-block;
   max-width: 300px;
   min-width: 200px;
 }
-.bk-popover.bk-pop2-content.bk-table-head-filter .content-list .content-items {
+:where(.bk-popover).bk-pop2-content.bk-table-head-filter .content-list .content-items {
   max-height: 200px;
   min-height: 40px;
 }
-.bk-popover.bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item {
+:where(.bk-popover).bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item {
   width: 100%;
   height: 32px;
   padding: 0 10px;
@@ -933,25 +933,25 @@
   color: #63656e;
   text-align: left;
 }
-.bk-popover.bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item:hover {
+:where(.bk-popover).bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item:hover {
   background: #f0f1f5;
 }
-.bk-popover.bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item label:hover {
+:where(.bk-popover).bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item label:hover {
   background: #f0f1f5;
 }
-.bk-popover.bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item .bk-checkbox-label {
+:where(.bk-popover).bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item .bk-checkbox-label {
   white-space: nowrap;
 }
-.bk-popover.bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item .bk-checkbox {
+:where(.bk-popover).bk-pop2-content.bk-table-head-filter .content-list .content-items .list-item .bk-checkbox {
   margin-left: 0;
 }
-.bk-popover.bk-pop2-content.bk-table-head-filter .content-footer {
+:where(.bk-popover).bk-pop2-content.bk-table-head-filter .content-footer {
   display: flex;
   padding: 12px;
   border-top: solid 1px #dcdee5;
   align-items: center;
 }
-.bk-head-cell-sort {
+:where(.bk-head-cell-sort) {
   display: flex;
   height: 100%;
   padding: 0 4px;
@@ -962,47 +962,47 @@
   justify-content: center;
   align-items: center;
 }
-.bk-head-cell-sort .sort-action {
+:where(.bk-head-cell-sort) .sort-action {
   display: flex;
   height: 50%;
   color: #c0c4cc;
   cursor: pointer;
 }
-.bk-head-cell-sort .sort-action.active {
+:where(.bk-head-cell-sort) .sort-action.active {
   color: #3a84ff;
 }
-.bk-head-cell-sort .sort-action.sort-asc {
+:where(.bk-head-cell-sort) .sort-action.sort-asc {
   align-items: flex-end;
 }
-.bk-head-cell-sort .sort-action.sort-desc {
+:where(.bk-head-cell-sort) .sort-action.sort-desc {
   align-items: flex-start;
 }
-.bk-table-settings[data-bk-table-settings-theme='true'] {
+:where(.bk-table-settings)[data-bk-table-settings-theme='true'] {
   padding: 0;
 }
-.bk-table-settings[data-bk-table-settings-theme='true'] .bk-pop2-arrow[data-arrow='top'] {
+:where(.bk-table-settings)[data-bk-table-settings-theme='true'] .bk-pop2-arrow[data-arrow='top'] {
   border-right: solid 1px #dcdee5;
   border-bottom: solid 1px #dcdee5;
 }
-.bk-table-settings[data-bk-table-settings-theme='true'] .bk-pop2-arrow[data-arrow='bottom'] {
+:where(.bk-table-settings)[data-bk-table-settings-theme='true'] .bk-pop2-arrow[data-arrow='bottom'] {
   border-top: solid 1px #dcdee5;
   border-left: solid 1px #dcdee5;
 }
-.bk-table-settings[data-bk-table-settings-theme='true'] .bk-pop2-arrow[data-arrow='left'] {
+:where(.bk-table-settings)[data-bk-table-settings-theme='true'] .bk-pop2-arrow[data-arrow='left'] {
   border-top: solid 1px #dcdee5;
   border-right: solid 1px #dcdee5;
 }
-.bk-table-settings[data-bk-table-settings-theme='true'] .bk-pop2-arrow[data-arrow='right'] {
+:where(.bk-table-settings)[data-bk-table-settings-theme='true'] .bk-pop2-arrow[data-arrow='right'] {
   border-bottom: solid 1px #dcdee5;
   border-left: solid 1px #dcdee5;
 }
-.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content {
+:where(.bk-table-settings)[data-bk-table-settings-theme='true'] .setting-content {
   width: 515px;
   border: 1px solid #dcdee5;
   border-radius: 2px;
   opacity: 1;
 }
-.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-head {
+:where(.bk-table-settings)[data-bk-table-settings-theme='true'] .setting-content .setting-head {
   position: relative;
   display: flex;
   padding: 0 24px;
@@ -1012,13 +1012,13 @@
   line-height: 32px;
   color: #313238;
 }
-.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-head .icon-close-action {
+:where(.bk-table-settings)[data-bk-table-settings-theme='true'] .setting-content .setting-head .icon-close-action {
   position: absolute;
   top: 10px;
   right: 15px;
   cursor: pointer;
 }
-.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-head .head-title {
+:where(.bk-table-settings)[data-bk-table-settings-theme='true'] .setting-content .setting-head .head-title {
   display: inline-block;
   height: 26px;
   margin: 24px 0;
@@ -1026,58 +1026,58 @@
   line-height: 26px;
   color: #313238;
 }
-.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body {
+:where(.bk-table-settings)[data-bk-table-settings-theme='true'] .setting-content .setting-body {
   max-height: 360px;
   padding: 0 24px;
   overflow-y: auto;
 }
-.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-title {
+:where(.bk-table-settings)[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-title {
   display: flex;
   font-size: 14px;
   line-height: 19px;
   color: #63656e;
   justify-content: space-between;
 }
-.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-title .field-setting-label {
+:where(.bk-table-settings)[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-title .field-setting-label {
   height: 22px;
   font-size: 14px;
   line-height: 22px;
   color: #313238;
   text-align: left;
 }
-.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-title .limit {
+:where(.bk-table-settings)[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-title .limit {
   color: #c4c6cc;
 }
-.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-title .check-all {
+:where(.bk-table-settings)[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-title .check-all {
   color: #3a84ff;
   cursor: pointer;
 }
-.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-fields {
+:where(.bk-table-settings)[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-fields {
   display: flex;
   max-height: 150px;
   align-items: flex-start;
   flex-wrap: wrap;
   margin-bottom: 16px;
 }
-.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-fields .field-item {
+:where(.bk-table-settings)[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-fields .field-item {
   width: 150px;
   height: 16px;
   margin-top: 16px;
   line-height: 16px;
 }
-.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-fields .field-item > label {
+:where(.bk-table-settings)[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-fields .field-item > label {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-line-height {
+:where(.bk-table-settings)[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-line-height {
   display: flex;
   height: 76px;
   font-size: 14px;
   border-top: solid 1px #f0f1f5;
   align-items: center;
 }
-.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-line-height .line-size {
+:where(.bk-table-settings)[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-line-height .line-size {
   display: flex;
   width: 68px;
   height: 26px;
@@ -1087,34 +1087,34 @@
   justify-content: center;
   align-items: center;
 }
-.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-line-height .line-size.active {
+:where(.bk-table-settings)[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-line-height .line-size.active {
   color: #3a84ff;
   background: #e1ecff;
   border: 1px solid #a3c5fd;
 }
-.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-line-height .line-size:not(.active) {
+:where(.bk-table-settings)[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-line-height .line-size:not(.active) {
   border-right: none;
   border-left: none;
 }
-.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-line-height .line-size:first-child {
+:where(.bk-table-settings)[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-line-height .line-size:first-child {
   border-right: 1px solid #c4c6cc;
   border-left: 1px solid #c4c6cc;
   border-bottom-left-radius: 2px;
   border-top-left-radius: 2px;
 }
-.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-line-height .line-size:first-child.is-medium {
+:where(.bk-table-settings)[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-line-height .line-size:first-child.is-medium {
   border-right: none;
 }
-.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-line-height .line-size:last-child {
+:where(.bk-table-settings)[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-line-height .line-size:last-child {
   border-right: 1px solid #c4c6cc;
   border-left: 1px solid #c4c6cc;
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
 }
-.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-line-height .line-size:last-child.is-medium {
+:where(.bk-table-settings)[data-bk-table-settings-theme='true'] .setting-content .setting-body .setting-body-line-height .line-size:last-child.is-medium {
   border-left: none;
 }
-.bk-table-settings[data-bk-table-settings-theme='true'] .setting-content .setting-footer {
+:where(.bk-table-settings)[data-bk-table-settings-theme='true'] .setting-content .setting-footer {
   display: flex;
   height: 50px;
   padding: 0 24px;
@@ -1124,49 +1124,49 @@
   justify-content: flex-end;
   align-items: center;
 }
-.bk-table {
+:where(.bk-table) {
   position: relative;
+  width: 100%;
   height: auto;
   overflow: hidden;
-  width: 100%;
 }
-.bk-table-flex {
+:where(.bk-table) .bk-table-flex {
   display: flex;
   flex-direction: column;
   max-height: fit-content;
 }
-.bk-table-flex .bk-table-body {
+:where(.bk-table) .bk-table-flex .bk-table-body {
   flex: 1;
   overflow: auto;
 }
-.bk-table.has-scroll-y .bk-table-head {
+:where(.bk-table).has-scroll-y .bk-table-head {
   padding-right: 4px;
 }
-.bk-table .bk-table-body {
+:where(.bk-table) .bk-table-body {
   position: relative;
   overflow: auto;
   scrollbar-gutter: stable;
   border-bottom: 1px solid #dcdee5;
 }
-.bk-table .bk-table-body::-webkit-scrollbar {
+:where(.bk-table) .bk-table-body::-webkit-scrollbar {
   width: 5px;
   height: 6px;
 }
-.bk-table .bk-table-body::-webkit-scrollbar-thumb {
+:where(.bk-table) .bk-table-body::-webkit-scrollbar-thumb {
   background: #dcdee5;
   border-radius: 10px;
   box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.3);
 }
-.bk-table .bk-table-body .prepend-row {
+:where(.bk-table) .bk-table-body .prepend-row {
   transform: translateX(var(--prepend-left));
 }
-.bk-table .bk-table-body-content.bk-stripe table tbody tr:nth-child(even) td {
+:where(.bk-table) .bk-table-body-content.bk-stripe table tbody tr:nth-child(even) td {
   background-color: #fafbfd;
 }
-.bk-table .bk-table-body-content.bk-stripe table tbody tr td {
+:where(.bk-table) .bk-table-body-content.bk-stripe table tbody tr td {
   border-bottom: none;
 }
-.bk-table .bk-fixed-bottom-border {
+:where(.bk-table) .bk-fixed-bottom-border {
   position: sticky;
   bottom: 0;
   left: 0;
@@ -1175,188 +1175,188 @@
   border-top: 1px solid #dcdee5;
   transform: translateX(var(--scroll-head-left));
 }
-.bk-table .bk-fixed-bottom-border._is-empty {
+:where(.bk-table) .bk-fixed-bottom-border._is-empty {
   display: none;
 }
-.bk-table .bk-table-head,
-.bk-table .bk-table-body {
+:where(.bk-table) .bk-table-head,
+:where(.bk-table) .bk-table-body {
   background: white;
   transform: translateZ(0);
 }
-.bk-table .bk-table-head::-webkit-scrollbar,
-.bk-table .bk-table-body::-webkit-scrollbar {
+:where(.bk-table) .bk-table-head::-webkit-scrollbar,
+:where(.bk-table) .bk-table-body::-webkit-scrollbar {
   width: 5px;
   height: 5px;
 }
-.bk-table .bk-table-head::-webkit-scrollbar-thumb,
-.bk-table .bk-table-body::-webkit-scrollbar-thumb {
+:where(.bk-table) .bk-table-head::-webkit-scrollbar-thumb,
+:where(.bk-table) .bk-table-body::-webkit-scrollbar-thumb {
   background: #ddd;
   border-radius: 20px;
   box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.3);
 }
-.bk-table .bk-table-head.__is-empty,
-.bk-table .bk-table-body.__is-empty {
+:where(.bk-table) .bk-table-head.__is-empty,
+:where(.bk-table) .bk-table-body.__is-empty {
   display: flex;
   height: 100%;
   justify-content: center;
   align-items: center;
 }
-.bk-table .bk-table-head.__is-empty .bk-table-body-content,
-.bk-table .bk-table-body.__is-empty .bk-table-body-content {
+:where(.bk-table) .bk-table-head.__is-empty .bk-table-body-content,
+:where(.bk-table) .bk-table-body.__is-empty .bk-table-body-content {
   position: relative;
   display: flex;
   width: 100%;
   height: 100%;
   padding-bottom: 20px;
 }
-.bk-table .bk-table-head table,
-.bk-table .bk-table-body table {
+:where(.bk-table) .bk-table-head table,
+:where(.bk-table) .bk-table-body table {
   width: 100%;
   border-collapse: collapse;
   transform: translateZ(0);
   table-layout: fixed;
   align-self: flex-start;
 }
-.bk-table .bk-table-head table th,
-.bk-table .bk-table-body table th,
-.bk-table .bk-table-head table td,
-.bk-table .bk-table-body table td {
+:where(.bk-table) .bk-table-head table th,
+:where(.bk-table) .bk-table-body table th,
+:where(.bk-table) .bk-table-head table td,
+:where(.bk-table) .bk-table-body table td {
   height: var(--row-height);
   min-width: 30px;
   clear: both;
 }
-.bk-table .bk-table-head table th.expand-row .expand-btn-action,
-.bk-table .bk-table-body table th.expand-row .expand-btn-action,
-.bk-table .bk-table-head table td.expand-row .expand-btn-action,
-.bk-table .bk-table-body table td.expand-row .expand-btn-action {
+:where(.bk-table) .bk-table-head table th.expand-row .expand-btn-action,
+:where(.bk-table) .bk-table-body table th.expand-row .expand-btn-action,
+:where(.bk-table) .bk-table-head table td.expand-row .expand-btn-action,
+:where(.bk-table) .bk-table-body table td.expand-row .expand-btn-action {
   color: #575961;
 }
-.bk-table .bk-table-head table th .cell,
-.bk-table .bk-table-body table th .cell,
-.bk-table .bk-table-head table td .cell,
-.bk-table .bk-table-body table td .cell {
+:where(.bk-table) .bk-table-head table th .cell,
+:where(.bk-table) .bk-table-body table th .cell,
+:where(.bk-table) .bk-table-head table td .cell,
+:where(.bk-table) .bk-table-body table td .cell {
   padding: 0 16px;
   overflow: hidden;
   font-size: 12px;
-  color: #63656E;
+  color: #63656e;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.bk-table .bk-table-head table th .cell .drag-cell,
-.bk-table .bk-table-body table th .cell .drag-cell,
-.bk-table .bk-table-head table td .cell .drag-cell,
-.bk-table .bk-table-body table td .cell .drag-cell {
-  font-size: 14px;
+:where(.bk-table) .bk-table-head table th .cell .drag-cell,
+:where(.bk-table) .bk-table-body table th .cell .drag-cell,
+:where(.bk-table) .bk-table-head table td .cell .drag-cell,
+:where(.bk-table) .bk-table-body table td .cell .drag-cell {
   height: 100%;
+  font-size: 14px;
 }
-.bk-table .bk-table-head table th .cell.has-sort,
-.bk-table .bk-table-body table th .cell.has-sort,
-.bk-table .bk-table-head table td .cell.has-sort,
-.bk-table .bk-table-body table td .cell.has-sort {
+:where(.bk-table) .bk-table-head table th .cell.has-sort,
+:where(.bk-table) .bk-table-body table th .cell.has-sort,
+:where(.bk-table) .bk-table-head table td .cell.has-sort,
+:where(.bk-table) .bk-table-body table td .cell.has-sort {
   cursor: pointer;
 }
-.bk-table .bk-table-head table th .cell.explain,
-.bk-table .bk-table-body table th .cell.explain,
-.bk-table .bk-table-head table td .cell.explain,
-.bk-table .bk-table-body table td .cell.explain {
+:where(.bk-table) .bk-table-head table th .cell.explain,
+:where(.bk-table) .bk-table-body table th .cell.explain,
+:where(.bk-table) .bk-table-head table td .cell.explain,
+:where(.bk-table) .bk-table-body table td .cell.explain {
   text-decoration-style: dashed;
   text-decoration-line: underline;
 }
-.bk-table .bk-table-head table th .cell .head-text,
-.bk-table .bk-table-body table th .cell .head-text,
-.bk-table .bk-table-head table td .cell .head-text,
-.bk-table .bk-table-body table td .cell .head-text {
+:where(.bk-table) .bk-table-head table th .cell .head-text,
+:where(.bk-table) .bk-table-body table th .cell .head-text,
+:where(.bk-table) .bk-table-head table td .cell .head-text,
+:where(.bk-table) .bk-table-body table td .cell .head-text {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.bk-table .bk-table-head table th .cell.selection,
-.bk-table .bk-table-body table th .cell.selection,
-.bk-table .bk-table-head table td .cell.selection,
-.bk-table .bk-table-body table td .cell.selection {
+:where(.bk-table) .bk-table-head table th .cell.selection,
+:where(.bk-table) .bk-table-body table th .cell.selection,
+:where(.bk-table) .bk-table-head table td .cell.selection,
+:where(.bk-table) .bk-table-body table td .cell.selection {
   padding: 0;
   text-align: center;
 }
-.bk-table .bk-table-head table th .cell.expand-cell,
-.bk-table .bk-table-body table th .cell.expand-cell,
-.bk-table .bk-table-head table td .cell.expand-cell,
-.bk-table .bk-table-body table td .cell.expand-cell {
+:where(.bk-table) .bk-table-head table th .cell.expand-cell,
+:where(.bk-table) .bk-table-body table th .cell.expand-cell,
+:where(.bk-table) .bk-table-head table td .cell.expand-cell,
+:where(.bk-table) .bk-table-body table td .cell.expand-cell {
   display: flex;
   padding: 0;
   text-overflow: unset;
   align-items: center;
   justify-content: center;
 }
-.bk-table .bk-table-head table th .expand-btn-action,
-.bk-table .bk-table-body table th .expand-btn-action,
-.bk-table .bk-table-head table td .expand-btn-action,
-.bk-table .bk-table-body table td .expand-btn-action {
+:where(.bk-table) .bk-table-head table th .expand-btn-action,
+:where(.bk-table) .bk-table-body table th .expand-btn-action,
+:where(.bk-table) .bk-table-head table td .expand-btn-action,
+:where(.bk-table) .bk-table-body table td .expand-btn-action {
   display: flex;
   padding: 0 16px;
   color: #c4c6cc;
   cursor: pointer;
 }
-.bk-table .bk-table-head table th.column_fixed,
-.bk-table .bk-table-body table th.column_fixed,
-.bk-table .bk-table-head table td.column_fixed,
-.bk-table .bk-table-body table td.column_fixed {
+:where(.bk-table) .bk-table-head table th.column_fixed,
+:where(.bk-table) .bk-table-body table th.column_fixed,
+:where(.bk-table) .bk-table-head table td.column_fixed,
+:where(.bk-table) .bk-table-body table td.column_fixed {
   position: sticky;
   z-index: 1;
 }
-.bk-table .bk-table-head table th.column_fixed.column_fixed_left,
-.bk-table .bk-table-body table th.column_fixed.column_fixed_left,
-.bk-table .bk-table-head table td.column_fixed.column_fixed_left,
-.bk-table .bk-table-body table td.column_fixed.column_fixed_left {
+:where(.bk-table) .bk-table-head table th.column_fixed.column_fixed_left,
+:where(.bk-table) .bk-table-body table th.column_fixed.column_fixed_left,
+:where(.bk-table) .bk-table-head table td.column_fixed.column_fixed_left,
+:where(.bk-table) .bk-table-body table td.column_fixed.column_fixed_left {
   left: 0;
 }
-.bk-table .bk-table-head table th.column_fixed.column_fixed_right,
-.bk-table .bk-table-body table th.column_fixed.column_fixed_right,
-.bk-table .bk-table-head table td.column_fixed.column_fixed_right,
-.bk-table .bk-table-body table td.column_fixed.column_fixed_right {
+:where(.bk-table) .bk-table-head table th.column_fixed.column_fixed_right,
+:where(.bk-table) .bk-table-body table th.column_fixed.column_fixed_right,
+:where(.bk-table) .bk-table-head table td.column_fixed.column_fixed_right,
+:where(.bk-table) .bk-table-body table td.column_fixed.column_fixed_right {
   right: 0;
 }
-.bk-table .bk-table-head table th.row_expend .expand-cell-ctx,
-.bk-table .bk-table-body table th.row_expend .expand-cell-ctx,
-.bk-table .bk-table-head table td.row_expend .expand-cell-ctx,
-.bk-table .bk-table-body table td.row_expend .expand-cell-ctx {
+:where(.bk-table) .bk-table-head table th.row_expend .expand-cell-ctx,
+:where(.bk-table) .bk-table-body table th.row_expend .expand-cell-ctx,
+:where(.bk-table) .bk-table-head table td.row_expend .expand-cell-ctx,
+:where(.bk-table) .bk-table-body table td.row_expend .expand-cell-ctx {
   min-height: 30px;
 }
-.bk-table .bk-table-head table .left,
-.bk-table .bk-table-body table .left {
+:where(.bk-table) .bk-table-head table .left,
+:where(.bk-table) .bk-table-body table .left {
   text-align: left;
 }
-.bk-table .bk-table-head table .left .cell,
-.bk-table .bk-table-body table .left .cell {
+:where(.bk-table) .bk-table-head table .left .cell,
+:where(.bk-table) .bk-table-body table .left .cell {
   justify-content: start;
 }
-.bk-table .bk-table-head table .center,
-.bk-table .bk-table-body table .center {
+:where(.bk-table) .bk-table-head table .center,
+:where(.bk-table) .bk-table-body table .center {
   text-align: center;
 }
-.bk-table .bk-table-head table .center .cell,
-.bk-table .bk-table-body table .center .cell {
+:where(.bk-table) .bk-table-head table .center .cell,
+:where(.bk-table) .bk-table-body table .center .cell {
   justify-content: center;
 }
-.bk-table .bk-table-head table .right,
-.bk-table .bk-table-body table .right {
+:where(.bk-table) .bk-table-head table .right,
+:where(.bk-table) .bk-table-body table .right {
   text-align: right;
 }
-.bk-table .bk-table-head table .right .cell,
-.bk-table .bk-table-body table .right .cell {
+:where(.bk-table) .bk-table-head table .right .cell,
+:where(.bk-table) .bk-table-body table .right .cell {
   justify-content: end;
 }
-.bk-table .bk-table-head table thead,
-.bk-table .bk-table-body table thead {
+:where(.bk-table) .bk-table-head table thead,
+:where(.bk-table) .bk-table-body table thead {
   background-color: #fafbfd;
 }
-.bk-table .bk-table-head table thead th,
-.bk-table .bk-table-body table thead th {
+:where(.bk-table) .bk-table-head table thead th,
+:where(.bk-table) .bk-table-body table thead th {
   position: relative;
   font-weight: 400;
   background-color: var(--background-color);
 }
-.bk-table .bk-table-head table thead th.col-resize-hover::after,
-.bk-table .bk-table-body table thead th.col-resize-hover::after {
+:where(.bk-table) .bk-table-head table thead th.col-resize-hover::after,
+:where(.bk-table) .bk-table-body table thead th.col-resize-hover::after {
   position: absolute;
   top: 0;
   right: 0;
@@ -1368,38 +1368,38 @@
   content: '';
   transform: translateX(50%);
 }
-.bk-table .bk-table-head table thead th .cell,
-.bk-table .bk-table-body table thead th .cell {
+:where(.bk-table) .bk-table-head table thead th .cell,
+:where(.bk-table) .bk-table-body table thead th .cell {
   display: flex;
   align-items: center;
   height: calc(var(--row-height) - 1px);
   color: #313238;
 }
-.bk-table .bk-table-head table thead th.active,
-.bk-table .bk-table-body table thead th.active,
-.bk-table .bk-table-head table thead th:hover,
-.bk-table .bk-table-body table thead th:hover {
+:where(.bk-table) .bk-table-head table thead th.active,
+:where(.bk-table) .bk-table-body table thead th.active,
+:where(.bk-table) .bk-table-head table thead th:hover,
+:where(.bk-table) .bk-table-body table thead th:hover {
   cursor: pointer;
   background: #f0f1f5;
 }
-.bk-table .bk-table-head table thead th.column_fixed,
-.bk-table .bk-table-body table thead th.column_fixed {
+:where(.bk-table) .bk-table-head table thead th.column_fixed,
+:where(.bk-table) .bk-table-body table thead th.column_fixed {
   transform: translateX(var(--scroll-left));
 }
-.bk-table .bk-table-head table tbody tr td,
-.bk-table .bk-table-body table tbody tr td {
+:where(.bk-table) .bk-table-head table tbody tr td,
+:where(.bk-table) .bk-table-body table tbody tr td {
   background-color: #fff;
 }
-.bk-table .bk-table-head table tbody tr td.empty-cell,
-.bk-table .bk-table-body table tbody tr td.empty-cell {
+:where(.bk-table) .bk-table-head table tbody tr td.empty-cell,
+:where(.bk-table) .bk-table-body table tbody tr td.empty-cell {
   padding-bottom: 30px;
 }
-.bk-table .bk-table-head table tbody tr td.is-last,
-.bk-table .bk-table-body table tbody tr td.is-last {
+:where(.bk-table) .bk-table-head table tbody tr td.is-last,
+:where(.bk-table) .bk-table-body table tbody tr td.is-last {
   border-bottom: none;
 }
-.bk-table .bk-table-head table tbody tr td .cell,
-.bk-table .bk-table-body table tbody tr td .cell {
+:where(.bk-table) .bk-table-head table tbody tr td .cell,
+:where(.bk-table) .bk-table-body table tbody tr td .cell {
   display: block;
   width: 100%;
   height: 100%;
@@ -1407,27 +1407,27 @@
   box-sizing: border-box;
   align-items: center;
 }
-.bk-table .bk-table-head table tbody tr td .cell.drag,
-.bk-table .bk-table-body table tbody tr td .cell.drag {
-  cursor: move;
+:where(.bk-table) .bk-table-head table tbody tr td .cell.drag,
+:where(.bk-table) .bk-table-body table tbody tr td .cell.drag {
   text-align: center;
+  cursor: move;
 }
-.bk-table .bk-table-head table tbody tr:hover.hover-highlight td:not(.empty-cell),
-.bk-table .bk-table-body table tbody tr:hover.hover-highlight td:not(.empty-cell) {
+:where(.bk-table) .bk-table-head table tbody tr:hover.hover-highlight td:not(.empty-cell),
+:where(.bk-table) .bk-table-body table tbody tr:hover.hover-highlight td:not(.empty-cell) {
   background: #f5f7fa;
 }
-.bk-table .bk-table-head table tbody tr.--drag-start td,
-.bk-table .bk-table-body table tbody tr.--drag-start td {
+:where(.bk-table) .bk-table-head table tbody tr.--drag-start td,
+:where(.bk-table) .bk-table-body table tbody tr.--drag-start td {
   background: #fff !important;
 }
-.bk-table .bk-table-head {
+:where(.bk-table) .bk-table-head {
   position: relative;
   z-index: 2;
   scrollbar-gutter: stable;
   overflow: hidden;
   background-color: var(--background-color);
 }
-.bk-table .bk-table-head .col-resize-drag {
+:where(.bk-table) .bk-table-head .col-resize-drag {
   position: absolute;
   top: 0;
   right: 0;
@@ -1437,10 +1437,10 @@
   background-color: #3785ff;
   transform: translateX(-50%);
 }
-.bk-table .bk-table-head thead {
+:where(.bk-table) .bk-table-head thead {
   transform: translateX(var(--scroll-head-left));
 }
-.bk-table .bk-table-head .table-head-settings {
+:where(.bk-table) .bk-table-head .table-head-settings {
   position: absolute;
   top: 0;
   right: 1px;
@@ -1456,67 +1456,67 @@
   justify-content: center;
   align-items: center;
 }
-.bk-table .bk-table-head .table-head-settings > span {
+:where(.bk-table) .bk-table-head .table-head-settings > span {
   display: flex;
   width: 1em;
   height: 1em;
 }
-.bk-table .bk-table-footer {
+:where(.bk-table) .bk-table-footer {
   display: flex;
   width: 100%;
   height: var(--footer-height);
   align-items: center;
 }
-.bk-table .bk-table-footer.is-hidden {
+:where(.bk-table) .bk-table-footer.is-hidden {
   display: none;
 }
-.bk-table.bordered-row .bk-table-head {
+:where(.bk-table).bordered-row .bk-table-head {
   border-bottom: 1px solid #dcdee5;
 }
-.bk-table.bordered-row td {
+:where(.bk-table).bordered-row td {
   border-bottom: 1px solid #dcdee5;
 }
-.bk-table.bordered-row tr:last-child td {
+:where(.bk-table).bordered-row tr:last-child td {
   border-bottom: none;
 }
-.bk-table.bordered-outer {
+:where(.bk-table).bordered-outer {
   border-top: 1px solid #dcdee5;
   border-right: 1px solid #dcdee5;
   border-left: 1px solid #dcdee5;
 }
-.bk-table.bordered-outer .bk-table-footer {
+:where(.bk-table).bordered-outer .bk-table-footer {
   border-bottom: 1px solid #dcdee5;
 }
-.bk-table.bordered-horizontal {
+:where(.bk-table).bordered-horizontal {
   border-top: 1px solid #dcdee5;
 }
-.bk-table.bordered-horizontal .bk-table-footer {
+:where(.bk-table).bordered-horizontal .bk-table-footer {
   border-bottom: 1px solid #dcdee5;
 }
-.bk-table.bordered-outer .__is-empty .bk-table-body-content,
-.bk-table.bordered-horizontal .__is-empty .bk-table-body-content {
+:where(.bk-table).bordered-outer .__is-empty .bk-table-body-content,
+:where(.bk-table).bordered-horizontal .__is-empty .bk-table-body-content {
   border-bottom: 1px solid #dcdee5;
 }
-.bk-table.bordered-col th,
-.bk-table.bordered-col td {
+:where(.bk-table).bordered-col th,
+:where(.bk-table).bordered-col td {
   border-right: 1px solid #dcdee5;
 }
-.bk-table.bordered-col th:last-child,
-.bk-table.bordered-col td:last-child {
+:where(.bk-table).bordered-col th:last-child,
+:where(.bk-table).bordered-col td:last-child {
   border-right: none;
 }
-.bk-table th,
-.bk-table td {
+:where(.bk-table) th,
+:where(.bk-table) td {
   border-right: 1px solid transparent;
 }
-.bk-table.bordered-none th,
-.bk-table.bordered-none td {
+:where(.bk-table).bordered-none th,
+:where(.bk-table).bordered-none td {
   border-top: none;
   border-right: 1px solid transparent;
   border-bottom: none;
   border-left: none;
 }
-.bk-table .bk-table-fixed {
+:where(.bk-table) .bk-table-fixed {
   position: absolute;
   top: 0;
   right: 0;
@@ -1524,25 +1524,25 @@
   left: 0;
   pointer-events: none;
 }
-.bk-table .bk-table-fixed .column_fixed {
+:where(.bk-table) .bk-table-fixed .column_fixed {
   position: absolute;
   z-index: 2;
 }
-.bk-table .bk-table-fixed .column_fixed.column_fixed_left {
+:where(.bk-table) .bk-table-fixed .column_fixed.column_fixed_left {
   top: 0;
   left: 0;
 }
-.bk-table .bk-table-fixed .column_fixed.column_fixed_left.shadow {
+:where(.bk-table) .bk-table-fixed .column_fixed.column_fixed_left.shadow {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
 }
-.bk-table .bk-table-fixed .column_fixed.column_fixed_right {
+:where(.bk-table) .bk-table-fixed .column_fixed.column_fixed_right {
   top: 0;
   right: 0;
 }
-.bk-table .bk-table-fixed .column_fixed.column_fixed_right.shadow {
+:where(.bk-table) .bk-table-fixed .column_fixed.column_fixed_right.shadow {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
 }
-.bk-table .bk-table-fixed .scroll-loading._bottom {
+:where(.bk-table) .bk-table-fixed .scroll-loading._bottom {
   position: absolute;
   right: 0;
   bottom: 0;
@@ -1550,16 +1550,16 @@
   display: flex;
   justify-content: center;
 }
-.bk-table colgroup col {
+:where(.bk-table) colgroup col {
   background: white;
 }
-.bk-table colgroup col.active {
+:where(.bk-table) colgroup col.active {
   position: relative;
   background: #f0f1f5;
 }
-.bk-table .bk-pagination .is-last {
+:where(.bk-table) .bk-pagination .is-last {
   margin-left: auto;
 }
-.bk-table .stripe-row {
+:where(.bk-table) .stripe-row {
   background: #fafbfd;
 }