From 9cb3c96879e3429bbc78f85fc261fe60a192bbf5 Mon Sep 17 00:00:00 2001
From: Jack Shelton <104264123+thejackshelton@users.noreply.github.com>
Date: Sun, 29 Sep 2024 10:59:30 -0500
Subject: [PATCH] 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
---
 apps/website/src/_state/component-statuses.ts |  11 +-
 .../status-banner/status-banner.tsx           |   2 +-
 apps/website/src/routes/docs/headless/menu.md |   2 +-
 .../docs/headless/popover/examples/styles.tsx |   8 ++
 .../routes/docs/headless/popover/index.mdx    |   6 +-
 .../docs/headless/toggle-group/index.mdx      |   2 +-
 .../routes/docs/headless/tooltip/index.mdx    |   2 -
 package.json                                  |   3 +-
 pnpm-lock.yaml                                | 101 ++++++++++++++----
 9 files changed, 101 insertions(+), 36 deletions(-)
 create mode 100644 apps/website/src/routes/docs/headless/popover/examples/styles.tsx

diff --git a/apps/website/src/_state/component-statuses.ts b/apps/website/src/_state/component-statuses.ts
index d1fdf99d7..5894906dd 100644
--- a/apps/website/src/_state/component-statuses.ts
+++ b/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,
   },
 };
diff --git a/apps/website/src/components/status-banner/status-banner.tsx b/apps/website/src/components/status-banner/status-banner.tsx
index bcbb67824..e45c5b744 100644
--- a/apps/website/src/components/status-banner/status-banner.tsx
+++ b/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),
diff --git a/apps/website/src/routes/docs/headless/menu.md b/apps/website/src/routes/docs/headless/menu.md
index 21fd6248b..279802986 100644
--- a/apps/website/src/routes/docs/headless/menu.md
+++ b/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)
diff --git a/apps/website/src/routes/docs/headless/popover/examples/styles.tsx b/apps/website/src/routes/docs/headless/popover/examples/styles.tsx
new file mode 100644
index 000000000..7b39e9e65
--- /dev/null
+++ b/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 <></>;
+});
diff --git a/apps/website/src/routes/docs/headless/popover/index.mdx b/apps/website/src/routes/docs/headless/popover/index.mdx
index aa917618a..89f2e43eb 100644
--- a/apps/website/src/routes/docs/headless/popover/index.mdx
+++ b/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 />
diff --git a/apps/website/src/routes/docs/headless/toggle-group/index.mdx b/apps/website/src/routes/docs/headless/toggle-group/index.mdx
index 534249f46..c8b726232 100644
--- a/apps/website/src/routes/docs/headless/toggle-group/index.mdx
+++ b/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
 
diff --git a/apps/website/src/routes/docs/headless/tooltip/index.mdx b/apps/website/src/routes/docs/headless/tooltip/index.mdx
index e885b8c43..31c2f77f5 100644
--- a/apps/website/src/routes/docs/headless/tooltip/index.mdx
+++ b/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
diff --git a/package.json b/package.json
index 0ad291047..a3356db30 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7760abaab..87ccfdf37 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -86,9 +86,6 @@ importers:
       '@qwikest/icons':
         specifier: ^0.0.13
         version: 0.0.13(@builder.io/qwik@1.9.0(@types/node@20.12.12)(sass@1.77.4)(terser@5.31.1))
-      '@shikijs/transformers':
-        specifier: ^1.11.0
-        version: 1.11.0
       '@swc-node/register':
         specifier: ^1.9.1
         version: 1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.11))(@swc/types@0.1.9)(typescript@5.4.5)
@@ -217,13 +214,13 @@ importers:
         version: 0.2.0
       rehype-pretty-code:
         specifier: ^0.13.2
-        version: 0.13.2(shiki@1.11.0)
+        version: 0.13.2(shiki@1.21.0)
       sass:
         specifier: ^1.77.2
         version: 1.77.4
       shiki:
-        specifier: 1.11.0
-        version: 1.11.0
+        specifier: ^1.21.0
+        version: 1.21.0
       simple-git-hooks:
         specifier: 2.11.1
         version: 2.11.1
@@ -2226,11 +2223,20 @@ packages:
       zen-observable:
         optional: true
 
