Update component statuses (#975)

* feat: carousel now uses auto api

* fix: rollup warning to properly export toggle group

* update shiki to latest

* component status changes + popover styles fix

* separator is stable

Author: thejackshelton

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/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/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/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",