@affinda/wc 0.6.1 → 0.7.0

package/dist/collection/components/af-stack/af-stack.js

@@ -55,7 +55,7 @@ export class AfStack {
             justifyContent: justifyMap[this.justify],
             flexWrap: this.wrap ? 'wrap' : 'nowrap',
         };
-        return (h(Host, { key: 'bf6f8a0e7454bbdf4a55a5723a32b40bef78805b', style: style }, h("slot", { key: '54e82fd4bc6ca19d8b29ed424a2c7d54a8784a22' })));
+        return (h(Host, { key: 'db52d2f3bdaf6041270d6db9ca469fa8881defef', style: style }, h("slot", { key: 'bfb81ed114d802a1260762561dedc82b03dfcb9f' })));
     }
     static get is() { return "af-stack"; }
     static get encapsulation() { return "shadow"; }
@@ -106,7 +106,8 @@ export class AfStack {
                         "Gap": {
                             "location": "import",
                             "path": "../../types",
-                            "id": "src/types.ts::Gap"
+                            "id": "src/types.ts::Gap",
+                            "referenceLocation": "Gap"
                         }
                     }
                 },
@@ -195,4 +196,3 @@ export class AfStack {
         };
     }
 }
-//# sourceMappingURL=af-stack.js.map

package/dist/collection/components/af-stat/af-stat.css

@@ -2,16 +2,17 @@
   display: block;
   flex: 1 1 0;
   min-width: 0;
-  /* Left accent border mirrors the website's stats-row styling. Reads
-     the active border colour from whatever theme the ancestor sets. */
-  border-left: 2px solid var(--af-background-border-active, var(--colour-brand-soft-clay, #b09670));
-  padding-left: var(--space-4, 16px);
 }
 
 .stat {
   display: flex;
   flex-direction: column;
   gap: var(--space-2, 8px);
+}
+
+.stat--accent {
+  border-left: 2px solid var(--af-background-border-active, var(--colour-brand-soft-clay, #b09670));
+  padding-left: var(--space-4, 16px);
   min-height: 76px;
   justify-content: center;
 }

package/dist/collection/components/af-stat/af-stat.js

@@ -8,8 +8,12 @@ import { h, Host } from "@stencil/core";
  * `af-heading` and `af-text` already consume — no theme prop needed here.
  */
 export class AfStat {
+    constructor() {
+        /** Whether to show the left accent border. */
+        this.accentBorder = false;
+    }
     render() {
-        return (h(Host, { key: 'db2aa04e087c7313db9dde512368413ea6428d38' }, h("div", { key: '72f0578398f5d82dcd27bf7e4102f9801f1067b3', class: "stat" }, h("af-heading", { key: '1accbab198a0923be4af5b5b6c0e7e5ca82c36b5', level: "2", class: "stat__value" }, this.value), h("af-text", { key: '533ea04317fb66451e7d130369b25080e37cff41', variant: "medium", class: "stat__label" }, this.label))));
+        return (h(Host, { key: '966cbca3aea7ebe93422d39e2bc40a69523dd274' }, h("div", { key: 'ec8518eca6608875480d8a39b701fa961d5319b4', class: { stat: true, 'stat--accent': this.accentBorder } }, h("af-heading", { key: '5e92bee48993111f60db03b0de7f01597af0729e', level: "2", class: "stat__value" }, this.value), h("af-text", { key: '60f3a82018cd7c39616eac77f3de85957b20ebfd', variant: "medium", class: "stat__label" }, this.label))));
     }
     static get is() { return "af-stat"; }
     static get encapsulation() { return "shadow"; }
@@ -62,8 +66,27 @@ export class AfStat {
                 "setter": false,
                 "reflect": false,
                 "attribute": "label"
+            },
+            "accentBorder": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the left accent border."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accent-border",
+                "defaultValue": "false"
             }
         };
     }
 }
