@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/dist/disclosure/index.js

@@ -1,35 +1,50 @@
+/*
+* Copyright 2024 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Disclosure.tsx
 import { mergeStyles } from "../style/runtime.js";
-import { useProviderProps } from "../provider/index.js";
+import { a as useProviderProps } from "../_chunk/provider.js";
 import { t as ActionButtonContext } from "../_chunk/context.js";
 import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "../_chunk/spectrum-context.js";
-import { className, createComponent, effect, getNextElement, insert, memo, mergeProps, runHydrationEvents, setAttribute, spread, template, use } from "solid-js/web";
-import { Show, createContext, mergeProps as mergeProps$1, splitProps, useContext } from "solid-js";
-import { createFocusRing, createHover, useLocale } from "@proyecto-viviana/solidaria";
+import { applyRef, className, createComponent, effect, getNextElement, insert, memo, mergeProps, readShallow, ref, runHydrationEvents, scope, setAttribute, spread, template } from "@solidjs/web";
+import { Show, createContext, useContext } from "solid-js";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { Disclosure as Disclosure$1, DisclosureGroup as DisclosureGroup$1, DisclosurePanel as DisclosurePanel$1, DisclosureStateContext, DisclosureTrigger as DisclosureTrigger$1, ElementTag, useDisclosureContext } from "@proyecto-viviana/solidaria-components";
+import { createFocusRing, createHover, mergeProps as mergeProps$2, useLocale } from "@proyecto-viviana/solidaria";
 //#region src/disclosure/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div>`), _tmpl$2 = /*#__PURE__*/ template(`<svg aria-hidden=true data-rsp-slot=disclosure-chevron><path fill="var(--iconPrimary, #222)">`), _tmpl$3 = /*#__PURE__*/ template(`<div data-rsp-slot=disclosure-panel-content>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<span aria-hidden=true data-rsp-slot=disclosure-chevron>>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div data-rsp-slot=disclosure-panel-content>`);
 const DisclosureContext = createContext(null);
-const accordionStyles = " sd151 _ta151";
+const accordionStyles = " sd17 _ta17";
 const disclosureRootStyles = function anonymous(props) {
 	let rules = " ";
-	rules += " pHKLAu151";
-	if (props.isQuiet) rules += " _ka151";
-	else rules += " _kb151";
+	rules += " pmiKvLd17";
+	if (props.isQuiet) rules += " _ka17";
+	else rules += " _kb17";
 	if (props.isInGroup) {
-		rules += " ha151";
-		if (props.isQuiet) rules += " hka151";
-		else rules += " hkb151";
-	} else if (props.isQuiet) rules += " ha151";
-	else rules += " hb151";
-	rules += " ma151";
-	rules += " la151";
-	rules += " _jf151";
-	rules += " irHHOgb151";
-	rules += " Ng151";
+		rules += " ha17";
+		if (props.isQuiet) rules += " hka17";
+		else rules += " hkb17";
+	} else if (props.isQuiet) rules += " ha17";
+	else rules += " hb17";
+	rules += " ma17";
+	rules += " la17";
+	rules += " _jf17";
+	rules += " irHHOgb17";
+	rules += " Ng17";
 	return rules;
 };
