v2: scroller refactor (#358)

* feat: features + anatomy table

* refactor: replace HTML headings with custom H2 and H3 components for consistency in anatomy and API tables

* feat: keyboard interactions

* feat: enhance popover component with new UI attributes and styles

* fix: carousel now stays on slide for both mobile and desktop

* feat: better support for vertical carousal

* fix: update carousel scroll area for improved drag functionality and style adjustments

* refactor: update carousel autoplay functionality to use a unified autoplayValue signal

* refactor: rename CarouselPlayer to CarouselPlayTrigger and update autoplay properties for clarity

* feat: add based on velocity

* refactor: streamline drag tracking and velocity-based navigation in carousel component

* feat: perfect velocity based

* velocity based tests

* feat: reduced drag time

* refactor out

* safari workaround bug

* fix: faster response times

* refactor: enhance carousel drag handling and improve touch performance

* fix: format

* fix: build order

* only build libs

Author: thejackshelton-kunaico

.github/workflows/pkg-pr-new.yml

@@ -23,7 +23,7 @@ jobs:
         run: pnpm install
 
       - name: Build package
-        run: pnpm run build
+        run: pnpm run build.libs
 
       - name: Publish preview packages
         run: pnpm dlx pkg-pr-new publish './libs/*'

CHANGELOG.md

@@ -1,6 +1,24 @@
 # Changelog
 
 
+## v0.5.14...v2-docs-continued
+
+[compare changes](https://github.com/kunai-consulting/qwik-design-system/compare/v0.5.14...v2-docs-continued)
+
+### 🚀 Enhancements
+
+- Features + anatomy table ([e9c7c876](https://github.com/kunai-consulting/qwik-design-system/commit/e9c7c876))
+- Keyboard interactions ([a162efda](https://github.com/kunai-consulting/qwik-design-system/commit/a162efda))
+- Enhance popover component with new UI attributes and styles ([398237db](https://github.com/kunai-consulting/qwik-design-system/commit/398237db))
+
+### 💅 Refactors
+
+- Replace HTML headings with custom H2 and H3 components for consistency in anatomy and API tables ([b92d4f4d](https://github.com/kunai-consulting/qwik-design-system/commit/b92d4f4d))
+
+### ❤️ Contributors
+
+- Thejackshelton-kunaico <[email protected]>
+
 ## v0.5.13...v2-migration
 
 [compare changes](https://github.com/kunai-consulting/qwik-design-system/compare/v0.5.13...v2-migration)

docs/package.json

@@ -19,7 +19,7 @@
     "deploy": "wrangler pages deploy ./dist",
     "dev": "vite --mode ssr --host",
     "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
-    "preview": "qwik build preview && vite preview --open",
+    "preview": "qwik build preview && vite preview --open --host",
     "serve": "wrangler pages dev ./dist --compatibility-flags=nodejs_als",
     "start": "vite --open --mode ssr",
     "qwik": "qwik",
@@ -31,8 +31,8 @@
     "@qds.dev/tools": "workspace:*",
     "@qds.dev/ui": "workspace:*",
     "@qds.dev/utils": "workspace:*",
-    "@qwik.dev/core": "2.0.0-beta.13",
-    "@qwik.dev/router": "2.0.0-beta.13",
+    "@qwik.dev/core": "https://pkg.pr.new/QwikDev/qwik/@qwik.dev/core@8144",
+    "@qwik.dev/router": "https://pkg.pr.new/QwikDev/qwik/@qwik.dev/router@8144",
     "@qwikest/icons": "^0.0.13",
     "@tailwindcss/vite": "^4.1.3",
     "@types/estree-jsx": "1.0.5",

docs/src/docs-widgets/anatomy-table/anatomy-table.tsx

@@ -1,5 +1,6 @@
 import type { AnatomyItem } from "@kunai-consulting/code-notate-core";
 import { component$ } from "@qwik.dev/core";
+import { H2 } from "~/mdx/components";
 import type { ComponentParts } from "../api-table/api-table";
 
 export const AnatomyTable = component$<{ api: ComponentParts }>(({ api }) => {
@@ -11,34 +12,37 @@ export const AnatomyTable = component$<{ api: ComponentParts }>(({ api }) => {
 
   return (
     <div>
-      <div class="border-neutral-primary border overflow-hidden">
+      <H2 class="mt-16 mb-6">Anatomy</H2>
+      <div class="border-blue-500 border-[1.6px] overflow-hidden shadow-[6px_6px_0_0px_var(--color-blue-200)]">
         <table class="w-full border-collapse text-sm">
           <thead>
-            <tr class="border-b border-neutral-primary bg-neutral-primary">
-              <th class="py-4 px-4 text-left font-medium">Part</th>
-              <th class="py-4 px-4 text-left font-medium">Description</th>
+            <tr class="border-b-[1.6px] border-blue-500 bg-blue-200">
+              <th class="py-[10px] px-4 text-left font-bold text-blue-600 uppercase border-r-[1.6px] border-blue-500">
+                Part
+              </th>
+              <th class="py-[10px] px-4 text-left font-bold text-blue-600 uppercase">
+                Description
+              </th>
             </tr>
           </thead>
           <tbody>
             {anatomyItems.map((item) => (
               <tr
                 key={item.name}
-                class="border-b last-of-type:border-b-0 border-neutral-primary"
+                class="border-b-[1.6px] last-of-type:border-b-0 border-blue-500"
               >
-                <td class="py-4 px-4 text-sm">
-                  <span class="bg-neutral-primary rounded-sm block p-1 px-2 w-fit">
-                    <span class="text-neutral-foreground">{"<"}</span>
-                    <span class="text-white">{item.name.split(".")[0]}</span>
-                    {item.name.includes(".") && (
-                      <>
-                        <span class="text-neutral-foreground">{"."}</span>
-                        <span class="text-qwik-blue-300">{item.name.split(".")[1]}</span>
-                      </>
-                    )}
-                    <span class="text-neutral-foreground">{"\u003E"}</span>
-                  </span>
+                <td class="py-[10px] px-4 text-sm border-r-[1.6px] border-blue-500">
+                  <span>{"<"}</span>
+                  <span>{item.name.split(".")[0]}</span>
+                  {item.name.includes(".") && (
+                    <>
+                      <span>{"."}</span>
+                      <span class="text-blue-600">{item.name.split(".")[1]}</span>
+                    </>
+                  )}
+                  <span>{"\u003E"}</span>
                 </td>
-                <td class="py-4 px-4 text-[#b8c1cc]">{item.description || "—"}</td>
+                <td class="py-[10px] px-4 text-light-700">{item.description || "—"}</td>
               </tr>
             ))}
           </tbody>

docs/src/docs-widgets/api-table/api-table.tsx

@@ -3,11 +3,11 @@ import type {
   ComponentEntry,
   ParsedProps
 } from "@kunai-consulting/code-notate-core";
+import { Lucide, Popover } from "@qds.dev/ui";
 import { component$, useContext, useTask$ } from "@qwik.dev/core";
-
-import { Popover } from "@qds.dev/ui";
+import { H2, H3 } from "~/mdx/components";
 import { rootContextId } from "~/routes/components/layout";
-import { MainHeading, SubHeading } from "../toc/toc";
+import { Spacer } from "../spacer/spacer";
 
 type DataAttribute = {
   name: string;
@@ -105,9 +105,11 @@ export const APITable = component$(({ api }: { api: ComponentParts }) => {
   });
 
   return (
-    <div class="overflow-x-auto">
-      <MainHeading id="api-reference">API Reference</MainHeading>
-      {items.map((item, index) => {
+    <div class="overflow-x-auto sm:overflow-x-visible">
+      <H2 id="api-reference" class="mt-16 mb-6">
+        API Reference
+      </H2>
+      {items.map((item) => {
         const componentData = Object.entries(item)[0];
         const [itemName, itemProps] = componentData;
 
@@ -117,50 +119,58 @@ export const APITable = component$(({ api }: { api: ComponentParts }) => {
 
         return (
           <div key={itemName}>
-            <div
-              class={`h-[1px] bg-neutral-primary ${index === 0 ? "mt-0" : "mt-8"}`}
-              aria-hidden="true"
-            />
-            <SubHeading id={itemName}>{itemName}</SubHeading>
+            <H3 id={itemName}>{itemName}</H3>
             {itemProps.inheritsFrom && (
-              <p class="mb-4 text-sm text-neutral-foreground mt-4">
-                Inherits from:{" "}
-                <code class="px-2 py-1 !bg-neutral-primary !text-qwik-blue-300">
-                  {`<${itemProps.inheritsFrom} />`}
-                </code>
+              <p class="text-sm my-6 font-semibold leading-[137.5%]">
+                <span class="text-light-700">Inherits from: </span>
+                <code class="text-blue-600 ml-1">{`<${itemProps.inheritsFrom} />`}</code>
               </p>
             )}
 
             {/* Props Table */}
             {propsArray && propsArray.length > 0 && (
               <>
-                <h4 class="mb-2 font-medium">Props</h4>
-                <div class="border-neutral-primary border mb-6">
+                <h4 class="mb-2 font-semibold">Props</h4>
+                <div class="border-blue-500 border-[1.6px] overflow-hidden shadow-[6px_6px_0_0px_var(--color-blue-200)] mb-6">
                   <table class="w-full border-collapse text-sm">
                     <thead>
-                      <tr class="border-b border-neutral-primary bg-neutral-primary">
-                        <th class="py-4 px-4 text-left font-medium">Prop</th>
-                        <th class="py-4 px-4 text-left font-medium">Type</th>
-                        <th class="py-4 px-4 text-left font-medium">Default</th>
-                        <th class="py-4 px-4 text-left font-medium">Description</th>
+                      <tr class="border-b-[1.6px] border-blue-500 bg-blue-200">
+                        <th class="py-[10px] px-4 text-left font-bold text-blue-600 uppercase border-r-[1.6px] border-blue-500">
+                          Prop
+                        </th>
+                        <th class="py-[10px] px-4 text-left font-bold text-blue-600 uppercase border-r-[1.6px] border-blue-500">
+                          Type
+                        </th>
+                        <th class="py-[10px] px-4 text-left font-bold text-blue-600 uppercase border-r-[1.6px] border-blue-500">
+                          Default
+                        </th>
+                        <th class="py-[10px] px-4 text-left font-bold text-blue-600 uppercase">
+                          Description
+                        </th>
                       </tr>
                     </thead>
                     <tbody>
                       {propsArray.map((prop: ParsedProps) => (
                         <tr
                           key={prop.prop}
-                          class="border-b last-of-type:border-b-0 border-qwik-neutral-900"
+                          class="border-b-[1.6px] last-of-type:border-b-0 border-blue-500"
                         >
-                          <td class="py-4 px-4 text-sm">{prop.prop}</td>
-                          <td class="py-4 px-4 text-sm">{prop.type}</td>
-                          <td class="py-4 px-4 text-sm">{prop.defaultValue || "-"}</td>
-                          <td class="py-4 px-4">
+                          <td class="py-[10px] px-4 text-sm border-r-[1.6px] border-blue-500">
+                            {prop.prop}
+                          </td>
+                          <td class="py-[10px] px-4 text-sm border-r-[1.6px] border-blue-500">
+                            {prop.type}
+                          </td>
+                          <td class="py-[10px] px-4 text-sm border-r-[1.6px] border-blue-500">
+                            {prop.defaultValue || "-"}
+                          </td>
+                          <td class="py-[10px] px-4">
                             {prop.comment && (
                               <Popover.Root>
-                                <Popover.Trigger class="text-qwik-blue-500 hover:text-blue-300 cursor-pointer">
-                                  Details
+                                <Popover.Trigger class="text-qwik-blue-500 hover:text-blue-300 cursor-pointer w-fit">
+                                  <Lucide.Info class="size-5 text-lavender-600" />
                                 </Popover.Trigger>
-                                <Popover.Content class="p-4 max-w-xs bg-neutral-foreground rounded-md mt-1">
+                                <Popover.Content class="bg-neutral-foreground mt-1 w-fit max-w-[500px] rounded-full shadow-[4px_4px_0_0px_#6C2CC4] border-[1.6px] border-lavender-500 py-1.5 px-3">
                                   {prop.comment}
                                 </Popover.Content>
                               </Popover.Root>
@@ -177,30 +187,35 @@ export const APITable = component$(({ api }: { api: ComponentParts }) => {
             {/* Data Attributes Table */}
             {itemProps.dataAttributes && itemProps.dataAttributes.length > 0 && (
               <>
-                <h4 class="mb-2 font-medium">Data Attributes</h4>
-                <div class="border-neutral-primary border">
+                <h4 class="mb-2 font-semibold">Data Attributes</h4>
+                <div class="border-blue-500 border-[1.6px] overflow-hidden shadow-[6px_6px_0_0px_var(--color-blue-200)]">
                   <table class="w-full border-collapse text-sm">
                     <thead>
-                      <tr class="border-b border-neutral-primary bg-neutral-primary">
-                        <th class="py-4 px-4 text-left font-medium">Attribute</th>
-                        <th class="py-4 px-4 text-left font-medium">Description</th>
+                      <tr class="border-b-[1.6px] border-blue-500 bg-blue-200">
+                        <th class="py-[10px] px-4 text-left font-bold text-blue-600 uppercase border-r-[1.6px] border-blue-500">
+                          Attribute
+                        </th>
+                        <th class="py-[10px] px-4 text-left font-bold text-blue-600 uppercase">
+                          Description
+                        </th>
                       </tr>
                     </thead>
                     <tbody>
                       {itemProps.dataAttributes.map((attr: DataAttribute) => (
                         <tr
                           key={attr.name}
-                          class="border-b last-of-type:border-b-0 border-neutral-primary"
+                          class="border-b-[1.6px] last-of-type:border-b-0 border-blue-500"
                         >
-                          <td class="py-4 px-4 text-sm text-qwik-blue-200">
+                          <td class="py-[10px] px-4 text-sm border-r-[1.6px] border-blue-500 text-blue-600">
                             {attr.name}
                           </td>
-                          <td class="py-4 px-4">{attr.comment}</td>
+                          <td class="py-[10px] px-4 text-light-700">{attr.comment}</td>
                         </tr>
                       ))}
                     </tbody>
                   </table>
                 </div>
+                <Spacer class="h-12" />
               </>
             )}
           </div>
@@ -210,28 +225,34 @@ export const APITable = component$(({ api }: { api: ComponentParts }) => {
       {/* Add Keyboard Interactions Table */}
       {api.keyboardInteractions && api.keyboardInteractions.length > 0 && (
         <>
-          <MainHeading id="accessibility">Accessibility</MainHeading>
-          <SubHeading id="keyboard-interactions">Keyboard Interactions</SubHeading>
-          <div class="border-neutral-primary border mt-6">
-            <table class="w-full border-collapse border-spacing-1 text-sm">
+          <H2 id="accessibility" class="mt-16 mb-6">
+            Accessibility
+          </H2>
+          <H3 id="keyboard-interactions">Keyboard Interactions</H3>
+          <div class="border-blue-500 border-[1.6px] overflow-hidden shadow-[6px_6px_0_0px_var(--color-blue-200)] mt-6">
+            <table class="w-full border-collapse text-sm">
               <thead>
-                <tr class="border-b border-neutral-primary bg-neutral-primary">
-                  <th class="py-4 px-4 text-left font-medium">Key</th>
-                  <th class="py-4 px-4 text-left font-medium">Description</th>
+                <tr class="border-b-[1.6px] border-blue-500 bg-blue-200">
+                  <th class="py-[10px] px-4 text-left font-bold text-blue-600 uppercase border-r-[1.6px] border-blue-500">
+                    Key
+                  </th>
+                  <th class="py-[10px] px-4 text-left font-bold text-blue-600 uppercase">
+                    Description
+                  </th>
                 </tr>
               </thead>
               <tbody>
                 {api.keyboardInteractions.map((interaction) => (
                   <tr
                     key={interaction.key}
-                    class="border-b last-of-type:border-b-0 border-neutral-primary"
+                    class="border-b-[1.6px] last-of-type:border-b-0 border-blue-500"
                   >
-                    <td class="py-4 px-4 text-sm flex items-center">
-                      <span class="bg-neutral-interactive px-3 py-1 border-b-2 border-neutral-primary rounded-md">
+                    <td class="py-[10px] px-4 text-sm border-r-[1.6px] border-blue-500">
+                      <span class="bg-neutral-interactive px-4 py-1.5 border-b-4 border-[#6A7581] bg-light-700 rounded-md inline-flex items-center text-white">
                         {interaction.key}
                       </span>
                     </td>
-                    <td class="py-4 px-4">{interaction.comment}</td>
+                    <td class="py-[10px] px-4 text-light-700">{interaction.comment}</td>
                   </tr>
                 ))}
               </tbody>

docs/src/docs-widgets/features/features.tsx

@@ -1,5 +1,6 @@
+import { Lucide } from "@qds.dev/ui";
 import { component$ } from "@qwik.dev/core";
-import { LuBadgeCheck } from "@qwikest/icons/lucide";
+import { H2 } from "~/mdx/components";
 import type { ComponentParts } from "../api-table/api-table";
 
 export const Features = component$<{ api: ComponentParts }>(({ api }) => {
@@ -11,11 +12,15 @@ export const Features = component$<{ api: ComponentParts }>(({ api }) => {
 
   return (
     <div>
+      <H2 class="mt-16 mb-6">Features</H2>
       <ul class="list-disc list-inside space-y-4">
         {features.map((feature) => (
-          <li class="flex items-center gap-2" key={feature}>
+          <li
+            class="flex items-center gap-2 font-semibold leading-[137.5%]"
+            key={feature}
+          >
             <span>
-              <LuBadgeCheck class="text-qwik-blue-400" />
+              <Lucide.BadgeCheck class="text-lavender-600" />
             </span>
             <span class="text-neutral-foreground">{feature}</span>
           </li>

docs/src/docs-widgets/header/header.tsx

@@ -165,7 +165,7 @@ const DesktopNav = component$(() => {
                   <span>{item.label}</span>
                 </Navbar.ItemTrigger>
                 <Navbar.ItemContent
-                  class="open:grid gap-4 shadow-[6px_6px_0_0px_var(--color-blue-200)] rounded-2xl p-4 border-[1.6px] border-blue-300 transition-discrete duration-[325ms] ease-in-out open:animate-to-visible not-open:animate-from-visible opacity-0"
+                  class="open:grid gap-4 shadow-[6px_6px_0_0px_var(--color-blue-200)] rounded-2xl p-4 border-[1.6px] border-blue-300 transition-[opacity,display,overlay] transition-discrete duration-[325ms] ease-in-out open:animate-to-visible not-open:animate-from-visible opacity-0"
                   style={{ ...getContentGridTemplate(item.label), width: "650px" }}
                   ui-mega-popover
                 >

docs/src/docs-widgets/sidebar/sidebar.tsx

@@ -1,5 +1,5 @@
 import { Lucide, Tree } from "@qds.dev/ui";
-import { $, type PropsOf, Slot, component$, useSignal } from "@qwik.dev/core";
+import { $, component$, type PropsOf, Slot, useSignal } from "@qwik.dev/core";
 import { Link, useNavigate } from "@qwik.dev/router";
 import { Action } from "../action/action";
 import { QwikLogo } from "../header/header";
@@ -130,7 +130,7 @@ export const Sidebar = component$((props: PropsOf<"nav">) => {
           type="button"
           class="p-2 -mx-2 hover:bg-light-100 transition-colors rounded-lg"
         >
-          <Lucide.PanelLeftClose class="size-6" />
+          <Lucide.PanelLeft class="size-6" />
         </button>
       </div>