@omnigrid/style 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 KRZK Apps
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.css

@@ -0,0 +1,256 @@
+:root {
+    font-family: system-ui, sans-serif;
+    color: #182230;
+    background: #f4f7fb;
+}
+
+.dark {
+    color: #e8ebe9;
+    background: #1a1d1e;
+}
+
+* {
+    box-sizing: border-box;
+}
+.omnigrid {
+    border-collapse: collapse;
+    border: 1px solid #d9e0ea;
+    scrollbar-gutter: stable;
+}
+
+[role="cell"] {
+    align-items: center;
+    background: transparent;
+    border-bottom: 1px solid #d9e0ea;
+    border-right: 1px solid #d9e0ea;
+    display: flex;
+    padding: 0 12px;
+    white-space: nowrap;
+}
+
+.dark [role="cell"] {
+    background: transparent;
+    border-bottom: 1px solid #3a3f40;
+    border-right: 1px solid #3a3f40;
+    color: #e8ebe9;
+}
+
+[role="cell"]:hover {
+    background: #eef5ff;
+}
+
+.dark [role="cell"]:hover {
+    background: #2a2f30;
+}
+
+.omnigrid-row:hover [role="cell"] {
+    background: #eef5ff !important;
+}
+
+.dark .omnigrid-row:hover [role="cell"] {
+    background: #2a2f30 !important;
+}
+
+.omnigrid-no-row-hover [role="cell"]:hover {
+    background: unset;
+}
+
+.omnigrid-no-row-hover .omnigrid-row:hover [role="cell"] {
+    background: unset !important;
+}
+
+.omnigrid-row {
+    user-select: none;
+}
+
+.omnigrid {
+    background: #ffffff;
+}
+
+.dark .omnigrid {
+    background: #1a1d1e;
+}
+
+/* Pinned panes are opaque by default. Cells are transparent, so without a
+   background the scrollable columns sliding underneath the sticky panes would
+   be visible through them. Use the same background as the table. */
+.omnigrid-pinned-left,
+.omnigrid-pinned-right {
+    background: #ffffff;
+}
+
+.dark .omnigrid-pinned-left,
+.dark .omnigrid-pinned-right {
+    background: #1a1d1e;
+}
+
+.omnigrid-header-row {
+    background: #e9eef5;
+}
+
+.dark .omnigrid-header-row {
+    background: #2a2f30;
+}
+
+[role="columnheader"] {
+    background: #e9eef5;
+    border-bottom: 1px solid #c5cfdd;
+    border-right: 1px solid #c5cfdd;
+    color: #334155;
+}
+
+/* The pinned panes intentionally have NO border: the pinned columns are
+   positioned so their pixels land exactly on the core-computed offsets, and
+   the pane boxes are sized to the full pinned width. Any border would shrink
+   the content box by its width (box-sizing: border-box) while the header-row
+   and rows-layer inside still span the full border-box width, making the layer
+   stick out 1px past the pane and creating a phantom horizontal scrollbar
+   (scrollWidth > clientWidth).
+
+   Separators between the pinned zones and the scrollable zone are drawn by
+   cell borders instead:
+     - left edge of the right-pinned block  -> the FIRST right-pinned column
+       gets border-left (below). The scrollable area flex-grows, so the last
+       scrollable column does NOT touch the right pane; without this border the
+       block would have no left edge line.
+     - right edge of the left-pinned block  -> the last left-pinned column
+       already carries border-right from the base [role="cell"] /
+       [role="columnheader"] rules, which sits exactly on the pane boundary.
+   A 1px border on a cell extends LEFT inside the pane and can never extend
+   the container's right edge, so it cannot produce a phantom scrollbar. */
+
+.omnigrid-pinned-right [role="cell"]:first-child,
+.omnigrid-pinned-right [role="columnheader"]:first-child {
+    border-left: 1px solid #d9e0ea;
+}
+
+.dark .omnigrid-pinned-right [role="cell"]:first-child,
+.dark .omnigrid-pinned-right [role="columnheader"]:first-child {
+    border-left: 1px solid #3a3f40;
+}
+
+/* ------------------------------------------------------------------ */
+/* Slot Architecture                                                   */
+/* ------------------------------------------------------------------ */
+
+.omnigrid-layout {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.omnigrid-layout-body {
+    display: flex;
+    flex: 1 1 auto;
+    min-height: 0;
+    min-width: 0;
+}
+
+.omnigrid-slot {
+    display: flex;
+}
+
+.omnigrid-slot-top,
+.omnigrid-slot-bottom {
+    width: 100%;
+    padding: 4px 8px;
+    background: #f4f7fb;
+}
+
+.dark .omnigrid-slot-top,
+.dark .omnigrid-slot-bottom {
+    background: #1a1d1e;
+}
+
+.omnigrid-slot-left,
+.omnigrid-slot-right {
+    flex-shrink: 0;
+    padding: 0 8px;
+    background: #f4f7fb;
+    align-self: stretch;
+}
+
+.dark .omnigrid-slot-left,
+.dark .omnigrid-slot-right {
+    background: #1a1d1e;
+}
+
+.omnigrid-slot-item-group {
+    display: flex;
+    gap: 8px;
+}
+
+.omnigrid-slot-pos-center {
+    justify-content: center;
+}
+
+.omnigrid-slot-pos-end {
+    justify-content: flex-end;
+}
+
+.omnigrid-slot-item {
+    display: flex;
+    align-items: center;
+}
+
+/* Headless pager (PaginationPlugin). */
+.omnigrid-pagination {
+    align-items: center;
+    display: flex;
+    gap: 8px;
+}
+
+.omnigrid-pagination-btn {
+    background: #ffffff;
+    border: 1px solid #c5cfdd;
+    border-radius: 4px;
+    color: #334155;
+    cursor: pointer;
+    font-size: 12px;
+    line-height: 1.4;
+    padding: 3px 10px;
+}
+
+.omnigrid-pagination-btn:disabled {
+    cursor: default;
+    opacity: 0.5;
+}
+
+.dark .omnigrid-pagination-btn {
+    background: #2a2f30;
+    border-color: #3a3f40;
+    color: #e8ebe9;
+}
+
+.dark [role="columnheader"] {
+    background: #2a2f30;
+    border-bottom: 1px solid #3a3f40;
+    border-right: 1px solid #3a3f40;
+    color: #e8ebe9;
+}
+
+.omnigrid-sort-indicator {
+    font-size: 10px;
+}
+
+.omnigrid-header-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.omnigrid-header-tools {
+    align-items: center;
+    display: flex;
+    flex-shrink: 0;
+    gap: 6px;
+    margin-left: auto;
+}
+
+.omnigrid-header-cell[data-sortable="true"] {
+    cursor: pointer;
+}
+
+.omnigrid:not(:has(.omnigrid-pinned-right)) .omnigrid-scrollable [role="columnheader"]:last-child,
+.omnigrid-pinned-right [role="columnheader"]:last-child {
+    border-right: 0;
+}

package/dist/index.js

@@ -0,0 +1 @@
+import "./index.css";

package/package.json

@@ -1,6 +1,18 @@
-{
-  "name": "@omnigrid/style",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+{
+  "name": "@omnigrid/style",
+  "version": "0.1.0",
+  "description": "Shared styles for OmniGrid",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": "./dist/index.js",
+    "./index.css": "./dist/index.css"
+  },
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "prepublishOnly": "npm run build"
+  }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.