proto-badges for type flags

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

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

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

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

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,23 +47,24 @@ const { propsKeys, propsData } = Astro.props;
               href={genericTypeLink}>{genericType}</a
               ><span class="type-datatype">&gt;</span>
             )}</span>
-          </p>
+            </section>
-          {
+            {
-            propData.flags && propData.flags.length > 0 ? (
+              propData.flags && propData.flags.length > 0 ? (
-              <p class="type-flags">
+                <p class="type-flags">
-                {
+                  {
-                  propData.flags.map((flag) => {
+                    propData.flags.map((flag) => {
-                    return (
+                      return (
-                      <span class="type-flag">
+                        <span class="type-flag">
-                        <Flag client:idle/>
+                          <Flag client:idle/>
-                        {flag}
+                          {flag}
-                      </span>
+                        </span>
-                    )
+                      )
-                  })
+                    })
-                }
+                  }
-              </p>
+                </p>
-            ) : null
+              ) : 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%,
-          transparent 25%,
+            hsla(var(--accent-500) / 0.88) 50%,
-          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,16 +100,39 @@
     padding: 0.8rem;
     transition: border 0.3s;
 
-    & > .typedata-name {
+    & .typedata-title {
-      display: flex;
+      margin-bottom: 1.618rem;
-      align-items: center;
-      font-size: 1.272rem;
-      margin: 0;
 
-      & svg {
+      & .typedata-name {
-        width: 1.2em;
+        font-size: 1.272rem;
-        height: 1.2em;
+        display: flex;
-        margin-right: 0.3em;
+        align-items: center;
+        margin: 0;
+
+        & svg {
+          width: 1.2em;
+          height: 1.2em;
+          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;
+        }
       }
     }
   }
@@ -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(
+          background: linear-gradient(to right,
-            to right,
+              hsla(var(--accent-400) / 0.5) var(--percent),
-            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;
     }
   }