Extend theme-conditional test case with border-left template literal pattern

Add HighlightBox component testing the prop-based conditional with
theme access in a border shorthand template literal:
  border-left: ${(props) => props.$isHighlighted
    ? `2px solid ${props.theme.color.greenBase}`
    : '2px solid transparent'};

Update test for complex theme+prop conditions to verify inline style
emission with useTheme() instead of expecting bail.

Co-authored-by: Kenneth Skovhus <skovhus@users.noreply.github.com>

Author: cursoragent

test-cases/theme-conditional.input.tsx

@@ -11,9 +11,19 @@ const OptionLabel = styled.label<{ $disabled?: boolean }>`
   cursor: ${(props: any) => (props.$disabled ? "not-allowed" : "pointer")};
 `;
 
+// Prop-based conditional with theme access in template literal (border shorthand)
+const HighlightBox = styled.div<{ $isHighlighted?: boolean }>`
+  padding: 12px;
+  background-color: ${(props: any) => props.theme.color.bgBase};
+  border-left: ${(props: any) =>
+    props.$isHighlighted ? `2px solid ${props.theme.color.greenBase}` : "2px solid transparent"};
+`;
+
 export const App = () => (
-  <div>
+  <div style={{ display: "flex", flexDirection: "column", gap: 12, padding: 16 }}>
     <OptionLabel>Enabled</OptionLabel>
     <OptionLabel $disabled>Disabled</OptionLabel>
+    <HighlightBox>Default box</HighlightBox>
+    <HighlightBox $isHighlighted>Highlighted box</HighlightBox>
   </div>
 );

test-cases/theme-conditional.output.tsx

@@ -14,10 +14,27 @@ function OptionLabel(props: OptionLabelProps) {
   );
 }
 
+type HighlightBoxProps = React.PropsWithChildren<{
+  isHighlighted?: boolean;
+}>;
+
+// Prop-based conditional with theme access in template literal (border shorthand)
+function HighlightBox(props: HighlightBoxProps) {
+  const { children, isHighlighted } = props;
+
+  return (
+    <div sx={[styles.highlightBox, isHighlighted && styles.highlightBoxHighlighted]}>
+      {children}
+    </div>
+  );
+}
+
 export const App = () => (
-  <div>
+  <div style={{ display: "flex", flexDirection: "column", gap: 12, padding: 16 }}>
     <OptionLabel>Enabled</OptionLabel>
     <OptionLabel disabled>Disabled</OptionLabel>
+    <HighlightBox>Default box</HighlightBox>
+    <HighlightBox isHighlighted>Highlighted box</HighlightBox>
   </div>
 );
 
@@ -34,4 +51,16 @@ const styles = stylex.create({
     color: $colors.labelMuted,
     cursor: "not-allowed",
   },
+  highlightBox: {
+    padding: 12,
+    backgroundColor: $colors.bgBase,
+    borderLeftWidth: "2px",
+    borderLeftStyle: "solid",
+    borderLeftColor: "transparent",
+  },
+  highlightBoxHighlighted: {
+    borderLeftWidth: "2px",
+    borderLeftStyle: "solid",
+    borderLeftColor: $colors.greenBase,
+  },
 });