-const headerStyles = " sd151 eb151 Ub151 qb151";
-const headingStyles = " Jy151 Gy151 Iy151 Hy151 _ub151 sd151 _vb151 Na151";
+const headerStyles = " sd17 eb17 Ub17 qb17";
+const headingStyles = " Jy17 Gy17 Iy17 Hy17 _ub17 sd17 _vb17 Na17";
 const buttonStyles = function anonymous(props, overrides) {
 	let rules = " ";
 	let fontFamily = false;
@@ -53,153 +68,130 @@ const buttonStyles = function anonymous(props, overrides) {
 		if (p[1] === "Z") width = true;
 		rules += p[0];
 	}
-	if (props.isFocusVisible) rules += " _Lf151";
-	else rules += " _Le151";
-	rules += " O8KaFke151";
-	rules += " Olc151";
-	rules += " _Mc151";
-	rules += " _Kb151";
-	if (!fontFamily) rules += " uxe7h4151";
+	if (props.isFocusVisible) rules += " _Lf17";
+	else rules += " _Le17";
+	rules += " Or2Mazb17";
+	rules += " Olc17";
+	rules += " _Mc17";
+	rules += " _Kb17";
+	if (!fontFamily) rules += " uxe7h417";
 	if (props.size === "XL") {
-		if (!__fs) rules += " -_6BNtrc-f151";
-		if (!fontSize) rules += " vx151";
+		if (!__fs) rules += " -_6BNtrc-f17";
+		if (!fontSize) rules += " vx17";
 	} else if (props.size === "L") {
-		if (!__fs) rules += " -_6BNtrc-e151";
-		if (!fontSize) rules += " vx151";
+		if (!__fs) rules += " -_6BNtrc-e17";
+		if (!fontSize) rules += " vx17";
 	} else if (props.size === "M") {
-		if (!__fs) rules += " -_6BNtrc-d151";
-		if (!fontSize) rules += " vx151";
+		if (!__fs) rules += " -_6BNtrc-d17";
+		if (!fontSize) rules += " vx17";
 	} else if (props.size === "S") {
-		if (!__fs) rules += " -_6BNtrc-c151";
-		if (!fontSize) rules += " vx151";
+		if (!__fs) rules += " -_6BNtrc-c17";
+		if (!fontSize) rules += " vx17";
 	}
-	if (!fontWeight) rules += " xd151";
-	if (!fontSynthesisWeight) rules += " _xa151";
-	if (!fontWeight) rules += " xX0cczbc151";
-	if (!fontSynthesisWeight) rules += " _xX0cczba151";
-	if (!lineHeight) rules += " _Fd151";
-	if (!lineHeight) rules += " _FnuYUweb151";
+	if (!fontWeight) rules += " xd17";
+	if (!fontSynthesisWeight) rules += " _xa17";
+	if (!fontWeight) rules += " xX0cczbc17";
+	if (!fontSynthesisWeight) rules += " _xX0cczba17";
+	if (!lineHeight) rules += " _Fd17";
+	if (!lineHeight) rules += " _FnuYUweb17";
 	if (props.isDisabled) {
-		rules += " pUvnvv151";
-		rules += " plc151";
+		rules += " p8H6Pad17";
+		rules += " plc17";
 	} else {
-		if (props.isPressed) rules += " pMwyHo151";
-		else if (props.isFocusVisible) rules += " pMwyHo151";
-		else if (props.isHovered) rules += " pMwyHo151";
-		else rules += " pHKLAu151";
-		rules += " plb151";
+		if (props.isPressed) rules += " pBJTC6c17";
+		else if (props.isFocusVisible) rules += " pBJTC6c17";
+		else if (props.isHovered) rules += " pBJTC6c17";
+		else rules += " pmiKvLd17";
+		rules += " plb17";
 	}
-	rules += " sd151";
-	if (!flexGrow) rules += " _ub151";
-	rules += " ea151";
-	rules += " S6FcKR151";
-	rules += " R6FcKR151";
-	rules += " Tu7Fubd151";
-	rules += " Qu7Fubd151";
-	rules += " U6FcKR151";
-	rules += " q6FcKR151";
-	rules += " MAyFGYc151";
-	if (!width) rules += " Za151";
-	if (props.isPressed) rules += " gnSjEFb151";
-	else if (props.isHovered) rules += " gabY4te151";
-	else if (props.isFocusVisible) rules += " gabY4te151";
-	else rules += " g9151";
-	rules += " Yd151";
-	rules += " Xb151";
-	rules += " _2b151";
-	rules += " _kJ8iPYd151";
-	rules += " hXMFGYc151";
-	rules += " ma151";
-	rules += " la151";
-	if (props.isQuiet) rules += " ob151";
-	else if (props.isFocusVisible) rules += " ob151";
-	else rules += " od151";
-	if (props.isQuiet) rules += " nb151";
-	else if (props.isFocusVisible) rules += " nb151";
-	else rules += " nd151";
-	if (props.isQuiet) rules += " kb151";
-	else if (props.isFocusVisible) rules += " kb151";
-	else rules += " kd151";
-	if (props.isQuiet) rules += " jb151";
-	else if (props.isFocusVisible) rules += " jb151";
-	else rules += " jd151";
-	rules += " _Wd151";
-	rules += " __ca151";
+	rules += " sd17";
+	if (!flexGrow) rules += " _ub17";
+	rules += " ea17";
+	rules += " S6FcKR17";
+	rules += " R6FcKR17";
+	rules += " Tu7Fubd17";
+	rules += " Qu7Fubd17";
+	rules += " U6FcKR17";
+	rules += " q6FcKR17";
+	rules += " MAyFGYc17";
+	if (!width) rules += " Za17";
+	if (props.isPressed) rules += " gZuYZFe17";
+	else if (props.isHovered) rules += " gvHkjsd17";
+	else if (props.isFocusVisible) rules += " gvHkjsd17";
+	else rules += " g917";
+	rules += " Yd17";
+	rules += " Xb17";
+	rules += " _2b17";
+	rules += " _kJ8iPYd17";
+	rules += " hXMFGYc17";
+	rules += " ma17";
+	rules += " la17";
+	rules += " of17";
+	rules += " nf17";
+	rules += " kf17";
+	rules += " jf17";
+	rules += " _Wd17";
+	rules += " __ca17";
 	if (props.size === "XL") {
-		if (props.density === "spacious") rules += " -M_-Mj151";
-		else if (props.density === "regular") rules += " -M_-Mk151";
-		else if (props.density === "compact") rules += " -M_-Mh151";
+		if (props.density === "spacious") rules += " -M_-Mj17";
+		else if (props.density === "regular") rules += " -M_-Mk17";
+		else if (props.density === "compact") rules += " -M_-Mh17";
 	} else if (props.size === "L") {
-		if (props.density === "spacious") rules += " -M_-Mk151";
-		else if (props.density === "regular") rules += " -M_-Mh151";
-		else if (props.density === "compact") rules += " -M_-Mi151";
+		if (props.density === "spacious") rules += " -M_-Mk17";
+		else if (props.density === "regular") rules += " -M_-Mh17";
+		else if (props.density === "compact") rules += " -M_-Mi17";
 	} else if (props.size === "M") {
-		if (props.density === "spacious") rules += " -M_-Mh151";
-		else if (props.density === "regular") rules += " -M_-Mi151";
-		else if (props.density === "compact") rules += " -M_-Mg151";
+		if (props.density === "spacious") rules += " -M_-Mh17";
+		else if (props.density === "regular") rules += " -M_-Mi17";
+		else if (props.density === "compact") rules += " -M_-Mg17";
 	} else if (props.size === "S") {
-		if (props.density === "spacious") rules += " -M_-Mi151";
-		else if (props.density === "regular") rules += " -M_-Mg151";
-		else if (props.density === "compact") rules += " -M_-Me151";
+		if (props.density === "spacious") rules += " -M_-Mi17";
+		else if (props.density === "regular") rules += " -M_-Mg17";
+		else if (props.density === "compact") rules += " -M_-Me17";
 	}
-	rules += " -_k_-_ka151";
-	rules += " -h_-ha151";
+	rules += " -_k_-_ka17";
+	rules += " -h_-ha17";
 	return rules;
 };
 const chevronStyles = function anonymous(props) {
 	let rules = " ";
-	if (props.isExpanded) rules += " _Sd151";
-	else if (props.isRTL) rules += " _Sc151";
-	rules += " Yd151";
-	rules += " Xb151";
-	rules += " _2b151";
-	rules += " -_8sjo0b-t5ZbAob151";
-	rules += " _va151";
-	if (props.size === "XL") rules += " Zk151";
-	else if (props.size === "L") rules += " Zj151";
-	else if (props.size === "M") rules += " Zi151";
-	else if (props.size === "S") rules += " Zi151";
-	if (props.size === "XL") rules += " Fl151";
-	else if (props.size === "L") rules += " Fk151";
-	else if (props.size === "M") rules += " Fj151";
-	else if (props.size === "S") rules += " Fj151";
+	if (props.isExpanded) rules += " _Sd17";
+	else if (props.isRTL) rules += " _Sc17";
+	rules += " Yd17";
+	rules += " Xb17";
+	rules += " _2b17";
+	rules += " _va17";
+	rules += " sd17";
+	rules += " eb17";
+	rules += " _Ca17";
+	rules += " uxe7h417";
+	rules += " xg17";
+	rules += " _xa17";
+	rules += " _F2mU17";
+	rules += " psfU9i17";
+	if (props.size === "XL") rules += " Zk17";
+	else if (props.size === "L") rules += " Zj17";
+	else if (props.size === "M") rules += " Zi17";
+	else if (props.size === "S") rules += " Zi17";
+	if (props.size === "XL") rules += " vY4qurc17";
+	else if (props.size === "L") rules += " vQvqurc17";
+	else if (props.size === "M") rules += " vIWpurc17";
+	else if (props.size === "S") rules += " vIWpurc17";
 	return rules;
 };
