@chayns-ui/core 0.5.0 → 0.7.0

package/README.md

@@ -36,11 +36,11 @@ import '@chayns-ui/core/button.css';
 
 | Import | CSS-Export |
 |---|---|
-| `Button`, `IconButton` | `@chayns-ui/core/button.css` |
+| `Button`, `IconButton`, `SplitButton` | `@chayns-ui/core/button.css`, `@chayns-ui/core/split-button.css` |
 | `Card` | `@chayns-ui/core/card.css` |
-| `Avatar`, `AvatarGroup` | `@chayns-ui/core/avatar.css` |
+| `Avatar`, `AvatarGroup`, `Badge`, `Banner` | matching CSS exports |
 | `List` | `@chayns-ui/core/list.css` |
-| `TextField`, `TextArea`, `Checkbox`, `Switch`, `RadioGroup`, `SegmentedControl`, `MessageBox` | their matching CSS export |
+| `TextField`, `TextArea`, `Checkbox`, `Switch`, `RadioGroup`, `SegmentedControl`, `Banner`, `ComboBox` | matching CSS exports |
 | `Accordion`, `AccordionGroup` | `@chayns-ui/core/accordion.css` |
 | `Popup`, `PopupList` | `@chayns-ui/core/popup.css` |
 | `SplitButton` | `@chayns-ui/core/split-button.css` |
@@ -50,6 +50,12 @@ Alternativ lädt `@chayns-ui/core/styles.css` das gebündelte CSS aller Komponen
 `ListItem` wurde vor 1.0 durch `List.Item` ersetzt. Komponiere Zeilen mit
 `List.Item.Action`, `List.Item.Body`, `List.Item.Title` und optionalen Slots.
 
+`ComboBox` unterstützt Single-Select und Multi-Select. `TextField` und
+`TextArea` akzeptieren native `type`- beziehungsweise `autoComplete`-Werte,
+einschließlich `type="password"`; eine Sichtbarkeitsumschaltung ist kein Teil
+des Core-Vertrags. `Badge` ist ein statischer Statusindikator, während
+`Banner` ein optional schließbares Statusmuster ist.
+
 ## Hinweise
 
 Die Bibliothek lädt keine Fonts, injiziert kein CSS und kalibriert keine

package/dist/accordion.css

@@ -45,6 +45,12 @@
     cursor: pointer;
   }
 
+  .chayns-accordion--list > .chayns-accordion__header {
+    gap: var(--k12);
+    padding: var(--k12) var(--k16);
+    transition: background 0.16s ease;
+  }
+
   .chayns-accordion--wrapped > .chayns-accordion__header {
     gap: var(--k10);
     padding: var(--k10) var(--k12);
@@ -80,7 +86,47 @@
     color: var(--text);
   }
 