-  '@shikijs/core@1.11.0':
-    resolution: {integrity: sha512-VbEhDAhT/2ozO0TPr5/ZQBO/NWLqtk4ZiBf6NplYpF38mKjNfMMied5fNEfIfYfN+cdKvhDB4VMcKvG/g9c3zg==}
+  '@shikijs/core@1.21.0':
+    resolution: {integrity: sha512-zAPMJdiGuqXpZQ+pWNezQAk5xhzRXBNiECFPcJLtUdsFM3f//G95Z15EHTnHchYycU8kIIysqGgxp8OVSj1SPQ==}
 
-  '@shikijs/transformers@1.11.0':
-    resolution: {integrity: sha512-RNEUyOxF1cPYVG2EvBv0CZeDU1Tp4fSxmsVD2Ofv+8h9hBqqgpq+l+7uyouyqV1JHNlqwRmUwAqrQU3GQQ3csQ==}
+  '@shikijs/engine-javascript@1.21.0':
+    resolution: {integrity: sha512-jxQHNtVP17edFW4/0vICqAVLDAxmyV31MQJL4U/Kg+heQALeKYVOWo0sMmEZ18FqBt+9UCdyqGKYE7bLRtk9mg==}
+
+  '@shikijs/engine-oniguruma@1.21.0':
+    resolution: {integrity: sha512-AIZ76XocENCrtYzVU7S4GY/HL+tgHGbVU+qhiDyNw1qgCA5OSi4B4+HY4BtAoJSMGuD/L5hfTzoRVbzEm2WTvg==}
+
+  '@shikijs/types@1.21.0':
+    resolution: {integrity: sha512-tzndANDhi5DUndBtpojEq/42+dpUF2wS7wdCDQaFtIXm3Rd1QkrcVgSSRLOvEwexekihOXfbYJINW37g96tJRw==}
+
+  '@shikijs/vscode-textmate@9.2.2':
+    resolution: {integrity: sha512-TMp15K+GGYrWlZM8+Lnj9EaHEFmOen0WJBrfa17hF7taDOYthuPPV0GWzfd/9iMij0akS/8Yw2ikquH7uVi/fg==}
 
   '@sinclair/typebox@0.27.8':
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
@@ -4628,6 +4634,9 @@ packages:
   hast-util-to-estree@3.1.0:
     resolution: {integrity: sha512-lfX5g6hqVh9kjS/B9E2gSkvHH4SZNiQFiqWS0x9fENzEl+8W12RqdRxX6d/Cwxi30tPQs3bIO+aolQJNp1bIyw==}
 
+  hast-util-to-html@9.0.3:
+    resolution: {integrity: sha512-M17uBDzMJ9RPCqLMO92gNNUDuBSq10a25SDBI08iCCxmorf4Yy6sYHK57n9WAbRAAaU+DuR4W6GN9K4DFZesYg==}
+
   hast-util-to-jsx-runtime@2.3.0:
     resolution: {integrity: sha512-H/y0+IWPdsLLS738P8tDnrQ8Z+dj12zQQ6WC11TIM21C8WFVoIxcqWXf2H3hiTVZjF1AWqoimGwrTWecWrnmRQ==}
 
@@ -4666,6 +4675,9 @@ packages:
   html-escaper@2.0.2:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
 
+  html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
+
   http-cache-semantics@4.1.1:
     resolution: {integrity: sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==}
 
@@ -6151,6 +6163,9 @@ packages:
     resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
     engines: {node: '>=18'}
 
+  oniguruma-to-js@0.4.3:
+    resolution: {integrity: sha512-X0jWUcAlxORhOqqBREgPMgnshB7ZGYszBNspP+tS9hPD3l13CdaXcHbgImoHUHlrvGx/7AvFEkTRhAGYh+jzjQ==}
+
   open@10.1.0:
     resolution: {integrity: sha512-mnkeQ1qP5Ue2wd+aivTD3NHd/lZ96Lu0jgf0pwktLPtx6cTZiH7tyeGRRHs0zX0rbrahXPnXlUnbeXyaBBuIaw==}
     engines: {node: '>=18'}
@@ -6779,6 +6794,9 @@ packages:
   regenerator-transform@0.15.2:
     resolution: {integrity: sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==}
 
+  regex@4.3.2:
+    resolution: {integrity: sha512-kK/AA3A9K6q2js89+VMymcboLOlF5lZRCYJv3gzszXFHBr6kO6qLGzbm+UIugBEV8SMMKCTR59txoY6ctRHYVw==}
+
   regexp.prototype.flags@1.5.2:
     resolution: {integrity: sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==}
     engines: {node: '>= 0.4'}
@@ -7053,8 +7071,8 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
-  shiki@1.11.0:
-    resolution: {integrity: sha512-NqH/O1zRHvnuk/WfSL6b7+DtI7/kkMMSQGlZhm9DyzSU+SoIHhaw/fBZMr+zp9R8KjdIzkk3JKSC6hORuGDyng==}
+  shiki@1.21.0:
+    resolution: {integrity: sha512-apCH5BoWTrmHDPGgg3RF8+HAAbEL/CdbYr8rMw7eIrdhCkZHdVGat5mMNlRtd1erNG01VPMIKHNQ0Pj2HMAiog==}
 
   side-channel@1.0.6:
     resolution: {integrity: sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==}
@@ -10787,13 +10805,32 @@ snapshots:
     transitivePeerDependencies:
       - zenObservable
 
-  '@shikijs/core@1.11.0':
+  '@shikijs/core@1.21.0':
     dependencies:
+      '@shikijs/engine-javascript': 1.21.0
+      '@shikijs/engine-oniguruma': 1.21.0
+      '@shikijs/types': 1.21.0
+      '@shikijs/vscode-textmate': 9.2.2
       '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.3
 
-  '@shikijs/transformers@1.11.0':
+  '@shikijs/engine-javascript@1.21.0':
     dependencies:
-      shiki: 1.11.0
+      '@shikijs/types': 1.21.0
+      '@shikijs/vscode-textmate': 9.2.2
+      oniguruma-to-js: 0.4.3
+
+  '@shikijs/engine-oniguruma@1.21.0':
+    dependencies:
+      '@shikijs/types': 1.21.0
+      '@shikijs/vscode-textmate': 9.2.2
+
+  '@shikijs/types@1.21.0':
+    dependencies:
+      '@shikijs/vscode-textmate': 9.2.2
+      '@types/hast': 3.0.4
+
+  '@shikijs/vscode-textmate@9.2.2': {}
 
   '@sinclair/typebox@0.27.8': {}
 
@@ -13654,6 +13691,20 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  hast-util-to-html@9.0.3:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.2
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.1.0
+      property-information: 6.5.0
+      space-separated-tokens: 2.0.2
+      stringify-entities: 4.0.4
+      zwitch: 2.0.4
+
   hast-util-to-jsx-runtime@2.3.0:
     dependencies:
       '@types/estree': 1.0.5
@@ -13712,6 +13763,8 @@ snapshots:
 
   html-escaper@2.0.2: {}
 
+  html-void-elements@3.0.0: {}
+
   http-cache-semantics@4.1.1: {}
 
   http-errors@2.0.0:
@@ -15690,6 +15743,10 @@ snapshots:
     dependencies:
       mimic-function: 5.0.1
 
+  oniguruma-to-js@0.4.3:
+    dependencies:
+      regex: 4.3.2
+
   open@10.1.0:
     dependencies:
       default-browser: 5.2.1
@@ -16282,6 +16339,8 @@ snapshots:
     dependencies:
       '@babel/runtime': 7.24.6
 
+  regex@4.3.2: {}
+
   regexp.prototype.flags@1.5.2:
     dependencies:
       call-bind: 1.0.7
@@ -16316,13 +16375,13 @@ snapshots:
       hast-util-from-html: 2.0.1
       unified: 11.0.4
 
-  rehype-pretty-code@0.13.2(shiki@1.11.0):
+  rehype-pretty-code@0.13.2(shiki@1.21.0):
     dependencies:
       '@types/hast': 3.0.4
       hast-util-to-string: 3.0.0
       parse-numeric-range: 1.3.0
       rehype-parse: 9.0.0
-      shiki: 1.11.0
+      shiki: 1.21.0
       unified: 11.0.4
       unist-util-visit: 5.0.0
 
@@ -16620,9 +16679,13 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
-  shiki@1.11.0:
+  shiki@1.21.0:
     dependencies:
-      '@shikijs/core': 1.11.0
+      '@shikijs/core': 1.21.0
+      '@shikijs/engine-javascript': 1.21.0
+      '@shikijs/engine-oniguruma': 1.21.0
+      '@shikijs/types': 1.21.0
+      '@shikijs/vscode-textmate': 9.2.2
       '@types/hast': 3.0.4
 
   side-channel@1.0.6: