argus-table 0.0.0-stage → 0.0.1

package/dist/styles/base.js

@@ -0,0 +1,235 @@
+import { css } from "lit";
+// src/styles/base.ts
+/**
+* Base styles. Everything sits in `@layer argus-base`, and every value reads a
+* public token with a neutral fallback, so themes and page CSS always win.
+* `--_*` properties are private.
+*/
+var baseStyles = css`
+  @layer argus-base {
+    :host {
+      display: block;
+      /* A table that virtualizes needs a bounded height; set your own on the element. */
+      block-size: 400px;
+      box-sizing: border-box;
+      contain: content;
+      color-scheme: light dark;
+      color: var(--argus-fg, CanvasText);
+      background: var(--argus-bg, Canvas);
+      font: var(--argus-font, inherit);
+      --_row-height: var(--argus-row-height, 40px);
+      --_pad: var(--argus-cell-padding-inline, 12px);
+      --_border: var(--argus-border-width, 1px) solid
+        var(--argus-border-color, light-dark(#e5e7eb, #374151));
+      /* 1 in LTR, -1 in RTL: mirrors the pinned-edge shadow. */
+      --_dir: 1;
+    }
+    :host(:dir(rtl)) {
+      --_dir: -1;
+    }
+    :host([density='compact']) {
+      --_row-height: var(--argus-row-height, 32px);
+      --_pad: var(--argus-cell-padding-inline, 8px);
+    }
+    :host([density='spacious']) {
+      --_row-height: var(--argus-row-height, 52px);
+      --_pad: var(--argus-cell-padding-inline, 16px);
+    }
+    :host([hidden]) {
+      display: none;
+    }
+
+    [part~='table'] {
+      position: relative;
+      block-size: 100%;
+      overflow: auto;
+      overscroll-behavior: contain;
+      /* A cell moved to by keyboard scrolls clear of the sticky header and pinned columns. */
+      scroll-padding-block-start: var(--_row-height);
+      scroll-padding-inline: var(--_pin-start, 0) var(--_pin-end, 0);
+    }
+
+    .row {
+      display: grid;
+      grid-template-columns: var(--_cols);
+      inline-size: var(--_width);
+      min-inline-size: 100%;
+      block-size: var(--_row-height);
+      box-sizing: border-box;
+    }
+
+    [part~='header'] {
+      position: sticky;
+      inset-block-start: 0;
+      z-index: 2;
+    }
+
+    [part~='body'] {
+      position: relative;
+      contain: layout;
+    }
+    [part~='row'] {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      --_row-bg: var(--argus-bg, Canvas);
+      --_row-surface: var(--_row-bg);
+      background: var(--_row-surface);
+    }
+    [part~='row-odd'] {
+      --_row-bg: var(--argus-row-stripe-bg, var(--argus-bg, Canvas));
+    }
+    [part~='row']:hover {
+      --_row-surface: var(--argus-row-hover-bg, var(--_row-bg));
+    }
+
+    [part~='cell'],
+    [part~='header-cell'] {
+      display: flex;
+      align-items: center;
+      min-inline-size: 0;
+      box-sizing: border-box;
+      padding-inline: var(--_pad);
+      overflow: hidden;
+      white-space: nowrap;
+      border-block-end: var(--_border);
+    }
+    [part~='header-cell'] {
+      background: var(--argus-header-bg, light-dark(#f9fafb, #111827));
+      color: var(--argus-header-fg, inherit);
+      font-weight: 600;
+    }
+    [part~='header-cell'] {
+      position: relative;
+    }
+    [part~='resize-handle'] {
+      position: absolute;
+      inset-block: 0;
+      inset-inline-end: 0;
+      inline-size: 8px;
+      z-index: 1;
+      cursor: col-resize;
+      touch-action: none;
+    }
+    [part~='resize-handle']::after {
+      content: '';
+      position: absolute;
+      inset-block: 25%;
+      inset-inline-end: 0;
+      inline-size: 2px;
+      background: var(--argus-resize-handle-color, light-dark(#9ca3af, #6b7280));
+      opacity: 0;
+    }
+    [part~='header-cell']:hover [part~='resize-handle']::after,
+    [part~='header-cell']:focus-visible [part~='resize-handle']::after,
+    [part~='resize-handle'][data-active]::after {
+      opacity: 1;
+    }
+    [data-sort-col] {
+      cursor: pointer;
+      user-select: none;
+    }
+    [part~='header-cell']:focus-visible,
+    [part~='cell']:focus-visible {
+      outline: var(--argus-focus-ring, 2px solid Highlight);
+      outline-offset: -2px;
+    }
+    /* A small chevron after the header content; only the sorted column shows it. */
+    .sort-indicator {
+      flex: none;
+      inline-size: 0.35em;
+      block-size: 0.35em;
+      margin-inline-start: 0.4em;
+      /* Physical sides on purpose: the chevron is rotated, so it must not mirror in RTL. */
+      border-right: 0.12em solid currentColor;
+      border-bottom: 0.12em solid currentColor;
+      visibility: hidden;
+    }
+    [aria-sort] .sort-indicator {
+      visibility: visible;
+    }
+    [aria-sort='ascending'] .sort-indicator {
+      transform: translateY(0.1em) rotate(-135deg);
+    }
+    [aria-sort='descending'] .sort-indicator {
+      transform: translateY(-0.1em) rotate(45deg);
+    }
+    [data-align='end'] .sort-indicator {
+      order: -1;
+      margin-inline: 0 0.4em;
+    }
+    /*
+     * Pinned columns: sticky inside the scroll container, with offsets from the
+     * table model. Logical insets make RTL work without extra rules.
+     */
+    [data-pin] {
+      position: sticky;
+      z-index: 1;
+      /* Visible so the edge shadow isn't clipped; slotted content still clips itself. */
+      overflow: visible;
+    }
+    [data-pin='start'] {
+      inset-inline-start: var(--_pin-offset);
+    }
+    [data-pin='end'] {
+      inset-inline-end: var(--_pin-offset);
+    }
+    [part~='cell-pinned'] {
+      background: var(--_row-surface);
+    }
+    /*
+     * The edge shadow. --argus-pinned-shadow is written for a shadow falling
+     * toward the end side; the start edge in RTL and the end edge in LTR mirror it.
+     */
+    [data-pin-edge]::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      box-shadow: var(
+        --argus-pinned-shadow,
+        4px 0 6px -4px light-dark(rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.6))
+      );
+      transform: scaleX(var(--_dir));
+    }
+    [data-pin='end'][data-pin-edge]::after {
+      transform: scaleX(calc(-1 * var(--_dir)));
+    }
+
+    [data-align='center'] {
+      justify-content: center;
+      text-align: center;
+    }
+    [data-align='end'] {
+      justify-content: flex-end;
+      text-align: end;
+    }
+    ::slotted(*) {
+      min-inline-size: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    [part~='empty'] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-block-size: calc(100% - var(--_row-height));
+      padding: var(--_pad);
+      box-sizing: border-box;
+    }
+
+    /* Measures the resolved row height in px for the virtualizer. */
+    .probe {
+      position: absolute;
+      inset-block-start: 0;
+      inline-size: 0;
+      block-size: var(--_row-height);
+      visibility: hidden;
+      pointer-events: none;
+    }
+  }
+`;
+export { baseStyles };
+
+//# sourceMappingURL=base.js.map

package/dist/styles/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","names":[],"sources":["../../src/styles/base.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Base styles. Everything sits in `@layer argus-base`, and every value reads a\n * public token with a neutral fallback, so themes and page CSS always win.\n * `--_*` properties are private.\n */\nexport const baseStyles = css`\n  @layer argus-base {\n    :host {\n      display: block;\n      /* A table that virtualizes needs a bounded height; set your own on the element. */\n      block-size: 400px;\n      box-sizing: border-box;\n      contain: content;\n      color-scheme: light dark;\n      color: var(--argus-fg, CanvasText);\n      background: var(--argus-bg, Canvas);\n      font: var(--argus-font, inherit);\n      --_row-height: var(--argus-row-height, 40px);\n      --_pad: var(--argus-cell-padding-inline, 12px);\n      --_border: var(--argus-border-width, 1px) solid\n        var(--argus-border-color, light-dark(#e5e7eb, #374151));\n      /* 1 in LTR, -1 in RTL: mirrors the pinned-edge shadow. */\n      --_dir: 1;\n    }\n    :host(:dir(rtl)) {\n      --_dir: -1;\n    }\n    :host([density='compact']) {\n      --_row-height: var(--argus-row-height, 32px);\n      --_pad: var(--argus-cell-padding-inline, 8px);\n    }\n    :host([density='spacious']) {\n      --_row-height: var(--argus-row-height, 52px);\n      --_pad: var(--argus-cell-padding-inline, 16px);\n    }\n    :host([hidden]) {\n      display: none;\n    }\n\n    [part~='table'] {\n      position: relative;\n      block-size: 100%;\n      overflow: auto;\n      overscroll-behavior: contain;\n      /* A cell moved to by keyboard scrolls clear of the sticky header and pinned columns. */\n      scroll-padding-block-start: var(--_row-height);\n      scroll-padding-inline: var(--_pin-start, 0) var(--_pin-end, 0);\n    }\n\n    .row {\n      display: grid;\n      grid-template-columns: var(--_cols);\n      inline-size: var(--_width);\n      min-inline-size: 100%;\n      block-size: var(--_row-height);\n      box-sizing: border-box;\n    }\n\n    [part~='header'] {\n      position: sticky;\n      inset-block-start: 0;\n      z-index: 2;\n    }\n\n    [part~='body'] {\n      position: relative;\n      contain: layout;\n    }\n    [part~='row'] {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      --_row-bg: var(--argus-bg, Canvas);\n      --_row-surface: var(--_row-bg);\n      background: var(--_row-surface);\n    }\n    [part~='row-odd'] {\n      --_row-bg: var(--argus-row-stripe-bg, var(--argus-bg, Canvas));\n    }\n    [part~='row']:hover {\n      --_row-surface: var(--argus-row-hover-bg, var(--_row-bg));\n    }\n\n    [part~='cell'],\n    [part~='header-cell'] {\n      display: flex;\n      align-items: center;\n      min-inline-size: 0;\n      box-sizing: border-box;\n      padding-inline: var(--_pad);\n      overflow: hidden;\n      white-space: nowrap;\n      border-block-end: var(--_border);\n    }\n    [part~='header-cell'] {\n      background: var(--argus-header-bg, light-dark(#f9fafb, #111827));\n      color: var(--argus-header-fg, inherit);\n      font-weight: 600;\n    }\n    [part~='header-cell'] {\n      position: relative;\n    }\n    [part~='resize-handle'] {\n      position: absolute;\n      inset-block: 0;\n      inset-inline-end: 0;\n      inline-size: 8px;\n      z-index: 1;\n      cursor: col-resize;\n      touch-action: none;\n    }\n    [part~='resize-handle']::after {\n      content: '';\n      position: absolute;\n      inset-block: 25%;\n      inset-inline-end: 0;\n      inline-size: 2px;\n      background: var(--argus-resize-handle-color, light-dark(#9ca3af, #6b7280));\n      opacity: 0;\n    }\n    [part~='header-cell']:hover [part~='resize-handle']::after,\n    [part~='header-cell']:focus-visible [part~='resize-handle']::after,\n    [part~='resize-handle'][data-active]::after {\n      opacity: 1;\n    }\n    [data-sort-col] {\n      cursor: pointer;\n      user-select: none;\n    }\n    [part~='header-cell']:focus-visible,\n    [part~='cell']:focus-visible {\n      outline: var(--argus-focus-ring, 2px solid Highlight);\n      outline-offset: -2px;\n    }\n    /* A small chevron after the header content; only the sorted column shows it. */\n    .sort-indicator {\n      flex: none;\n      inline-size: 0.35em;\n      block-size: 0.35em;\n      margin-inline-start: 0.4em;\n      /* Physical sides on purpose: the chevron is rotated, so it must not mirror in RTL. */\n      border-right: 0.12em solid currentColor;\n      border-bottom: 0.12em solid currentColor;\n      visibility: hidden;\n    }\n    [aria-sort] .sort-indicator {\n      visibility: visible;\n    }\n    [aria-sort='ascending'] .sort-indicator {\n      transform: translateY(0.1em) rotate(-135deg);\n    }\n    [aria-sort='descending'] .sort-indicator {\n      transform: translateY(-0.1em) rotate(45deg);\n    }\n    [data-align='end'] .sort-indicator {\n      order: -1;\n      margin-inline: 0 0.4em;\n    }\n    /*\n     * Pinned columns: sticky inside the scroll container, with offsets from the\n     * table model. Logical insets make RTL work without extra rules.\n     */\n    [data-pin] {\n      position: sticky;\n      z-index: 1;\n      /* Visible so the edge shadow isn't clipped; slotted content still clips itself. */\n      overflow: visible;\n    }\n    [data-pin='start'] {\n      inset-inline-start: var(--_pin-offset);\n    }\n    [data-pin='end'] {\n      inset-inline-end: var(--_pin-offset);\n    }\n    [part~='cell-pinned'] {\n      background: var(--_row-surface);\n    }\n    /*\n     * The edge shadow. --argus-pinned-shadow is written for a shadow falling\n     * toward the end side; the start edge in RTL and the end edge in LTR mirror it.\n     */\n    [data-pin-edge]::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      box-shadow: var(\n        --argus-pinned-shadow,\n        4px 0 6px -4px light-dark(rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.6))\n      );\n      transform: scaleX(var(--_dir));\n    }\n    [data-pin='end'][data-pin-edge]::after {\n      transform: scaleX(calc(-1 * var(--_dir)));\n    }\n\n    [data-align='center'] {\n      justify-content: center;\n      text-align: center;\n    }\n    [data-align='end'] {\n      justify-content: flex-end;\n      text-align: end;\n    }\n    ::slotted(*) {\n      min-inline-size: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    [part~='empty'] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-block-size: calc(100% - var(--_row-height));\n      padding: var(--_pad);\n      box-sizing: border-box;\n    }\n\n    /* Measures the resolved row height in px for the virtualizer. */\n    .probe {\n      position: absolute;\n      inset-block-start: 0;\n      inline-size: 0;\n      block-size: var(--_row-height);\n      visibility: hidden;\n      pointer-events: none;\n    }\n  }\n`;\n"],"mappings":";;;;;;;AAOA,IAAa,aAAa,GAAG"}

package/package.json

@@ -1,6 +1,64 @@
 {
   "name": "argus-table",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.0.1",
+  "description": "A framework-agnostic data table web component built with Lit and TanStack.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Joessst-Dev/argus-table.git",
+    "directory": "packages/table"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./custom-elements.json": "./dist/custom-elements.json",
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/index.d.ts",
+  "jsdelivr": "./dist/cdn/argus-table.js",
+  "unpkg": "./dist/cdn/argus-table.js",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "./dist/index.js",
+    "./dist/argus-table.js",
+    "./dist/cdn/argus-table.js"
+  ],
+  "dependencies": {
+    "@tanstack/lit-virtual": "^3.15.3",
+    "@tanstack/table-core": "9.3.1",
+    "lit": "^3.3.3"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@custom-elements-manifest/analyzer": "^0.11.0",
+    "@size-limit/file": "^14.3.0",
+    "@vitest/browser-playwright": "^5.1.0",
+    "playwright": "1.63.0",
+    "publint": "^0.3.25",
+    "rollup": "~4.64.12",
+    "rollup-plugin-dts": "^6.5.1",
+    "size-limit": "^14.3.0",
+    "vite": "^8.3.5",
+    "vitest": "^5.1.0",
+    "@argus-table/core": "0.0.0"
+  },
+  "customElements": "dist/custom-elements.json",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build && vite build -c vite.cdn.config.ts && rollup -c rollup.dts.config.mjs && cem analyze && pnpm check-exports",
+    "check-exports": "node scripts/check-dist.mjs && publint --strict && attw --pack . --profile esm-only",
+    "size": "size-limit",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "lint": "eslint .",
+    "test": "vitest run"
+  }
 }