-const chevronIcons = {
-	S: {
-		size: 10,
-		viewBox: "0 0 10 10",
-		path: "M7.483 4.406 3.86.783a.84.84 0 1 0-1.188 1.188L5.702 5l-3.03 3.03A.84.84 0 1 0 3.86 9.216l3.623-3.623a.84.84 0 0 0 0-1.188"
-	},
-	M: {
-		size: 10,
-		viewBox: "0 0 10 10",
-		path: "M7.965 5.178C7.978 5.118 8 5.061 8 5s-.021-.118-.034-.178c-.01-.05-.01-.102-.03-.15-.023-.058-.068-.107-.104-.16-.03-.042-.047-.09-.084-.127l-.004-.003-.003-.004L3.615.303a.875.875 0 1 0-1.23 1.244L5.88 5 2.385 8.453a.875.875 0 1 0 1.23 1.244L7.74 5.622l.003-.004.004-.003c.037-.038.055-.085.084-.127.036-.053.08-.102.104-.16.02-.048.02-.1.03-.15"
-	},
-	L: {
-		size: 12,
-		viewBox: "0 0 12 12",
-		path: "M9.301 6c0-.049-.02-.095-.028-.143-.01-.068-.013-.136-.039-.2a.9.9 0 0 0-.2-.302L4.343.663a.912.912 0 0 0-1.29 1.29L7.102 6l-4.047 4.048a.912.912 0 0 0 1.289 1.289l4.691-4.692a.9.9 0 0 0 .2-.302c.026-.064.028-.132.04-.2C9.28 6.095 9.3 6.05 9.3 6"
-	},
-	XL: {
-		size: 14,
-		viewBox: "0 0 14 14",
-		path: "M10.361 6.328 5.03.996a.954.954 0 0 0-1.343 0 .95.95 0 0 0 0 1.344L8.346 7l-4.66 4.66a.95.95 0 0 0 1.344 1.344l5.331-5.332a.95.95 0 0 0 0-1.344"
-	}
-};
-const panelStyles = " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-c151 vx151 xb151 _xa151 _Fb151 _FnuYUwec151 pHKLAu151 FfwmW1d151 _Nb151 Pb151 Ysgyfc151 Ydklsgce151 Xb151 Xdklsgcb151 _2b151 _2dklsgcb151";
+const panelStyles = " uk17 ucJ9TBTb17 ud3Euai17 uea17 ugb17 uhd17 uje17 u2NhKxcl17 uic17 -_6BNtrc-c17 vx17 xb17 _xa17 _Fb17 _FnuYUwec17 pmiKvLd17 FfwmW1d17 _Nb17 Pb17 Ysgyfc17 Ydklsgce17 Xb17 Xdklsgcb17 _2b17 _2dklsgcb17";
 const panelInnerStyles = function anonymous(props) {
 	let rules = " ";
-	rules += " Tt151";
-	rules += " Qf151";
-	if (props.size === "XL") rules += " Sz5EUbe151";
-	else if (props.size === "L") rules += " Se151";
-	else if (props.size === "M") rules += " SLabwmd151";
-	else if (props.size === "S") rules += " St151";
-	if (props.size === "XL") rules += " Rz5EUbe151";
-	else if (props.size === "L") rules += " Re151";
-	else if (props.size === "M") rules += " RLabwmd151";
-	else if (props.size === "S") rules += " Rt151";
+	rules += " Tt17";
+	rules += " Qf17";
+	if (props.size === "XL") rules += " Sz5EUbe17";
+	else if (props.size === "L") rules += " Se17";
+	else if (props.size === "M") rules += " SLabwmd17";
+	else if (props.size === "S") rules += " St17";
+	if (props.size === "XL") rules += " Rz5EUbe17";
+	else if (props.size === "L") rules += " Re17";
+	else if (props.size === "M") rules += " RLabwmd17";
+	else if (props.size === "S") rules += " Rt17";
 	return rules;
 };
 const InternalDisclosureHeaderContext = createContext(false);