-  .chayns-accordion--open > .chayns-accordion__header > .chayns-accordion__title {
+  .chayns-accordion__head-content {
+    display: flex;
+    min-inline-size: 0;
+    flex: 1;
+    flex-direction: column;
+  }
+
+  .chayns-accordion__subtitle {
+    overflow: hidden;
+    color: var(--text-3);
+    font-size: var(--fs-meta);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .chayns-accordion__leading {
+    display: inline-flex;
+    inline-size: var(--k32);
+    block-size: var(--k32);
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  .chayns-accordion--list .chayns-accordion__leading {
+    inline-size: var(--k38);
+    block-size: var(--k38);
+  }
+
+  .chayns-accordion--list .chayns-accordion__leading > .chayns-avatar--small {
+    inline-size: var(--k38);
+    block-size: var(--k38);
+  }
+
+  .chayns-accordion__leading > * {
+    max-inline-size: 100%;
+    max-block-size: 100%;
+  }
+
+  .chayns-accordion--open .chayns-accordion__title {
     font-weight: 600;
   }
 
@@ -112,6 +158,18 @@
     color: var(--text-3);
   }
 
+  .chayns-accordion--has-leading .chayns-accordion__content {
+    padding-inline-start: calc(var(--k16) + var(--k16) + var(--k12) + var(--k32) + var(--k12));
+  }
+
+  .chayns-accordion--list .chayns-accordion__content {
+    padding: 0 var(--k16) var(--k14) calc(var(--k16) + var(--k16) + var(--k12));
+  }
+
+  .chayns-accordion--wrapped.chayns-accordion--has-leading .chayns-accordion__content {
+    padding-inline-start: calc(var(--k12) + var(--k14) + var(--k10) + var(--k32) + var(--k10));
+  }
+
   .chayns-accordion--wrapped
     > .chayns-accordion__panel
     > .chayns-accordion__inner
@@ -127,10 +185,16 @@
     color: var(--muted);
   }
 
-  .chayns-accordion--disabled > .chayns-accordion__header > .chayns-accordion__title {
+  .chayns-accordion--disabled .chayns-accordion__title {
     color: var(--muted);
   }
 
+  .chayns-accordion--list.chayns-accordion--open
+    > .chayns-accordion__header
+    .chayns-accordion__title {
+    font-weight: 500;
+  }
+
   @media (hover: hover) {
     .chayns-accordion__header:not(:disabled):hover {
       background: var(--hover);

package/dist/badge.css

@@ -31,16 +31,16 @@
   .chayns-badge--success {
     /* stylelint-disable-next-line custom-property-pattern */
     background: var(--success-bg);
-    color: var(--text);
+    color: var(--success);
   }
 
   .chayns-badge--warning {
     background: var(--warning-bg);
-    color: var(--text);
+    color: var(--warning);
   }
 
   .chayns-badge--danger {
     background: var(--danger-bg);
-    color: var(--text);
+    color: var(--danger);
   }
 }

package/dist/banner.css

@@ -0,0 +1,89 @@
+@layer chayns.components {
+  .chayns-banner {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: var(--k13);
+    inline-size: 100%;
+    padding: var(--k13) var(--k16);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    background: var(--surface-alt);
+    color: var(--text);
+  }
+
+  .chayns-banner--success {
+    /* stylelint-disable-next-line custom-property-pattern */
+    border-color: var(--success);
+    /* stylelint-disable-next-line custom-property-pattern */
+    background: var(--success-bg);
+  }
+
+  .chayns-banner--neutral {
+    border-color: var(--accent-300);
+  }
+
+  .chayns-banner--warning {
+    border-color: var(--warning);
+    background: var(--warning-bg);
+  }
+
+  .chayns-banner--danger {
+    border-color: var(--danger);
+    background: var(--danger-bg);
+  }
+
+  .chayns-banner__icon {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--icon-lg);
+    block-size: var(--icon-lg);
+    color: var(--accent);
+  }
+
+  .chayns-banner--success .chayns-banner__icon {
+    /* stylelint-disable-next-line custom-property-pattern */
+    color: var(--success);
+  }
+
+  .chayns-banner--warning .chayns-banner__icon {
+    color: var(--warning);
+  }
+
+  .chayns-banner--danger .chayns-banner__icon {
+    color: var(--danger);
+  }
+
+  .chayns-banner__content {
+    min-inline-size: 0;
+    flex: 1;
+  }
+
+  .chayns-banner__close {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--k28);
+    block-size: var(--k28);
+    margin-block-start: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--text-2);
+    cursor: pointer;
+  }
+
+  .chayns-banner__close:hover {
+    background: var(--hover);
+    color: var(--text);
+  }
+
+  .chayns-banner__close:focus-visible {
+    outline: var(--focus-ring-size) solid rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-strong));
+    outline-offset: 2px;
+  }
+}

package/dist/button.css

