@capillaryjs/capillary-ui 1.3.0 → 1.4.0

package/package.json

@@ -2,7 +2,7 @@
   "type": "module",
   "name": "@capillaryjs/capillary-ui",
   "private": false,
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Browser-only TypeScript component runtime, JSX controls, and semantic themes.",
   "license": "Apache-2.0",
   "author": {
@@ -76,10 +76,10 @@
     "dev": "vite"
   },
   "peerDependencies": {
-    "@capillaryjs/capillary": "^1.3.0"
+    "@capillaryjs/capillary": "^1.4.0"
   },
   "devDependencies": {
-    "@capillaryjs/capillary": "^1.3.0",
+    "@capillaryjs/capillary": "^1.4.0",
     "vite": "^6.3.5"
   },
   "engines": {

package/styles/structural.css

@@ -879,7 +879,12 @@ cap-datatable {
         }
 
         cap-datatable > table {
-            border-collapse: collapse;
+            /* Collapsed borders belong to the table paint layer, so they can
+             * disappear behind scrolling rows even though the header cells are
+             * sticky. Keep zero visual spacing while letting each sticky cell
+             * retain its own header-edge and column-divider chrome. */
+            border-collapse: separate;
+            border-spacing: 0;
             width: 100%;
         }
 
@@ -1012,14 +1017,15 @@ cap-placeholder {
 
 cap-datatable > table > thead {
             color: var(--table-header-color);
-            background: var(--ui-gradient);
+            background: var(--table-header-background);
         }
 
         cap-datatable > table > thead > tr > th {
             position: sticky;
             inset-block-start: 0;
             z-index: 2;
-            background: var(--ui-gradient);
+            height: 1.5rem;
+            background: var(--table-header-background);
             border: 2px groove #fff7;
             border-left: none;
         }
@@ -1058,9 +1064,37 @@ cap-datatable > table > thead > tr > th[aria-sort] {
             top: 50%;
             transform: translateY(-50%);
             width: 1em;
+            height: 1.25em;
             text-align: center;
         }
 
+        /* An unsorted column offers both directions at the same muted weight
+         * as the filter funnel. A sorted column continues to render its one
+         * active text arrow above. */
+        cap-datatable > table > thead > tr > th[aria-sort="none"] > button.sort > span.sortindicator {
+            opacity: 0.5;
+        }
+
+        cap-datatable > table > thead > tr > th[aria-sort="none"] > button.sort > span.sortindicator::before,
+        cap-datatable > table > thead > tr > th[aria-sort="none"] > button.sort > span.sortindicator::after {
+            content: "";
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            border-left: .36em solid transparent;
+            border-right: .36em solid transparent;
+        }
+
+        cap-datatable > table > thead > tr > th[aria-sort="none"] > button.sort > span.sortindicator::before {
+            top: .04em;
+            border-bottom: .5em solid currentColor;
+        }
+
+        cap-datatable > table > thead > tr > th[aria-sort="none"] > button.sort > span.sortindicator::after {
+            bottom: .04em;
+            border-top: .5em solid currentColor;
+        }
+
         cap-datatable > table > thead > tr > th[aria-sort] > button.filter {
             appearance: none;
             position: absolute;
@@ -1068,6 +1102,7 @@ cap-datatable > table > thead > tr > th[aria-sort] {
             top: 50%;
             transform: translateY(-50%);
             width: 1em;
+            height: 1em;
             padding: 0;
             color: inherit;
             background: transparent;
@@ -1080,6 +1115,20 @@ cap-datatable > table > thead > tr > th[aria-sort] {
             opacity: 0.5;
         }
 
+        /* A solid, font-independent funnel: the tapered bowl narrows into a
+         * short stem, so the control stays legible at compact table-header
+         * sizes in every theme and locale. */
+        cap-datatable > table > thead > tr > th[aria-sort] > button.filter::before {
+            content: "";
+            position: absolute;
+            inset: 50% auto auto 50%;
+            width: .85em;
+            height: .9em;
+            background: currentColor;
+            clip-path: polygon(0 0, 100% 0, 60% 58%, 60% 100%, 40% 100%, 40% 58%);
+            transform: translate(-50%, -50%);
+        }
+
         cap-datatable > table > thead > tr > th[aria-sort] > button.filter:hover {
             opacity: 1;
         }

package/themes/capillary/theme.css

@@ -123,8 +123,8 @@
     --tab-button-shadow-active: 0 -1px 0 var(--palette-primary), var(--button-shadow);
     --table-header-background: color-mix(in oklch, var(--palette-light) 74%, var(--ui-primary-bg-color));
     --table-header-color: var(--ui-color);
-    --table-row-background: var(--palette-light);
-    --table-row-alt-background: color-mix(in oklch, var(--palette-light) 78%, var(--ui-primary-bg-color));
+    --ui-table-bg-color: #eaeaea;
+    --ui-table-bg-color2: #f5f5f5;
     --row-hover-background: color-mix(in oklch, var(--palette-primary-100) 45%, var(--palette-light));
     --navigation-bar-background: unset;
     --navigation-bar-border: unset;

package/themes/shiny/theme.css

@@ -12,6 +12,8 @@
     --ui-gradient-2: linear-gradient( to bottom in srgb, var(--ui-primary-bg-color) 9px, var(--ui-primary-bg-color) 13px, var(--ui-dark-bg-color) 100% );
     --shiny-ui-gradient: var(--ui-gradient);
     --shiny-ui-gradient-2: var(--ui-gradient-2);
+    --table-header-background: var(--ui-gradient);
+    --table-header-color: var(--ui-text-color);
     --shiny-background: radial-gradient(140% 75% at 30% 10%, #fff2, #fff3 47%, #fff0 55%, #fff0), linear-gradient(to bottom, var(--palette-primary-900) 0%, var(--palette-primary) 65%, var(--palette-primary) 66%, var(--palette-primary-400) 100%);
     --text-color: var(--palette-primary-900);
     --ui-color: var(--text-color);
@@ -159,13 +161,7 @@ cap-blockgraph cap-placeholder {
   box-shadow: var(--colored-shadow);
 }
 
-cap-datatable > table > thead {
-  background: var(--ui-gradient);
-  color: var(--ui-text-color);
-}
-
 cap-datatable > table > thead > tr > th[aria-sort] > button.sort {
-  min-height: 1.5rem;
   font-weight: bold;
 }