-//# sourceMappingURL=af-stat.js.map

package/dist/collection/components/af-stats-row/af-stats-row.css

@@ -4,29 +4,15 @@
 }
 
 .stats-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-6, 24px);
-  align-items: stretch;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 40px;
 }
 
-/* Ensure each stat claims an equal share of the row. Descendant (not
-   child) combinator — see AGENTS.md "Stencil scoped-slot `>` gotcha". */
-.stats-row af-stat {
-  flex: 1 1 calc(50% - var(--space-6, 24px));
-  min-width: 0;
-}
-
-/* On wider viewports, prefer 4-up without wrapping when there's room. */
-@media (min-width: 768px) {
-  .stats-row af-stat {
-    flex: 1 1 0;
-  }
-}
-
-/* Narrow: stack to a single column for readability. */
-@media (max-width: 480px) {
-  .stats-row af-stat {
-    flex: 1 1 100%;
+/* Narrow: keep a 2x2 grid on mobile so four stats stay scannable. */
+@media (max-width: 767px) {
+  .stats-row {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 24px;
   }
 }

package/dist/collection/components/af-stats-row/af-stats-row.js

@@ -15,7 +15,7 @@ import { h, Host } from "@stencil/core";
  */
 export class AfStatsRow {
     render() {
-        return (h(Host, { key: '49538a82264992333834fdc12ec64522cf4242fe' }, h("div", { key: '9d567f97bc5f2707fad9e40b8d3ce0c4658db73b', class: "stats-row" }, h("slot", { key: 'f48aac6723185f8f10804355da4731f03285d9db' }))));
+        return (h(Host, { key: 'a1639a4d77e13a9645c16767bc20fbcaae7b7ee9' }, h("div", { key: '5fc777c0d818c07893a5ec4a61efb003273b7894', class: "stats-row" }, h("slot", { key: '96688883a1db1679c1bf9bdf1618b4f35695b63f' }))));
     }
     static get is() { return "af-stats-row"; }
     static get encapsulation() { return "scoped"; }
@@ -30,4 +30,3 @@ export class AfStatsRow {
         };
     }
 }
-//# sourceMappingURL=af-stats-row.js.map

package/dist/collection/components/af-stepper/af-stepper.js

@@ -40,7 +40,7 @@ export class AfStepper {
         });
     }
     render() {
-        return (h(Host, { key: 'a8aeeb5a9274e24d0e3b4daf84f5ba4f30ce47d3', class: `stepper stepper--${this.orientation}` }, h("div", { key: 'aa2263b4a10e144c376b6afad896f83d9c642a88', class: "stepper__connector", "aria-hidden": "true" }), h("slot", { key: '6ff6d3ce84bd8c06599ef5e8e9244d210e16578a' })));
+        return (h(Host, { key: '148a796e0537c96f435989eb7ec9d57e726d6a14', class: `stepper stepper--${this.orientation}` }, h("div", { key: 'cb0732de33b4adb7c6f319299b89fe4930a9bb5b', class: "stepper__connector", "aria-hidden": "true" }), h("slot", { key: '1056fd57918f571d55bf149569b0e88c33102a2f' })));
     }
     static get is() { return "af-stepper"; }
     static get encapsulation() { return "scoped"; }
@@ -80,4 +80,3 @@ export class AfStepper {
     }
     static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=af-stepper.js.map

package/dist/collection/components/af-stepper-step/af-stepper-step.js