@@ -65,11 +65,11 @@
   }
 
   :where(.chayns-button, .chayns-icon-button):active:not(:disabled) {
-    transform: scale(0.97);
+    transform: scale(0.96);
   }
 
   :where(.chayns-icon-button):active:not(:disabled) {
-    transform: scale(0.9);
+    transform: scale(0.96);
   }
 
   :where(.chayns-button--primary, .chayns-icon-button--primary):active:not(:disabled) {
@@ -135,6 +135,10 @@
     display: none;
   }
 
+  :where(.chayns-button--loading, .chayns-icon-button--loading) .chayns-button-icon {
+    animation: chayns-button-spin 0.8s linear infinite;
+  }
+
   :where(.chayns-button, .chayns-icon-button):active:not(:disabled)
     .chayns-button-icon__weight:not(.chayns-button-icon__weight--active) {
     display: none;
@@ -203,5 +207,15 @@
     :where(.chayns-button, .chayns-icon-button) {
       transition: none;
     }
+
+    :where(.chayns-button--loading, .chayns-icon-button--loading) .chayns-button-icon {
+      animation: none;
+    }
+  }
+
+  @keyframes chayns-button-spin {
+    to {
+      transform: rotate(360deg);
+    }
   }
 }

package/dist/card.css

@@ -2,12 +2,39 @@
   .chayns-card {
     box-sizing: border-box;
     display: block;
+    padding: var(--k16);
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 16px;
   }
 
-  .chayns-card--elevated {
-    box-shadow: var(--shadow-card);
+  .chayns-card__header {
+    display: flex;
+    align-items: center;
+    gap: var(--k12);
+    margin-block-end: var(--k12);
+    color: var(--text);
+    font-size: var(--fs-body);
+    font-weight: 600;
+  }
+
+  .chayns-card__header-icon {
+    display: inline-grid;
+    inline-size: var(--k32);
+    block-size: var(--k32);
+    flex: none;
+    place-items: center;
+    border-radius: 8px;
+    background: var(--surface-alt);
+  }
+
+  .chayns-card__header-content {
+    min-inline-size: 0;
+  }
+
+  @media (hover: hover) {
+    .chayns-card:hover {
+      box-shadow: var(--shadow-hover);
+    }
   }
 }

package/dist/checkbox.css

