@incursa/ui-kit 0.2.1

package/AI-AGENT-INSTRUCTIONS.md

@@ -0,0 +1,82 @@
+# AI Agent Instructions
+
+Use this package as a reusable data-heavy UI baseline.
+
+Repository brand assets live under `assets/brand/`. Prefer those local files when adding logos, favicons, or README imagery.
+
+## Fast path
+
+- Prefer `dist/inc-design-language.css` if the target app already has working HTML and only needs the look.
+- Prefer `src/inc-design-language.scss` if you need to tune tokens, density, or Bootstrap defaults.
+- Prefer `dist/inc-design-language.js` only for stateful UI primitives such as menus, tabs, or collapsible sections.
+- Prefer `reference.html` when you need copy/paste starter markup for a supported control before composing a full page.
+- Prefer `states.html`, `forms-and-validation.html`, and `data-grid-advanced.html` when the target screen is workflow-heavy and you need realistic composition patterns, not isolated snippets.
+
+## Naming rules
+
+- Use the `inc-` prefix for all public classes.
+- Keep the existing BEM pattern:
+  `inc-block`, `inc-block__element`, `inc-block--modifier`.
+
+## Core primitives
+
+- Tables:
+  Start with `inc-table` and add cell modifiers such as `inc-table__cell--numeric`, `inc-table__cell--action`, `inc-table__cell--min`, and `inc-table__cell--expand`.
+- Buttons:
+  Use `inc-btn` plus a semantic modifier such as `inc-btn--primary`, `inc-btn--secondary`, or `inc-btn--danger`.
+  Use `inc-btn--micro` for in-row or in-cell actions.
+- Forms:
+  Use `inc-form--inline` for toolbar/filter layouts, wrap each label/control pair in `inc-form__field` or `inc-form__group`, and use `inc-input-group` for composed inputs.
+  Use `inc-form__hint`, `inc-form__feedback--error`, `inc-form__feedback--success`, and `inc-form__error-summary` for validation.
+- Filter bars:
+  Use `inc-filter-bar`, `inc-filter-chip`, and `inc-bulk-bar` for search-heavy or multi-select operator screens.
+- Cards and shells:
+  Use `inc-card` for plain cards and `inc-header-body inc-header-body--card` for titled sections with actions.
+- App layout:
+  Use `inc-app-shell`, `inc-footer-bar`, `inc-navbar`, `inc-breadcrumb`, `inc-nav-triad`, and `inc-sidebar-menu` when you need an opinionated application frame instead of isolated components.
+- States and workflow:
+  Use `inc-state-panel`, `inc-permission-banner`, `inc-toast-card`, `inc-timeline`, `inc-file-dropzone`, `inc-file-row`, and `inc-key-value` for non-happy-path and detail-heavy B2B flows.
+- Interaction:
+  Use `data-inc-toggle="menu"`, `data-inc-toggle="tab"`, and `data-inc-toggle="collapse"` with `data-inc-target="#target-id"` when you want the optional vanilla-JS helper to wire behavior.
+- Native interaction:
+  Use `details.inc-disclosure` for section stacks, `details.inc-native-menu` for lightweight menus, and `dialog.inc-native-dialog` for native modal surfaces.
+- Status:
+  Use `inc-badge--success|warning|danger|info` for compact status signals.
+- Metrics:
+  Use `inc-summary-overview` and `inc-summary-block` for dashboard and header metrics.
+
+## Customization order
+
+1. Change fonts and colors in `src/_inc-theme.scss`.
+2. Use `src/_inc-tokens.scss` only for deeper token or Bootstrap-level tuning.
+3. Rebuild the CSS.
+4. Only add new component rules after checking whether an existing `inc-*` block already fits.
+
+## Packaging
+
+- Use `npm run build` to rebuild distributables.
+- Use `npm pack` or `npm run package` to produce a local installable tarball.
+- The repository is licensed under Apache 2.0.
+- The compiled `dist/inc-design-language.css` already includes the Bootstrap layer it was built from, so consumers do not need Bootstrap CSS at runtime when they use the compiled assets.
+- The source `src/inc-design-language.scss` does require Bootstrap Sass at build time because it imports `bootstrap/scss/bootstrap`.
+
+## Guardrails
+
+- Keep the typography stack split:
+  sans for UI text, mono for data.
+- Preserve explicit alignment classes for numeric table data.
+- Avoid adding product-specific shell/background styles to this package.
+- Keep new components generic enough to drop into another admin/data app.
+- If you add a new block, prefer names like `inc-filter-bar`, `inc-stat-card`, or `inc-data-toolbar` over feature-specific names.
+- Keep border radius consistent across panels, tabs, tables, and cards unless there is a deliberate reason to differentiate them.
+- Prefer native browser behavior first for disclosures and dialogs when it fits the product; use the helper only when the Bootstrap-like component contract needs custom state handling.
+
+## Build
+
+If Bootstrap and Sass are installed in the package folder:
+
+```bash
+npm run build
+```
+
+If you are compiling from somewhere else, make sure Sass can resolve `bootstrap/scss/*`.

