feat: add data-closed attribute

apps/docs/src/VERSIONS.ts

@@ -6,6 +6,7 @@ export const CORE_VERSIONS = [
   "0.4.0",
   "0.5.0",
   "0.6.0",
+  "0.6.1",
 ].reverse();
 
 export const LATEST_CORE_CHANGELOG_URL = `/docs/changelog/${CORE_VERSIONS[0].replaceAll(".", "-")}`;

apps/docs/src/components/header.tsx

@@ -32,7 +32,7 @@ export function Header(props: HeaderProps) {
           <span class="text-3xl leading-[0] text-sky-600">.</span>
         </Link>
         <span class="rounded bg-zinc-100 px-1.5 py-1 text-sm leading-none dark:bg-zinc-800 dark:text-zinc-300">
-          v0.6.0
+          v0.6.1
         </span>
       </div>
 

apps/docs/src/components/mobile-navigation.tsx

@@ -43,7 +43,7 @@ export function MobileNavigation(props: MobileNavigationProps) {
                   <span class="text-3xl leading-[0] text-sky-600">.</span>
                 </Link>
                 <span class="rounded bg-zinc-100 px-1.5 py-1 text-sm leading-none dark:bg-zinc-800 dark:text-zinc-300">
-                  v0.6.0
+                  v0.6.1
                 </span>
               </div>
               <button

apps/docs/src/root.tsx

@@ -70,18 +70,18 @@ export default function Root() {
               </MDXProvider>
             </ColorModeProvider>
           </Suspense>
-          <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
-          <script>
-            {`docsearch({
-            appId: "H7ZQSI0SAN",
-            apiKey: "c9354456dd4bb74c37e4d2b762b89b88",
-            indexName: "kobalte",
-            container: "#docsearch",
-            debug: false
-          });`}
-          </script>
-          <Scripts />
         </ErrorBoundary>
+        <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
+        <script>
+          {`docsearch({
+              appId: "H7ZQSI0SAN",
+              apiKey: "c9354456dd4bb74c37e4d2b762b89b88",
+              indexName: "kobalte",
+              container: "#docsearch",
+              debug: false
+            });`}
+        </script>
+        <Scripts />
       </Body>
     </Html>
   );

apps/docs/src/routes/docs/changelog/0-6-1.mdx

@@ -0,0 +1,42 @@
+# v0.6.1
+
+**February 10, 2023**.
+
+## New features
+
+- Added `data-closed` attribute to the following components:
+  - `Accordion.Item`
+  - `Accordion.Header`
+  - `Accordion.Trigger`
+  - `Accordion.Content`
+  - `Collapsible.Root`
+  - `Collapsible.Trigger`
+  - `Collapsible.Content`
+  - `ContextMenu.Trigger`
+  - `ContextMenu.Icon`
+  - `ContextMenu.Content`
+  - `ContextMenu.SubTrigger`
+  - `ContextMenu.SubContent`
+  - `Dialog.Trigger`
+  - `Dialog.Content`
+  - `Dialog.Overlay`
+  - `DropdownMenu.Trigger`
+  - `DropdownMenu.Icon`
+  - `DropdownMenu.Content`
+  - `DropdownMenu.SubTrigger`
+  - `DropdownMenu.SubContent`
+  - `HoverCard.Trigger`
+  - `HoverCard.Content`
+  - `Popover.Trigger`
+  - `Popover.Anchor`
+  - `Popover.Content`
+  - `Popover.Arrow`
+  - `Popover.Title`
+  - `Popover.Description`
+  - `Popover.CloseButton`
+- Added `ui-closed` to `@kobalte/tailwindcss`.
+- Added `[data-closed]` to `@kobalte/vanilla-extract`.
+
+## Bug fixes
+
+- [#105](https://github.com/kobaltedev/kobalte/issues/105)

apps/docs/src/routes/docs/core/components/accordion.mdx

@@ -346,10 +346,11 @@ We expose the CSS custom properties `--kb-accordion-content-width` and `--kb-acc
 | isDisabled | `boolean` <br/> Whether the item is disabled.                                                                                                            |
 | forceMount | `boolean` <br/> Used to force mounting the item content when more control is needed. Useful when controlling animation with SolidJS animation libraries. |
 
-| Data attribute | Description                                  |
-| :------------- | :------------------------------------------- |
-| data-expanded  | Present when the accordion item is expanded. |
-| data-disabled  | Present when the accordion item is disabled. |
+| Data attribute | Description                                   |
+| :------------- | :-------------------------------------------- |
+| data-expanded  | Present when the accordion item is expanded.  |
+| data-closed    | Present when the accordion item is collapsed. |
+| data-disabled  | Present when the accordion item is disabled.  |
 
 `Accordion.Header`, `Accordion.Trigger` and `Accordion.Content` share the same data-attributes.
 

apps/docs/src/routes/docs/core/components/collapsible.mdx

@@ -191,10 +191,11 @@ We expose the CSS custom properties `--kb-collapsible-content-width` and `--kb-c
 | isDisabled    | `boolean` <br/> Whether the collapsible is disabled.                                                                                                            |
 | forceMount    | `boolean` <br/> Used to force mounting the collapsible content when more control is needed. Useful when controlling animation with SolidJS animation libraries. |
 
-| Data attribute | Description                               |
-| :------------- | :---------------------------------------- |
-| data-expanded  | Present when the collapsible is expanded. |
-| data-disabled  | Present when the collapsible is disabled. |
+| Data attribute | Description                                |
+| :------------- | :----------------------------------------- |
+| data-expanded  | Present when the collapsible is expanded.  |
+| data-closed    | Present when the collapsible is collapsed. |
+| data-disabled  | Present when the collapsible is disabled.  |
 
 `Collapsible.Trigger` and `Collapsible.Content` share the same data-attributes.
 

apps/docs/src/routes/docs/core/components/context-menu.mdx

@@ -435,6 +435,7 @@ We expose a CSS custom property `--kb-popper-content-transform-origin` which can
 | Data attribute | Description                           |
 | :------------- | :------------------------------------ |
 | data-expanded  | Present when the menu is open.        |
+| data-closed    | Present when the menu is close.       |
 | data-disabled  | Present when the trigger is disabled. |
 
 `ContextMenu.Icon`, `ContextMenu.Content`, `ContextMenu.SubTrigger` and `ContextMenu.SubContent` share the same `data-expanded` attribute.

apps/docs/src/routes/docs/core/components/dialog.mdx

@@ -273,9 +273,10 @@ function ControlledExample() {
 
 `Dialog.Trigger` consists of [Button](/docs/core/components/button).
 
-| Data attribute | Description                      |
-| :------------- | :------------------------------- |
-| data-expanded  | Present when the dialog is open. |
+| Data attribute | Description                       |
+| :------------- | :-------------------------------- |
+| data-expanded  | Present when the dialog is open.  |
+| data-closed    | Present when the dialog is close. |
 
 `Dialog.Content` and `Dialog.Overlay` shares the same data-attributes.
 

apps/docs/src/routes/docs/core/components/dropdown-menu.mdx

@@ -501,9 +501,10 @@ We expose a CSS custom property `--kb-menu-content-transform-origin` which can b
 
 `DropdownMenu.Trigger` consists of [Button](/docs/core/components/button).
 
-| Data attribute | Description                    |
-| :------------- | :----------------------------- |
-| data-expanded  | Present when the menu is open. |
+| Data attribute | Description                     |
+| :------------- | :------------------------------ |
+| data-expanded  | Present when the menu is open.  |
+| data-closed    | Present when the menu is close. |
 
 `DropdownMenu.Icon`, `DropdownMenu.Content`, `DropdownMenu.SubTrigger` and `DropdownMenu.SubContent` share the same data-attributes.
 

apps/docs/src/routes/docs/core/components/hover-card.mdx

@@ -265,9 +265,10 @@ We expose a CSS custom property `--kb-hovercard-content-transform-origin` which
 
 `HoverCard.Trigger` consists of [Link](/docs/core/components/link).
 
-| Data attribute | Description                         |
-| :------------- | :---------------------------------- |
-| data-expanded  | Present when the hovercard is open. |
+| Data attribute | Description                          |
+| :------------- | :----------------------------------- |
+| data-expanded  | Present when the hovercard is open.  |
+| data-closed    | Present when the hovercard is close. |
 
 `HoverCard.Content` share the same data-attributes.
 

apps/docs/src/routes/docs/core/components/popover.mdx

@@ -318,9 +318,10 @@ We expose a CSS custom property `--kb-popover-content-transform-origin` which ca
 
 `Popover.Trigger` consists of [Button](/docs/core/components/button).
 
-| Data attribute | Description                       |
-| :------------- | :-------------------------------- |
-| data-expanded  | Present when the popover is open. |
+| Data attribute | Description                        |
+| :------------- | :--------------------------------- |
+| data-expanded  | Present when the popover is open.  |
+| data-closed    | Present when the popover is close. |
 
 `Popover.Anchor` , `Popover.Content` , `Popover.Arrow`, `Popover.Title`, `Popover.Description` and `Popover.CloseButton` share the same data-attributes.
 

apps/docs/src/routes/docs/core/components/select.mdx

@@ -636,9 +636,10 @@ We expose a CSS custom property `--kb-popper-content-transform-origin` which can
 
 `Select.Trigger` consists of [Button](/docs/core/components/button).
 
-| Data attribute | Description                      |
-| :------------- | :------------------------------- |
-| data-expanded  | Present when the select is open. |
+| Data attribute | Description                       |
+| :------------- | :-------------------------------- |
+| data-expanded  | Present when the select is open.  |
+| data-closed    | Present when the select is close. |
 
 ### Select.Value
 
@@ -657,9 +658,10 @@ We expose a CSS custom property `--kb-popper-content-transform-origin` which can
 
 ### Select.Icon
 
-| Data attribute | Description                      |
-| :------------- | :------------------------------- |
-| data-expanded  | Present when the select is open. |
+| Data attribute | Description                       |
+| :------------- | :-------------------------------- |
+| data-expanded  | Present when the select is open.  |
+| data-closed    | Present when the select is close. |
 
 ### Select.ErrorMessage
 

packages/core/src/collapsible/collapsible-context.ts

@@ -2,6 +2,7 @@ import { Accessor, createContext, useContext } from "solid-js";
 
 export interface CollapsibleDataSet {
   "data-expanded": string | undefined;
+  "data-closed": string | undefined;
   "data-disabled": string | undefined;
 }
 

packages/core/src/collapsible/collapsible-root.tsx

@@ -73,6 +73,7 @@ export const CollapsibleRoot = createPolymorphicComponent<"div", CollapsibleRoot
 
   const dataset: Accessor<CollapsibleDataSet> = createMemo(() => ({
     "data-expanded": disclosureState.isOpen() ? "" : undefined,
+    "data-closed": !disclosureState.isOpen() ? "" : undefined,
     "data-disabled": local.isDisabled ? "" : undefined,
   }));
 

packages/core/src/dialog/dialog-content.tsx

@@ -177,6 +177,7 @@ export const DialogContent = createPolymorphicComponent<"div", DialogContentOpti
         aria-labelledby={context.titleId()}
         aria-describedby={context.descriptionId()}
         data-expanded={context.isOpen() ? "" : undefined}
+        data-closed={!context.isOpen() ? "" : undefined}
         onEscapeKeyDown={local.onEscapeKeyDown}
         onPointerDownOutside={onPointerDownOutside}
         onFocusOutside={onFocusOutside}

packages/core/src/dialog/dialog-overlay.tsx

@@ -41,6 +41,7 @@ export const DialogOverlay = createPolymorphicComponent<"div", DialogOverlayOpti
         // We re-enable pointer-events prevented by `Dialog.Content` to allow scrolling.
         style={{ "pointer-events": "auto", ...local.style }}
         data-expanded={context.isOpen() ? "" : undefined}
+        data-closed={!context.isOpen() ? "" : undefined}
         onPointerDown={onPointerDown}
         {...others}
       />

packages/core/src/dialog/dialog-trigger.tsx

@@ -33,6 +33,7 @@ export const DialogTrigger = createPolymorphicComponent<"button", Button.ButtonR
         aria-expanded={context.isOpen()}
         aria-controls={context.isOpen() ? context.contentId() : undefined}
         data-expanded={context.isOpen() ? "" : undefined}
+        data-closed={!context.isOpen() ? "" : undefined}
         onClick={onClick}
         {...others}
       />

packages/core/src/hover-card/hover-card-context.tsx

@@ -4,6 +4,7 @@ import { CreatePresenceResult } from "../primitives";
 
 export interface HoverCardDataSet {
   "data-expanded": string | undefined;
+  "data-closed": string | undefined;
 }
 
 export interface HoverCardContextValue {

packages/core/src/hover-card/hover-card-root.tsx

@@ -217,6 +217,7 @@ export const HoverCardRoot: ParentComponent<HoverCardRootOptions> = props => {
 
   const dataset: Accessor<HoverCardDataSet> = createMemo(() => ({
     "data-expanded": disclosureState.isOpen() ? "" : undefined,
+    "data-closed": !disclosureState.isOpen() ? "" : undefined,
   }));
 
   const context: HoverCardContextValue = {

packages/core/src/menu/menu-context.tsx

@@ -8,6 +8,7 @@ import { GraceIntent, Side } from "./utils";
 
 export interface MenuDataSet {
   "data-expanded": string | undefined;
+  "data-closed": string | undefined;
 }
 
 export interface MenuContextValue {

packages/core/src/menu/menu.tsx

@@ -186,6 +186,7 @@ export function Menu(props: ParentProps<MenuOptions>) {
 
   const dataset: Accessor<MenuDataSet> = createMemo(() => ({
     "data-expanded": disclosureState.isOpen() ? "" : undefined,
+    "data-closed": !disclosureState.isOpen() ? "" : undefined,
   }));
 
   const context: MenuContextValue = {

packages/core/src/popover/popover-context.tsx

@@ -4,6 +4,7 @@ import { CreatePresenceResult } from "../primitives";
 
 export interface PopoverDataSet {
   "data-expanded": string | undefined;
+  "data-closed": string | undefined;
 }
 
 export interface PopoverContextValue {

packages/core/src/popover/popover-root.tsx

@@ -110,6 +110,7 @@ export const PopoverRoot: ParentComponent<PopoverRootOptions> = props => {
 
   const dataset: Accessor<PopoverDataSet> = createMemo(() => ({
     "data-expanded": disclosureState.isOpen() ? "" : undefined,
+    "data-closed": !disclosureState.isOpen() ? "" : undefined,
   }));
 
   const context: PopoverContextValue = {

packages/core/src/select/select-icon.tsx

@@ -20,6 +20,7 @@ export const SelectIcon = createPolymorphicComponent<"div">(props => {
       component={local.as}
       aria-hidden="true"
       data-expanded={context.isOpen() ? "" : undefined}
+      data-closed={!context.isOpen() ? "" : undefined}
       {...others}
     />
   );

packages/core/src/select/select-trigger.tsx

@@ -187,6 +187,7 @@ export const SelectTrigger = createPolymorphicComponent<"button", Button.ButtonR
         aria-labelledby={ariaLabelledBy()}
         aria-describedby={fieldProps.ariaDescribedBy()}
         data-expanded={context.isOpen() ? "" : undefined}
+        data-closed={!context.isOpen() ? "" : undefined}
         onPointerDown={onPointerDown}
         onClick={onClick}
         onKeyDown={onKeyDown}

packages/tailwindcss/src/index.js

@@ -21,6 +21,7 @@ const STATES = [
   "selected",
   "pressed",
   "expanded",
+  "closed",
   "highlighted",
   "current",
 ];

packages/vanilla-extract/src/index.ts

@@ -15,6 +15,7 @@ export type DataAttributeState =
   | "selected"
   | "pressed"
   | "expanded"
+  | "closed"
   | "highlighted"
   | "current";