@neatui/css 4.8.2 → 5.0.0

package/dist/neatui.preview.css

@@ -18041,6 +18041,85 @@ td[ui-col],th[ui-col]{
   display:none;
 }
 
+[ui-avatar~="@a"]{
+  --avatar-size:2.5em;
+  align-items:center;
+  background:var(--co-line);
+  border-radius:50%;
+  color:var(--co-desc);
+  display:inline-flex;
+  flex-shrink:0;
+  font-size:1em;
+  font-weight:700;
+  height:var(--avatar-size);
+  justify-content:center;
+  line-height:1;
+  overflow:hidden;
+  position:relative;
+  user-select:none;
+  vertical-align:middle;
+  white-space:nowrap;
+  width:var(--avatar-size);
+}
+[ui-avatar~="@a"]>img{
+  display:block;
+  height:100%;
+  object-fit:cover;
+  width:100%;
+}
+[ui-avatar~="@a"]>span{
+  font-size:calc(var(--avatar-size)*.4);
+}
+[ui-avatar~="@a"][ui-avatar~=":square"]{
+  border-radius:.25em;
+}
+[ui-avatar~="@a"][ui-avatar~=xs]{
+  --avatar-size:1.5em;
+}
+[ui-avatar~="@a"][ui-avatar~=s]{
+  --avatar-size:2em;
+}
+[ui-avatar~="@a"][ui-avatar~=m]{
+  --avatar-size:2.5em;
+}
+[ui-avatar~="@a"][ui-avatar~=l]{
+  --avatar-size:3em;
+}
+[ui-avatar~="@a"][ui-avatar~=xl]{
+  --avatar-size:4em;
+}
+[ui-avatar~="@a"][ui-avatar~=main]{
+  background:var(--co-main);
+  color:#fff;
+}
+[ui-avatar~="@a"][ui-avatar~=well]{
+  background:var(--co-well);
+  color:#fff;
+}
+[ui-avatar~="@a"][ui-avatar~=warn]{
+  background:var(--co-warn);
+  color:#fff;
+}
+[ui-avatar~="@a"][ui-avatar~=risk]{
+  background:var(--co-risk);
+  color:#fff;
+}
+[ui-avatar~="@a"][ui-avatar~=info]{
+  background:var(--co-info);
+  color:#fff;
+}
+
+[ui-avatars~="@a"]{
+  align-items:center;
+  display:inline-flex;
+}
+[ui-avatars~="@a"]>*+*{
+  margin-left:-.5em;
+}
+[ui-avatars~="@a"]>*{
+  box-shadow:0 0 0 2px var(--co-fore);
+}
+
 [ui-btn]{
   align-content:center;
   align-items:center;
@@ -27903,42 +27982,42 @@ body [ui-btn~="@b"][ui-btn~=b][ui-btn~=":underline"]:hover{
 [ui-tag~="@a"],[ui-tag~="@a"][ui-tag~=main]{
   background:var(--co-main-o-sm);
   box-shadow:inset 0 0 0 1px var(--co-main-o-ms);
-  color:var(--co-main);
+  color:var(--co-main-b-lm, var(--co-main));
 }
 [ui-tag~="@a"][ui-tag~=well]{
   background:var(--co-well-o-sm);
   box-shadow:inset 0 0 0 1px var(--co-well-o-ms);
-  color:var(--co-well);
+  color:var(--co-well-b-lm, var(--co-well));
 }
 [ui-tag~="@a"][ui-tag~=warn]{
   background:var(--co-warn-o-sm);
   box-shadow:inset 0 0 0 1px var(--co-warn-o-ms);
-  color:var(--co-warn);
+  color:var(--co-warn-b-lm, var(--co-warn));
 }
 [ui-tag~="@a"][ui-tag~=risk]{
   background:var(--co-risk-o-sm);
   box-shadow:inset 0 0 0 1px var(--co-risk-o-ms);
-  color:var(--co-risk);
+  color:var(--co-risk-b-lm, var(--co-risk));
 }
 [ui-tag~="@a"][ui-tag~=info]{
   background:var(--co-info-o-sm);
   box-shadow:inset 0 0 0 1px var(--co-info-o-ms);
-  color:var(--co-info);
+  color:var(--co-info-b-lm, var(--co-info));
 }
 [ui-tag~="@a"][ui-tag~=read]{
   background:var(--co-read-o-sm);
   box-shadow:inset 0 0 0 1px var(--co-read-o-ms);
-  color:var(--co-read);
+  color:var(--co-read-b-lm, var(--co-read));
 }
 [ui-tag~="@a"][ui-tag~=note]{
   background:var(--co-note-o-sm);
   box-shadow:inset 0 0 0 1px var(--co-note-o-ms);
-  color:var(--co-note);
+  color:var(--co-note-b-lm, var(--co-note));
 }
 [ui-tag~="@a"][ui-tag~=idle]{
   background:var(--co-idle-o-sm);
   box-shadow:inset 0 0 0 1px var(--co-idle-o-ms);
-  color:var(--co-idle);
+  color:var(--co-idle-b-lm, var(--co-idle));
 }
 
 [ui-tags~="@a"]{
@@ -27968,49 +28047,49 @@ body [ui-btn~="@b"][ui-btn~=b][ui-btn~=":underline"]:hover{
 [ui-tags~="@a"][ui-tags~=":leaf"]>*{
   border-radius:10em 0;
 }
-[ui-tags~="@a"][ui-tag~=":bullet"]>*{
+[ui-tags~="@a"][ui-tags~=":bullet"]>*{
   border-radius:1em .2em .2em 1em;
   padding:.25em .65em .25em .5em;
 }
 [ui-tags~="@a"]>*,[ui-tags~="@a"][ui-tags~=main]>*{
   background:var(--co-main-o-sm);
   box-shadow:inset 0 0 0 1px var(--co-main-o-ms);
-  color:var(--co-main);
+  color:var(--co-main-b-lm, var(--co-main));
 }
 [ui-tags~="@a"][ui-tags~=well]>*{
   background:var(--co-well-o-sm);
   box-shadow:inset 0 0 0 1px var(--co-well-o-ms);
-  color:var(--co-well);
+  color:var(--co-well-b-lm, var(--co-well));
 }
 [ui-tags~="@a"][ui-tags~=warn]>*{
   background:var(--co-warn-o-sm);
   box-shadow:inset 0 0 0 1px var(--co-warn-o-ms);
-  color:var(--co-warn);
+  color:var(--co-warn-b-lm, var(--co-warn));
 }
 [ui-tags~="@a"][ui-tags~=risk]>*{
   background:var(--co-risk-o-sm);
   box-shadow:inset 0 0 0 1px var(--co-risk-o-ms);
-  color:var(--co-risk);
+  color:var(--co-risk-b-lm, var(--co-risk));
 }
 [ui-tags~="@a"][ui-tags~=info]>*{
   background:var(--co-info-o-sm);
   box-shadow:inset 0 0 0 1px var(--co-info-o-ms);
-  color:var(--co-info);
+  color:var(--co-info-b-lm, var(--co-info));
 }
 [ui-tags~="@a"][ui-tags~=read]>*{
   background:var(--co-read-o-sm);
   box-shadow:inset 0 0 0 1px var(--co-read-o-ms);
-  color:var(--co-read);
+  color:var(--co-read-b-lm, var(--co-read));
 }
 [ui-tags~="@a"][ui-tags~=note]>*{
   background:var(--co-note-o-sm);
   box-shadow:inset 0 0 0 1px var(--co-note-o-ms);
-  color:var(--co-note);
+  color:var(--co-note-b-lm, var(--co-note));
 }
 [ui-tags~="@a"][ui-tags~=idle]>*{
   background:var(--co-idle-o-sm);
   box-shadow:inset 0 0 0 1px var(--co-idle-o-ms);
-  color:var(--co-idle);
+  color:var(--co-idle-b-lm, var(--co-idle));
 }
 
 [ui-tag~="@b"]{
@@ -28041,35 +28120,35 @@ body [ui-btn~="@b"][ui-btn~=b][ui-btn~=":underline"]:hover{
 }
 [ui-tag~="@b"],[ui-tag~="@b"][ui-tag~=main]{
   background:var(--co-main-o-sm);
-  color:var(--co-main);
+  color:var(--co-main-b-lm, var(--co-main));
 }
 [ui-tag~="@b"][ui-tag~=well]{
   background:var(--co-well-o-sm);
-  color:var(--co-well);
+  color:var(--co-well-b-lm, var(--co-well));
 }
 [ui-tag~="@b"][ui-tag~=warn]{
   background:var(--co-warn-o-sm);
-  color:var(--co-warn);
+  color:var(--co-warn-b-lm, var(--co-warn));
 }
 [ui-tag~="@b"][ui-tag~=risk]{
   background:var(--co-risk-o-sm);
-  color:var(--co-risk);
+  color:var(--co-risk-b-lm, var(--co-risk));
 }
 [ui-tag~="@b"][ui-tag~=info]{
   background:var(--co-info-o-sm);
-  color:var(--co-info);
+  color:var(--co-info-b-lm, var(--co-info));
 }
 [ui-tag~="@b"][ui-tag~=read]{
   background:var(--co-read-o-sm);
-  color:var(--co-read);
+  color:var(--co-read-b-lm, var(--co-read));
 }
 [ui-tag~="@b"][ui-tag~=note]{
   background:var(--co-note-o-sm);
-  color:var(--co-note);
+  color:var(--co-note-b-lm, var(--co-note));
 }
 [ui-tag~="@b"][ui-tag~=idle]{
   background:var(--co-idle-o-sm);
-  color:var(--co-idle);
+  color:var(--co-idle-b-lm, var(--co-idle));
 }
 
 [ui-tags~="@b"]{
@@ -28099,41 +28178,165 @@ body [ui-btn~="@b"][ui-btn~=b][ui-btn~=":underline"]:hover{
 [ui-tags~="@b"][ui-tags~=":leaf"]>*{
   border-radius:10em 0;
 }
-[ui-tags~="@b"][ui-tag~=":bullet"]>*{
+[ui-tags~="@b"][ui-tags~=":bullet"]>*{
   border-radius:1em .2em .2em 1em;
   padding:.5em .65em .5em .5em;
 }
 [ui-tags~="@b"]>*,[ui-tags~="@b"][ui-tags~=main]>*{
   background:var(--co-main-o-sm);
-  color:var(--co-main);
+  color:var(--co-main-b-lm, var(--co-main));
 }
 [ui-tags~="@b"][ui-tags~=well]>*{
   background:var(--co-well-o-sm);
-  color:var(--co-well);
+  color:var(--co-well-b-lm, var(--co-well));
 }
 [ui-tags~="@b"][ui-tags~=warn]>*{
   background:var(--co-warn-o-sm);
-  color:var(--co-warn);
+  color:var(--co-warn-b-lm, var(--co-warn));
 }
 [ui-tags~="@b"][ui-tags~=risk]>*{
   background:var(--co-risk-o-sm);
-  color:var(--co-risk);
+  color:var(--co-risk-b-lm, var(--co-risk));
 }
 [ui-tags~="@b"][ui-tags~=info]>*{
   background:var(--co-info-o-sm);
-  color:var(--co-info);
+  color:var(--co-info-b-lm, var(--co-info));
 }
 [ui-tags~="@b"][ui-tags~=read]>*{
   background:var(--co-read-o-sm);
-  color:var(--co-read);
+  color:var(--co-read-b-lm, var(--co-read));
 }
 [ui-tags~="@b"][ui-tags~=note]>*{
   background:var(--co-note-o-sm);
-  color:var(--co-note);
+  color:var(--co-note-b-lm, var(--co-note));
 }
 [ui-tags~="@b"][ui-tags~=idle]>*{
   background:var(--co-idle-o-sm);
-  color:var(--co-idle);
+  color:var(--co-idle-b-lm, var(--co-idle));
+}
+
+[ui-tag~="@c"]{
+  color:#fff;
+  display:inline-block;
+  font-weight:700;
+  line-height:1.25;
+  padding:2px .5em;
+  vertical-align:middle;
+  white-space:nowrap;
+}
+[ui-tag~="@c"],[ui-tag~="@c"][ui-tag~=":round"]{
+  border-radius:10em;
+}
+[ui-tag~="@c"][ui-tag~=":square"]{
+  border-radius:.2rem;
+}
+[ui-tag~="@c"][ui-tag~=":leaf"]{
+  border-radius:.5em 0;
+}
+[ui-tag~="@c"][ui-tag~=":bullet"]{
+  border-radius:1em .2em .2em 1em;
+}
+[ui-tag~="@c"][ui-tag~=s]{
+  padding:1px .5em;
+}
+[ui-tag~="@c"][ui-tag~=m]{
+  padding:2px .5em;
+}
+[ui-tag~="@c"][ui-tag~=l]{
+  padding:3px .5em;
+}
+[ui-tag~="@c"],[ui-tag~="@c"][ui-tag~=main]{
+  background:var(--co-main);
+}
+[ui-tag~="@c"][ui-tag~=well]{
+  background:var(--co-well);
+}
+[ui-tag~="@c"][ui-tag~=warn]{
+  background:var(--co-warn);
+}
+[ui-tag~="@c"][ui-tag~=risk]{
+  background:var(--co-risk);
+}
+[ui-tag~="@c"][ui-tag~=info]{
+  background:var(--co-info);
+}
+[ui-tag~="@c"][ui-tag~=read]{
+  background:var(--co-read);
+}
+[ui-tag~="@c"][ui-tag~=note]{
+  background:var(--co-note);
+}
+[ui-tag~="@c"][ui-tag~=idle]{
+  background:var(--co-idle);
+}
+
+[ui-tags~="@c"]{
+  position:relative;
+  width:100%;
+}
+[ui-tags~="@c"][ui-tags~=al]>*{
+  margin-right:.5rem;
+}
+[ui-tags~="@c"][ui-tags~=ac]>*{
+  margin-left:.5rem;
+  margin-right:.5rem;
+}
+[ui-tags~="@c"][ui-tags~=ar]>*{
+  margin-left:.5rem;
+}
+[ui-tags~="@c"]>*{
+  color:#fff;
+  display:inline-block;
+  font-weight:700;
+  line-height:1.25;
+  padding:2px .5em;
+  vertical-align:middle;
+  white-space:nowrap;
+}
+[ui-tags~="@c"]>*,[ui-tags~="@c"][ui-tags~=":round"]>*{
+  border-radius:10em;
+}
+[ui-tags~="@c"][ui-tags~=":square"]>*{
+  border-radius:.2rem;
+}
+[ui-tags~="@c"][ui-tags~=":leaf"]>*{
+  border-radius:10em 0;
+}
+[ui-tags~="@c"][ui-tags~=":bullet"]>*{
+  border-radius:1em .2em .2em 1em;
+}
+[ui-tags~="@c"][ui-tags~=s]>*{
+  padding:1px .5em;
+}
+[ui-tags~="@c"][ui-tags~=m]>*{
+  padding:2px .5em;
+}
+[ui-tags~="@c"][ui-tags~=l]>*{
+  padding:3px .5em;
+}
+[ui-tags~="@c"]>*,[ui-tags~="@c"][ui-tags~=main]>*{
+  background:var(--co-main);
+}
+[ui-tags~="@c"][ui-tags~=well]>*{
+  background:var(--co-well);
+}
+[ui-tags~="@c"][ui-tags~=warn]>*{
+  background:var(--co-warn);
+}
+[ui-tags~="@c"][ui-tags~=risk]>*{
+  background:var(--co-risk);
+}
+[ui-tags~="@c"][ui-tags~=info]>*{
+  background:var(--co-info);
+}
+[ui-tags~="@c"][ui-tags~=read]>*{
+  background:var(--co-read);
+}
+[ui-tags~="@c"][ui-tags~=note]>*{
+  background:var(--co-note);
+}
+[ui-tags~="@c"][ui-tags~=idle]>*{
+  background:var(--co-idle);
 }
 
 [ui-tips] [ui-tips-box~=tl]{