style error when the boolean type attribute value is the string 'false'.

packages/mdui/src/components/bottom-app-bar/style.less

@@ -23,7 +23,7 @@
   position: absolute;
 }
 
-:host([hide]) {
+:host([hide]:not([hide="false" i])) {
   .transition-duration(short4);
   .bottom(-80 - 10);
 }
@@ -37,7 +37,7 @@
 }
 
 // 含 fab-detach 属性时，fab 脱离 bottom-app-bar
-:host([fab-detach]) {
+:host([fab-detach]:not([fab-detach="false" i])) {
   ::slotted(mdui-fab) {
     position: absolute;
     .transition(bottom, long2, standard);
@@ -46,23 +46,24 @@
   }
 }
 
-:host([fab-detach][hide][scroll-behavior~="hide"]) {
+:host([fab-detach][hide][scroll-behavior~="hide"]:not([hide="false" i], [fab-detach="false" i])) {
   ::slotted(mdui-fab) {
     .transition-duration(short4);
     .bottom(16);
     .elevation(2);
   }
 }
 
-:host([fab-detach][hide][scroll-behavior~="hide"][scroll-target]:not([scroll-target=""])) {
+:host([fab-detach][hide][scroll-behavior~="hide"][scroll-target]:not([fab-detach="false" i], [hide="false" i], [scroll-target=""])) {
   ::slotted(mdui-fab) {
     .bottom(80 + 10 + 16);
   }
 }
 
 // 显示 bottom-app-bar 时，子元素依次进入
-:host([hide]) ::slotted(:not(mdui-fab)),
-:host([hide]:not([fab-detach])) ::slotted(mdui-fab) {
+:host([hide]:not([hide="false" i])) ::slotted(:not(mdui-fab)),
+:host([hide]:not([hide="false" i], [fab-detach])) ::slotted(mdui-fab),
+:host([hide][fab-detach="false" i]:not([hide="false" i])) ::slotted(mdui-fab) {
   transform: translateY(unit((140px / @mdui-root-font-size), rem));
   .transition(transform, 0, emphasized-accelerate, short4);
 }

packages/mdui/src/components/button-icon/style.less

@@ -42,50 +42,52 @@
   .state-layer-color(on-surface);
 }
 
-:host([variant="standard"][selected]) {
+:host([variant="standard"][selected]:not([selected="false" i])) {
   .color(primary);
   .state-layer-color(primary);
 }
 
-:host([variant="filled"][selected]),
-:host([variant="filled"]:not([selectable])) {
+:host([variant="filled"][selected]:not([selected="false" i])),
+:host([variant="filled"]:not([selectable])),
+:host([variant="filled"][selectable="false" i]) {
   .color(on-primary);
   .background-color(primary);
   .state-layer-color(on-primary);
 }
 
-:host([variant="tonal"][selected]),
-:host([variant="tonal"]:not([selectable])) {
+:host([variant="tonal"][selected]:not([selected="false" i])),
+:host([variant="tonal"]:not([selectable])),
+:host([variant="tonal"][selectable="false" i]) {
   .color(on-secondary-container);
   .background-color(secondary-container);
   .state-layer-color(on-secondary-container);
 }
 
-:host([variant="outlined"][selected]) {
+:host([variant="outlined"][selected]:not([selected="false" i])) {
   border: none;
   .color(inverse-on-surface);
   .background-color(inverse-surface);
   .state-layer-color(inverse-on-surface);
 }
 
-:host([variant="filled"][disabled]),
-:host([variant="tonal"][disabled]),
-:host([variant="outlined"][disabled]) {
+:host([variant="filled"][disabled]:not([disabled="false" i])),
+:host([variant="tonal"][disabled]:not([disabled="false" i])),
+:host([variant="outlined"][disabled]:not([disabled="false" i])) {
   .background-color(on-surface, 0.12);
   .border-color(on-surface, 0.12);
 }
 
-:host([disabled]),
-:host([loading]) {
+:host([disabled]:not([disabled="false" i])),
+:host([loading]:not([loading="false" i])) {
   cursor: default;
   pointer-events: none;
 }
 
-:host([disabled]) {
+:host([disabled]:not([disabled="false" i])) {
   .color(on-surface, 0.38) !important;
 }
 
-:host([loading]) {
+:host([loading]:not([loading="false" i])) {
   mdui-ripple,
   .button {
     opacity: 0;
@@ -112,11 +114,12 @@ mdui-circular-progress {
   .height(24);
 
   // filled 背景色和 loading 颜色冲突，需要特殊处理
-  :host([variant="filled"]:not([disabled])) & {
+  :host([variant="filled"]:not([disabled])) &,
+  :host([variant="filled"][disabled="false" i]) & {
     .stroke(on-primary);
   }
 
-  :host([disabled]) & {
+  :host([disabled]:not([disabled="false" i])) & {
     .stroke(on-surface, 38%)
   }
 }

packages/mdui/src/components/button/style.less

@@ -24,7 +24,7 @@
   .padding(0, 16);
 }
 
-:host([full-width]) {
+:host([full-width]:not([full-width="false" i])) {
   display: block;
 }
 
@@ -68,24 +68,24 @@
   .elevation(1);
 }
 
-:host([disabled]),
-:host([loading]) {
+:host([disabled]:not([disabled="false" i])),
+:host([loading]:not([loading="false" i])) {
   cursor: default;
   pointer-events: none;
 }
 
-:host([disabled]) {
+:host([disabled]:not([disabled="false" i])) {
   .color(on-surface, 38%);
   .elevation(0);
 }
 
-:host([variant="elevated"][disabled]),
-:host([variant="filled"][disabled]),
-:host([variant="tonal"][disabled]) {
+:host([variant="elevated"][disabled]:not([disabled="false" i])),
+:host([variant="filled"][disabled]:not([disabled="false" i])),
+:host([variant="tonal"][disabled]:not([disabled="false" i])) {
   .background-color(on-surface, 12%);
 }
 
-:host([variant="outlined"][disabled]) {
+:host([variant="outlined"][disabled]:not([disabled="false" i])) {
   .border-color(on-surface, 12%);
 }
 
@@ -122,7 +122,7 @@ mdui-circular-progress {
     .stroke(on-secondary-container);
   }
 
-  :host([disabled]) & {
+  :host([disabled]:not([disabled="false" i])) & {
     .stroke(on-surface, 38%)
   }
 }

packages/mdui/src/components/card/style.less

@@ -13,7 +13,7 @@
   .state-layer-color(on-surface);
 }
 
-:host([clickable]) {
+:host([clickable]:not([clickable="false" i])) {
   cursor: pointer;
 }
 
@@ -46,23 +46,23 @@
   .elevation(3);
 }
 
-:host([disabled]) {
+:host([disabled]:not([disabled="false" i])) {
   opacity: 0.38;
   cursor: default;
   user-select: none;
 }
 
-:host([variant="elevated"][disabled]) {
+:host([variant="elevated"][disabled]:not([disabled="false" i])) {
   .background-color(surface-variant);
   .elevation(0);
 }
 
-:host([variant="filled"][disabled]) {
+:host([variant="filled"][disabled]:not([disabled="false" i])) {
   .background-color(surface);
   .elevation(1);
 }
 
-:host([variant="outlined"][disabled]) {
+:host([variant="outlined"][disabled]:not([disabled="false" i])) {
   .elevation(0);
   .border-color(outline, 0.32);
 }

packages/mdui/src/components/checkbox/style.less

@@ -79,7 +79,7 @@ i {
 }
 
 // 选中状态的图标
-:host([checked]) {
+:host([checked]:not([checked="false" i])) {
   i {
     .state-layer-color(primary);
   }
@@ -100,7 +100,7 @@ i {
 }
 
 // 不确定状态的图标
-:host([indeterminate]) {
+:host([indeterminate]:not([indeterminate="false" i])) {
   i {
     .state-layer-color(primary);
   }
@@ -136,7 +136,7 @@ i {
 }
 
 // 禁用状态的图标
-:host([disabled]) {
+:host([disabled]:not([disabled="false" i])) {
   cursor: default;
   pointer-events: none;
 
@@ -150,8 +150,8 @@ i {
 }
 
 // 禁用且选中状态、禁用且不确定状态
-:host([disabled][checked]),
-:host([disabled][indeterminate]) {
+:host([disabled][checked]:not([disabled="false" i], [checked="false" i])),
+:host([disabled][indeterminate]:not([disabled="false" i], [indeterminate="false" i])) {
   .unchecked-icon {
     opacity: 0;
   }

packages/mdui/src/components/chip/style.less

@@ -29,17 +29,17 @@
     .padding-left(3);
   }
 
-  :host([selected]) & {
+  :host([selected]:not([selected="false" i])) & {
     .padding-right(8);
     .padding-left(8);
   }
 
-  :host([selected][variant="input"]) & {
+  :host([selected][variant="input"]:not([selected="false" i])) & {
     .padding-right(4);
     .padding-left(4);
   }
 
-  :host([elevated]) & {
+  :host([elevated]:not([elevated="false" i])) & {
     .padding-right(8);
     .padding-left(8);
   }
@@ -50,41 +50,41 @@
   .state-layer-color(on-surface);
 }
 
-:host([elevated]) {
+:host([elevated]:not([elevated="false" i])) {
   border-width: 0;
   .background-color(surface-container-low);
   .elevation(1);
 }
 
-:host([selected]) {
+:host([selected]:not([selected="false" i])) {
   .color(on-secondary-container);
   .background-color(secondary-container);
   .border-width(0);
   .state-layer-color(on-secondary-container);
 }
 
-:host([disabled]),
-:host([loading]) {
+:host([disabled]:not([disabled="false" i])),
+:host([loading]:not([loading="false" i])) {
   cursor: default;
   pointer-events: none;
 }
 
-:host([disabled]) {
+:host([disabled]:not([disabled="false" i])) {
   .border-color(on-surface, 12%);
   .color(on-surface, 38%);
   .elevation(0);
 }
 
-:host([disabled][elevated]),
-:host([disabled][selected]) {
+:host([disabled][elevated]:not([disabled="false" i], [elevated="false" i])),
+:host([disabled][selected]:not([disabled="false" i], [selected="false" i])) {
   .background-color(on-surface, 12%);
 }
 
-:host([selected][hover]) {
+:host([selected][hover]:not([selected="false" i])) {
   .elevation(1);
 }
 
-:host([elevated][hover]) {
+:host([elevated][hover]:not([elevated="false" i])) {
   .color(on-secondary-container);
   .elevation(2);
 }
@@ -128,11 +128,11 @@
     .color(primary);
   }
 
-  :host([selected]) & {
+  :host([selected]:not([selected="false" i])) & {
     .color(on-secondary-container);
   }
 
-  :host([disabled]) & {
+  :host([disabled]:not([disabled="false" i])) & {
     opacity: 0.38;
     .color(on-surface);
   }
@@ -168,7 +168,7 @@ mdui-circular-progress {
   .width(18);
   .height(18);
 
-  :host([disabled]) & {
+  :host([disabled]:not([disabled="false" i])) & {
     .stroke(on-surface, 38%)
   }
 }
@@ -179,7 +179,7 @@ mdui-circular-progress {
   .width(24);
   .height(24);
 
-  :host([disabled]) & {
+  :host([disabled]:not([disabled="false" i])) & {
     opacity: 0.38;
   }
 }
@@ -222,7 +222,7 @@ mdui-circular-progress {
     .margin-right(1);
   }
 
-  :host([disabled]) & {
+  :host([disabled]:not([disabled="false" i])) & {
     .color(on-surface, 38%);
   }
 }