@unopsitg/ux 21.0.5 → 21.0.20

package/README.md

@@ -40,13 +40,28 @@ Reference library SCSS/Tailwind and copy bundled logos into your app output:
 "styles": [
   "node_modules/@unopsitg/ux/assets/styles.scss",
   "node_modules/@unopsitg/ux/assets/tailwind.css",
+  "node_modules/primeicons/primeicons.css",
   "src/styles.scss"
 ],
 "assets": [
+  { "glob": "**/*", "input": "public" },
   { "glob": "**/*", "input": "node_modules/@unopsitg/ux/assets/opp", "output": "assets/opp" }
 ]
 ```
 
+### Critical: Tailwind content scan
+
+Library components use Tailwind utility classes (`flex`, `items-center`, `gap-2`, `bg-surface-0`, etc.). Tailwind 4 only generates utilities for classes it finds in scanned sources. **You must add a `@source` directive** in your app's `styles.scss` so Tailwind scans the library:
+
+```scss
+/* src/styles.scss */
+@source "../../node_modules/@unopsitg/ux";
+```
+
+Adjust the relative path to match your folder depth. Without this, layout utilities like positioning, spacing, and backgrounds will be missing and the topbar/shell will render incorrectly.
+
+**Verify:** after `ng serve`, check the compiled CSS for `.flex { display: flex }`. If missing, the `@source` path is wrong.
+
 When developing **inside this monorepo**, use paths under `projects/unops-ux/src/assets/` instead of `node_modules`.
 
 ## Tokens

package/assets/_card.scss

@@ -1,11 +1,98 @@
+// ── Card base ──
+// NOTE: `.card` is a layout-level utility class, NOT PrimeNG's `<p-card>`.
+// PrimeNG `<p-card>` is styled via `components.card` in brand-theme.ts.
+
 .card {
+    background: var(--surface-card);
+    padding: 1rem;
+    border: 1px solid var(--p-surface-400);
+    border-radius: 1rem;
+    margin-bottom: 0;
+
+    &:has(.p-panel-collapsed) {
+        cursor: pointer;
+    }
+}
+
+:root[class*='app-dark'] .card {
+    border-color: var(--surface-border);
+}
+
+// Flush variant: removes inner padding and bottom margin for host-level cards
+// (e.g. dashboard widgets embedded in a grid).
+.card-flush {
+    padding: 0;
     margin-bottom: 0;
 }
 
-.layout-card-filled .card{
+// ── Layout fill variants ──
+
+.layout-card-filled .card {
     background: var(--surface-card);
 }
 
-.layout-card-transparent .card{
+.layout-card-transparent .card {
     background: transparent;
 }
+
+// ── Severity variants (mirrors PrimeNG Tag severity naming) ──
+
+.card-primary {
+    background: var(--p-primary-50);
+    border-color: var(--p-primary-500);
+}
+
+.card-info {
+    background: var(--color-blue-50);
+    border-color: var(--color-blue-500);
+}
+
+.card-success {
+    background: var(--color-green-50);
+    border-color: var(--color-green-500);
+}
+
+.card-warn {
+    background: var(--color-orange-50);
+    border-color: var(--color-orange-500);
+}
+
+.card-danger {
+    background: var(--color-red-50);
+    border-color: var(--color-red-500);
+}
+
+.card-accent {
+    border-left-color: var(--color-teal-500);
+}
+
+:root[class*='app-dark'] {
+    .card-primary {
+        background: color-mix(in srgb, var(--p-primary-900) 20%, transparent);
+        border-color: var(--p-primary-800);
+    }
+
+    .card-info {
+        background: color-mix(in srgb, var(--color-blue-900) 20%, transparent);
+        border-color: var(--color-blue-800);
+    }
+
+    .card-success {
+        background: color-mix(in srgb, var(--color-green-900) 20%, transparent);
+        border-color: var(--color-green-800);
+    }
+
+    .card-warn {
+        background: color-mix(in srgb, var(--color-orange-900) 10%, transparent);
+        border-color: var(--color-orange-800);
+    }
+
+    .card-danger {
+        background: color-mix(in srgb, var(--color-red-900) 10%, transparent);
+        border-color: var(--color-red-800);
+    }
+
+    .card-accent {
+        border-left-color: var(--color-teal-400);
+    }
+}

package/assets/_config.scss

@@ -18,7 +18,7 @@
     overflow: hidden;
     cursor: pointer;
     z-index: 999;
-    box-shadow: -0.25rem 0 1rem rgba(0, 0, 0, 0.15);
+    box-shadow: -0.25rem 0 1rem color-mix(in srgb, var(--p-surface-950) 15%, transparent);
 
     &.config-link {
         font-size: 1rem;
@@ -45,8 +45,8 @@
 }
 
 .app-config-button {
-    border: 1px solid var(--border-color);
-    background-color: var(--card-background);
+    border: 1px solid var(--surface-border);
+    background-color: var(--surface-overlay);
     position: relative;
     z-index: 0;
     border-radius: 0px;

package/assets/_content.scss

@@ -41,15 +41,49 @@
     
 }
 .layout-content {
-    padding: 2rem;
+    padding: 2rem 1rem 3.5rem;
     flex: 1 1 auto;
     position: relative;
 
-    @media screen and (min-width: 576px) {
-        padding: 1.5rem;
+    @media screen and (min-width: 780px) {
+        padding: 2rem 3rem 3.5rem;
     }
+}
+
+.layout-content-wrapper:has(ux-detail-layout) {
+    overflow: hidden;
+
+    > .layout-content-wrapper-inside {
+        height: 100%;
+        min-height: 0;
+    }
+
+    .layout-content {
+        flex: 1 1 0;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+        padding: 1rem 1rem 3.5rem;
+
+        @media screen and (min-width: 780px) {
+            padding-inline: 2rem;
+        }
+    }
+
+    .layout-content > router-outlet + * {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+    }
+
+    ux-footer-main {
+        flex-shrink: 0;
 
-    @media screen and (min-width: 992px) {
-        padding: 1.5rem;
+        .footer-inner {
+            @media screen and (min-width: 780px) {
+                padding-inline: 2rem;
+            }
+        }
     }
 }

package/assets/_footer.scss

@@ -1,13 +1,13 @@
 .layout-footer {
     height: 4rem;
-    padding: 1rem;
+    padding: 2rem 1rem;
     display: flex;
     align-items: center;
     justify-content: flex-end;
     text-align: right;
 
-    @media screen and (min-width: 992px) {
-        padding: 2rem;
+    @media screen and (min-width: 780px) {
+        padding: 2rem 3rem;
     }
 
     .footer-copyright {
@@ -15,3 +15,59 @@
         color: var(--text-muted-color);
     }
 }
+
+.ux-footer-main {
+    .footer-desktop {
+        display: none;
+        flex-wrap: nowrap;
+        align-items: center;
+        column-gap: 0.75rem;
+        row-gap: 0.25rem;
+
+        @media screen and (min-width: 1024px) {
+            display: flex;
+        }
+    }
+
+    .footer-mobile {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        column-gap: 1rem;
+        row-gap: 0.25rem;
+
+        @media screen and (min-width: 1024px) {
+            display: none;
+        }
+    }
+
+    .footer-item {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        white-space: nowrap;
+
+        > i {
+            flex-shrink: 0;
+        }
+    }
+
+    .footer-item-content {
+        display: flex;
+        flex-wrap: wrap;
+        align-content: flex-start;
+        column-gap: 0.25rem;
+        row-gap: 0.25rem;
+        line-height: 1.2;
+    }
+
+    .footer-item-wide {
+        display: flex;
+        flex-wrap: wrap;
+        align-content: flex-start;
+        column-gap: 0.25rem;
+        row-gap: 0.25rem;
+        white-space: nowrap;
+        line-height: 1.2;
+    }
+}

package/assets/_main.scss

@@ -10,7 +10,7 @@ body {
     font-family: 'Noto Sans', sans-serif;
     font-weight: 400;
     color: var(--text-color);
-    background-color: var(--surface-ground);
+    background-color: transparent;
     padding: 0;
     margin: 0;
     min-height: 100%;
@@ -18,14 +18,12 @@ body {
     -moz-osx-font-smoothing: grayscale;
 }
 
-@media screen and (min-width: $breakpoint) {
-    :root:not(.app-dark) body {
-        background: linear-gradient(355deg, var(--p-primary-100) 5%, var(--p-surface-100) 50%, var(--p-surface-50) 80%);
-    }
+:root:not(.app-dark) body {
+    background: linear-gradient(355deg, var(--p-primary-100) 5%, var(--p-surface-100) 50%, var(--p-surface-50) 80%);
+}
 
-    .app-dark body {
-        background: linear-gradient(355deg, var(--p-primary-900) 5%, var(--p-surface-900) 60%, var(--p-surface-950) 86%);
-    }
+.app-dark body {
+    background: linear-gradient(355deg, var(--p-primary-900) 5%, var(--p-surface-900) 40%, var(--p-surface-950) 86%);
 }
 
 a {

package/assets/_responsive.scss

@@ -74,6 +74,17 @@
             display: none;
         }
 
+        .topbar-main {
+            flex: 1;
+            min-width: 0;
+            padding-left: 0;
+            justify-content: flex-end;
+        }
+
+        .topbar-main .layout-breadcrumb {
+            display: none;
+        }
+
         .topbar-right {
             display: flex;
             align-items: center;
@@ -105,6 +116,7 @@
             justify-content: center;
             width: 2.75rem;
             height: 2.75rem;
+            margin-left: -0.75rem;
             border-radius: 2rem;
             border: none;
             background: transparent;
@@ -162,7 +174,7 @@
     .layout-sidebar {
         position: absolute;
         z-index: 999;
-        box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
+        box-shadow: 0 0 1rem color-mix(in srgb, var(--p-surface-950) 15%, transparent);
         left: 0;
         transform: translateX(-100%);
 
@@ -187,7 +199,7 @@
 
         .layout-mask {
             display: block;
-            animation: fadein var(--layout-section-transition-duration);
+            animation: fade-in var(--transition-duration);
         }
     }
 
@@ -195,7 +207,7 @@
         .search-container {
             width: 90vw;
 
-            @media screen and (min-width: 576px) {
+            @media screen and (min-width: 780px) {
                 width: 75vw;
             }
         }

package/assets/_sass_variables.scss

@@ -1,2 +1,8 @@
-$breakpoint: 992px !default;
-$sidebarShadow: 0px 1px 2px 0px rgba(18, 18, 23, 0.05) !default;
+$breakpoint: 1024px !default;
+$sidebarShadow: 0px 1px 2px 0px color-mix(in srgb, var(--p-surface-950) 5%, transparent) !default;
+$flyoutShadow:
+    0px 56px 16px 0px color-mix(in srgb, var(--p-surface-950) 0%, transparent),
+    0px 36px 14px 0px color-mix(in srgb, var(--p-surface-950) 1%, transparent),
+    0px 20px 12px 0px color-mix(in srgb, var(--p-surface-950) 2%, transparent),
+    0px 9px 9px 0px color-mix(in srgb, var(--p-surface-950) 3%, transparent),
+    0px 2px 5px 0px color-mix(in srgb, var(--p-surface-950) 4%, transparent) !default;

package/assets/_search.scss

@@ -7,9 +7,9 @@
     border-radius: var(--border-radius);
     position: relative;
     box-shadow:
-        0px 11px 15px -7px rgba(0, 0, 0, 0.2),
-        0px 24px 38px 3px rgba(0, 0, 0, 0.14),
-        0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+        0px 11px 15px -7px color-mix(in srgb, var(--p-surface-950) 20%, transparent),
+        0px 24px 38px 3px color-mix(in srgb, var(--p-surface-950) 14%, transparent),
+        0px 9px 46px 8px color-mix(in srgb, var(--p-surface-950) 12%, transparent);
     border: var(--surface-border);
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;

package/assets/_tabs.scss

@@ -0,0 +1,44 @@
+// PrimeUIX tabs have no border-radius token. Apply pill shape to match sidebar
+// menu items (border-radius: 1rem in _sidebar_vertical.scss).
+.p-tab {
+  border-radius: 1.5rem;
+  font-size: var(--font-size-sm);
+}
+
+// Use the same active/hover background as sidebar menu items.
+.p-tab-active {
+  background: var(--d-menuitem-active-bg) !important;
+}
+.p-tab:not(.p-tab-active):not(.p-disabled):hover {
+  background: var(--d-menuitem-hover-bg) !important;
+}
+
+// Mobile tab dropdown — visually match the desktop pill-tab style.
+.ux-dl__mobile-select.p-select {
+  background: var(--p-primary-100);
+  border-color: transparent;
+  border-radius: 9999px;
+  padding: 0.5rem 1rem;
+
+  .p-select-label {
+    color: var(--p-primary-900);
+    font-weight: 600;
+    padding: 0;
+  }
+
+  .p-select-dropdown {
+    color: var(--p-primary-900);
+  }
+}
+
+:root[class*='app-dark'] .ux-dl__mobile-select.p-select {
+  background: var(--p-primary-900);
+
+  .p-select-label {
+    color: var(--p-primary-200);
+  }
+
+  .p-select-dropdown {
+    color: var(--p-primary-200);
+  }
+}

package/assets/_tags.scss

@@ -8,7 +8,6 @@
 .tag-status-active.p-tag {
     border-color: var(--color-babygreen-300);
     background-color: var(--color-babygreen-50);
-    border-color: var(--color-babygreen-300);
     color: var(--color-babygreen-900);
 }
 
@@ -21,6 +20,7 @@
 
 .tag-status-closed.p-tag {
     border-color: var(--color-deepsea-500);
+    background-color: var(--color-gray-300);
     color: var(--color-deepsea-500);
 }
 

package/assets/_topbar.scss

@@ -1,5 +1,4 @@
 .layout-topbar {
-    padding: 0.75rem 0.5rem;
     border-bottom: 1px solid var(--surface-border);
     position: static;
     width: 100%;
@@ -8,19 +7,31 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    padding: 0.75rem 0;
     color: var(--text-color);
     background: transparent;
 
-    @media screen and (min-width: 992px) {
-        padding: 0.75rem 1rem;
-    }
 
     .topbar-left {
         display: flex;
         align-items: center;
-        flex: 1;
-        min-width: 0;
-        gap: 1.8rem;
+        flex-shrink: 0;
+        gap: 0;
+
+        .topbar-sidebar-section {
+            display: none;
+
+            @media screen and (min-width: 1024px) {
+                display: flex;
+                align-items: center;
+                flex-shrink: 0;
+                width: var(--_sidebar-w);
+                box-sizing: border-box;
+                padding-left: 1.375rem;
+                gap: 0.75rem;
+                overflow: hidden;
+            }
+        }
 
         .topbar-logo {
             display: none;
@@ -28,7 +39,7 @@
             flex-shrink: 0;
             outline: 0 none;
 
-            @media screen and (min-width: 992px) {
+            @media screen and (min-width: 1024px) {
                 display: flex;
             }
 
@@ -36,10 +47,6 @@
                 height: 2.3rem;
                 width: auto;
             }
-
-            @media screen and (min-width: 992px) {
-                margin-right: 0.5rem;
-            }
         }
 
         .topbar-menu-toggle {
@@ -53,6 +60,7 @@
             background: transparent;
             color: inherit;
             cursor: pointer;
+            flex-shrink: 0;
             transition:
                 background-color var(--transition-duration)
                 color var(--transition-duration),
@@ -70,9 +78,8 @@
                 font-size: 1rem;
             }
 
-            @media screen and (min-width: 992px) {
+            @media screen and (min-width: 1024px) {
                 display: flex;
-                margin-left: 0.375rem;
             }
         }
 
@@ -81,8 +88,10 @@
             width: 1px;
             align-self: stretch;
             background: var(--surface-border);
+            flex-shrink: 0;
+            margin-left: auto;
 
-            @media screen and (min-width: 992px) {
+            @media screen and (min-width: 1024px) {
                 display: block;
             }
         }
@@ -90,10 +99,28 @@
         .horizontal-logo {
             display: none;
         }
+    }
+
+    .topbar-main {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        max-width: 1540px;
+        margin-inline: auto;
+        justify-content: space-between;
+        padding-left: 1rem;
 
         .layout-breadcrumb {
             display: flex;
+
+    
         }
+        
+    flex: 1 1 auto;
+    @media screen and (min-width: 780px) {
+        padding: 0 3rem;
+    }
+
     }
 
     .menu-button {
@@ -155,7 +182,7 @@
         display: none;
     }
 
-    @media screen and (max-width: 991px) {
+    @media screen and (max-width: 1023px) {
         .mobile-profile-actions {
             display: block;
         }
@@ -172,7 +199,7 @@
             margin-left: 0.5rem;
             position: relative;
 
-            @media screen and (min-width: 992px) {
+            @media screen and (min-width: 1024px) {
                 margin-left: 1rem;
             }
 
@@ -248,3 +275,4 @@
         }
     }
 }
+

package/assets/_utils.scss

@@ -1,15 +1,3 @@
-.card {
-    background: var(--surface-card);
-    padding: 1rem;
-    border: 1px solid var(--surface-border);
-    margin-bottom: 2rem;
-    border-radius: 1rem;
-
-    &:last-child {
-        margin-bottom: 0;
-    }
-}
-
 .p-toast {
     &.p-toast-top-right,
     &.p-toast-top-left,

package/assets/layout.scss

@@ -17,4 +17,5 @@
 @use './_card';
 @use './_tags';
 @use './_paginator';
+@use './_tabs';
 @use './_animations';

package/assets/sidebar/_sidebar_compact.scss

@@ -133,12 +133,7 @@
                     min-width: 15rem;
                     background: var(--popover-background);
                     border: 1px solid var(--popover-border-color);
-                    box-shadow:
-                        0px 56px 16px 0px rgba(0, 0, 0, 0),
-                        0px 36px 14px 0px rgba(0, 0, 0, 0.01),
-                        0px 20px 12px 0px rgba(0, 0, 0, 0.02),
-                        0px 9px 9px 0px rgba(0, 0, 0, 0.03),
-                        0px 2px 5px 0px rgba(0, 0, 0, 0.04);
+                    box-shadow: $flyoutShadow;
                     border-radius: 1rem;
                     padding: 0.5rem;
                     max-height: 20rem;