@@ -18,7 +18,7 @@ export class AfStepperStep {
         this.index = 1;
     }
     render() {
-        return (h(Host, { key: 'd7c49caaec94513a798ff851f8975b2df55848ce' }, h("span", { key: 'd8f9d57de5434a961c217b57ac220f8930d17f6f', class: "stepper-step__badge" }, this.index), h("div", { key: '62204e81ed7bfd36d342da448ea0ea8852e16854', class: "stepper-step__content" }, h("div", { key: '40edc0e5973fabcfa781195e64fa0446d6be0e0c', class: "stepper-step__heading" }, h("slot", { key: '090302f455303956e2b6185a2e30d41d13b489e0', name: "heading" })), h("div", { key: '5fd26c30a269068568e95007f84dda0912a4bde4', class: "stepper-step__body" }, h("slot", { key: '5f3f4178f54edbbf05be6cd3df74a30bc2e18f96', name: "body" })))));
+        return (h(Host, { key: 'd74176fcffb5a54232c343e75ae72bb060df62f1' }, h("span", { key: 'e59ae590afe947d96e5813c1a7c5d2dad0504c57', class: "stepper-step__badge" }, this.index), h("div", { key: '4334fbc2c7f48475e499b1bcf4950dae7ef02a4f', class: "stepper-step__content" }, h("div", { key: '03accfc68453cfc05def2c45806df42ae9ee1a1d', class: "stepper-step__heading" }, h("slot", { key: '7b62fd0c8f4e9ee690952e63f5079c6442509ab2', name: "heading" })), h("div", { key: 'ce945437c372b3863a7f32e6c64b3921be684ca6', class: "stepper-step__body" }, h("slot", { key: '47264cf842c3a98e0c190dc36430840d24c9e639', name: "body" })))));
     }
     static get is() { return "af-stepper-step"; }
     static get encapsulation() { return "scoped"; }
@@ -57,4 +57,3 @@ export class AfStepperStep {
         };
     }
 }
-//# sourceMappingURL=af-stepper-step.js.map

package/dist/collection/components/af-switch/af-switch.js

@@ -152,4 +152,3 @@ export class AfSwitch {
             }];
     }
 }
-//# sourceMappingURL=af-switch.js.map

package/dist/collection/components/af-tab/af-tab.js

@@ -151,7 +151,7 @@ export class AfTab {
                     "references": {
                         "TabShape": {
                             "location": "local",
-                            "path": "/home/runner/work/affinda-ui/affinda-ui/packages/wc/src/components/af-tab/af-tab.tsx",
+                            "path": "/home/runner/work/affinda-website-npm-publish/affinda-website-npm-publish/packages/wc/src/components/af-tab/af-tab.tsx",
                             "id": "src/components/af-tab/af-tab.tsx::TabShape"
                         }
                     }
@@ -248,4 +248,3 @@ export class AfTab {
             }];
     }
 }
-//# sourceMappingURL=af-tab.js.map

package/dist/collection/components/af-tab-bar/af-tab-bar.js

@@ -112,7 +112,7 @@ export class AfTabBar {
                     "references": {
                         "TabBarShape": {
                             "location": "local",
-                            "path": "/home/runner/work/affinda-ui/affinda-ui/packages/wc/src/components/af-tab-bar/af-tab-bar.tsx",
+                            "path": "/home/runner/work/affinda-website-npm-publish/affinda-website-npm-publish/packages/wc/src/components/af-tab-bar/af-tab-bar.tsx",
                             "id": "src/components/af-tab-bar/af-tab-bar.tsx::TabBarShape"
                         }
                     }
@@ -138,7 +138,7 @@ export class AfTabBar {
                     "references": {
                         "TabBarBreakpoint": {
                             "location": "local",
-                            "path": "/home/runner/work/affinda-ui/affinda-ui/packages/wc/src/components/af-tab-bar/af-tab-bar.tsx",
+                            "path": "/home/runner/work/affinda-website-npm-publish/affinda-website-npm-publish/packages/wc/src/components/af-tab-bar/af-tab-bar.tsx",
                             "id": "src/components/af-tab-bar/af-tab-bar.tsx::TabBarBreakpoint"
                         }
                     }
@@ -168,4 +168,3 @@ export class AfTabBar {
             }];
     }
 }
-//# sourceMappingURL=af-tab-bar.js.map

package/dist/collection/components/af-table/af-table.css

