Merge branch 'main' into aramos-adobe/css868-combobox-readonly

Author: aramos-adobe

.changeset/afraid-dogs-worry.md

@@ -16,6 +16,7 @@ const Heading = ({
 	content,
 	size = "l",
 	weight,
+	withMargin = false,
 } = {}, context = {}) => {
 	if (!content) return nothing;
 
@@ -26,6 +27,7 @@ const Heading = ({
 		"font-size": "11px",
 		"line-height": "1.3",
 		"font-weight": "700",
+		"margin-block-end": withMargin ? "8px" : "0",
 	};
 
 	if ((size === "xxs" && semantics === "heading") || size === "l") {
@@ -46,7 +48,7 @@ const Heading = ({
 		}
 	}
 
-	if (context.globals?.color.startsWith("dark")) {
+	if (context.globals?.color?.startsWith("dark")) {
 		headingStyles["color"] = context?.args?.staticColor ?? "white";
 	}
 	else if (typeof context?.args?.staticColor !== "undefined") {
@@ -110,7 +112,7 @@ export const Container = ({
 	if (withBorder) {
 		borderStyles["padding-inline"] = "24px";
 		borderStyles["padding-block"] = "24px";
-		borderStyles["border"] = "1px solid var(--spectrum-gray-200)";
+		borderStyles["border"] = "1px solid rgba(var(--spectrum-gray-600-rgb), 20%)";
 		borderStyles["border-radius"] = "4px";
 		gap = 80;
 	}
@@ -528,9 +530,13 @@ export const Variants = ({
 export const renderContent = (content = [], {
 	context = {},
 	args = {},
-	callback = (args, context) => {
-		console.log(JSON.stringify(args, null, 2), JSON.stringify(context, null, 2));
-		return nothing;
+	callback = ({ testHeading, content, ...args }, context) => {
+		return html`
+			<div>
+				${testHeading ? Heading({ content: testHeading, withMargin: true }, context) : nothing}
+				${content ? renderContent(content, { args, context }) : nothing}
+			</div>
+		`;
 	}
 } = {}) => {
 	// If the content is not an array, make it an array for easier processing
@@ -542,6 +548,8 @@ export const renderContent = (content = [], {
 
 	return html`
 		${content.map((c) => {
+			if (typeof c === "undefined") return nothing;
+
 			/* If the content is an object (but not a lit object), we need to merge the object with the template */
 			if (typeof c !== "string" && (typeof c === "object" && !c._$litType$)) {
 				return callback({ ...args, ...c }, context);

.changeset/gold-deers-smash.md

@@ -59,7 +59,7 @@
 		"lit": "^3.2.1",
 		"lodash-es": "^4.17.21",
 		"npm-registry-fetch": "^18.0.2",
-		"postcss": "^8.4.48",
+		"postcss": "^8.4.49",
 		"prettier": "^3.2.5",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",

.storybook/decorators/utilities.js

@@ -11,6 +11,8 @@
  * governing permissions and limitations under the License.
  */
 
+@import "./themes/express.css";
+
 .spectrum-Accordion {
 	--spectrum-accordion-item-height: var(--spectrum-component-height-200);
 	--spectrum-accordion-item-width: var(--spectrum-accordion-minimum-width);

.storybook/package.json

@@ -0,0 +1,14 @@
+/*!
+ * 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.
+ */
+
+ @import "./spectrum.css";

components/accordion/index.css

@@ -0,0 +1,12 @@
+/*!
+ * 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.
+ */

components/accordion/themes/express.css

@@ -11,6 +11,8 @@
  * governing permissions and limitations under the License.
  */
 
+@import "./themes/express.css";
+
 .spectrum-ActionBar {
 	--spectrum-actionbar-height: var(--spectrum-action-bar-height);
 	--spectrum-actionbar-corner-radius: var(--spectrum-corner-radius-100);

components/accordion/themes/spectrum.css

@@ -0,0 +1,14 @@
+/*!
+ * 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.
+ */
+
+ @import "./spectrum.css";

components/actionbar/index.css

@@ -0,0 +1,12 @@
+/*!
+ * 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.
+ */