updates to components, accordion component fixes

Author: wakaztahir

lang/libs/components/src/Data.ch

@@ -247,7 +247,7 @@ func list_item_styles(page : &mut HtmlPage) : *char {
     }
 }
 
-func table_styles(page : &mut HtmlPage) : *char {
+public func table_styles(page : &mut HtmlPage) : *char {
     return #css {
         width: 100%;
         border-collapse: separate;
@@ -259,7 +259,7 @@ func table_styles(page : &mut HtmlPage) : *char {
     }
 }
 
-func table_head_cell_styles(page : &mut HtmlPage) : *char {
+public func table_head_cell_styles(page : &mut HtmlPage) : *char {
     return #css {
         padding: 0.85rem 1rem;
         text-align: left;
@@ -272,7 +272,7 @@ func table_head_cell_styles(page : &mut HtmlPage) : *char {
     }
 }
 
-func table_cell_styles(page : &mut HtmlPage) : *char {
+public func table_cell_styles(page : &mut HtmlPage) : *char {
     return #css {
         padding: 0.9rem 1rem;
         color: hsl(var(--foreground));
@@ -303,98 +303,62 @@ public #universal Progress(props) {
 // Shadcn-style Accordion: manages open state for child AccordionItems.
 // `defaultValue` is an array of item values open by default.
 // `multiple` allows multiple items open at the same time.
+// Accordion: styled wrapper for a group of AccordionItems.
+// Passes through all props. data-accordion-root enables keyboard nav via JS.
 public #universal Accordion(props) {
     var multiple = props.multiple || false
-    var defaultValues = props.defaultValue || []
-    state openItems = defaultValues
-    var toggleItem = (value) => {
-        var idx = openItems.indexOf(value)
-        if(idx >= 0) {
-            openItems.splice(idx, 1)
-        } else {
-            if(!multiple) { openItems = [] }
-            openItems.push(value)
-        }
-        if(props.onValueChange) { props.onValueChange(openItems) }
-    }
-    var isItemOpen = (value) => { return openItems.indexOf(value) >= 0 }
-    // Keyboard navigation: ArrowDown/Up/Home/End cycle through triggers
-    var handleKeyDown = (e) => {
-        if(e.key != "ArrowDown" && e.key != "ArrowUp" && e.key != "Home" && e.key != "End") { return }
-        const root = e.currentTarget.closest("[data-accordion-root]")
-        const triggers = root ? root.querySelectorAll("button.chx-accordion-trigger:not([disabled])") : []
-        if(triggers.length == 0) { return }
-        var idx = -1
-        for(var t = 0; t < triggers.length; t++) {
-            if(triggers[t] == e.currentTarget) { idx = t; break }
-        }
-        if(idx < 0) { return }
-        var next = idx
-        if(e.key == "ArrowDown") { e.preventDefault(); next = (idx + 1) % triggers.length }
-        else if(e.key == "ArrowUp") { e.preventDefault(); next = (idx - 1 + triggers.length) % triggers.length }
-        else if(e.key == "Home") { e.preventDefault(); next = 0 }
-        else if(e.key == "End") { e.preventDefault(); next = triggers.length - 1 }
-        triggers[next].focus()
-    }
-    return <div {...props} class={${accordion_styles(page)}} data-accordion-root="true" data-state="open" data-multiple={multiple ? "true" : "false"} onKeyDown={handleKeyDown}>
+    return <div {...props} class={${accordion_styles(page)}} data-accordion-root="true" data-multiple={multiple ? "true" : "false"}>
         {props.children}
     </div>
 }
 
-// Shadcn-style AccordionItem: wraps a trigger + content pair.
+// AccordionItem: self-contained item with trigger + content.
+// Manages its own open/close state. Accepts:
+//   trigger     - label text or JSX for the clickable header
+//   defaultOpen - initial open state (default false)
+//   disabled    - disables toggle
+//   value       - identifier for external querying
+//   children    - collapsible content
 public #universal AccordionItem(props) {
-    var itemValue = props.value || ""
+    state open = props.defaultOpen ? true : false
     var disabled = props.disabled || false
-    return <div {...props} class={${accordion_item_styles(page)}} data-state="open" data-disabled={disabled ? "true" : "false"} data-value={itemValue}>
-        {props.children}
+    var itemValue = props.value || ""
+    var toggle = () => {
+        if(disabled) { return }
+        open = !open
+    }
+    var chevronSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>'
+    return <div {...props} class={${accordion_item_styles(page)}} data-state={open ? "open" : "closed"} data-value={itemValue} data-disabled={disabled ? "true" : "false"}>
+        <button type="button" class={"chx-accordion-trigger " + ${accordion_trigger_styles(page)}} onClick={toggle} disabled={disabled} aria-expanded={open ? "true" : "false"} data-accordion-trigger="true">
+            <span>{props.trigger || ""}</span>
+            <span class={${accordion_icon_styles(page)}} style={open ? "transform:rotate(180deg)" : ""}>
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+            </span>
+        </button>
+        <div class={${accordion_content_styles(page)}} style={open ? "" : "display:none;"} data-accordion-content="true" role="region">
+            <div class={${accordion_content_inner_styles(page)}}>{props.children}</div>
+        </div>
     </div>
 }
 
-// Shadcn-style AccordionTrigger: the clickable header.
+// Standalone AccordionTrigger: styled clickable header (no state).
+// Use inside AccordionItem for composition, or standalone for custom layouts.
 public #universal AccordionTrigger(props) {
-    return <button type="button" class={"chx-accordion-trigger " + ${accordion_trigger_styles(page)}} data-state="open" aria-expanded="true">
+    return <button type="button" class={"chx-accordion-trigger " + ${accordion_trigger_styles(page)}} data-accordion-trigger="true">
         {props.children}
         <span class={${accordion_icon_styles(page)}}>
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
         </span>
     </button>
 }
 
-// Shadcn-style AccordionContent: the collapsible content panel.
+// Standalone AccordionContent: collapsible content panel (no state).
 public #universal AccordionContent(props) {
-    return <div class={${accordion_content_styles(page)}} data-state="open" role="region">
+    return <div class={${accordion_content_styles(page)}} role="region">
         <div class={${accordion_content_inner_styles(page)}}>{props.children}</div>
     </div>
 }
 
