Update component statuses

apps/website/auto-api.ts

@@ -1,6 +1,5 @@
 import * as fs from 'fs';
 import { resolve } from 'path';
-import { inspect } from 'util';
 import { ViteDevServer } from 'vite';
 export default function autoAPI() {
   return {

apps/website/src/_state/component-statuses.ts

@@ -37,22 +37,17 @@ export const statusByComponent: ComponentKitsStatuses = {
     Textarea: ComponentStatus.Draft,
   },
   headless: {
-    Accordion: ComponentStatus.Beta,
     Carousel: ComponentStatus.Beta,
-    Collapsible: ComponentStatus.Beta,
     Combobox: ComponentStatus.Beta,
     Checkbox: ComponentStatus.Draft,
     Dropdown: ComponentStatus.Draft,
-    Label: ComponentStatus.Draft,
-    Modal: ComponentStatus.Beta,
+    Label: ComponentStatus.Beta,
     Pagination: ComponentStatus.Draft,
-    Popover: ComponentStatus.Beta,
     Progress: ComponentStatus.Beta,
     Select: ComponentStatus.Beta,
-    Separator: ComponentStatus.Beta,
     Tabs: ComponentStatus.Beta,
-    Toggle: ComponentStatus.Draft,
-    ToggleGroup: ComponentStatus.Draft,
+    Toggle: ComponentStatus.Beta,
+    'Toggle Group': ComponentStatus.Beta,
     Tooltip: ComponentStatus.Beta,
   },
 };

apps/website/src/components/api-table/auto-api.tsx

@@ -1,6 +1,5 @@
 import { JSXOutput, component$, $, QRL, useTask$, useSignal } from '@builder.io/qwik';
 import { APITable, type APITableProps } from './api-table';
-import { packages } from '../install-snippet/install-snippet';
 
 //This is a workaround for not being able to export across packages due to nx rule:
 // https://nx.dev/features/enforce-module-boundaries#enforce-module-boundaries
@@ -32,7 +31,7 @@ type ParsedCommentsProps = {
   parsedProps: PublicType;
   config: AutoAPIConfig;
 };
-const currentHeader = $((_: string) => {
+const currentHeader = $(() => {
   //cannot send h2 from here because current TOC can only read md
   return null;
 });
@@ -75,8 +74,8 @@ export const AutoAPI = component$<AnatomyTableProps>(
     return (
       <>
         {topHeaderSig.value}
-        {subComponents.map((e) => (
-          <SubComponent subComponent={e} config={config} />
+        {subComponents.map((e, index) => (
+          <SubComponent key={index} subComponent={e} config={config} />
         ))}
       </>
     );
@@ -109,10 +108,15 @@ const ParsedComments = component$<ParsedCommentsProps>(({ parsedProps, config })
   useTask$(async () => {
     const translation: APITableProps = {
       propDescriptors: parsedProps[key].map((e) => {
+        const isObject = e.type.includes('{');
+        const isUnion = e.type.includes('|');
+        const isPopup = isObject || isUnion;
+
         return {
           name: e.prop,
-          type: e.type,
+          type: isObject ? 'object' : isUnion ? 'union' : e.type,
           description: e.comment,
+          info: (isPopup && e.type) || undefined,
         };
       }),
     };

apps/website/src/components/status-banner/status-banner.tsx

@@ -77,7 +77,7 @@ export const StatusBanner = component$(({ status }: StatusBannerProps) => {
     <>
       <div
         ref={ref}
-        hidden={isBannerClosedSig.value}
+        hidden={isBannerClosedSig.value || !status}
         onAnimationEnd$={() => (isBannerClosedSig.value = true)}
         class={cn(
           getBackgroundByStatus(status),

apps/website/src/routes/docs/headless/carousel/auto-api/api.ts

@@ -0,0 +1,122 @@
+export const api = {
+  carousel: [
+    {
+      bullet: [],
+    },
+    {
+      inline: [],
+    },
+    {
+      next: [],
+    },
+    {
+      pagination: [],
+    },
+    {
+      player: [],
+    },
+    {
+      previous: [],
+    },
+    {
+      root: [
+        {
+          CarouselRootProps: [
+            {
+              comment: 'The gap between slides',
+              prop: 'gap?',
+              type: 'number',
+            },
+            {
+              comment: 'Number of slides to show at once',
+              prop: 'slidesPerView?',
+              type: 'number',
+            },
+            {
+              comment: 'Whether the carousel is draggable',
+              prop: 'draggable?',
+              type: 'boolean',
+            },
+            {
+              comment: 'Alignment of slides within the viewport',
+              prop: 'align?',
+              type: "'start' | 'center' | 'end'",
+            },
+            {
+              comment: 'Whether the carousel should rewind',
+              prop: 'rewind?',
+              type: 'boolean',
+            },
+            {
+              comment: 'Bind the selected index to a signal',
+              prop: "'bind:selectedIndex'?",
+              type: 'Signal<number>',
+            },
+            {
+              comment: 'change the initial index of the carousel on render',
+              prop: 'startIndex?',
+              type: 'number',
+            },
+            {
+              comment:
+                '@deprecated Use bind:selectedIndex instead\n   Bind the current slide index to a signal',
+              prop: "'bind:currSlideIndex'?",
+              type: 'Signal<number>',
+            },
+            {
+              comment: 'Whether the carousel should autoplay',
+              prop: "'bind:autoplay'?",
+              type: 'Signal<boolean>',
+            },
+            {
+              comment: 'the current progress of the carousel',
+              prop: "'bind:progress'?",
+              type: 'Signal<number>',
+            },
+            {
+              comment: 'Time in milliseconds before the next slide plays during autoplay',
+              prop: 'autoPlayIntervalMs?',
+              type: 'number',
+            },
+            {
+              comment: '@internal Total number of slides',
+              prop: '_numSlides?',
+              type: 'number',
+            },
+            {
+              comment: '@internal Whether this carousel has a title',
+              prop: '_isTitle?',
+              type: 'boolean',
+            },
+            {
+              comment: 'The sensitivity of the carousel dragging',
+              prop: 'sensitivity?',
+              type: '{',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      scroller: [],
+    },
+    {
+      slide: [],
+    },
+    {
+      step: [],
+    },
+    {
+      stepper: [],
+    },
+    {
+      title: [],
+    },
+    {
+      'use-carousel': [],
+    },
+    {
+      'use-scroller': [],
+    },
+  ],
+};

apps/website/src/routes/docs/headless/carousel/index.mdx

@@ -4,6 +4,10 @@ import { FeatureList } from '~/components/feature-list/feature-list';
 
 import { Note } from '~/components/note/note';
 
+import { AutoAPI } from '~/components/api-table/auto-api';
+
+import { api } from './auto-api/api';
+
 <StatusBanner status={statusByComponent.headless.Carousel} />
 
 # Carousel
@@ -327,67 +331,4 @@ In the above example, we also use the headless progress component to show the pr
 
 ## API
 
-### Carousel.Root
-
-<APITable
-  propDescriptors={[
-    {
-      name: 'gap',
-      type: 'number',
-      description: 'The gap between slides.',
-    },
-    {
-      name: 'slidesPerView',
-      type: 'number',
-      description: 'Number of slides to show at once.',
-    },
-    {
-      name: 'draggable',
-      type: 'boolean',
-      description: 'Whether the carousel is draggable.',
-    },
-    {
-      name: 'align',
-      type: 'union',
-      description: 'Alignment of slides within the viewport.',
-      info: '"start" | "center" | "end"',
-    },
-    {
-      name: 'rewind',
-      type: 'boolean',
-      description: 'Whether the carousel should rewind.',
-    },
-    {
-      name: 'bind:selectedIndex',
-      type: 'Signal<number>',
-      description: 'Bind the selected index to a signal.',
-    },
-    {
-      name: 'startIndex',
-      type: 'number',
-      description: 'Change the initial index of the carousel on render.',
-    },
-    {
-      name: 'bind:autoplay',
-      type: 'Signal<boolean>',
-      description: 'Whether the carousel should autoplay.',
-    },
-    {
-      name: 'autoPlayIntervalMs',
-      type: 'number',
-      description: 'Time in milliseconds before the next slide plays during autoplay.',
-    },
-    {
-      name: 'direction',
-      type: 'union',
-      description:
-        'Change the direction of the carousel, for it to be veritical define the maxSlideHeight prop as well.',
-      info: '"row" | "column"',
-    },
-    {
-      name: 'maxSlideHeight',
-      type: 'number',
-      description: 'Write the height of the longest slide.',
-    },
-  ]}
-/>
+<AutoAPI api={api} />

apps/website/src/routes/docs/headless/menu.md

@@ -30,4 +30,4 @@
 - [Tabs](/docs/headless/tabs)
 - [Tooltip](/docs/headless/tooltip)
 - [Toggle](/docs/headless/toggle)
-- [ToggleGroup](/docs/headless/toggle-group)
+- [Toggle Group](/docs/headless/toggle-group)

apps/website/src/routes/docs/headless/popover/examples/styles.tsx

@@ -0,0 +1,8 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import styles from '../snippets/popover.css?inline';
+
+export default component$(() => {
+  useStyles$(styles);
+
+  return <></>;
+});

apps/website/src/routes/docs/headless/popover/index.mdx

@@ -4,10 +4,10 @@ title: Qwik UI | Popover
 
 import { statusByComponent } from '~/_state/component-statuses';
 
-import styles from './snippets/popover.css?inline';
-
 <StatusBanner status={statusByComponent.headless.Popover} />
 
+import Styles from './examples/styles';
+
 # Popover
 
 A popup that goes above other content on the page. You can still interact with the rest of the page while the popover is open.
@@ -515,3 +515,5 @@ To read more about the popover API you can check it out on:
     },
   ]}
 />
+
+<Styles />

apps/website/src/routes/docs/headless/select/index.mdx

@@ -2,7 +2,6 @@
 title: Qwik UI | Select
 ---
 
-import { api } from './auto-api/api';
 import { FeatureList } from '~/components/feature-list/feature-list';
 import { statusByComponent } from '~/_state/component-statuses';
 

apps/website/src/routes/docs/headless/toggle-group/index.mdx

@@ -4,7 +4,7 @@ title: Qwik UI | Toggle Group
 
 import { statusByComponent } from '~/_state/component-statuses';
 
-<StatusBanner status={statusByComponent.headless.ToggleGroup} />
+<StatusBanner status={statusByComponent.headless['Toggle Group']} />
 
 # Toggle Group
 

apps/website/src/routes/docs/headless/tooltip/index.mdx

@@ -4,8 +4,6 @@ title: Qwik UI | Tooltip
 
 import { statusByComponent } from '~/_state/component-statuses';
 
-import styles from './snippets/tooltip.css?inline';
-
 <StatusBanner status={statusByComponent.headless.Tooltip} />
 
 # Tooltip

package.json

@@ -69,7 +69,6 @@
     "@oddbird/popover-polyfill": "0.4.3",
     "@playwright/test": "^1.44.1",
     "@qwikest/icons": "^0.0.13",
-    "@shikijs/transformers": "^1.11.0",
     "@swc-node/register": "^1.9.1",
     "@swc/core": "^1.5.7",
     "@types/decompress": "4.2.7",
@@ -114,7 +113,7 @@
     "qwik-themes": "^0.2.0",
     "rehype-pretty-code": "^0.13.2",
     "sass": "^1.77.2",
-    "shiki": "1.11.0",
+    "shiki": "^1.21.0",
     "simple-git-hooks": "2.11.1",
     "specificity": "^1.0.0",
     "tailwind-merge": "^2.3.0",

packages/kit-headless/src/components/carousel/inline.tsx

@@ -1,5 +1,5 @@
 import { Component } from '@builder.io/qwik';
-import { CarouselBase, CarouselRootProps } from './root';
+import { CarouselBase, PublicCarouselRootProps } from './root';
 import { Carousel } from '@qwik-ui/headless';
 import { findComponent, processChildren } from '../../utils/inline-component';
 
@@ -20,8 +20,8 @@ type InternalProps = {
   titleComponent?: typeof Carousel.Title;
 };
 
-export const CarouselRoot: Component<CarouselRootProps & InternalProps> = (
-  props: CarouselRootProps & InternalProps,
+export const CarouselRoot: Component<PublicCarouselRootProps & InternalProps> = (
+  props: PublicCarouselRootProps & InternalProps,
 ) => {
   const {
     children,