package/LICENSE

@@ -0,0 +1,159 @@
+Apache License
+Version 2.0, January 2004
+http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+"License" shall mean the terms and conditions for use, reproduction, and
+distribution as defined by Sections 1 through 9 of this document.
+
+"Licensor" shall mean the copyright owner or entity authorized by the copyright
+owner that is granting the License.
+
+"Legal Entity" shall mean the union of the acting entity and all other entities
+that control, are controlled by, or are under common control with that entity.
+For the purposes of this definition, "control" means (i) the power, direct or
+indirect, to cause the direction or management of such entity, whether by
+contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the
+outstanding shares, or (iii) beneficial ownership of such entity.
+
+"You" (or "Your") shall mean an individual or Legal Entity exercising
+permissions granted by this License.
+
+"Source" form shall mean the preferred form for making modifications, including
+but not limited to software source code, documentation source, and configuration
+files.
+
+"Object" form shall mean any form resulting from mechanical transformation or
+translation of a Source form, including but not limited to compiled object code,
+generated documentation, and conversions to other media types.
+
+"Work" shall mean the work of authorship, whether in Source or Object form, made
+available under the License, as indicated by a copyright notice that is included
+in or attached to the work (an example is provided in the Appendix below).
+
+"Derivative Works" shall mean any work, whether in Source or Object form, that
+is based on (or derived from) the Work and for which the editorial revisions,
+annotations, elaborations, or other modifications represent, as a whole, an
+original work of authorship. For the purposes of this License, Derivative Works
+shall not include works that remain separable from, or merely link (or bind by
+name) to the interfaces of, the Work and Derivative Works thereof.
+
+"Contribution" shall mean any work of authorship, including the original version
+of the Work and any modifications or additions to that Work or Derivative Works
+thereof, that is intentionally submitted to Licensor for inclusion in the Work
+by the copyright owner or by an individual or Legal Entity authorized to submit
+on behalf of the copyright owner. For the purposes of this definition,
+"submitted" means any form of electronic, verbal, or written communication sent
+to the Licensor or its representatives, including but not limited to
+communication on electronic mailing lists, source code control systems, and
+issue tracking systems that are managed by, or on behalf of, the Licensor for
+the purpose of discussing and improving the Work, but excluding communication
+that is conspicuously marked or otherwise designated in writing by the copyright
+owner as "Not a Contribution."
+
+"Contributor" shall mean Licensor and any individual or Legal Entity on behalf
+of whom a Contribution has been received by Licensor and subsequently
+incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of this
+License, each Contributor hereby grants to You a perpetual, worldwide,
+non-exclusive, no-charge, royalty-free, irrevocable copyright license to
+reproduce, prepare Derivative Works of, publicly display, publicly perform,
+sublicense, and distribute the Work and such Derivative Works in Source or
+Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of this License,
+each Contributor hereby grants to You a perpetual, worldwide, non-exclusive,
+no-charge, royalty-free, irrevocable (except as stated in this section) patent
+license to make, have made, use, offer to sell, sell, import, and otherwise
+transfer the Work, where such license applies only to those patent claims
+licensable by such Contributor that are necessarily infringed by their
+Contribution(s) alone or by combination of their Contribution(s) with the Work
+to which such Contribution(s) was submitted. If You institute patent litigation
+against any entity (including a cross-claim or counterclaim in a lawsuit)
+alleging that the Work or a Contribution incorporated within the Work constitutes
+direct or contributory patent infringement, then any patent licenses granted to
+You under this License for that Work shall terminate as of the date such
+litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the Work or
+Derivative Works thereof in any medium, with or without modifications, and in
+Source or Object form, provided that You meet the following conditions:
+
+(a) You must give any other recipients of the Work or Derivative Works a copy of
+this License; and
+
+(b) You must cause any modified files to carry prominent notices stating that
+You changed the files; and
+
+(c) You must retain, in the Source form of any Derivative Works that You
+distribute, all copyright, patent, trademark, and attribution notices from the
+Source form of the Work, excluding those notices that do not pertain to any part
+of the Derivative Works; and
+
+(d) If the Work includes a "NOTICE" text file as part of its distribution, then
+any Derivative Works that You distribute must include a readable copy of the
+attribution notices contained within such NOTICE file, excluding those notices
+that do not pertain to any part of the Derivative Works, in at least one of the
+following places: within a NOTICE text file distributed as part of the
+Derivative Works; within the Source form or documentation, if provided along
+with the Derivative Works; or, within a display generated by the Derivative
+Works, if and wherever such third-party notices normally appear. The contents of
+the NOTICE file are for informational purposes only and do not modify the
+License. You may add Your own attribution notices within Derivative Works that
+You distribute, alongside or as an addendum to the NOTICE text from the Work,
+provided that such additional attribution notices cannot be construed as
+modifying the License.
+
+You may add Your own copyright statement to Your modifications and may provide
+additional or different license terms and conditions for use, reproduction, or
+distribution of Your modifications, or for any such Derivative Works as a whole,
+provided Your use, reproduction, and distribution of the Work otherwise complies
+with the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise, any
+Contribution intentionally submitted for inclusion in the Work by You to the
+Licensor shall be under the terms and conditions of this License, without any
+additional terms or conditions. Notwithstanding the above, nothing herein shall
+supersede or modify the terms of any separate license agreement you may have
+executed with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade names,
+trademarks, service marks, or product names of the Licensor, except as required
+for reasonable and customary use in describing the origin of the Work and
+reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or agreed to in
+writing, Licensor provides the Work (and each Contributor provides its
+Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied, including, without limitation, any warranties
+or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+PARTICULAR PURPOSE. You are solely responsible for determining the
+appropriateness of using or redistributing the Work and assume any risks
+associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability. In no event and under no legal theory, whether in
+tort (including negligence), contract, or otherwise, unless required by
+applicable law (such as deliberate and grossly negligent acts) or agreed to in
+writing, shall any Contributor be liable to You for damages, including any
+direct, indirect, special, incidental, or consequential damages of any
+character arising as a result of this License or out of the use or inability to
+use the Work (including but not limited to damages for loss of goodwill, work
+stoppage, computer failure or malfunction, or any and all other commercial
+damages or losses), even if such Contributor has been advised of the possibility
+of such damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing the Work or
+Derivative Works thereof, You may choose to offer, and charge a fee for,
+acceptance of support, warranty, indemnity, or other liability obligations
+and/or rights consistent with this License. However, in accepting such
+obligations, You may act only on Your own behalf and on Your sole responsibility,
+not on behalf of any other Contributor, and only if You agree to indemnify,
+defend, and hold each Contributor harmless for any liability incurred by, or
+claims asserted against, such Contributor by reason of your accepting any such
+warranty or additional liability.
+
+END OF TERMS AND CONDITIONS

package/NOTICE

@@ -0,0 +1,4 @@
+Incursa UI Kit
+Copyright 2026 Incursa
+
+This product includes software developed and maintained by Incursa.

package/README.md

@@ -0,0 +1,231 @@
+<p align="center">
+  <img src="./assets/brand/logo_color.svg" alt="Incursa UI Kit" width="360">
+</p>
+
+# Incursa UI Kit
+
+[![CI](https://github.com/incursa/ui-kit/actions/workflows/ci.yml/badge.svg)](https://github.com/incursa/ui-kit/actions/workflows/ci.yml)
+[![Pages](https://github.com/incursa/ui-kit/actions/workflows/pages.yml/badge.svg)](https://github.com/incursa/ui-kit/actions/workflows/pages.yml)
+[![npm publish](https://github.com/incursa/ui-kit/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/incursa/ui-kit/actions/workflows/npm-publish.yml)
+
+This folder contains a distilled, reusable UI kit for data-heavy business applications. The goal is to keep the recurring visual patterns that define the UI language and expose them consistently through the `inc-*` class surface.
+
+Licensed under Apache 2.0.
+
+## What was kept
+
+- Bootstrap theming overrides for colors, typography, spacing, borders, inputs, cards, tabs, and tables.
+- Dense but readable table styling with strong teal headers and mono-friendly numeric cells.
+- Compact action buttons and inline forms that work well inside grids and table rows.
+- Card, section-shell, summary-block, vertical-list, and layout primitives used across admin screens.
+- Status-oriented badges and alerts with soft backgrounds and stronger foreground/border cues.
+- Validation states, error summaries, filter chips, and dense toolbar patterns for search-heavy screens.
+- Operational states such as empty, no-results, loading, error, permission, lock, toast, and activity timeline surfaces.
+- Bulk-action, sticky-header, and row-state table patterns for operator-facing grids.
+- File/document dropzones, file rows, read-only key-value grids, and drawer-style side panels.
+- A small overlay/navigation layer for tabs, pagination, dropdown actions, modals, and offcanvas panels.
+- Opinionated app-shell pieces for navbar/topbar, breadcrumb/nav-triad, sticky footer, user menu, and common two/three-column page layouts.
+
+## What was intentionally left out
+
+- App-specific backgrounds, admin footer behavior, report CSS, print CSS, and vendor assets.
+- App-specific background art and report/print-only styling.
+- Feature-specific one-off classes that do not generalize cleanly across products.
+
+## Files
+
+- `assets/brand/`
+  Repository brand assets for GitHub, docs, and future package-site usage.
+- `src/_inc-tokens.scss`
+  Bootstrap-facing theme tokens and override variables.
+- `src/_inc-theme.scss`
+  Dedicated brand-facing variables for fonts, palette, semantic surfaces, and text colors.
+- `src/inc-design-language.scss`
+  Main source entrypoint for the `inc-*` class surface.
+- `dist/inc-design-language.css`
+  Compiled standalone CSS output.
+- `dist/inc-design-language.js`
+  Optional vanilla-JS helper for menus, tabs, and collapsible sections.
+- `index.html`
+  Showcase hub for the included example pages.
+- `demo.html`
+  Dashboard-style preview of the extracted patterns.
+- `work-queue.html`
+  Sidebar and table-heavy queue example.
+- `record-detail.html`
+  Three-column detail example with action rail.
+- `native-patterns.html`
+  Native-first details/menu/dialog example.
+- `reference.html`
+  Copy/paste catalog for the standard controls and markup patterns.
+- `states.html`
+  Empty, no-results, loading, error, permission, timeline, file, and notification patterns.
+- `forms-and-validation.html`
+  Validation, error-summary, filter-bar, chip, and read-only/edit form patterns.
+- `data-grid-advanced.html`
+  Sticky-header table, bulk selection, row states, busy buttons, and side drawer pattern.
+- `showcase.css`
+  Small demo-only helper stylesheet for the static examples.
+- `AI-AGENT-INSTRUCTIONS.md`
+  Short operational guidance for an AI agent or another engineer.
+
+## Naming
+
+The reusable public class surface uses the `inc-*` prefix.
+
+Examples:
+
+- `inc-table`
+- `inc-btn`
+- `inc-card`
+- `inc-header-body`
+- `inc-summary-block`
+
+The BEM/modifier structure stays consistent across the package, for example `inc-table__cell--numeric` or `inc-btn--primary`.
+
+## Design language summary
+
+- Typography: IBM Plex Sans for UI copy and IBM Plex Mono for data, amounts, and identifiers.
+- Density: tighter than consumer-product UI, but not cramped; compact forms and small action buttons are first-class.
+- Surfaces: mostly white and light neutral surfaces with restrained borders and low shadow usage.
+- Accent: indigo is the primary brand/action color, with amber used as a brighter warning/highlight accent.
+- Status communication: success/warning/error use pale backgrounds with darker foreground and border colors instead of pure solid fills.
+- Tables first: headers are high-contrast, numeric alignment is explicit, and responsive table wrappers are part of the default system.
+- Shell aware: the package now includes app-shell, breadcrumb, nav-triad, navbar, footer-bar, and user-menu primitives so page layout is part of the language, not an afterthought.
+- Layout aware: sidebar menus, inline form fields, and multi-column page examples are included so common admin-page composition is demonstrated directly.
+- Workflow aware: validation, filter bars, bulk action bars, audit timelines, and file-review surfaces are part of the package now because those patterns recur constantly in B2B products.
+- Native capable: the package now also includes styled `<details>` disclosures, a native summary-based menu, and a `<dialog>` surface so you can choose browser primitives when they fit better than helper-managed components.
+
+## CSS-only vs JS-assisted
+
+- CSS-only/native behavior is enough for layout, cards, tables, buttons, alerts, form fields, badges, breadcrumbs, sticky footer, and most surface styling.
+- Stateful controls still need behavior:
+  tabs, collapsible sections, menus/dropdowns, modals, offcanvas panels, dismissible alerts, and toasts.
+- This package now includes an optional dependency-free helper at `dist/inc-design-language.js` for:
+  user-menu dropdowns, tab switching, and collapse/accordion toggles.
+- This package also includes native-styled patterns for:
+  `details.inc-disclosure`, `details.inc-native-menu`, and `dialog.inc-native-dialog`.
+- If you prefer native HTML behavior where possible, use browser primitives like `<details>` and `<dialog>` for product-specific implementations. The helper exists for places where the design language is intentionally Bootstrap-like and needs matching interaction behavior.
+
+## Use it quickly
+
+If you just want the look in another app:
+
+1. Copy `dist/inc-design-language.css`.
+2. If you need interactive tabs/menus/collapses, also copy `dist/inc-design-language.js`.
+3. Load the CSS after your reset or base stylesheet.
+4. Load the optional JS near the end of the page.
+5. Use the `inc-*` classes shown in `reference.html` for direct copy/paste control markup.
+6. Check `states.html`, `forms-and-validation.html`, and `data-grid-advanced.html` for the workflow-heavy patterns that do not read well as isolated snippets.
+7. Use `demo.html`, `work-queue.html`, `record-detail.html`, and `native-patterns.html` for fuller page composition.
+
+## Use it as a package
+
+This repository is shaped as a normal npm package:
+
+- `main`, `style`, and `sass` entry points are set.
+- `files` limits packaged output to the reusable source and dist assets.
+- `npm pack` produces a local tarball.
+- `publishConfig.access` is set for public scoped publishing.
+- GitHub Actions is set up for npm Trusted Publishing on release.
+
+Typical flow:
+
+```bash
+npm install
+npm run build
+npm pack
+```
+
+Then in the consuming app:
+
+```bash
+npm install ../path-to-tarball/incursa-ui-kit-0.2.1.tgz
+```
+
+Or, while iterating locally:
+
+```bash
+npm install ../path-to-styles-folder
+```
+
+If you publish it publicly:
+
+```bash
+npm install @incursa/ui-kit
+```
+
+Import either:
+
+```js
+import "@incursa/ui-kit/dist/inc-design-language.css";
+```
+
+or, if you want to own the theme variables:
+
+```scss
+@import "@incursa/ui-kit/src/_inc-theme";
+@import "@incursa/ui-kit/src/inc-design-language";
+```
+
+## How It Fits Into A Razor Or ASP.NET Core App
+
+There are two supported ways to use it.
+
+1. Use the compiled assets.
+
+- Add `dist/inc-design-language.css` to your site and optionally `dist/inc-design-language.js`.
+- This is the simplest path.
+- You do not need Bootstrap CSS at runtime because the compiled CSS already includes the Bootstrap layer it was built on.
+- You do not need Bootstrap JS unless your app separately uses Bootstrap's own JavaScript components.
+
+2. Use the SCSS source.
+
+- Import `src/inc-design-language.scss` into your own Sass pipeline.
+- This path is for when you want to override theme variables or deeper Bootstrap-facing tokens.
+- In this mode you do need Bootstrap and Sass available at build time because the source imports `bootstrap/scss/bootstrap`.
+
+Practical recommendation for a .NET Razor Pages or MVC app:
+
+- If you just want the finished look, copy or install the package and reference `dist/inc-design-language.css` from your layout.
+- Add `dist/inc-design-language.js` only if you want the optional `inc-*` menu/tab/collapse helper behavior.
+- Use the native `<details>` and `<dialog>` patterns when you want less JavaScript.
+- Use the SCSS source path only if you want this package to become part of your app's own asset build and theme pipeline.
+
+## GitHub repository
+
+This repository is set up for:
+
+- CI on pushes and pull requests via `.github/workflows/ci.yml`
+- GitHub Pages showcase deployment from `main` via `.github/workflows/pages.yml`
+- npm Trusted Publishing on GitHub Release publication via `.github/workflows/npm-publish.yml`
+- Public release hygiene through `LICENSE`, `CHANGELOG.md`, `CONTRIBUTING.md`, and `RELEASING.md`
+- Brand assets in `assets/brand/` so README and future docs do not depend on external image hosting
+
+## Use it as source
+
+If you want to keep editing it:
+
+1. Install Bootstrap 5.3 and Sass in the consuming project.
+2. Copy the `src/` folder.
+3. Import `src/inc-design-language.scss`.
+4. Edit `src/_inc-theme.scss` for the fonts and colors you want.
+5. Use `src/_inc-tokens.scss` only when you need deeper spacing, radius, shadow, or Bootstrap-level tuning.
+
+Example:
+
+```scss
+$inc-brand-700: #0f5f73;
+$inc-brand-800: #0a4958;
+$inc-font-family-sans: "Aptos", "Segoe UI", sans-serif;
+
+@import "./src/inc-design-language";
+```
+
+## Suggested next extensions
+
+- Add a spacing/visibility utility layer if you want the package to stand more independently from Bootstrap utilities.
+- Split tables into clearer grid families if products start diverging:
+  base, compact review grid, analytics grid, and spreadsheet-like grid.
+- Add modal/offcanvas examples that use the same drawer and validation primitives shown in the new pages.
+- Replace the `@extend`-heavy wrappers with mixins or direct declarations if you want less Bootstrap coupling over time.