@incursa/ui-kit 1.5.0 → 1.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incursa/ui-kit",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "private": false,
   "description": "Reusable UI kit for data-heavy business applications.",
   "keywords": [
@@ -25,13 +25,13 @@
   "type": "commonjs",
   "exports": {
     ".": {
-      "default": "./dist/inc-design-language.js",
       "style": "./dist/inc-design-language.css",
-      "sass": "./src/inc-design-language.scss"
+      "sass": "./src/inc-design-language.scss",
+      "default": "./dist/inc-design-language.js"
     },
     "./web-components": {
-      "default": "./dist/web-components/index.js",
-      "style": "./dist/web-components/style.css"
+      "style": "./dist/web-components/style.css",
+      "default": "./dist/web-components/index.js"
     },
     "./web-components/style.css": "./dist/web-components/style.css",
     "./dist/inc-design-language.css": "./dist/inc-design-language.css",
@@ -54,11 +54,15 @@
     "build:css:min": "sass --load-path=node_modules --quiet-deps --silence-deprecation=import src/inc-design-language.scss dist/inc-design-language.min.css --style=compressed",
     "build:js": "node -e \"require('fs').copyFileSync('src/inc-design-language.js', 'dist/inc-design-language.js')\"",
     "build:wc": "node scripts/build-web-components.mjs",
-    "build": "npm run build:css && npm run build:css:min && npm run build:js && npm run build:wc",
+    "build:mcp:manifests": "node scripts/generate-mcp.mjs",
+    "build:mcp": "node scripts/build-mcp.mjs",
+    "build": "npm run build:css && npm run build:css:min && npm run build:js && npm run build:wc && npm run build:mcp",
     "test:browser:install": "playwright install chromium",
     "test:browser": "playwright test",
+    "test:mcp": "node --test tests/mcp/transport.test.mjs tests/mcp/search.test.mjs tests/mcp/installation.test.mjs tests/mcp/markup.test.mjs tests/mcp/freshness.test.mjs",
     "smoke": "node scripts/verify-ui-kit.mjs",
-    "verify": "npm run build && npm run smoke && npm pack --dry-run",
+    "verify": "npm run smoke && npm run build && npm run test:mcp && npm pack --dry-run",
+    "deploy:mcp": "npm run build:mcp && wrangler deploy --config wrangler.toml",
     "preversion": "npm run verify",
     "release:patch": "node scripts/assert-changelog-version.mjs patch && npm version patch",
     "release:minor": "node scripts/assert-changelog-version.mjs minor && npm version minor",
@@ -67,10 +71,17 @@
     "package": "npm run build && npm run smoke && npm run pack:tarball"
   },
   "devDependencies": {
+    "@modelcontextprotocol/sdk": "^1.29.0",
     "@playwright/test": "^1.58.2",
     "bootstrap": "^5.3.3",
+    "esbuild": "^0.27.4",
     "linkedom": "^0.18.12",
-    "sass": "^1.93.2"
+    "sass": "^1.98.0",
+    "wrangler": "^4.79.0",
+    "zod": "^4.3.6"
+  },
+  "overrides": {
+    "picomatch": "4.0.4"
   },
   "publishConfig": {
     "access": "public"

package/src/inc-design-language.scss

@@ -33,10 +33,14 @@
     --inc-surface-primary-rgb: var(--bs-body-bg-rgb);
     --inc-surface-secondary-rgb: var(--bs-secondary-bg-rgb);
     --inc-surface-muted-rgb: var(--bs-tertiary-bg-rgb);
+    --inc-surface-panel: rgba(var(--inc-surface-secondary-rgb), 0.56);
+    --inc-surface-panel-cap: rgba(var(--inc-surface-secondary-rgb), 0.86);
     --inc-text-primary-rgb: var(--bs-body-color-rgb);
     --inc-text-secondary-rgb: var(--bs-secondary-color-rgb);
     --inc-text-muted-rgb: var(--bs-tertiary-color-rgb);
     --inc-shadow-rgb: var(--bs-black-rgb);
+    --inc-surface-panel-shadow: 0 0.0625rem 0.125rem rgba(var(--inc-shadow-rgb), 0.05), 0 0.5rem 1.5rem rgba(var(--inc-shadow-rgb), 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.58);
+    --inc-surface-panel-shadow-raised: 0 0.125rem 0.25rem rgba(var(--inc-shadow-rgb), 0.06), 0 0.875rem 2rem rgba(var(--inc-shadow-rgb), 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.62);
 }
 
 [data-bs-theme="dark"] {
@@ -52,6 +56,10 @@
     --inc-surface-contrast-text: var(--bs-dark);
     --inc-surface-contrast-text-rgb: 18, 19, 22;
     --inc-surface-contrast-border: var(--bs-gray-400);
+    --inc-surface-panel: rgba(var(--inc-surface-secondary-rgb), 0.72);
+    --inc-surface-panel-cap: rgba(var(--inc-surface-secondary-rgb), 0.9);
+    --inc-surface-panel-shadow: 0 0.0625rem 0.125rem rgba(var(--inc-shadow-rgb), 0.22), 0 0.75rem 1.75rem rgba(var(--inc-shadow-rgb), 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.06);
+    --inc-surface-panel-shadow-raised: 0 0.125rem 0.25rem rgba(var(--inc-shadow-rgb), 0.28), 0 1rem 2.25rem rgba(var(--inc-shadow-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
     --bs-success-bg-subtle: rgba(0, 151, 67, 0.18);
     --bs-success-border-subtle: rgb(72, 171, 109);
     --bs-form-valid-color: rgb(122, 214, 154);
@@ -538,6 +546,17 @@
         @extend .btn-outline-info;
     }
 
+    &--outline-primary,
+    &--outline-secondary,
+    &--outline-success,
+    &--outline-danger,
+    &--outline-warning,
+    &--outline-info {
+        --bs-btn-bg: rgba(var(--inc-surface-secondary-rgb), 0.74);
+        --bs-btn-disabled-bg: rgba(var(--inc-surface-secondary-rgb), 0.54);
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(var(--inc-shadow-rgb), 0.06);
+    }
+
     &--sm {
         @extend .btn-sm;
     }
@@ -603,6 +622,15 @@
 
 .inc-badge {
     @extend .badge;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    background: rgba(var(--inc-surface-secondary-rgb), 0.88);
+    color: var(--inc-text-secondary);
+    border: 1px solid var(--inc-border-subtle);
+    border-radius: 0.5rem;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48), 0 1px 2px rgba(var(--inc-shadow-rgb), 0.06);
+    font-weight: 600;
 
     &--primary {
         @extend .bg-primary;
@@ -643,6 +671,9 @@
 
 .inc-alert {
     @extend .alert;
+    border-radius: $inc-radius-md;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 0.375rem 1rem rgba(var(--inc-shadow-rgb), 0.05);
+    background-clip: padding-box;
 
     &:empty {
         display: none;
@@ -791,15 +822,19 @@
         padding: 1rem 1rem 0.875rem;
         border: 1px solid var(--inc-border-subtle);
         border-radius: $inc-radius-md;
-        background: var(--inc-surface-secondary);
+        background: var(--inc-surface-panel);
+        box-shadow: var(--inc-surface-panel-shadow);
     }
 
     &__legend {
         float: none;
         width: auto;
         margin: 0;
-        padding: 0 0.375rem;
-        background-color: var(--inc-surface-secondary);
+        padding: 0.125rem 0.625rem;
+        border: 1px solid var(--inc-border-subtle);
+        border-radius: 999px;
+        background-color: var(--inc-surface-panel-cap);
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
         color: var(--inc-text-primary);
         font-size: 0.8125rem;
         font-weight: 600;
@@ -823,6 +858,10 @@
         align-items: center;
         gap: 0.5rem;
         min-width: 0;
+        padding: 0.875rem 1rem;
+        border: 1px solid var(--inc-border-subtle);
+        border-radius: $inc-radius-md;
+        background: var(--inc-surface-secondary);
 
         > .inc-form__label {
             margin-bottom: 0;
@@ -898,6 +937,10 @@
 
         .inc-form__field {
             flex: 0 1 auto;
+            padding: 0;
+            border: 0;
+            border-radius: 0;
+            background: transparent;
         }
 
         .inc-form__field--grow,
@@ -1024,12 +1067,37 @@
 
 .inc-readonly-field {
     @extend .form-control;
-    background-color: $gray-200;
-    cursor: default;
     display: flex;
-    align-items: center;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.125rem;
+    padding: 0.875rem 1rem;
+    border: 1px solid var(--inc-border-subtle);
+    border-radius: $inc-radius-md;
+    background: var(--inc-surface-secondary);
+    color: var(--inc-text-primary);
+    cursor: default;
     -webkit-user-select: none;
     user-select: none;
+
+    > [part~="label"] {
+        font-size: 0.75rem;
+        font-weight: 600;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        color: var(--inc-text-muted);
+    }
+
+    > [part~="value"] {
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: var(--inc-text-primary);
+    }
+
+    > [part~="meta"] {
+        font-size: 0.75rem;
+        color: var(--inc-text-muted);
+    }
 }
 
 .inc-empty-state {
@@ -1041,19 +1109,31 @@
     padding: $spacer * 2 $spacer * 1.5;
     border: $border-width solid var(--inc-border-subtle);
     border-radius: $inc-radius-panel;
-    background-color: var(--inc-surface-secondary);
+    background: linear-gradient(180deg, var(--inc-surface-panel-cap), rgba(var(--inc-surface-primary-rgb), 0.96));
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
     color: var(--inc-text-primary);
     min-height: 21.875rem;
 
     &__content {
         max-width: 32.5rem;
         width: 100%;
+        padding: 1rem;
+        border-radius: $inc-radius-md;
     }
 
     &__icon {
+        width: 4.5rem;
+        height: 4.5rem;
+        margin: 0 auto $spacer * 1.5;
+        border: 1px solid var(--inc-border-subtle);
+        border-radius: 1.25rem;
+        background: rgba(var(--inc-surface-secondary-rgb), 0.82);
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), 0 0.375rem 1rem rgba(var(--inc-shadow-rgb), 0.04);
         font-size: $font-size-base * 3.5;
-        margin-bottom: $spacer * 1.5;
         color: var(--inc-text-muted);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
     }
 
     &__form {
@@ -1132,13 +1212,16 @@
 .inc-card {
     @extend .card;
 
-    --bs-card-bg: var(--inc-surface-primary);
+    --bs-card-bg: var(--inc-surface-panel);
     --bs-card-color: var(--inc-text-primary);
     --bs-card-title-color: var(--inc-text-primary);
     --bs-card-subtitle-color: var(--inc-text-muted);
     --bs-card-border-color: var(--inc-border-subtle);
-    --bs-card-cap-bg: var(--inc-surface-secondary);
+    --bs-card-cap-bg: var(--inc-surface-panel-cap);
     --bs-card-cap-color: var(--inc-text-primary);
+    background: var(--bs-card-bg);
+    box-shadow: var(--inc-surface-panel-shadow);
+    transition: box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
 
     &__header {
         @extend .card-header;
@@ -1191,6 +1274,10 @@
     &__img-overlay {
         @extend .card-img-overlay;
     }
+
+    &--elevated {
+        box-shadow: var(--inc-surface-panel-shadow-raised);
+    }
 }
 
 .inc-grid {
@@ -1507,16 +1594,19 @@
         border: 1px solid var(--bs-border-color);
         border-radius: var(--bs-border-radius);
         overflow: hidden;
+        background-color: var(--inc-surface-panel);
+        box-shadow: var(--inc-surface-panel-shadow);
 
         .inc-header-body__header {
             border-top-left-radius: var(--bs-border-radius);
             border-top-right-radius: var(--bs-border-radius);
+            background-color: var(--inc-surface-panel-cap);
         }
     }
 
     &--panel {
-        background-color: var(--inc-surface-primary);
-        box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 7.5%);
+        background-color: var(--inc-surface-panel);
+        box-shadow: var(--inc-surface-panel-shadow-raised);
         border-radius: var(--bs-border-radius);
 
         .inc-header-body__header {
@@ -1618,14 +1708,15 @@
 }
 
 .inc-summary-block {
-    background-color: var(--inc-surface-primary);
+    background-color: var(--inc-surface-panel);
     border: $border-width solid var(--inc-border-default);
     border-radius: $border-radius;
     padding: $spacer * 1.25;
-    transition: box-shadow 0.2s ease-in-out;
+    box-shadow: var(--inc-surface-panel-shadow);
+    transition: box-shadow 0.18s ease-in-out, background-color 0.18s ease-in-out;
 
     &:hover {
-        box-shadow: $box-shadow-sm;
+        box-shadow: var(--inc-surface-panel-shadow-raised);
     }
 
     &__header {
@@ -2309,6 +2400,8 @@
         list-style: none;
         padding-left: 0;
         margin-bottom: 0;
+        position: relative;
+        z-index: 1;
 
         > li + li {
             margin-left: 0.125rem;
@@ -2323,12 +2416,14 @@
             color: var(--inc-text-secondary);
             border-top-left-radius: $inc-radius-panel;
             border-top-right-radius: $inc-radius-panel;
-            background-color: var(--inc-surface-secondary);
+            background: linear-gradient(180deg, rgba(var(--inc-surface-secondary-rgb), 0.96), rgba(var(--inc-surface-secondary-rgb), 0.82));
             height: 2.5rem;
             text-decoration: none;
             border: 1px solid var(--inc-border-subtle);
             cursor: pointer;
             appearance: none;
+            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(var(--inc-shadow-rgb), 0.06);
+            transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
 
             .inc-tab-icon {
                 color: var(--bs-primary);
@@ -2336,8 +2431,9 @@
 
             &:not(.active):hover {
                 color: var(--inc-text-primary);
-                background-color: var(--inc-surface-muted);
+                background: linear-gradient(180deg, rgba(var(--inc-surface-secondary-rgb), 1), rgba(var(--inc-surface-muted-rgb), 0.9));
                 border-color: var(--inc-border-default);
+                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46), 0 2px 4px rgba(var(--inc-shadow-rgb), 0.07);
 
                 .inc-tab-icon {
                     color: var(--bs-primary);
@@ -2346,24 +2442,27 @@
 
             &.active {
                 color: var(--bs-primary-text-emphasis);
-                background-color: var(--inc-surface-primary);
+                background-color: var(--inc-surface-panel);
                 font-weight: 600;
                 border-color: var(--inc-border-subtle);
-                border-bottom-color: var(--inc-surface-primary);
+                border-bottom-color: var(--inc-surface-panel);
                 position: relative;
                 z-index: 1;
+                box-shadow: var(--inc-surface-panel-shadow-raised);
+                transform: translateY(-1px);
             }
         }
     }
 
     .inc-tab-content {
-        background-color: var(--inc-surface-primary);
+        background: linear-gradient(180deg, var(--inc-surface-panel-cap), rgba(var(--inc-surface-primary-rgb), 0.98));
         border: 1px solid var(--inc-border-subtle);
         padding: 1.5rem;
         border-radius: $inc-radius-panel;
         border-top-left-radius: 0;
         border-top-right-radius: $inc-radius-panel;
         margin-top: -1px;
+        box-shadow: var(--inc-surface-panel-shadow-raised);
     }
 }
 
@@ -3003,9 +3102,9 @@ dialog.inc-native-dialog.inc-native-dialog--drawer .inc-native-dialog__body {
     padding: 0.5rem 0.75rem;
     border: 1px solid var(--inc-border-subtle);
     border-radius: 999px;
-    background: rgba(var(--inc-surface-primary-rgb), 0.96);
+    background: rgba(var(--inc-surface-primary-rgb), 0.92);
     color: var(--inc-text-primary);
-    box-shadow: 0 0.75rem 1.5rem rgba(var(--inc-surface-strong-rgb), 0.12);
+    box-shadow: var(--inc-surface-panel-shadow-raised);
     font-size: 0.75rem;
     line-height: 1.2;
     white-space: nowrap;
@@ -3048,24 +3147,78 @@ dialog.inc-native-dialog.inc-native-dialog--drawer .inc-native-dialog__body {
 
     &__toggle {
         flex: 0 0 auto;
+        width: 1.875rem;
+        height: 1.875rem;
+        padding: 0;
+        border-radius: 999px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--inc-text-primary);
+        border-color: var(--inc-border-default);
+        background: linear-gradient(180deg, rgba(var(--inc-surface-secondary-rgb), 0.96), rgba(var(--inc-surface-primary-rgb), 0.94));
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 1px 2px rgba(var(--inc-shadow-rgb), 0.08);
 
         &.inc-btn {
-            min-height: 1.625rem;
-            padding: 0.2rem 0.55rem;
+            min-height: 1.875rem;
             font-size: 0.6875rem;
             line-height: 1;
         }
     }
 
+    &__toggle-icon {
+        position: relative;
+        display: inline-flex;
+        width: 0.75rem;
+        height: 0.75rem;
+        color: currentColor;
+
+        &::before,
+        &::after {
+            content: "";
+            position: absolute;
+            inset-block: 0.0625rem;
+            width: 0.1875rem;
+            border-radius: 999px;
+            background: currentColor;
+        }
+
+        &::before {
+            left: 0.125rem;
+        }
+
+        &::after {
+            right: 0.125rem;
+        }
+    }
+
     &__toggle-text {
-        display: inline-block;
-        min-width: 3.25rem;
-        text-align: center;
+        @include visually-hidden();
     }
 
     &.is-paused {
         border-color: var(--bs-warning-border-subtle);
         box-shadow: 0 0.9rem 1.75rem rgba(var(--bs-warning-rgb), 0.1);
+
+        .inc-auto-refresh__toggle {
+            color: var(--bs-warning-text-emphasis);
+        }
+
+        .inc-auto-refresh__toggle-icon {
+            width: 0.7rem;
+            height: 0.7rem;
+
+            &::before {
+                inset: 0;
+                width: 100%;
+                background: currentColor;
+                clip-path: polygon(14% 8%, 14% 92%, 86% 50%);
+            }
+
+            &::after {
+                display: none;
+            }
+        }
     }
 
     &.is-loading {
@@ -3163,7 +3316,7 @@ dialog.inc-native-dialog.inc-native-dialog--drawer .inc-native-dialog__body {
     .alert,
     .inc-alert {
         margin-bottom: 0.5rem;
-        box-shadow: $box-shadow-sm;
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 0.375rem 1rem rgba(var(--inc-shadow-rgb), 0.05);
         border-radius: $inc-radius-panel;
         border-width: $border-width;
         padding: 0.75rem 1rem;
@@ -4293,7 +4446,9 @@ body.inc-offcanvas-open {
         border: 1px solid var(--bs-danger-border-subtle);
         border-left: 0.25rem solid var(--bs-danger-text-emphasis);
         border-radius: $inc-radius-md;
-        background: var(--bs-danger-bg-subtle);
+        background: linear-gradient(180deg, rgba(var(--bs-danger-rgb), 0.14), rgba(var(--bs-danger-rgb), 0.1));
+        box-shadow: var(--inc-surface-panel-shadow);
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 0.375rem 1rem rgba(var(--inc-shadow-rgb), 0.05);
 
         &-title {
             margin: 0;
@@ -4318,7 +4473,8 @@ body.inc-offcanvas-open {
     padding: 1rem 1.125rem;
     border: 1px solid var(--inc-border-subtle);
     border-radius: $inc-radius-md;
-    background: var(--inc-surface-primary);
+    background: var(--inc-surface-panel);
+    box-shadow: var(--inc-surface-panel-shadow);
 
     &__main {
         display: flex;
@@ -4363,6 +4519,7 @@ body.inc-offcanvas-open {
     border: 1px solid var(--inc-border-subtle);
     border-radius: 999px;
     background: var(--inc-surface-secondary);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 1px 2px rgba(var(--inc-shadow-rgb), 0.05);
     color: var(--inc-text-primary);
     font-size: 0.75rem;
     font-weight: 600;
@@ -4393,7 +4550,8 @@ body.inc-offcanvas-open {
     padding: 1.5rem;
     border: 1px solid var(--inc-border-subtle);
     border-radius: $inc-radius-md;
-    background: var(--inc-surface-primary);
+    background: var(--inc-surface-panel);
+    box-shadow: var(--inc-surface-panel-shadow);
 
     &__head {
         display: flex;
@@ -4440,11 +4598,11 @@ body.inc-offcanvas-open {
 
     &--results {
         border-style: dashed;
-        background: var(--inc-surface-secondary);
+        background: rgba(var(--inc-surface-secondary-rgb), 0.84);
     }
 
     &--loading {
-        background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.04), var(--inc-surface-primary));
+        background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.05), var(--inc-surface-panel));
     }
 
     &--error {
@@ -4736,11 +4894,11 @@ body.inc-offcanvas-open {
     }
 
     .inc-form__fieldset {
-        background: var(--inc-surface-secondary);
+        background: var(--inc-surface-panel);
     }
 
     .inc-form__legend {
-        background-color: var(--inc-surface-secondary);
+        background-color: var(--inc-surface-panel-cap);
     }
 
     .inc-form__control.is-invalid,