@@ -1,7 +1,7 @@
 @layer chayns.components {
   .chayns-checkbox {
     display: inline-flex;
-    align-items: flex-start;
+    align-items: center;
     gap: var(--k12);
     margin: 0;
     color: var(--text);
@@ -20,25 +20,24 @@
 
   .chayns-checkbox__control {
     box-sizing: border-box;
-    display: inline-grid;
+    display: inline-flex;
     inline-size: var(--k20);
     block-size: var(--k20);
     flex: none;
-    place-items: center;
+    align-items: center;
+    justify-content: center;
     margin-block-start: 1px;
     border: 2px solid var(--input-border);
     border-radius: 6px;
     background: transparent;
+    color: var(--on-accent);
+    font-size: var(--fs-micro);
+    transition: all 0.15s ease;
   }
 
-  .chayns-checkbox__control::after {
-    inline-size: calc(var(--k8) - 2px);
-    block-size: var(--k12);
-    border-inline-end: 2px solid var(--on-accent);
-    border-block-end: 2px solid var(--on-accent);
-    content: '';
+  .chayns-checkbox__control > i {
     opacity: 0;
-    transform: rotate(45deg) scale(0.6);
+    transform: scale(0.4);
     transition:
       opacity 0.12s ease,
       transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
@@ -49,9 +48,9 @@
     background: var(--accent);
   }
 
-  .chayns-checkbox__input:checked + .chayns-checkbox__control::after {
+  .chayns-checkbox__input:checked + .chayns-checkbox__control > i {
     opacity: 1;
-    transform: rotate(45deg) scale(1);
+    transform: scale(1);
   }
 
   .chayns-checkbox__input:focus-visible + .chayns-checkbox__control {
@@ -75,8 +74,20 @@
     line-height: 1.4;
   }
 
+  .chayns-checkbox__content {
+    display: grid;
+    gap: var(--k2);
+    min-inline-size: 0;
+  }
+
+  .chayns-checkbox__description {
+    color: var(--text-3);
+    font-size: var(--fs-meta);
+    line-height: 1.4;
+  }
+
   @media (prefers-reduced-motion: reduce) {
-    .chayns-checkbox__control::after {
+    .chayns-checkbox__control > i {
       transition: none;
     }
   }

package/dist/combo-box.css

@@ -8,7 +8,7 @@
     box-sizing: border-box;
     inline-size: 100%;
     min-block-size: calc(1.2em + 2 * var(--input-py) + 3px);
-    padding: var(--input-py) var(--input-px);
+    padding: var(--input-py) var(--k36) var(--input-py) var(--input-px);
     border: 1.5px solid var(--input-border);
     border-radius: 10px;
     background: var(--surface);
@@ -45,6 +45,23 @@
     white-space: nowrap;
   }
 
+  .chayns-combo-box__chevron {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: var(--input-px);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--muted);
+    pointer-events: none;
+    transform: translateY(-50%);
+    transition: transform 0.18s ease;
+  }
+
+  .chayns-combo-box--open .chayns-combo-box__chevron {
+    transform: translateY(-50%) rotate(180deg);
+  }
+
   .chayns-combo-box--open .chayns-combo-box__label,
   .chayns-combo-box__input:not(:placeholder-shown) + .chayns-combo-box__label {
     color: var(--accent);
@@ -137,7 +154,8 @@
 
   @media (prefers-reduced-motion: reduce) {
     .chayns-combo-box__input,
-    .chayns-combo-box__label {
+    .chayns-combo-box__label,
+    .chayns-combo-box__chevron {
       transition: none;
     }
   }

package/dist/components/accordion/Accordion.d.ts

@@ -1,4 +1,12 @@
-import type { AccordionProps } from './Accordion.types.js';
-declare const Accordion: ({ children, className, defaultOpen, disabled, id, onOpenChange, open, ref, title, ...rootProps }: AccordionProps) => import("react").JSX.Element;
+import type { AccordionContentProps, AccordionHeadContentProps, AccordionHeadProps, AccordionPartProps, AccordionProps } from './Accordion.types.js';
+declare function HeadContent({ className, subtitle, title }: AccordionHeadContentProps): import("react").JSX.Element;
+declare const Accordion: import("react").ForwardRefExoticComponent<Omit<AccordionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Content: import("react").ForwardRefExoticComponent<Omit<AccordionContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Head: import("react").ForwardRefExoticComponent<Omit<AccordionHeadProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>> & {
+        Content: typeof HeadContent;
+        Leading: (props: AccordionPartProps) => import("react").JSX.Element;
+        Trailing: (props: AccordionPartProps) => import("react").JSX.Element;
+    };
+};
 export default Accordion;
 //# sourceMappingURL=Accordion.d.ts.map

package/dist/components/accordion/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/Accordion.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,QAAA,MAAM,SAAS,GAAI,kGAWhB,cAAc,gCAkFhB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/Accordion.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EACV,qBAAqB,EACrB,yBAAyB,EACzB,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACf,MAAM,sBAAsB,CAAC;AAgB9B,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,yBAAyB,+BAS7E;AA8JD,QAAA,MAAM,SAAS;;;;yBA1Ka,kBAAkB;0BACjB,kBAAkB;;CAgL7C,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/dist/components/accordion/Accordion.js

@@ -1,8 +1,86 @@
-import { AccordionDepthContext, AccordionGroupContext } from "./AccordionContext.js";
+import { AccordionDepthContext, AccordionGroupContext, AccordionItemContext, useAccordionItemContext } from "./AccordionContext.js";
+import { Children, createElement, forwardRef, isValidElement, useContext, useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useId, useState } from "react";
 //#region src/components/accordion/Accordion.tsx
-var Accordion = ({ children, className, defaultOpen = false, disabled = false, id, onOpenChange, open, ref, title, ...rootProps }) => {
+function Part({ children, className, name }) {
+	useAccordionItemContext(name);
+	return /* @__PURE__ */ jsx("span", {
+		className: [`chayns-accordion__${name.toLowerCase()}`, className].filter(Boolean).join(" "),
+		children
+	});
+}
+var HeadLeading = (props) => /* @__PURE__ */ jsx(Part, {
+	...props,
+	name: "leading"
+});
+var HeadTrailing = (props) => /* @__PURE__ */ jsx(Part, {
+	...props,
+	name: "trailing"
+});
+function HeadContent({ className, subtitle, title }) {
+	useAccordionItemContext("Head.Content");
+	return /* @__PURE__ */ jsxs("span", {
+		className: ["chayns-accordion__head-content", className].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "chayns-accordion__title",
+			children: title
+		}), subtitle ? /* @__PURE__ */ jsx("span", {
+			className: "chayns-accordion__subtitle",
+			children: subtitle
+		}) : null]
+	});
+}
+var AccordionHead = forwardRef(function AccordionHead({ children, className, onClick, ...buttonProps }, ref) {
+	const { disabled, headerId, isOpen, onToggle, panelId } = useAccordionItemContext("Head");
+	function handleClick(event) {
+		onClick?.(event);
+		if (!event.defaultPrevented) onToggle();
+	}
+	return /* @__PURE__ */ jsxs("button", {
+		...buttonProps,
+		"aria-controls": panelId,
+		"aria-expanded": isOpen,
+		className: ["chayns-accordion__header", className].filter(Boolean).join(" "),
+		disabled,
+		id: headerId,
+		onClick: handleClick,
+		ref,
+		type: "button",
+		children: [/* @__PURE__ */ jsx("i", {
+			"aria-hidden": "true",
+			className: "chayns-accordion__chevron far fa-chevron-right"
+		}), children]
+	});
+});
+var AccordionContent = forwardRef(function AccordionContent({ children, className, ...panelProps }, ref) {
+	const depth = useContext(AccordionDepthContext);
+	const { headerId, isOpen, panelId } = useAccordionItemContext("Content");
+	return /* @__PURE__ */ jsx("div", {
+		...panelProps,
+		"aria-hidden": !isOpen,
+		"aria-labelledby": headerId,
+		className: ["chayns-accordion__panel", className].filter(Boolean).join(" "),
+		id: panelId,
+		inert: !isOpen,
+		ref,
+		role: "region",
+		style: {
+			...panelProps.style,
+			gridTemplateRows: isOpen ? "1fr" : "0fr"
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: "chayns-accordion__inner",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "chayns-accordion__content",
+				children: /* @__PURE__ */ jsx(AccordionDepthContext.Provider, {
+					value: depth + 1,
+					children
+				})
+			})
+		})
+	});
+});
+var AccordionRoot = forwardRef(function Accordion({ appearance = "default", children, className, defaultOpen = false, disabled = false, id, leading, onOpenChange, open, subtitle, title, ...rootProps }, ref) {
 	const depth = useContext(AccordionDepthContext);
 	const group = useContext(AccordionGroupContext);
 	const generatedId = useId();
@@ -11,11 +89,10 @@ var Accordion = ({ children, className, defaultOpen = false, disabled = false, i
 	const panelId = `${baseId}-panel`;
 	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
 	const isGrouped = group !== null && depth === 0;
-	let isOpen;
-	if (isGrouped) isOpen = group.isOpen(baseId);
-	else if (open !== void 0) isOpen = open;
-	else isOpen = uncontrolledOpen;
-	const handleToggle = () => {
+	const isOpen = isGrouped ? group.isOpen(baseId) : open ?? uncontrolledOpen;
+	const wrapped = depth > 0;
+	const isList = appearance === "list";
+	function handleToggle() {
 		if (isGrouped) {
 			group.toggle(baseId);
 			return;
@@ -23,55 +100,52 @@ var Accordion = ({ children, className, defaultOpen = false, disabled = false, i
 		const nextOpen = !isOpen;
 		if (open === void 0) setUncontrolledOpen(nextOpen);
 		onOpenChange?.(nextOpen);
-	};
+	}
+	const variantClassName = isGrouped ? "chayns-accordion--grouped" : wrapped ? "chayns-accordion--wrapped" : "chayns-accordion--standalone";
+	const directChildren = Children.toArray(children);
+	const compoundHead = directChildren.find((child) => isValidElement(child) && child.type === AccordionHead);
+	const hasCompoundLeading = isValidElement(compoundHead) && Children.toArray(compoundHead.props.children).some((child) => isValidElement(child) && child.type === HeadLeading);
 	const rootClassName = [
 		"chayns-accordion",
-		isGrouped ? "chayns-accordion--grouped" : depth > 0 ? "chayns-accordion--wrapped" : "chayns-accordion--standalone",
+		variantClassName,
 		isOpen ? "chayns-accordion--open" : null,
 		disabled ? "chayns-accordion--disabled" : null,
+		leading || hasCompoundLeading ? "chayns-accordion--has-leading" : null,
+		isList ? "chayns-accordion--list" : null,
 		className
 	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ jsxs("div", {
+	const hasCompoundHead = compoundHead !== void 0;
+	const compoundContent = directChildren.find((child) => isValidElement(child) && child.type === AccordionContent);
+	const hasCompoundContent = compoundContent !== void 0;
+	const panelChildren = children;
+	return /* @__PURE__ */ jsx("div", {
 		...rootProps,
 		className: rootClassName,
 		id,
 		ref,
-		children: [/* @__PURE__ */ jsxs("button", {
-			"aria-controls": panelId,
-			"aria-expanded": isOpen,
-			className: "chayns-accordion__header",
-			disabled,
-			id: headerId,
-			onClick: handleToggle,
-			type: "button",
-			children: [/* @__PURE__ */ jsx("i", {
-				"aria-hidden": "true",
-				className: "chayns-accordion__chevron far fa-chevron-right"
-			}), /* @__PURE__ */ jsx("span", {
-				className: "chayns-accordion__title",
-				children: title
-			})]
-		}), /* @__PURE__ */ jsx("div", {
-			"aria-hidden": !isOpen,
-			"aria-labelledby": headerId,
-			className: "chayns-accordion__panel",
-			id: panelId,
-			inert: !isOpen,
-			role: "region",
-			style: { gridTemplateRows: isOpen ? "1fr" : "0fr" },
-			children: /* @__PURE__ */ jsx("div", {
-				className: "chayns-accordion__inner",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "chayns-accordion__content",
-					children: /* @__PURE__ */ jsx(AccordionDepthContext.Provider, {
-						value: depth + 1,
-						children
-					})
-				})
-			})
-		})]
+		children: /* @__PURE__ */ jsxs(AccordionItemContext.Provider, {
+			value: {
+				disabled,
+				headerId,
+				isOpen,
+				onToggle: handleToggle,
+				panelId
+			},
+			children: [hasCompoundHead ? compoundHead : /* @__PURE__ */ jsxs(AccordionHead, { children: [leading ? /* @__PURE__ */ jsx(HeadLeading, { children: leading }) : null, /* @__PURE__ */ jsx(HeadContent, {
+				title,
+				subtitle
+			})] }), hasCompoundContent ? createElement(AccordionContent, { ...compoundContent.props }) : /* @__PURE__ */ jsx(AccordionContent, { children: panelChildren })]
+		})
 	});
-};
+});
+var Accordion = Object.assign(AccordionRoot, {
+	Content: AccordionContent,
+	Head: Object.assign(AccordionHead, {
+		Content: HeadContent,
+		Leading: HeadLeading,
+		Trailing: HeadTrailing
+	})
+});
 //#endregion
 export { Accordion as default };