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(
+        background: linear-gradient(90deg,
-          90deg,
             transparent 25%,
             hsla(var(--accent-500) / 0.88) 50%,
-          transparent 75%
+            transparent 75%);
-        );
       }
     }
   }
@@ -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 {
@@ -206,17 +227,6 @@
   }
 }
 
-.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);
     }
   }
@@ -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);
     }
   }
@@ -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(
+          background: linear-gradient(to right,
-            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,6 +426,11 @@ html.dark .typevariants {
   .typedocs-content {
     margin-inline: 1.272rem;
 
+    & .typedata-title {
+      display: flex;
+      justify-content: space-between;
+    }
+
     & section {
       min-width: 30svw;
     }