proto-badges for type flags

src/components/navigation/sidebars/nav/index.tsx

@@ -47,10 +47,11 @@ const NavComponent: Component<NavProps> = props => {
     }
   };
 
-  onMount(() => {});
+  onMount(() => {
     onCleanup(() => {
       window.removeEventListener("click", handleClickOutside);
     });
+  });
 
   createEffect(() => {
     if (open()) {

src/components/navigation/sidebars/toc/index.tsx

@@ -40,10 +40,11 @@ const TableOfContents: Component<TOCProps> = props => {
     }
   };
 
-  onMount(() => {});
+  onMount(() => {
     onCleanup(() => {
       window.removeEventListener("click", handleClickOutside);
     });
+  });
 
   createEffect(() => {
     if (open()) {

src/components/type/Properties.astro

@@ -37,7 +37,8 @@ const { propsKeys, propsData } = Astro.props;
       }
       return (
         <li id={ item } class="typedata-root typeprop-root">
-          <p class="typedata-name typeprop-name">
+          <div class="typedata-title typeprop-title">
+            <section class="typedata-name typeprop-name">
             <Tag client:idle/>
             { item }<span class="type-datatype">:&nbsp;<a
               href={typeLink}
@@ -46,7 +47,7 @@ const { propsKeys, propsData } = Astro.props;
               href={genericTypeLink}>{genericType}</a
               ><span class="type-datatype">&gt;</span>
             )}</span>
-          </p>
+            </section>
             {
               propData.flags && propData.flags.length > 0 ? (
                 <p class="type-flags">
@@ -63,6 +64,7 @@ const { propsKeys, propsData } = Astro.props;
                 </p>
               ) : null
             }
+          </div>
           {
             gadget ? (
               <p class="typedata-params typefunc-params">

src/styles/docs/docs-types.css

@@ -31,12 +31,10 @@
         left: 0;
         width: 100%;
         height: 1px;
-        background: linear-gradient(
-          90deg,
+        background: linear-gradient(90deg,
             transparent 25%,
             hsla(var(--accent-500) / 0.88) 50%,
-          transparent 75%
-        );
+            transparent 75%);
       }
     }
   }
@@ -60,7 +58,7 @@
 }
 
 #injectedMd {
-  & > p:not(:first-child) {
+  &>p:not(:first-child) {
     margin-block: 0.724rem;
   }
 }
@@ -74,7 +72,7 @@
 }
 
 .typedocs-content {
-  & > p {
+  &>p {
     margin-block: 0.618rem;
   }
 
@@ -102,10 +100,13 @@
     padding: 0.8rem;
     transition: border 0.3s;
 
-    & > .typedata-name {
+    & .typedata-title {
+      margin-bottom: 1.618rem;
+
+      & .typedata-name {
+        font-size: 1.272rem;
         display: flex;
         align-items: center;
-      font-size: 1.272rem;
         margin: 0;
 
         & svg {
@@ -114,6 +115,26 @@
           margin-right: 0.3em;
         }
       }
+
+      & .type-flags {
+        display: flex;
+        flex-flow: row nowrap;
+        gap: 0.517rem;
+        font-size: 0.815rem;
+        margin: 0;
+
+        & .type-flag {
+          padding-inline: 6px;
+          padding-block: 3px;
+          display: flex;
+          align-items: center;
+          gap: 0.117rem;
+          color: hsl(var(--inner-param-color));
+          border: 1px solid hsl(var(--inner-param-color));
+          border-radius: 5px;
+        }
+      }
+    }
   }
 
   & .typedata-details {
@@ -137,11 +158,11 @@
 
   & .typedata-detailsdata,
   .typedocs-subheading {
-    & > p {
+    &>p {
       margin-top: 0.618rem;
     }
 
-    & > p:last-child {
+    &>p:last-child {
       margin-bottom: 0;
     }
 
@@ -201,22 +222,11 @@
   width: max-content;
   transition: opacity 0.5s;
 
-  & > a {
+  &>a {
     opacity: inherit;
   }
 }
 
-.type-flags {
-  & .type-flag {
-    margin: 0;
-    margin-top: 0.272rem;
-    display: flex;
-    align-items: center;
-    gap: 0.117rem;
-    color: hsl(var(--inner-param-color));
-  }
-}
-
 .typeprops {
   & .typeprop-root {
     border: 1px solid hsla(var(--prop-color) / 0.6);
@@ -239,7 +249,8 @@ html.dark .typeprops {
   & .typeprop-root {
     border: 1px solid hsla(var(--prop-color) / 0.3);
 
-    &:hover, &:target {
+    &:hover,
+    &:target {
       border: 1px solid hsla(var(--prop-color) / 0.6);
     }
   }
@@ -268,7 +279,7 @@ html.dark .typeprops {
         align-items: center;
         gap: 0.117rem;
 
-        & > svg {
+        &>svg {
           height: 1.272rem;
           width: 1.272rem;
         }
@@ -281,7 +292,8 @@ html.dark .typefuncs {
   & .typefunc-root {
     border: 1px solid hsla(var(--func-color) / 0.3);
 
-    &:hover, &:target {
+    &:hover,
+    &:target {
       border: 1px solid hsla(var(--func-color) / 0.6);
     }
   }
@@ -320,7 +332,7 @@ html.dark .typefuncs {
         align-items: center;
         gap: 0.117rem;
 
-        & > svg {
+        &>svg {
           height: 1.272rem;
           width: 1.272rem;
         }
@@ -333,7 +345,8 @@ html.dark .typesignals {
   & .typesignal-root {
     border: 1px solid hsla(var(--signal-color) / 0.3);
 
-    &:hover, &:target {
+    &:hover,
+    &:target {
       border: 1px solid hsla(var(--signal-color) / 0.6);
     }
   }
@@ -371,7 +384,8 @@ html.dark .typevariants {
   & .typevariant-root {
     border: 1px solid hsla(var(--var-color) / 0.3);
 
-    &:hover, &:target {
+    &:hover,
+    &:target {
       border: 1px solid hsla(var(--var-color) / 0.6);
     }
   }
@@ -389,11 +403,9 @@ html.dark .typevariants {
 
         &::before {
           width: 0;
-          background: linear-gradient(
-            to right,
+          background: linear-gradient(to right,
               hsla(var(--accent-400) / 0.5) var(--percent),
-            hsla(var(--accent-400) / 0) 100%
-          );
+              hsla(var(--accent-400) / 0) 100%);
           animation: percentToZero 250ms ease-in-out forwards;
           transition: width 0.25s ease-in-out;
         }
@@ -414,11 +426,16 @@ html.dark .typevariants {
   .typedocs-content {
     margin-inline: 1.272rem;
 
+    & .typedata-title {
+      display: flex;
+      justify-content: space-between;
+    }
+
     & section {
       min-width: 30svw;
     }
 
-    & > p {
+    &>p {
       margin-block: 1.217rem;
     }
   }