atomicuilibrary 0.0.1

package/dist/collection/components/ui-navigation-bar/navigation-bar/navigation-bar.css

@@ -0,0 +1,830 @@
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+.a11y-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+:host {
+  /* --------------------------------------------------------------------------
+   * CSS Variables (Theming)
+   * -------------------------------------------------------------------------- */
+  /* Light Theme (Standard) */
+  --nav-bg: #fcfcfc;
+  --nav-color: #000000;
+  --nav-border-color: #d9d9d9;
+  --nav-item-hover-bg: #e6e6e6;
+  --nav-item-active-bg: rgba(0, 138, 22, 0.08);
+  --nav-item-active-color: #008a16;
+  --nav-accent-gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+  --nav-width: 280px;
+  /* Dynamic via JS */
+  --nav-transition: width 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
+  /* Layout */
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: var(--nav-width);
+  background: var(--nav-bg);
+  color: var(--nav-color);
+  border-right: 1px solid var(--nav-border-color);
+  transition: var(--nav-transition);
+  box-sizing: border-box;
+  /* overflow: hidden; Removed to allow toggle button to overflow */
+  position: relative;
+  z-index: 100;
+}
+
+:host(.pos-right) {
+  border-right: none;
+  border-left: 1px solid var(--nav-border-color);
+}
+
+/* Toggle Button on Edge */
+.nav-toggle-edge {
+  position: absolute;
+  top: 48px;
+  /* Below header */
+  right: -12px;
+  width: 24px;
+  height: 24px;
+  background: var(--nav-bg);
+  border: 1px solid var(--nav-border-color);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 101;
+  color: var(--nav-color);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s, background-color 0.2s;
+}
+
+.nav-toggle-edge:hover {
+  background-color: var(--nav-item-hover-bg);
+}
+
+:host(.pos-right) .nav-toggle-edge {
+  right: auto;
+  left: -12px;
+  transform: rotate(180deg);
+}
+
+:host(.is-collapsed) .nav-toggle-edge {
+  transform: rotate(180deg);
+}
+
+:host(.pos-right.is-collapsed) .nav-toggle-edge {
+  transform: rotate(0deg);
+}
+
+:host([data-theme=dark]) {
+  /* Portal Consistent Dark Theme */
+  --nav-bg: #111827;
+  --nav-color: #94a3b8;
+  --nav-border-color: #1e293b;
+  --nav-item-hover-bg: #1e293b;
+  --nav-item-active-bg: rgba(0, 138, 22, 0.15);
+  --nav-item-active-color: #008a16;
+}
+
+:host([data-theme=green]) {
+  /* Schneider Electric Green Theme */
+  --nav-bg: #3DCD58;
+  --nav-color: #ffffff;
+  --nav-border-color: rgba(255, 255, 255, 0.2);
+  --nav-item-hover-bg: rgba(255, 255, 255, 0.1);
+  --nav-item-active-bg: rgba(255, 255, 255, 0.2);
+  --nav-item-active-color: #ffffff;
+}
+
+/* --------------------------------------------------------------------------
+ * Horizontal Layout
+ * -------------------------------------------------------------------------- */
+:host([orientation=horizontal]) {
+  width: 100%;
+  height: 64px;
+  flex-direction: row;
+  border-right: none;
+  border-bottom: 1px solid var(--nav-border-color);
+}
+
+:host([orientation=horizontal]) .nav-blocks-container {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  flex-wrap: nowrap !important;
+  justify-content: flex-start !important;
+}
+
+:host([orientation=horizontal]) .nav-header {
+  border-bottom: none;
+  border-right: 1px solid var(--nav-border-color);
+  flex-shrink: 0;
+}
+
+/* In horizontal and collapsed mode, disable vertical scrolling on blocks 
+   to ensure the fixed context-menu is never clipped by auto-scroll parents. */
+:host(.is-collapsed) .nav-block-categories,
+:host(.is-collapsed) .nav-block-top,
+:host(.is-collapsed) .nav-block-secondary,
+:host(.is-collapsed) .nav-block-bottom,
+:host(.is-collapsed) .nav-block-profile {
+  overflow: visible !important;
+}
+
+/* Push bottom and profile blocks to the right */
+:host([orientation=horizontal]) .nav-block-bottom {
+  margin-left: auto;
+}
+
+:host([orientation=horizontal]) .nav-block-categories,
+:host([orientation=horizontal]) .nav-block-top,
+:host([orientation=horizontal]) .nav-block-secondary,
+:host([orientation=horizontal]) .nav-block-bottom,
+:host([orientation=horizontal]) .nav-block-profile {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center;
+  padding: 0;
+  overflow: visible !important;
+  border: none !important;
+  height: 100%;
+  flex-shrink: 0;
+  flex-grow: 0 !important;
+  max-height: none !important;
+  flex-wrap: nowrap !important;
+}
+
+/* Vertical separators between main blocks */
+:host([orientation=horizontal]) .nav-block-categories,
+:host([orientation=horizontal]) .nav-block-top,
+:host([orientation=horizontal]) .nav-block-secondary,
+:host([orientation=horizontal]) .nav-search-bar {
+  border-right: none !important;
+}
+
+:host([orientation=horizontal]) .nav-block-top {
+  flex: none;
+}
+
+:host([orientation=horizontal]) .nav-item-wrapper {
+  height: 100%;
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+:host([orientation=horizontal]) .nav-item {
+  height: 100%;
+  padding: 0 6px;
+  /* Ultra-tight */
+  margin: 0 !important;
+  border-radius: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+}
+
+:host([orientation=horizontal]) .nav-icon {
+  margin-right: 4px;
+  /* Minimal gap */
+}
+
+:host([orientation=horizontal]) .nav-glider {
+  left: 0;
+  right: auto;
+  bottom: 0px !important;
+  top: auto !important;
+  height: 3px !important;
+  border-radius: 4px 4px 0 0;
+  background-color: var(--nav-item-active-color);
+  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
+}
+
+:host([orientation=horizontal]) .nav-toggle-edge {
+  display: none;
+}
+
+:host([orientation=horizontal]) .nav-block-bottom .nav-label,
+:host([orientation=horizontal]) .nav-block-profile .nav-label {
+  display: none;
+  /* Icon only for bottom items in horizontal bar */
+}
+
+/* Compact Search for Horizontal Bar */
+:host([orientation=horizontal]) .nav-search-bar {
+  padding: 0 12px;
+  border-bottom: none;
+  border-right: 1px solid var(--nav-border-color);
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+:host([orientation=horizontal]) .nav-search-bar > div {
+  width: 150px;
+}
+
+:host(.is-drawer) {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  height: 100vh;
+  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+}
+
+:host(.is-drawer.pos-right) {
+  left: auto;
+  right: 0;
+  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
+}
+
+.nav-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: -1;
+  /* Behind the drawer content (host has positive index) */
+  /* Wait, backdrop is CHILD of host. 
+     If Host is Z-1000. Backdrop is inside.
+     We want Backdrop to cover ENTIRE screen.
+     Position fixed 0,0,0,0 relative to VIEWPORT works.
+     But if Host is Width 280px.
+     Backdrop inside Host might be clipped if Host has overflow:hidden?
+     Host has overflow:hidden.
+     SO BACKDROP MUST BE OUTSIDE?
+     OR Host overflow must be visible?
+     Host overflow is Hidden.
+     Problem.
+  */
+}
+
+/* Fix for Backdrop:
+   If Host handles overflow:hidden for content scrolling.
+   We need Backdrop to break out.
+   Or... Backdrop should be rendered interactively?
+   Or Host overflow should be visible in Drawer Mode?
+*/
+:host(.is-drawer) {
+  overflow: visible;
+  /* Allow backdrop to spill out */
+}
+
+/* --------------------------------------------------------------------------
+ * Core Sections
+ * -------------------------------------------------------------------------- */
+.nav-header {
+  flex-shrink: 0;
+  min-height: 64px;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  overflow: hidden;
+  white-space: nowrap;
+  position: relative;
+}
+
+.nav-mobile-close {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  padding: 4px;
+}
+
+/* Block Layout */
+.nav-blocks-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: visible;
+  /* Allow popovers to escape */
+}
+
+.nav-block-categories {
+  flex-shrink: 0;
+  max-height: 30%;
+  /* Limit height so it doesn't take over if list is long */
+  overflow-y: auto;
+  overflow-x: visible;
+  /* Changed from hidden */
+  display: flex;
+  flex-direction: column;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--nav-border-color);
+  /* Scrollbar Styling */
+  scrollbar-width: thin;
+  scrollbar-color: var(--nav-border-color) transparent;
+}
+
+.nav-block-top {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: visible;
+  /* Changed from hidden */
+  display: flex;
+  flex-direction: column;
+  padding: 8px 0;
+  /* Scrollbar Styling */
+  scrollbar-width: thin;
+  scrollbar-color: var(--nav-border-color) transparent;
+}
+
+.nav-block-bottom {
+  flex-shrink: 0;
+  border-top: 1px solid var(--nav-border-color);
+  padding: 8px 0;
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
+  min-height: fit-content;
+  max-height: fit-content;
+  /* Prevent expansion when popover opens */
+}
+
+.nav-header {
+  border-bottom: 1px solid var(--nav-border-color);
+}
+
+.nav-search-bar {
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--nav-border-color);
+}
+
+.nav-block-secondary {
+  padding: 8px 0;
+  border-top: 1px solid var(--nav-border-color);
+  /* Correctly separate from top block */
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
+}
+
+.nav-block-profile {
+  flex-shrink: 0;
+  padding: 8px 0;
+  border-top: 1px solid var(--nav-border-color);
+  display: flex;
+  flex-direction: column;
+  /* Ensure BG covers if overly scrolled */
+  overflow: visible;
+  min-height: fit-content;
+  max-height: fit-content;
+  /* Prevent expansion when popover opens */
+}
+
+/* Scrollbar shared styles */
+.nav-block-categories::-webkit-scrollbar,
+.nav-block-top::-webkit-scrollbar {
+  width: 4px;
+}
+
+.nav-block-categories::-webkit-scrollbar-thumb,
+.nav-block-top::-webkit-scrollbar-thumb {
+  background-color: var(--nav-border-color);
+  border-radius: 4px;
+}
+
+/* Footer removed/repurposed in blocks */
+/* --------------------------------------------------------------------------
+ * Navigation Items
+ * -------------------------------------------------------------------------- */
+.nav-item-wrapper {
+  display: flex;
+  flex-direction: column;
+  /* width: 100%; */
+  min-width: 0;
+  /* Enable shrinking for ellipsis */
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  /* Standard Height */
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  white-space: nowrap;
+  position: relative;
+  overflow: visible;
+  /* Allow tooltips and badges to pop out */
+  margin: 2px 8px;
+  /* Gap around items like modern navs */
+  border-radius: 8px;
+  /* Increased curve */
+  outline: none;
+  /* Manage focus visible manually or leave default */
+}
+
+a.nav-item {
+  text-decoration: none;
+  color: inherit;
+}
+
+.nav-item:focus-visible {
+  outline: 2px solid var(--nav-item-active-color);
+  outline-offset: -2px;
+}
+
+.nav-item:hover {
+  background-color: var(--nav-item-hover-bg);
+}
+
+.nav-item.active,
+.nav-item.active-ancestor {
+  background-color: var(--nav-item-active-bg);
+  color: var(--nav-item-active-color);
+  font-weight: 500;
+  position: relative;
+}
+
+/* Nav Glider (JS Controlled) */
+.nav-glider {
+  position: absolute;
+  width: 4px;
+  background-color: #008a16;
+  /* Modern UI Signature Green */
+  border-radius: 4px;
+  transition: top 0.25s cubic-bezier(0.4, 0, 0.2, 1), height 0.2s ease, opacity 0.2s;
+  pointer-events: none;
+  z-index: 10;
+  left: 6px;
+}
+
+:host(.indicator-end) .nav-glider {
+  left: auto;
+  right: 6px;
+}
+
+/* Active Ancestor base styles handled above */
+/* --------------------------------------------------------------------------
+ * Specific Styles for Nested Items (Hierarchy)
+ * -------------------------------------------------------------------------- */
+/* Level 1+ items (Children) */
+.nav-item-wrapper:not(.level-0) > .nav-item {
+  font-size: 0.95em;
+  opacity: 0.9;
+  height: 36px;
+  /* Slightly more compact */
+}
+
+/* Level 1+ Active State (Differentiation) */
+.nav-item-wrapper:not(.level-0) > .nav-item.active {
+  background-color: var(--nav-item-active-bg);
+  color: var(--nav-item-active-color);
+  font-weight: 600;
+  position: relative;
+}
+
+/* Add a pill indicator for active children */
+.nav-item-wrapper:not(.level-0) > .nav-item.active::before {
+  content: "";
+  position: absolute;
+  left: 2px;
+  /* Shifted for better focus */
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 32px;
+  /* Substantial vertical bar */
+  border-radius: 4px;
+  background-color: var(--nav-item-active-color);
+}
+
+/* Tree-like vertical line for children block (Optionally add if tree-lines wanted) */
+.nav-children {
+  position: relative;
+  /* margin-left: 20px; If we want indentation lines, but padding handles visual indentation */
+}
+
+.nav-icon-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.nav-status-dot {
+  position: absolute;
+  top: 2px;
+  right: 12px;
+  /* Next to icon default */
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border: 1.5px solid var(--nav-bg);
+  z-index: 2;
+}
+
+:host(.is-collapsed) .nav-status-dot,
+:host([orientation=horizontal]) .nav-status-dot {
+  right: 0px;
+}
+
+.nav-status-dot.status-online {
+  background-color: #22c55e;
+}
+
+.nav-status-dot.status-offline {
+  background-color: #94a3b8;
+}
+
+.nav-status-dot.status-away {
+  background-color: #eab308;
+}
+
+.nav-status-dot.status-busy {
+  background-color: #ef4444;
+}
+
+.nav-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  margin-right: 12px;
+}
+
+:host(.is-collapsed) .nav-icon,
+:host([orientation=horizontal]) .nav-block-bottom .nav-icon,
+:host([orientation=horizontal]) .nav-block-profile .nav-icon {
+  margin-right: 0;
+}
+
+.nav-label-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+.nav-badge {
+  background-color: var(--nav-item-active-color);
+  color: white;
+  font-size: 10px;
+  font-weight: 700;
+  padding: 0 6px;
+  height: 16px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.nav-badge-mini {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  background-color: #ef4444;
+  color: white;
+  font-size: 9px;
+  font-weight: 800;
+  min-width: 14px;
+  height: 14px;
+  padding: 0 3px;
+  border-radius: 7px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1.5px solid var(--nav-bg);
+  z-index: 3;
+}
+
+/* Adjust left padding/margin to account for border in active state */
+.nav-item {
+  border-left: 3px solid transparent;
+}
+
+.nav-item.active .nav-icon {
+  color: currentColor;
+  /* Inherit active color */
+}
+
+.nav-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.nav-item.no-icon .nav-label {
+  font-size: 12px;
+  opacity: 0.8;
+  padding-left: 4px;
+}
+
+/* User Profile Specifics */
+.nav-item.is-user-profile .nav-icon {
+  background: var(--nav-accent-gradient);
+  border-radius: 50%;
+  color: white !important;
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.4);
+  margin-right: 12px;
+}
+
+.nav-item.is-user-profile .nav-icon ui-icon {
+  width: 18px !important;
+  height: 18px !important;
+  font-size: 18px !important;
+}
+
+.nav-item.is-user-profile .nav-label {
+  font-weight: 600;
+  color: var(--nav-color);
+}
+
+.nav-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-left: 8px;
+  transition: transform 0.2s;
+}
+
+:host([orientation=horizontal]) .nav-arrow {
+  margin-left: 4px;
+}
+
+.nav-arrow .rotate-180 {
+  transform: rotate(180deg);
+}
+
+/* --------------------------------------------------------------------------
+ * Submenus
+ * -------------------------------------------------------------------------- */
+.nav-children {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: slideDown 0.2s ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+/* --------------------------------------------------------------------------
+ * Collapsed State Overrides
+ * -------------------------------------------------------------------------- */
+:host(.is-collapsed:not([orientation=horizontal])) .nav-item {
+  justify-content: center;
+  padding: 0 !important;
+  /* Force center */
+  margin: 4px 0;
+  width: 100%;
+  border-radius: 0;
+}
+
+:host(.is-collapsed:not([orientation=horizontal])) .nav-icon {
+  margin-right: 0;
+}
+
+:host(.is-collapsed:not([orientation=horizontal])) .nav-label,
+:host(.is-collapsed:not([orientation=horizontal])) .nav-arrow {
+  display: none;
+  /* redundant fallback */
+}
+
+/* Tooltip for items without children */
+.nav-tooltip {
+  position: absolute;
+  background: #1e293b;
+  color: #f8fafc;
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  z-index: 2000;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
+}
+
+.nav-tooltip.visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Position for vertical collapsed mode - right of icon */
+:host(.is-collapsed:not([orientation=horizontal])) .nav-tooltip {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%) translateX(-10px);
+  margin-left: 10px;
+}
+
+:host(.is-collapsed:not([orientation=horizontal])) .nav-tooltip.visible {
+  transform: translateY(-50%) translateX(0);
+}
+
+/* Position for horizontal mode - below icon */
+:host([orientation=horizontal]) .nav-tooltip {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-10px);
+  margin-top: 8px;
+}
+
+:host([orientation=horizontal]) .nav-tooltip.visible {
+  transform: translateX(-50%) translateY(0);
+}
+
+/* Position for expanded vertical mode - above icon */
+:host(:not(.is-collapsed):not([orientation=horizontal])) .nav-tooltip {
+  left: 50%;
+  bottom: 100%;
+  transform: translateX(-50%) translateY(10px);
+  margin-bottom: 8px;
+}
+
+:host(:not(.is-collapsed):not([orientation=horizontal])) .nav-tooltip.visible {
+  transform: translateX(-50%) translateY(0);
+}
+
+/* Tooltip arrow */
+.nav-tooltip::before {
+  content: "";
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: #1e293b;
+  transform: rotate(45deg);
+  z-index: -1;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+:host(.is-collapsed:not([orientation=horizontal])) .nav-tooltip::before {
+  left: -4px;
+  top: 50%;
+  margin-top: -4px;
+  border-right: none;
+  border-top: none;
+}
+
+:host([orientation=horizontal]) .nav-tooltip::before {
+  top: -4px;
+  left: 50%;
+  margin-left: -4px;
+  border-right: none;
+  border-bottom: none;
+}
+
+:host(:not(.is-collapsed):not([orientation=horizontal])) .nav-tooltip::before {
+  bottom: -4px;
+  left: 12px;
+  border-left: none;
+  border-top: none;
+}