@@ -0,0 +1,295 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+/* ==========================================================================
+   Table Wrapper
+   ========================================================================== */
+
+.table-wrapper {
+  position: relative;
+}
+
+/* Viewport contains the scroll area and vertical scrollbar side by side */
+.table-wrapper__viewport {
+  display: flex;
+}
+
+/* Scroll container - plain rectangle, no clipping */
+.table-wrapper__scroll {
+  flex: 1;
+  overflow: auto;
+  
+  /* Hide native scrollbars */
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.table-wrapper__scroll::-webkit-scrollbar {
+  display: none;
+}
+
+/* ==========================================================================
+   Base Table Styles
+   ========================================================================== */
+
+.table-wrapper table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--af-typography-body-default, #2b484f);
+  background-color: var(--af-background-base, #ffffff);
+  border-radius: var(--radius-md, 12px);
+}
+
+/* ==========================================================================
+   Header Cells
+   ========================================================================== */
+
+.table-wrapper th {
+  text-align: left;
+  font-weight: var(--font-weight-semibold, 600);
+  letter-spacing: var(--letter-spacing-heading, -0.02em);
+  color: var(--af-table-header-text, var(--af-typography-heading-primary, #14343b));
+  background-color: var(--af-table-header-bg, var(--af-background-contrast, #c6d5d1));
+  padding: 12px 16px;
+  white-space: nowrap;
+}
+
+/* First header cell rounded top-left */
+.table-wrapper thead tr:first-child th:first-child {
+  border-top-left-radius: var(--radius-md, 12px);
+}
+
+/* Last header cell rounded top-right */
+.table-wrapper thead tr:first-child th:last-child {
+  border-top-right-radius: var(--radius-md, 12px);
+}
+
+/* ==========================================================================
+   Body Cells
+   ========================================================================== */
+
+.table-wrapper td {
+  padding: 12px 16px;
+  vertical-align: top;
+}
+
+/* Last row rounded bottom corners */
+.table-wrapper tbody tr:last-child td:first-child {
+  border-bottom-left-radius: var(--radius-md, 12px);
+}
+
+.table-wrapper tbody tr:last-child td:last-child {
+  border-bottom-right-radius: var(--radius-md, 12px);
+}
+
+/* ==========================================================================
+   Row Styles
+   ========================================================================== */
+
+.table-wrapper tr {
+  transition: background-color var(--motion-duration-fast, 150ms) var(--motion-easing-standard);
+}
+
+/* ==========================================================================
+   Bordered Variant
+   ========================================================================== */
+
+.table-wrapper--bordered th,
+.table-wrapper--bordered td {
+  border: 1px solid var(--af-table-border, var(--af-background-border-default, #d1ddda));
+}
+
+/* Collapse double borders */
+.table-wrapper--bordered th + th,
+.table-wrapper--bordered td + td {
+  border-left: none;
+}
+
+.table-wrapper--bordered tbody tr + tr td {
+  border-top: none;
+}
+
+.table-wrapper--bordered thead + tbody tr:first-child td {
+  border-top: none;
+}
+
+/* ==========================================================================
+   Striped Variant
+   ========================================================================== */
+
+.table-wrapper--striped tbody tr:nth-child(odd) {
+  background-color: var(--af-table-row-alt, var(--af-background-level-1, #f5f7f7));
+}
+
+.table-wrapper--striped tbody tr:nth-child(even) {
+  background-color: var(--af-background-base, #ffffff);
+}
+
+/* ==========================================================================
+   Compact Variant
+   ========================================================================== */
+
+.table-wrapper--compact th,
+.table-wrapper--compact td {
+  padding: 8px 12px;
+}
+
+.table-wrapper--compact table {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+/* ==========================================================================
+   Sticky Header Variant
+   ========================================================================== */
+
+.table-wrapper--sticky-header thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+/* ==========================================================================
+   Custom Scrollbars - Shared
+   ========================================================================== */
+
+.table-wrapper__scrollbar {
+  cursor: grab;
+  touch-action: none;
+  flex-shrink: 0;
+}
+
+.table-wrapper__scrollbar:active {
+  cursor: grabbing;
+}
+
+.table-wrapper__scrollbar:focus-visible {
+  outline: 2px solid var(--af-background-border-active, #8a7049);
+  outline-offset: 2px;
+  border-radius: 999px;
+}
+
+/* ==========================================================================
+   Horizontal Scrollbar - below viewport with gap
+   ========================================================================== */
+
+.table-wrapper__scrollbar--h {
+  margin-top: var(--space-3, 12px);
+  padding: 4px 0;
+  display: flex;
+  align-items: center;
+}
+
+.table-wrapper__scrollbar-track--h {
+  position: relative;
+  width: 100%;
+  height: 1px;
+  background: var(--af-scrollbar-track, var(--af-background-border-default, #d1ddda));
+}
+
+.table-wrapper__scrollbar-thumb--h {
+  position: absolute;
+  top: -1px;
+  height: 3px;
+  border-radius: 999px;
+  background: var(--af-scrollbar-thumb, var(--af-background-border-active, #8a7049));
+  transition: left 0.1s ease-out;
+}
+
+.table-wrapper__scrollbar--h:active .table-wrapper__scrollbar-thumb--h {
+  transition: none;
+}
+
+/* ==========================================================================
+   Vertical Scrollbar - to the right of scroll area inside viewport
+   ========================================================================== */
+
+.table-wrapper__scrollbar--v {
+  width: var(--space-4, 16px);
+  margin-left: var(--space-3, 12px);
+  display: flex;
+  justify-content: center;
+  padding: 0 4px;
+}
+
+.table-wrapper__scrollbar-track--v {
+  position: relative;
+  width: 1px;
+  height: 100%;
+  background: var(--af-scrollbar-track, var(--af-background-border-default, #d1ddda));
+}
+
+.table-wrapper__scrollbar-thumb--v {
+  position: absolute;
+  left: -1px;
+  width: 3px;
+  border-radius: 999px;
+  background: var(--af-scrollbar-thumb, var(--af-background-border-active, #8a7049));
+  transition: top 0.1s ease-out;
+}
+
+.table-wrapper__scrollbar--v:active .table-wrapper__scrollbar-thumb--v {
+  transition: none;
+}
+
+/* ==========================================================================
+   Mobile Responsive
+   ========================================================================== */
+
+@media (max-width: 768px) {
+  .table-wrapper__scroll {
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .table-wrapper th,
+  .table-wrapper td {
+    padding: 10px 12px;
+    min-height: 44px;
+  }
+
+  .table-wrapper table {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  /* Increase scrollbar hit area on touch devices */
+  .table-wrapper__scrollbar--h {
+    padding: 8px 0;
+  }
+
+  .table-wrapper__scrollbar--v {
+    padding: 0 8px;
+  }
+}
+
+/* ==========================================================================
+   Theme Adaptations
+   
+   Note: Header colors now use --af-table-header-bg and --af-table-header-text
+   tokens defined per theme in themes.css. These styles handle other theme-
+   specific adjustments (body colors, striped rows, borders).
+   ========================================================================== */
+
+/* Inkwell theme adjustments */
+.theme-inkwell .table-wrapper table {
+  background-color: var(--af-background-base);
+}
+
+.theme-inkwell .table-wrapper td {
+  color: var(--af-typography-body-default);
+}
+
+.theme-inkwell .table-wrapper--striped tbody tr:nth-child(odd) {
+  background-color: var(--af-table-row-alt);
+}
+
+.theme-inkwell .table-wrapper--bordered th,
+.theme-inkwell .table-wrapper--bordered td {
+  border-color: var(--af-table-border, var(--af-background-border-default));
+}