-// Legacy aliases
-public #universal AccordionSummary(props) {
-    return <AccordionTrigger {...props}>{props.children}</AccordionTrigger>
-}
-public #universal AccordionPanel(props) {
-    return <AccordionContent {...props}>{props.children}</AccordionContent>
-}
-
-// Legacy: old-style accordion item with title/subtitle props.
-public #universal AccordionItemLegacy(props) {
-    state open = props.defaultOpen ? true : false
-    var disabled = props.disabled || false
-    var toggle = () => {
-        if(disabled) { return }
-        open = !open
-    }
-    return <div {...props} class={${accordion_item_styles(page)}} data-disabled={disabled ? "true" : "false"}>
-        <button type="button" class="chx-accordion-summary" onClick={toggle} disabled={disabled} aria-expanded={open ? "true" : "false"}>
-            <span class="chx-accordion-copy">
-                <span class="chx-accordion-title">{props.title}</span>
-                <span class="chx-accordion-subtitle">{props.subtitle}</span>
-            </span>
-            <span class="chx-accordion-icon">{open ? "+" : "+"}</span>
-        </button>
-        <div class="chx-accordion-panel" style={open ? "" : "display:none;"}>{props.children}</div>
-    </div>
-}
-
 // Tabs in two modes:
 // - `tabs`/`panels` arrays + optional `defaultIndex`: the component owns the
 //   active-tab state, renders the tab buttons and toggles panel visibility.

lang/libs/html_cbi/src/converter/language/main.ch

@@ -341,6 +341,9 @@ func (converter : &mut ASTConverter) emit_universal_queue(element : *mut HtmlEle
             const c = childHtml.data()[ci2];
             if(c == '\"') { tail.append_view("\\\""); }
             else if(c == '\\') { tail.append_view("\\\\"); }
+            else if(c == '\n') { tail.append_view("\\n"); }
+            else if(c == '\r') { tail.append_view("\\r"); }
+            else if(c == '\t') { tail.append_view("\\t"); }
             else { tail.append(c); }
             ci2++;
         }

lang/tests/compiler_plugins/components/src/components.ch

@@ -601,7 +601,7 @@ public func components_stateful_tabs_js(env : &mut TestEnv) {
 @test
 public func components_stateful_accordion_ssr(env : &mut TestEnv) {
     var page = HtmlPage()
-    #html { <Accordion><AccordionItem value="q1"><AccordionTrigger>Is it accessible?</AccordionTrigger><AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent></AccordionItem></Accordion> }
+    #html { <Accordion><AccordionItem value="q1" trigger="Is it accessible?">Yes. It adheres to the WAI-ARIA design pattern.</AccordionItem></Accordion> }
     var html = std::string()
     html.append_view(page.getHtml())
     // Accordion root renders with data-accordion-root
@@ -617,7 +617,7 @@ public func components_stateful_accordion_ssr(env : &mut TestEnv) {
 @test
 public func components_stateful_accordion_closed_ssr(env : &mut TestEnv) {
     var page = HtmlPage()
-    #html { <Accordion><AccordionItem value="q2"><AccordionTrigger>What is it?</AccordionTrigger><AccordionContent>Something.</AccordionContent></AccordionItem></Accordion> }
+    #html { <Accordion><AccordionItem value="q2" trigger="What is it?">Something.</AccordionItem></Accordion> }
     var html = std::string()
     html.append_view(page.getHtml())
     // Item renders with value attribute
@@ -1382,16 +1382,15 @@ public func components_accordion_arrow_nav(env : &mut TestEnv) {
     var page = HtmlPage()
     #html {
         <Accordion>
-            <AccordionItem value="a"><AccordionTrigger>A</AccordionTrigger><AccordionContent>a</AccordionContent></AccordionItem>
-            <AccordionItem value="b"><AccordionTrigger>B</AccordionTrigger><AccordionContent>b</AccordionContent></AccordionItem>
+            <AccordionItem value="a" trigger="A">a</AccordionItem>
+            <AccordionItem value="b" trigger="B">b</AccordionItem>
         </Accordion>
     }
     var html = std::string()
     html.append_view(page.getHtml())
     contains_string_assert(env, html.to_view(), std::string_view("data-accordion-root=\"true\""))
-    var js = std::string()
-    js.append_view(page.getJs())
-    contains_string_assert(env, js.to_view(), std::string_view("chx-accordion-trigger:not([disabled])"))
-    contains_string_assert(env, js.to_view(), std::string_view("ArrowDown"))
-    contains_string_assert(env, js.to_view(), std::string_view("ArrowUp"))
+    // Each AccordionItem renders a trigger button with data-accordion-trigger
+    contains_string_assert(env, html.to_view(), std::string_view("data-accordion-trigger=\"true\""))
+    contains_string_assert(env, html.to_view(), std::string_view(">A</"))
+    contains_string_assert(env, html.to_view(), std::string_view(">B</"))
 }