@jackcrane/ui 0.1.21 → 0.1.23

package/dist/jcui.cjs.js

@@ -217,7 +217,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     transform: rotate(360deg);
   }
 }
-._card_1ywyn_1 {
+._card_1wvfe_1 {
   border-width: var(--border-thickness);
   border-style: solid;
   font-size: 1rem;
@@ -226,120 +226,122 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   display: flex;
   flex-direction: column;
 }
-._pageBackground_1ywyn_11 {
+._pageBackground_1wvfe_11 {
   --card-bg: var(--body-bg);
   --button-bg: var(--body-bg);
   --card-color: var(--body-color);
   background-color: var(--body-bg);
 }
-._card_1ywyn_1 ._title_1ywyn_18 {
+._card_1wvfe_1 ._title_1wvfe_18 {
   font-size: 1.25rem;
   padding: 0.5rem 1rem;
   border-bottom: var(--border-thickness) solid var(--border-color);
   background-color: var(--card-bg);
 }
-._card_1ywyn_1 ._titleCollapsed_1ywyn_25 {
+._card_1wvfe_1 ._titleCollapsed_1wvfe_25 {
   border-bottom: 0;
 }
-._card_1ywyn_1 ._titleContent_1ywyn_29 {
+._card_1wvfe_1 ._titleContent_1wvfe_29 {
   display: flex;
   align-items: center;
   gap: 0.5rem;
 }
-._card_1ywyn_1 ._chevronButton_1ywyn_35 {
-  margin-left: auto;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  padding: 0;
-  display: flex;
-  align-items: center;
+._card_1wvfe_1 ._titleInteractive_1wvfe_35 {
   cursor: pointer;
 }
-._card_1ywyn_1 ._chevron_1ywyn_35 {
+._card_1wvfe_1 ._chevron_1wvfe_39 {
+  margin-left: auto;
   width: 0.5rem;
   height: 0.5rem;
   border-right: 2px solid currentColor;
   border-bottom: 2px solid currentColor;
   transition: transform 0.2s ease;
   flex-shrink: 0;
-  cursor: pointer;
+  cursor: inherit;
 }
-._card_1ywyn_1 ._chevronExpanded_1ywyn_56 {
+._card_1wvfe_1 ._chevronExpanded_1wvfe_50 {
   transform: rotate(45deg);
 }
-._card_1ywyn_1 ._chevronCollapsed_1ywyn_60 {
+._card_1wvfe_1 ._chevronCollapsed_1wvfe_54 {
   transform: rotate(-45deg);
 }
-._card_1ywyn_1 ._content_1ywyn_64 {
+._card_1wvfe_1 ._titleInteractive_1wvfe_35:hover ._chevronExpanded_1wvfe_50,
+._card_1wvfe_1 ._titleInteractive_1wvfe_35:focus-visible ._chevronExpanded_1wvfe_50 {
+  transform: rotate(30deg);
+}
+._card_1wvfe_1 ._titleInteractive_1wvfe_35:hover ._chevronCollapsed_1wvfe_54,
+._card_1wvfe_1 ._titleInteractive_1wvfe_35:focus-visible ._chevronCollapsed_1wvfe_54 {
+  transform: rotate(-30deg);
+}
+._card_1wvfe_1 ._content_1wvfe_68 {
   display: grid;
   grid-template-rows: 1fr;
   transition:
     grid-template-rows 0.2s ease,
     opacity 0.2s ease;
 }
-._card_1ywyn_1 ._contentInner_1ywyn_72 {
+._card_1wvfe_1 ._contentInner_1wvfe_76 {
   overflow: hidden;
   min-height: 0;
   display: flex;
   flex-direction: column;
 }
-._card_1ywyn_1 ._contentCollapsed_1ywyn_79 {
+._card_1wvfe_1 ._contentCollapsed_1wvfe_83 {
   grid-template-rows: 0fr;
   opacity: 0;
 }
-._card_1ywyn_1 ._body_1ywyn_84 {
+._card_1wvfe_1 ._body_1wvfe_88 {
   padding: 0.5rem 1rem;
   width: 100%;
 }
-._card_1ywyn_1 ._footer_1ywyn_89 {
+._card_1wvfe_1 ._footer_1wvfe_93 {
   border-top: var(--border-thickness) solid var(--border-color);
   flex: 1;
   background-color: var(--card-bg);
   padding: 0.5rem 1rem;
 }
-._large_1ywyn_96 ._body_1ywyn_84,
-._large_1ywyn_96 ._title_1ywyn_18 {
+._large_1wvfe_100 ._body_1wvfe_88,
+._large_1wvfe_100 ._title_1wvfe_18 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_1ywyn_102 ._body_1ywyn_84,
-._small_1ywyn_102 ._title_1ywyn_18 {
+._small_1wvfe_106 ._body_1wvfe_88,
+._small_1wvfe_106 ._title_1wvfe_18 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
 /* Variants */
-._primary_1ywyn_110 {
+._primary_1wvfe_114 {
   --card-bg: var(--primary-color-100);
   --border-color: var(--primary-color-300);
   --border-accent-color: var(--primary-color-600);
   --card-color: var(--primary-color-800);
 }
-._success_1ywyn_117 {
+._success_1wvfe_121 {
   --card-bg: var(--success-color-100);
   --border-color: var(--success-color-300);
   --border-accent-color: var(--success-color-600);
   --card-color: var(--success-color-800);
 }
-._warning_1ywyn_124 {
+._warning_1wvfe_128 {
   --card-bg: var(--warning-color-100);
   --border-color: var(--warning-color-300);
   --border-accent-color: var(--warning-color-600);
   --card-color: var(--warning-color-800);
 }
-._danger_1ywyn_131 {
+._danger_1wvfe_135 {
   --card-bg: var(--danger-color-100);
   --border-color: var(--danger-color-300);
   --border-accent-color: var(--danger-color-600);
   --card-color: var(--danger-color-800);
 }
-._info_1ywyn_138 {
+._info_1wvfe_142 {
   --card-bg: var(--info-color-100);
   --border-color: var(--info-color-300);
   --border-accent-color: var(--info-color-600);
   --card-color: var(--info-color-800);
 }
-._secondary_1ywyn_145 {
+._secondary_1wvfe_149 {
   --card-bg: var(--secondary-color-100);
   --border-color: var(--secondary-color-300);
   --border-accent-color: var(--secondary-color-600);
@@ -1642,7 +1644,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   --button-color: var(--body-color);
 }
 /* modal.module.css */
-@keyframes _overlayIn_1fxeg_1 {
+@keyframes _overlayIn_10x08_1 {
   from {
     opacity: 0;
   }
@@ -1650,7 +1652,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     opacity: 1;
   }
 }
-@keyframes _overlayOut_1fxeg_1 {
+@keyframes _overlayOut_10x08_1 {
   from {
     opacity: 1;
   }
@@ -1658,7 +1660,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     opacity: 0;
   }
 }
-@keyframes _panelIn_1fxeg_1 {
+@keyframes _panelIn_10x08_1 {
   from {
     opacity: 0;
     transform: translateX(400px);
@@ -1668,7 +1670,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     transform: translateX(0);
   }
 }
-@keyframes _panelOut_1fxeg_1 {
+@keyframes _panelOut_10x08_1 {
   from {
     opacity: 1;
     transform: translateX(0);
@@ -1678,23 +1680,23 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     transform: translateX(100%);
   }
 }
-._overlay_1fxeg_43 {
+._overlay_10x08_43 {
   position: fixed;
   inset: 0;
   z-index: 98;
 }
-._overlayBackdrop_1fxeg_49 {
+._overlayBackdrop_10x08_49 {
   position: absolute;
   inset: 0;
   background: color-mix(in srgb, var(--body-bg) 50%, transparent);
 }
-._overlay_1fxeg_43[data-state="open"] {
-  animation: _overlayIn_1fxeg_1 160ms ease-out;
+._overlay_10x08_43[data-state="open"] {
+  animation: _overlayIn_10x08_1 160ms ease-out;
 }
-._overlay_1fxeg_43[data-state="closed"] {
-  animation: _overlayOut_1fxeg_1 120ms ease-in;
+._overlay_10x08_43[data-state="closed"] {
+  animation: _overlayOut_10x08_1 120ms ease-in;
 }
-._content_1fxeg_63 {
+._content_10x08_63 {
   position: fixed;
   top: 10px;
   right: 10px;
@@ -1707,29 +1709,34 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   display: flex;
   flex-direction: column;
 }
-._content_1fxeg_63[data-state="open"] {
-  animation: _panelIn_1fxeg_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_10x08_63[data-state="open"] {
+  animation: _panelIn_10x08_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-._content_1fxeg_63[data-state="closed"] {
-  animation: _panelOut_1fxeg_1 140ms ease-in;
+._content_10x08_63[data-state="closed"] {
+  animation: _panelOut_10x08_1 140ms ease-in;
 }
-body.jcui-modal-mobile ._content_1fxeg_63 {
+body.jcui-modal-mobile ._content_10x08_63 {
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   min-width: 0;
 }
-._title_1fxeg_96 {
+._title_10x08_96 {
   margin: 0;
 }
-._body_1fxeg_100 {
+._body_10x08_100 {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
   padding-top: 1rem;
 }
-._footer_1fxeg_107 {
+._body_10x08_100 > hr {
+  margin: 1rem 0;
+  transform: translateX(-16px);
+  width: calc(100% + 32px);
+}
+._footer_10x08_113 {
   margin: -12px;
   margin-top: 0px;
   padding: 12px;
@@ -2665,35 +2672,35 @@ function requireClassnames() {
 }
 var classnamesExports = requireClassnames();
 const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
-const card = "_card_1ywyn_1";
-const pageBackground$3 = "_pageBackground_1ywyn_11";
-const title$1 = "_title_1ywyn_18";
-const titleCollapsed = "_titleCollapsed_1ywyn_25";
-const titleContent = "_titleContent_1ywyn_29";
-const chevronButton = "_chevronButton_1ywyn_35";
-const chevron = "_chevron_1ywyn_35";
-const chevronExpanded = "_chevronExpanded_1ywyn_56";
-const chevronCollapsed = "_chevronCollapsed_1ywyn_60";
-const content$4 = "_content_1ywyn_64";
-const contentInner = "_contentInner_1ywyn_72";
-const contentCollapsed = "_contentCollapsed_1ywyn_79";
-const body$1 = "_body_1ywyn_84";
-const footer$1 = "_footer_1ywyn_89";
-const large$7 = "_large_1ywyn_96";
-const small$7 = "_small_1ywyn_102";
-const primary$9 = "_primary_1ywyn_110";
-const success$9 = "_success_1ywyn_117";
-const warning$9 = "_warning_1ywyn_124";
-const danger$9 = "_danger_1ywyn_131";
-const info$9 = "_info_1ywyn_138";
-const secondary$9 = "_secondary_1ywyn_145";
+const card = "_card_1wvfe_1";
+const pageBackground$3 = "_pageBackground_1wvfe_11";
+const title$1 = "_title_1wvfe_18";
+const titleCollapsed = "_titleCollapsed_1wvfe_25";
+const titleContent = "_titleContent_1wvfe_29";
+const titleInteractive = "_titleInteractive_1wvfe_35";
+const chevron = "_chevron_1wvfe_39";
+const chevronExpanded = "_chevronExpanded_1wvfe_50";
+const chevronCollapsed = "_chevronCollapsed_1wvfe_54";
+const content$4 = "_content_1wvfe_68";
+const contentInner = "_contentInner_1wvfe_76";
+const contentCollapsed = "_contentCollapsed_1wvfe_83";
+const body$1 = "_body_1wvfe_88";
+const footer$1 = "_footer_1wvfe_93";
+const large$7 = "_large_1wvfe_100";
+const small$7 = "_small_1wvfe_106";
+const primary$9 = "_primary_1wvfe_114";
+const success$9 = "_success_1wvfe_121";
+const warning$9 = "_warning_1wvfe_128";
+const danger$9 = "_danger_1wvfe_135";
+const info$9 = "_info_1wvfe_142";
+const secondary$9 = "_secondary_1wvfe_149";
 const styles$b = {
   card,
   pageBackground: pageBackground$3,
   title: title$1,
   titleCollapsed,
   titleContent,
-  chevronButton,
+  titleInteractive,
   chevron,
   chevronExpanded,
   chevronCollapsed,
@@ -2732,6 +2739,15 @@ function Card({
     }
     onCollapseChange?.(!isCollapsed2);
   };
+  const handleKeyDown = (event) => {
+    if (!isCollapsible) {
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      handleCollapseToggle();
+    }
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -2751,27 +2767,24 @@ function Card({
             className: classNames(
               styles$b.title,
               hatchStyles.hatch,
-              isCollapsed2 && styles$b.titleCollapsed
+              isCollapsed2 && styles$b.titleCollapsed,
+              isCollapsible && styles$b.titleInteractive
             ),
+            onClick: isCollapsible ? handleCollapseToggle : void 0,
+            onKeyDown: isCollapsible ? handleKeyDown : void 0,
+            role: isCollapsible ? "button" : void 0,
+            tabIndex: isCollapsible ? 0 : void 0,
+            "aria-expanded": isCollapsible ? !isCollapsed2 : void 0,
+            "aria-label": isCollapsible ? isCollapsed2 ? "Expand card" : "Collapse card" : void 0,
             children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$b.titleContent, children: [
               title2,
               isCollapsible && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "button",
+                "span",
                 {
-                  type: "button",
-                  className: styles$b.chevronButton,
-                  onClick: handleCollapseToggle,
-                  "aria-label": isCollapsed2 ? "Expand card" : "Collapse card",
-                  "aria-expanded": !isCollapsed2,
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "span",
-                    {
-                      "aria-hidden": "true",
-                      className: classNames(
-                        styles$b.chevron,
-                        isCollapsed2 ? styles$b.chevronCollapsed : styles$b.chevronExpanded
-                      )
-                    }
+                  "aria-hidden": "true",
+                  className: classNames(
+                    styles$b.chevron,
+                    isCollapsed2 ? styles$b.chevronCollapsed : styles$b.chevronExpanded
                   )
                 }
               )
@@ -27939,12 +27952,12 @@ var Overlay = DialogOverlay;
 var Content = DialogContent;
 var Title = DialogTitle;
 var Close = DialogClose;
-const overlay = "_overlay_1fxeg_43";
-const overlayBackdrop = "_overlayBackdrop_1fxeg_49";
-const content$1 = "_content_1fxeg_63";
-const title = "_title_1fxeg_96";
-const body = "_body_1fxeg_100";
-const footer = "_footer_1fxeg_107";
+const overlay = "_overlay_10x08_43";
+const overlayBackdrop = "_overlayBackdrop_10x08_49";
+const content$1 = "_content_10x08_63";
+const title = "_title_10x08_96";
+const body = "_body_10x08_100";
+const footer = "_footer_10x08_113";
 const styles$1 = {
   overlay,
   overlayBackdrop,

package/dist/jcui.es.js

@@ -217,7 +217,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     transform: rotate(360deg);
   }
 }
-._card_1ywyn_1 {
+._card_1wvfe_1 {
   border-width: var(--border-thickness);
   border-style: solid;
   font-size: 1rem;
@@ -226,120 +226,122 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   display: flex;
   flex-direction: column;
 }
-._pageBackground_1ywyn_11 {
+._pageBackground_1wvfe_11 {
   --card-bg: var(--body-bg);
   --button-bg: var(--body-bg);
   --card-color: var(--body-color);
   background-color: var(--body-bg);
 }
-._card_1ywyn_1 ._title_1ywyn_18 {
+._card_1wvfe_1 ._title_1wvfe_18 {
   font-size: 1.25rem;
   padding: 0.5rem 1rem;
   border-bottom: var(--border-thickness) solid var(--border-color);
   background-color: var(--card-bg);
 }
-._card_1ywyn_1 ._titleCollapsed_1ywyn_25 {
+._card_1wvfe_1 ._titleCollapsed_1wvfe_25 {
   border-bottom: 0;
 }
-._card_1ywyn_1 ._titleContent_1ywyn_29 {
+._card_1wvfe_1 ._titleContent_1wvfe_29 {
   display: flex;
   align-items: center;
   gap: 0.5rem;
 }
-._card_1ywyn_1 ._chevronButton_1ywyn_35 {
-  margin-left: auto;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  padding: 0;
-  display: flex;
-  align-items: center;
+._card_1wvfe_1 ._titleInteractive_1wvfe_35 {
   cursor: pointer;
 }
-._card_1ywyn_1 ._chevron_1ywyn_35 {
+._card_1wvfe_1 ._chevron_1wvfe_39 {
+  margin-left: auto;
   width: 0.5rem;
   height: 0.5rem;
   border-right: 2px solid currentColor;
   border-bottom: 2px solid currentColor;
   transition: transform 0.2s ease;
   flex-shrink: 0;
-  cursor: pointer;
+  cursor: inherit;
 }
-._card_1ywyn_1 ._chevronExpanded_1ywyn_56 {
+._card_1wvfe_1 ._chevronExpanded_1wvfe_50 {
   transform: rotate(45deg);
 }
-._card_1ywyn_1 ._chevronCollapsed_1ywyn_60 {
+._card_1wvfe_1 ._chevronCollapsed_1wvfe_54 {
   transform: rotate(-45deg);
 }
-._card_1ywyn_1 ._content_1ywyn_64 {
+._card_1wvfe_1 ._titleInteractive_1wvfe_35:hover ._chevronExpanded_1wvfe_50,
+._card_1wvfe_1 ._titleInteractive_1wvfe_35:focus-visible ._chevronExpanded_1wvfe_50 {
+  transform: rotate(30deg);
+}
+._card_1wvfe_1 ._titleInteractive_1wvfe_35:hover ._chevronCollapsed_1wvfe_54,
+._card_1wvfe_1 ._titleInteractive_1wvfe_35:focus-visible ._chevronCollapsed_1wvfe_54 {
+  transform: rotate(-30deg);
+}
+._card_1wvfe_1 ._content_1wvfe_68 {
   display: grid;
   grid-template-rows: 1fr;
   transition:
     grid-template-rows 0.2s ease,
     opacity 0.2s ease;
 }
-._card_1ywyn_1 ._contentInner_1ywyn_72 {
+._card_1wvfe_1 ._contentInner_1wvfe_76 {
   overflow: hidden;
   min-height: 0;
   display: flex;
   flex-direction: column;
 }
-._card_1ywyn_1 ._contentCollapsed_1ywyn_79 {
+._card_1wvfe_1 ._contentCollapsed_1wvfe_83 {
   grid-template-rows: 0fr;
   opacity: 0;
 }
-._card_1ywyn_1 ._body_1ywyn_84 {
+._card_1wvfe_1 ._body_1wvfe_88 {
   padding: 0.5rem 1rem;
   width: 100%;
 }
-._card_1ywyn_1 ._footer_1ywyn_89 {
+._card_1wvfe_1 ._footer_1wvfe_93 {
   border-top: var(--border-thickness) solid var(--border-color);
   flex: 1;
   background-color: var(--card-bg);
   padding: 0.5rem 1rem;
 }
-._large_1ywyn_96 ._body_1ywyn_84,
-._large_1ywyn_96 ._title_1ywyn_18 {
+._large_1wvfe_100 ._body_1wvfe_88,
+._large_1wvfe_100 ._title_1wvfe_18 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_1ywyn_102 ._body_1ywyn_84,
-._small_1ywyn_102 ._title_1ywyn_18 {
+._small_1wvfe_106 ._body_1wvfe_88,
+._small_1wvfe_106 ._title_1wvfe_18 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
 /* Variants */
-._primary_1ywyn_110 {
+._primary_1wvfe_114 {
   --card-bg: var(--primary-color-100);
   --border-color: var(--primary-color-300);
   --border-accent-color: var(--primary-color-600);
   --card-color: var(--primary-color-800);
 }
-._success_1ywyn_117 {
+._success_1wvfe_121 {
   --card-bg: var(--success-color-100);
   --border-color: var(--success-color-300);
   --border-accent-color: var(--success-color-600);
   --card-color: var(--success-color-800);
 }
-._warning_1ywyn_124 {
+._warning_1wvfe_128 {
   --card-bg: var(--warning-color-100);
   --border-color: var(--warning-color-300);
   --border-accent-color: var(--warning-color-600);
   --card-color: var(--warning-color-800);
 }
-._danger_1ywyn_131 {
+._danger_1wvfe_135 {
   --card-bg: var(--danger-color-100);
   --border-color: var(--danger-color-300);
   --border-accent-color: var(--danger-color-600);
   --card-color: var(--danger-color-800);
 }
-._info_1ywyn_138 {
+._info_1wvfe_142 {
   --card-bg: var(--info-color-100);
   --border-color: var(--info-color-300);
   --border-accent-color: var(--info-color-600);
   --card-color: var(--info-color-800);
 }
-._secondary_1ywyn_145 {
+._secondary_1wvfe_149 {
   --card-bg: var(--secondary-color-100);
   --border-color: var(--secondary-color-300);
   --border-accent-color: var(--secondary-color-600);
@@ -1642,7 +1644,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   --button-color: var(--body-color);
 }
 /* modal.module.css */
-@keyframes _overlayIn_1fxeg_1 {
+@keyframes _overlayIn_10x08_1 {
   from {
     opacity: 0;
   }
@@ -1650,7 +1652,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     opacity: 1;
   }
 }
-@keyframes _overlayOut_1fxeg_1 {
+@keyframes _overlayOut_10x08_1 {
   from {
     opacity: 1;
   }
@@ -1658,7 +1660,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     opacity: 0;
   }
 }
-@keyframes _panelIn_1fxeg_1 {
+@keyframes _panelIn_10x08_1 {
   from {
     opacity: 0;
     transform: translateX(400px);
@@ -1668,7 +1670,7 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     transform: translateX(0);
   }
 }
-@keyframes _panelOut_1fxeg_1 {
+@keyframes _panelOut_10x08_1 {
   from {
     opacity: 1;
     transform: translateX(0);
@@ -1678,23 +1680,23 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
     transform: translateX(100%);
   }
 }
-._overlay_1fxeg_43 {
+._overlay_10x08_43 {
   position: fixed;
   inset: 0;
   z-index: 98;
 }
-._overlayBackdrop_1fxeg_49 {
+._overlayBackdrop_10x08_49 {
   position: absolute;
   inset: 0;
   background: color-mix(in srgb, var(--body-bg) 50%, transparent);
 }
-._overlay_1fxeg_43[data-state="open"] {
-  animation: _overlayIn_1fxeg_1 160ms ease-out;
+._overlay_10x08_43[data-state="open"] {
+  animation: _overlayIn_10x08_1 160ms ease-out;
 }
-._overlay_1fxeg_43[data-state="closed"] {
-  animation: _overlayOut_1fxeg_1 120ms ease-in;
+._overlay_10x08_43[data-state="closed"] {
+  animation: _overlayOut_10x08_1 120ms ease-in;
 }
-._content_1fxeg_63 {
+._content_10x08_63 {
   position: fixed;
   top: 10px;
   right: 10px;
@@ -1707,29 +1709,34 @@ div.jcui_chamfer:not(.jcui_disabled):focus-within {
   display: flex;
   flex-direction: column;
 }
-._content_1fxeg_63[data-state="open"] {
-  animation: _panelIn_1fxeg_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
+._content_10x08_63[data-state="open"] {
+  animation: _panelIn_10x08_1 180ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-._content_1fxeg_63[data-state="closed"] {
-  animation: _panelOut_1fxeg_1 140ms ease-in;
+._content_10x08_63[data-state="closed"] {
+  animation: _panelOut_10x08_1 140ms ease-in;
 }
-body.jcui-modal-mobile ._content_1fxeg_63 {
+body.jcui-modal-mobile ._content_10x08_63 {
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   min-width: 0;
 }
-._title_1fxeg_96 {
+._title_10x08_96 {
   margin: 0;
 }
-._body_1fxeg_100 {
+._body_10x08_100 {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
   padding-top: 1rem;
 }
-._footer_1fxeg_107 {
+._body_10x08_100 > hr {
+  margin: 1rem 0;
+  transform: translateX(-16px);
+  width: calc(100% + 32px);
+}
+._footer_10x08_113 {
   margin: -12px;
   margin-top: 0px;
   padding: 12px;
@@ -2647,35 +2654,35 @@ function requireClassnames() {
 }
 var classnamesExports = requireClassnames();
 const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
-const card = "_card_1ywyn_1";
-const pageBackground$3 = "_pageBackground_1ywyn_11";
-const title$1 = "_title_1ywyn_18";
-const titleCollapsed = "_titleCollapsed_1ywyn_25";
-const titleContent = "_titleContent_1ywyn_29";
-const chevronButton = "_chevronButton_1ywyn_35";
-const chevron = "_chevron_1ywyn_35";
-const chevronExpanded = "_chevronExpanded_1ywyn_56";
-const chevronCollapsed = "_chevronCollapsed_1ywyn_60";
-const content$4 = "_content_1ywyn_64";
-const contentInner = "_contentInner_1ywyn_72";
-const contentCollapsed = "_contentCollapsed_1ywyn_79";
-const body$1 = "_body_1ywyn_84";
-const footer$1 = "_footer_1ywyn_89";
-const large$7 = "_large_1ywyn_96";
-const small$7 = "_small_1ywyn_102";
-const primary$9 = "_primary_1ywyn_110";
-const success$9 = "_success_1ywyn_117";
-const warning$9 = "_warning_1ywyn_124";
-const danger$9 = "_danger_1ywyn_131";
-const info$9 = "_info_1ywyn_138";
-const secondary$9 = "_secondary_1ywyn_145";
+const card = "_card_1wvfe_1";
+const pageBackground$3 = "_pageBackground_1wvfe_11";
+const title$1 = "_title_1wvfe_18";
+const titleCollapsed = "_titleCollapsed_1wvfe_25";
+const titleContent = "_titleContent_1wvfe_29";
+const titleInteractive = "_titleInteractive_1wvfe_35";
+const chevron = "_chevron_1wvfe_39";
+const chevronExpanded = "_chevronExpanded_1wvfe_50";
+const chevronCollapsed = "_chevronCollapsed_1wvfe_54";
+const content$4 = "_content_1wvfe_68";
+const contentInner = "_contentInner_1wvfe_76";
+const contentCollapsed = "_contentCollapsed_1wvfe_83";
+const body$1 = "_body_1wvfe_88";
+const footer$1 = "_footer_1wvfe_93";
+const large$7 = "_large_1wvfe_100";
+const small$7 = "_small_1wvfe_106";
+const primary$9 = "_primary_1wvfe_114";
+const success$9 = "_success_1wvfe_121";
+const warning$9 = "_warning_1wvfe_128";
+const danger$9 = "_danger_1wvfe_135";
+const info$9 = "_info_1wvfe_142";
+const secondary$9 = "_secondary_1wvfe_149";
 const styles$b = {
   card,
   pageBackground: pageBackground$3,
   title: title$1,
   titleCollapsed,
   titleContent,
-  chevronButton,
+  titleInteractive,
   chevron,
   chevronExpanded,
   chevronCollapsed,
@@ -2714,6 +2721,15 @@ function Card({
     }
     onCollapseChange?.(!isCollapsed2);
   };
+  const handleKeyDown = (event) => {
+    if (!isCollapsible) {
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      handleCollapseToggle();
+    }
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -2733,27 +2749,24 @@ function Card({
             className: classNames(
               styles$b.title,
               hatchStyles.hatch,
-              isCollapsed2 && styles$b.titleCollapsed
+              isCollapsed2 && styles$b.titleCollapsed,
+              isCollapsible && styles$b.titleInteractive
             ),
+            onClick: isCollapsible ? handleCollapseToggle : void 0,
+            onKeyDown: isCollapsible ? handleKeyDown : void 0,
+            role: isCollapsible ? "button" : void 0,
+            tabIndex: isCollapsible ? 0 : void 0,
+            "aria-expanded": isCollapsible ? !isCollapsed2 : void 0,
+            "aria-label": isCollapsible ? isCollapsed2 ? "Expand card" : "Collapse card" : void 0,
             children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$b.titleContent, children: [
               title2,
               isCollapsible && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "button",
+                "span",
                 {
-                  type: "button",
-                  className: styles$b.chevronButton,
-                  onClick: handleCollapseToggle,
-                  "aria-label": isCollapsed2 ? "Expand card" : "Collapse card",
-                  "aria-expanded": !isCollapsed2,
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "span",
-                    {
-                      "aria-hidden": "true",
-                      className: classNames(
-                        styles$b.chevron,
-                        isCollapsed2 ? styles$b.chevronCollapsed : styles$b.chevronExpanded
-                      )
-                    }
+                  "aria-hidden": "true",
+                  className: classNames(
+                    styles$b.chevron,
+                    isCollapsed2 ? styles$b.chevronCollapsed : styles$b.chevronExpanded
                   )
                 }
               )
@@ -27921,12 +27934,12 @@ var Overlay = DialogOverlay;
 var Content = DialogContent;
 var Title = DialogTitle;
 var Close = DialogClose;
-const overlay = "_overlay_1fxeg_43";
-const overlayBackdrop = "_overlayBackdrop_1fxeg_49";
-const content$1 = "_content_1fxeg_63";
-const title = "_title_1fxeg_96";
-const body = "_body_1fxeg_100";
-const footer = "_footer_1fxeg_107";
+const overlay = "_overlay_10x08_43";
+const overlayBackdrop = "_overlayBackdrop_10x08_49";
+const content$1 = "_content_10x08_63";
+const title = "_title_10x08_96";
+const body = "_body_10x08_100";
+const footer = "_footer_10x08_113";
 const styles$1 = {
   overlay,
   overlayBackdrop,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jackcrane/ui",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "type": "module",
   "sideEffects": false,
   "main": "dist/jcui.cjs.js",