@@ -241,11 +233,19 @@ function actionButtonSize(size, density) {
 /**
 * DisclosureGroup manages a group of Disclosure components. It is also the
 * shared S2 Accordion root primitive.
-*/
-function DisclosureGroup(props) {
+*/ function DisclosureGroup(props) {
 	const providerProps = useProviderProps(props);
+	const [flags] = splitProps(providerProps, [
+		"isQuiet",
+		"isEmphasized",
+		"isDisabled",
+		"isRequired",
+		"isReadOnly",
+		"validationState"
+	]);
 	const contextProps = getSlottedContextProps(useContext(DisclosureContext), props.slot);
-	const [local, headlessProps] = splitProps(mergeProps$1(providerProps, contextProps ?? {}, props), [
+	const merged = mergeProps$2(flags, contextProps ?? {}, props);
+	const [local, headlessProps] = splitProps(merged, [
 		"children",
 		"size",
 		"density",
@@ -265,7 +265,7 @@ function DisclosureGroup(props) {
 	const mergedSpectrumStyles = () => mergeContextStyles(contextProps?.styles, props.styles);
 	const mergedUnsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, styleAlias(local.UNSAFE_style, local.style));
 	const getClassName = (_renderProps) => classNames(contextProps?.UNSAFE_className, local.UNSAFE_className, local.class, mergeStyles(accordionStyles, mergedSpectrumStyles()));
-	return createComponent(DisclosureContext.Provider, {
+	return createComponent(DisclosureContext, {
 		value: {
 			get size() {
 				return size();
@@ -278,16 +278,18 @@ function DisclosureGroup(props) {
 			}
 		},
 		get children() {
+			var _ref$ = mergeContextRefs(contextProps?.ref, props.ref);
 			return createComponent(DisclosureGroup$1, mergeProps(headlessProps, { ref(r$) {
-				var _ref$ = mergeContextRefs(contextProps?.ref, props.ref);
-				typeof _ref$ === "function" && _ref$(r$);
-			} }, () => ({
-				"data-rsp-component": "DisclosureGroup",
-				"data-size": size(),
-				"data-density": density(),
-				"data-quiet": isQuiet() ? "true" : void 0
-			}), {
-				"class": getClassName,
+				(typeof _ref$ === "function" || Array.isArray(_ref$)) && applyRef(_ref$, r$);
+			} }, () => {
+				return {
+					"data-rsp-component": "DisclosureGroup",
+					"data-size": size(),
+					"data-density": density(),
+					"data-quiet": isQuiet() ? "true" : void 0
+				};
+			}, {
+				class: getClassName,
 				get style() {
 					return mergedUnsafeStyle();
 				},
@@ -300,12 +302,20 @@ function DisclosureGroup(props) {
 }
 /**
 * A disclosure is a collapsible section of content.
-*/
-function Disclosure(props) {
+*/ function Disclosure(props) {
 	const providerProps = useProviderProps(props);
+	const [flags] = splitProps(providerProps, [
+		"isQuiet",
+		"isEmphasized",
+		"isDisabled",
+		"isRequired",
+		"isReadOnly",
+		"validationState"
+	]);
 	const parentDisclosureContext = useContext(DisclosureContext);
 	const contextProps = getSlottedContextProps(parentDisclosureContext, props.slot);
-	const [local, headlessProps] = splitProps(mergeProps$1(providerProps, contextProps ?? {}, props), [
+	const merged = mergeProps$2(flags, contextProps ?? {}, props);
+	const [local, headlessProps] = splitProps(merged, [
 		"children",
 		"size",
 		"density",
@@ -329,7 +339,7 @@ function Disclosure(props) {
 		isQuiet: isQuiet(),
 		isInGroup: isInGroup()
 	}), mergedSpectrumStyles()));
-	return createComponent(DisclosureContext.Provider, {
+	return createComponent(DisclosureContext, {
 		value: {
 			get size() {
 				return size();
@@ -342,16 +352,18 @@ function Disclosure(props) {
 			}
 		},
 		get children() {
+			var _ref$2 = mergeContextRefs(contextProps?.ref, props.ref);
 			return createComponent(Disclosure$1, mergeProps(headlessProps, { ref(r$) {
-				var _ref$2 = mergeContextRefs(contextProps?.ref, props.ref);
-				typeof _ref$2 === "function" && _ref$2(r$);
-			} }, () => ({
-				"data-rsp-component": "Disclosure",
-				"data-size": size(),
-				"data-density": density(),
-				"data-quiet": isQuiet() ? "true" : void 0
-			}), {
-				"class": getClassName,
+				(typeof _ref$2 === "function" || Array.isArray(_ref$2)) && applyRef(_ref$2, r$);
+			} }, () => {
+				return {
+					"data-rsp-component": "Disclosure",
+					"data-size": size(),
+					"data-density": density(),
+					"data-quiet": isQuiet() ? "true" : void 0
+				};
+			}, {
+				class: getClassName,
 				get style() {
 					return mergedUnsafeStyle();
 				},
@@ -365,8 +377,7 @@ function Disclosure(props) {
 /**
 * A wrapper element for the disclosure title that can contain other elements
 * not part of the trigger.
-*/
-function DisclosureHeader(props) {
+*/ function DisclosureHeader(props) {
 	const [local, domProps] = splitProps(props, [
 		"children",
 		"styles",
@@ -381,7 +392,7 @@ function DisclosureHeader(props) {
 	const size = () => normalizeSize(context.size);
 	const density = () => context.density ?? "regular";
 	const isQuiet = () => context.isQuiet;
-	return createComponent(ActionButtonContext.Provider, {
+	return createComponent(ActionButtonContext, {
 		value: {
 			get size() {
 				return actionButtonSize(size(), density());
@@ -391,31 +402,35 @@ function DisclosureHeader(props) {
 			}
 		},
 		get children() {
-			return createComponent(InternalDisclosureHeaderContext.Provider, {
+			return createComponent(InternalDisclosureHeaderContext, {
 				value: true,
 				get children() {
 					var _el$ = getNextElement(_tmpl$);
 					var _ref$3 = mergeContextRefs(local.ref);
-					typeof _ref$3 === "function" && use(_ref$3, _el$);
-					spread(_el$, mergeProps(domProps, {
-						get ["class"]() {
+					(typeof _ref$3 === "function" || Array.isArray(_ref$3)) && ref(() => {
+						return _ref$3;
+					}, _el$);
+					spread(_el$, [domProps, {
+						get "class"() {
 							return classNames(local.UNSAFE_className, local.class, mergeStyles(headerStyles, local.styles));
 						},
 						get style() {
 							return styleAlias(local.UNSAFE_style, local.style);
 						},
 						"data-rsp-slot": "disclosure-header",
-						get ["data-size"]() {
+						get "data-size"() {
 							return size();
 						},
-						get ["data-density"]() {
+						get "data-density"() {
 							return density();
 						},
-						get ["data-quiet"]() {
+						get "data-quiet"() {
 							return isQuiet() ? "true" : void 0;
 						}
-					}), false, true);
-					insert(_el$, () => local.children);
+					}], true);
+					insert(_el$, scope(() => {
+						return local.children;
+					}));
 					runHydrationEvents();
 					return _el$;
 				}
@@ -447,28 +462,27 @@ function DisclosureTitleContent(props) {
 	const isDisabled = () => headlessDisclosureContext?.isDisabled() ?? false;
 	const isExpanded = () => headlessState?.isExpanded() ?? false;
 	const headingTag = () => `h${level()}`;
-	const chevronIcon = () => chevronIcons[size()];
 	const { isFocusVisible, focusProps } = createFocusRing();
 	const triggerFocusProps = focusProps;
 	const { isHovered, hoverProps } = createHover({ get isDisabled() {
 		return isDisabled();
 	} });
 	const isPressed = () => headlessDisclosureContext?.disclosureAria.isPressed() ?? false;
+	var _ref$4 = mergeContextRefs(local.ref);
 	return createComponent(ElementTag, mergeProps({ get tag() {
 		return headingTag();
 	} }, domProps, {
 		ref(r$) {
-			var _ref$4 = mergeContextRefs(local.ref);
-			typeof _ref$4 === "function" && _ref$4(r$);
+			(typeof _ref$4 === "function" || Array.isArray(_ref$4)) && applyRef(_ref$4, r$);
 		},
-		get ["class"]() {
+		get "class"() {
 			return classNames(local.UNSAFE_className, local.class, headingStyles);
 		},
 		get style() {
 			return styleAlias(local.UNSAFE_style, local.style);
 		},
 		"data-rsp-slot": "disclosure-title",
-		get ["data-level"]() {
+		get "data-level"() {
 			return level();
 		},
 		get children() {
@@ -479,7 +493,7 @@ function DisclosureTitleContent(props) {
 				get onBlur() {
 					return triggerFocusProps.onBlur;
 				},
-				get ["class"]() {
+				get "class"() {
 					return buttonStyles({
 						size: size(),
 						density: density(),
@@ -491,19 +505,19 @@ function DisclosureTitleContent(props) {
 					}, local.styles);
 				},
 				"data-rsp-slot": "disclosure-trigger",
-				get ["data-size"]() {
+				get "data-size"() {
 					return size();
 				},
-				get ["data-density"]() {
+				get "data-density"() {
 					return density();
 				},
-				get ["data-quiet"]() {
+				get "data-quiet"() {
 					return isQuiet() ? "true" : void 0;
 				},
-				get ["data-hovered"]() {
+				get "data-hovered"() {
 					return isHovered() ? "true" : void 0;
 				},
-				get ["data-pressed"]() {
+				get "data-pressed"() {
 					return isPressed() ? "true" : void 0;
 				},
 				get children() {
@@ -512,29 +526,19 @@ function DisclosureTitleContent(props) {
 							return !local.hideIcon;
 						},
 						get children() {
-							var _el$2 = getNextElement(_tmpl$2), _el$3 = _el$2.firstChild;
-							effect((_p$) => {
-								var _v$ = chevronStyles({
-									size: size(),
-									isExpanded: isExpanded(),
-									isRTL: locale().direction === "rtl"
-								}), _v$2 = chevronIcon().size, _v$3 = chevronIcon().size, _v$4 = chevronIcon().viewBox, _v$5 = chevronIcon().path;
-								_v$ !== _p$.e && setAttribute(_el$2, "class", _p$.e = _v$);
-								_v$2 !== _p$.t && setAttribute(_el$2, "width", _p$.t = _v$2);
-								_v$3 !== _p$.a && setAttribute(_el$2, "height", _p$.a = _v$3);
-								_v$4 !== _p$.o && setAttribute(_el$2, "viewBox", _p$.o = _v$4);
-								_v$5 !== _p$.i && setAttribute(_el$3, "d", _p$.i = _v$5);
-								return _p$;
-							}, {
-								e: void 0,
-								t: void 0,
-								a: void 0,
-								o: void 0,
-								i: void 0
+							var _el$2 = getNextElement(_tmpl$2);
+							effect(() => readShallow(chevronStyles({
+								size: size(),
+								isExpanded: isExpanded(),
+								isRTL: locale().direction === "rtl"
+							})), (_v$, _$p) => {
+								className(_el$2, _v$, _$p);
 							});
 							return _el$2;
 						}
-					}), memo(() => local.children)];
+					}), memo(() => {
+						return local.children;
+					})];
 				}
 			}));
 		}
@@ -543,8 +547,7 @@ function DisclosureTitleContent(props) {
 /**
 * A disclosure title consisting of a heading and a trigger button to
 * expand/collapse the panel.
-*/
-function DisclosureTitle(props) {
+*/ function DisclosureTitle(props) {
 	if (useContext(InternalDisclosureHeaderContext)) return createComponent(DisclosureTitleContent, props);
 	return createComponent(DisclosureHeader, { get children() {
 		return createComponent(DisclosureTitleContent, props);
@@ -552,13 +555,11 @@ function DisclosureTitle(props) {
 }
 /**
 * DisclosureTrigger is kept as a compatibility alias for DisclosureTitle.
-*/
-const DisclosureTrigger = DisclosureTitle;
+*/ const DisclosureTrigger = DisclosureTitle;
 /**
 * A disclosure panel is a collapsible section of content that is hidden until
 * the disclosure is expanded.
-*/
-function DisclosurePanel(props) {
+*/ function DisclosurePanel(props) {
 	const [local, forwardedProps] = splitProps(props, [
 		"children",
 		"styles",
@@ -574,30 +575,34 @@ function DisclosurePanel(props) {
 	const context = getDisclosureContext();
 	const size = () => normalizeSize(context.size);
 	const getClassName = (_renderProps) => classNames(local.UNSAFE_className, local.class, mergeStyles(panelStyles, local.styles));
+	var _ref$5 = mergeContextRefs(local.ref);
 	return createComponent(DisclosurePanel$1, mergeProps(headlessProps, { ref(r$) {
-		var _ref$5 = mergeContextRefs(local.ref);
-		typeof _ref$5 === "function" && _ref$5(r$);
-	} }, () => ({
-		"data-rsp-slot": "disclosure-panel",
-		"data-size": size()
-	}), {
-		"class": getClassName,
+		(typeof _ref$5 === "function" || Array.isArray(_ref$5)) && applyRef(_ref$5, r$);
+	} }, () => {
+		return {
+			"data-rsp-slot": "disclosure-panel",
+			"data-size": size()
+		};
+	}, {
+		class: getClassName,
 		get style() {
 			return styleAlias(local.UNSAFE_style, local.style);
 		},
 		get children() {
-			var _el$4 = getNextElement(_tmpl$3);
-			insert(_el$4, () => local.children);
-			effect((_p$) => {
-				var _v$6 = panelInnerStyles({ size: size() }), _v$7 = size();
-				_v$6 !== _p$.e && className(_el$4, _p$.e = _v$6);
-				_v$7 !== _p$.t && setAttribute(_el$4, "data-size", _p$.t = _v$7);
-				return _p$;
-			}, {
-				e: void 0,
-				t: void 0
+			var _el$3 = getNextElement(_tmpl$3);
+			insert(_el$3, scope(() => {
+				return local.children;
+			}));
+			effect(() => {
+				return {
+					e: readShallow(panelInnerStyles({ size: size() })),
+					t: size()
+				};
+			}, ({ e, t }, _p$) => {
+				className(_el$3, e, _p$?.e);
+				t !== _p$?.t && setAttribute(_el$3, "data-size", t);
 			});
-			return _el$4;
+			return _el$3;
 		}
 	}));
 }