@ngb-bootstrap/core 0.0.0 → 0.1.0-next.0

package/styles/_layout.scss

@@ -0,0 +1,602 @@
+// <ngb-layout>, <ngb-layout-content>, <ngb-navbar>, <ngb-sidebar>, <ngb-footer>.
+// The Taiga UI docs layout on the Bootstrap grid: a fixed header, a rounded window frame drawn by a
+// fixed overlay (so the page keeps native scrolling), a sidebar column and a content column.
+// Mobile and tablet first: below lg the sidebar is a Bootstrap drawer opened from the header.
+// Options (classes set by <ngb-layout>): .ngb-layout-square drops the rounding, .ngb-layout-full-sidebar
+// runs the sidebar the full height beside the navbar, and .ngb-layout-sidebar-collapsed contracts
+// the sidebar to a rail of top-level icons.
+
+$lg: 1024px; // Bootstrap 6 --breakpoint-lg
+$md: 768px; // Bootstrap 6 --breakpoint-md
+$ease: 0.3s cubic-bezier(0.2, 0, 0.4, 0.9);
+// The layout's own navbar and sidebar. Option selectors use these child paths so that a layout
+// nested in another (as in the docs' framed demos) isn't styled by the outer one's options.
+$navbar: '> .ngb-navbar';
+$sidebar: '> .container-fluid > .row > .ngb-sidebar';
+$content: '> .container-fluid > .row > .ngb-layout-content';
+
+@layer components {
+  // Layout -------------------------------------------------------------------------------------
+
+  .ngb-layout {
+    // The sidebar column's current width: full, or the rail when collapsed.
+    --ngb-layout-sidebar-size: var(--ngb-sidebar-width);
+    // The corner radii in use: the tokens, or 0 when square. Set here rather than overriding the
+    // tokens, so a layout nested in a square one (as in the docs' demos) keeps its own rounding.
+    --ngb-layout-frame-corner: var(--ngb-layout-frame-radius);
+    --ngb-layout-seam-corner: var(--ngb-layout-seam-radius);
+
+    display: block;
+    min-height: 100dvh;
+    padding-top: var(--ngb-navbar-height);
+    background-color: var(--ngb-layout-panel-bg);
+
+    // The window frame: an 8px band in the frame colour with rounded inner corners, fixed over the
+    // page. The side shadows paint the frame colour past the viewport edges.
+    &::before {
+      position: fixed;
+      inset: calc(var(--ngb-navbar-height) - var(--ngb-layout-frame-width)) 0 0;
+      z-index: 1030;
+      pointer-events: none;
+      content: '';
+      border: var(--ngb-layout-frame-width) solid var(--ngb-layout-frame-bg);
+      border-radius: var(--ngb-layout-frame-corner);
+      box-shadow:
+        -5rem 0 0 var(--ngb-layout-frame-bg),
+        5rem 0 0 var(--ngb-layout-frame-bg);
+    }
+
+    @media (width >= $md) {
+      --ngb-layout-content-padding: 2rem;
+      --ngb-navbar-padding-x: 1.5rem;
+    }
+
+    @media (width >= $lg) {
+      --ngb-layout-content-padding: 3rem;
+    }
+  }
+
+  .ngb-layout-square {
+    --ngb-layout-frame-corner: 0;
+    --ngb-layout-seam-corner: 0;
+  }
+
+  @media (width >= $lg) {
+    .ngb-layout-sidebar-collapsed {
+      --ngb-layout-sidebar-size: var(--ngb-sidebar-collapsed-width);
+    }
+
+    // Full-height sidebar: no frame. The sidebar and the content run to the viewport's edges, with
+    // only the seam between them (which also rounds the content's corner below the navbar).
+    .ngb-layout-full-sidebar {
+      &::before {
+        content: none;
+      }
+
+      #{$navbar} {
+        inset-inline-start: var(--ngb-layout-sidebar-size);
+        transition: inset-inline-start $ease;
+      }
+
+      #{$sidebar} {
+        inset-block-start: 0;
+
+        // Only the seam on the content side; round the content's corner below the navbar.
+        &::before {
+          inset-block: 0;
+          border-width: 0;
+          border-inline-end-width: var(--ngb-layout-seam-width);
+          border-radius: 0;
+        }
+
+        &::after {
+          top: calc(var(--ngb-navbar-height) - var(--ngb-layout-seam-width));
+          bottom: calc(var(--ngb-layout-seam-width) * -1);
+        }
+      }
+
+      #{$content} {
+        padding-inline-end: 0;
+
+        > .ngb-footer {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+
+  @media (width >= $lg) and (prefers-reduced-motion: reduce) {
+    .ngb-layout-full-sidebar #{$navbar} {
+      transition: none;
+    }
+  }
+
+  // Overscroll and the area behind the frame show the frame colour.
+  :root:has(.ngb-layout) {
+    background-color: var(--ngb-layout-frame-bg);
+  }
+
+  // The column shows the frame colour; <main> and the footer are panels on it, separated by a
+  // straight 4px gap, the same width as the seam between the sidebar and the content.
+  .ngb-layout-content {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--ngb-layout-seam-width);
+    min-width: 0;
+    min-height: calc(100dvh - var(--ngb-navbar-height));
+    padding-inline: var(--ngb-layout-frame-width);
+    background-color: var(--ngb-layout-frame-bg);
+
+    @media (width >= $lg) {
+      padding-inline-start: 0;
+    }
+  }
+
+  .ngb-layout-main {
+    flex-grow: 1;
+    padding: var(--ngb-layout-content-padding);
+    background-color: var(--ngb-layout-panel-bg);
+  }
+
+  // Navbar -------------------------------------------------------------------------------------
+
+  .ngb-navbar {
+    --navbar-min-height: var(--ngb-navbar-height);
+    --navbar-padding-x: var(--ngb-navbar-padding-x);
+    --navbar-padding-y: 0;
+    --navbar-bg: var(--ngb-layout-frame-bg);
+
+    position: fixed;
+    inset: 0 0 auto;
+    z-index: 1031;
+    flex-wrap: nowrap;
+    gap: 0.75rem;
+    height: var(--ngb-navbar-height);
+    font-size: var(--font-size-sm);
+  }
+
+  .ngb-navbar-start,
+  .ngb-navbar-end,
+  .ngb-navbar-brand,
+  .ngb-sidebar-brand {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+    min-width: 0;
+  }
+
+  .ngb-navbar-start {
+    flex: 1 1 0;
+  }
+
+  .ngb-navbar-end {
+    flex: 1 1 0;
+    justify-content: flex-end;
+  }
+
+  .ngb-navbar-center {
+    display: flex;
+    flex: 0 1 auto;
+    justify-content: center;
+    min-width: 0;
+
+    &:empty {
+      display: none;
+    }
+
+    // Below lg the centre slot (e.g. search) moves to the end, after the actions.
+    @media (width < $lg) {
+      order: 2;
+    }
+  }
+
+  @media (width < $lg) {
+    .ngb-navbar-end {
+      flex: 0 0 auto;
+      order: 1;
+    }
+  }
+
+  .ngb-navbar-menu {
+    --btn-color: currentcolor;
+    --btn-hover-bg: var(--ngb-layout-divider-color);
+
+    flex-shrink: 0;
+    margin-inline-start: -0.5rem;
+
+    // From lg up the sidebar is a column: the button only contracts and expands a collapsible one.
+    @media (width >= $lg) {
+      .ngb-layout:not(.ngb-layout-collapsible) #{$navbar} & {
+        display: none;
+      }
+    }
+  }
+
+  // Sidebar ------------------------------------------------------------------------------------
+
+  .ngb-sidebar {
+    // Below lg the sidebar is only the drawer, which is fixed: keep it out of the grid row.
+    display: contents;
+
+    // From lg up it is fixed, as on taiga-ui.dev: it never scrolls with the page, and its seam
+    // (which runs under the content) can't widen the page, because fixed boxes add no scroll
+    // overflow. The content column is offset by the sidebar width instead.
+    @media (width >= $lg) {
+      position: fixed;
+      inset-block: var(--ngb-navbar-height) 0;
+      inset-inline-start: 0;
+      z-index: 1;
+      display: block;
+      width: var(--ngb-layout-sidebar-size);
+      background-color: var(--ngb-layout-panel-bg);
+      transition: width $ease;
+
+      & ~ .ngb-layout-content {
+        margin-inline-start: var(--ngb-layout-sidebar-size);
+        transition: margin-inline-start $ease;
+      }
+
+      // Rounded seam around the sidebar and along the content's leading edge (Taiga's 4px band).
+      &::before,
+      &::after {
+        position: absolute;
+        top: calc(var(--ngb-layout-seam-width) * -1);
+        bottom: var(--ngb-layout-seam-width);
+        pointer-events: none;
+        content: '';
+        border: var(--ngb-layout-seam-width) solid var(--ngb-layout-frame-bg);
+        border-radius: var(--ngb-layout-seam-corner);
+      }
+
+      &::before {
+        inset-inline: 0;
+      }
+
+      &::after {
+        inset-inline-start: 100%;
+        width: 100vw;
+        margin-inline-start: calc(var(--ngb-layout-seam-width) * -1);
+      }
+    }
+  }
+
+  // The brand goes to the top of a full-height sidebar, in a box in the frame colour (rounded like
+  // the seam, so square in a square layout), except on the rail, which is too narrow: there it
+  // stays in the navbar.
+  .ngb-sidebar-brand {
+    display: none;
+  }
+
+  @media (width >= $lg) {
+    .ngb-layout-full-sidebar:not(.ngb-layout-sidebar-collapsed) {
+      #{$navbar} .ngb-navbar-brand {
+        display: none;
+      }
+
+      #{$sidebar} .ngb-sidebar-brand {
+        display: flex;
+        flex: none;
+        gap: 0.5rem;
+        height: var(--ngb-navbar-height);
+        padding-inline: 0.5rem;
+        // The same m-3 gap on the top and both sides; the end side also clears the 4px seam.
+        margin: var(--spacer-3);
+        margin-block-end: 0;
+        margin-inline-end: calc(var(--spacer-3) + var(--ngb-layout-seam-width));
+        overflow: hidden;
+        background-color: var(--ngb-sidebar-brand-bg);
+        border-radius: var(--ngb-layout-seam-corner);
+        font-size: var(--font-size-sm);
+      }
+    }
+  }
+
+  .ngb-sidebar-nav {
+    padding-block: 0.75rem;
+
+    // Taiga's drawer has no 4px seam, so its items sit 4px closer to the edge.
+    @media (width < $lg) {
+      margin-inline-start: -0.25rem;
+    }
+
+    // While a collapsible sidebar expands, keep the items at full width so they are revealed by the
+    // growing column instead of rewrapping.
+    @media (width >= $lg) {
+      .ngb-layout-collapsible #{$sidebar} & {
+        width: var(--ngb-sidebar-width);
+      }
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ngb-sidebar,
+    .ngb-sidebar ~ .ngb-layout-content {
+      transition: none;
+    }
+  }
+
+  // The rail: top-level icons only. Labels stay for screen readers; groups expand the sidebar.
+  @media (width >= $lg) {
+    .ngb-layout-sidebar-collapsed #{$sidebar} {
+      .ngb-sidebar-nav {
+        width: auto;
+
+        // Content placed above the items (e.g. a notice) doesn't fit the rail.
+        > :not(.ngb-sidebar-list) {
+          display: none;
+        }
+      }
+
+      .ngb-sidebar-label {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        white-space: nowrap;
+        clip-path: inset(50%);
+      }
+
+      .ngb-sidebar-icon {
+        margin-inline-end: 0;
+      }
+
+      .ngb-sidebar-chevron,
+      .ngb-sidebar-collapse {
+        display: none;
+      }
+    }
+  }
+
+  .ngb-sidebar-close:not(:focus-visible) {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    clip-path: inset(50%) !important;
+  }
+
+  .ngb-sidebar-close:focus-visible {
+    position: absolute;
+    inset-block-start: 0.75rem;
+    inset-inline-end: 0.75rem;
+    z-index: 1;
+  }
+
+  // From lg up the sidebar is a column, not a drawer: nothing to close.
+  @media (width >= $lg) {
+    .ngb-sidebar-close {
+      display: none;
+    }
+  }
+
+  .ngb-sidebar-list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .ngb-sidebar-link {
+    --ngb-sidebar-text-x: 3.5625rem;
+    --ngb-sidebar-line-x: 2.125rem;
+
+    position: relative;
+    display: flex;
+    gap: 0.25rem;
+    align-items: center;
+    width: 100%;
+    min-height: 2.25rem;
+    padding: 0.5rem 1rem 0.5rem var(--ngb-sidebar-text-x);
+    font: inherit;
+    font-size: var(--font-size-sm);
+    line-height: 1.25rem;
+    color: var(--fg-2);
+    text-align: start;
+    text-decoration: none;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: var(--radius-1);
+    transition: color 0.3s cubic-bezier(0.2, 0, 0.4, 0.9);
+
+    &:hover,
+    &:focus-visible {
+      color: var(--fg-body);
+    }
+
+    &:focus-visible {
+      outline: var(--focus-ring);
+      outline-offset: -2px;
+    }
+
+    // Tree guide line for nested items.
+    &::before {
+      position: absolute;
+      inset-block: 0;
+      inset-inline-start: var(--ngb-sidebar-line-x);
+      width: 1px;
+      content: '';
+      background-color: var(--ngb-layout-divider-color);
+    }
+
+    &.active {
+      font-weight: var(--font-weight-bold);
+      color: var(--fg-body);
+
+      // Active marker on the guide line.
+      &::after {
+        position: absolute;
+        inset-block: 0.5rem;
+        inset-inline-start: calc(var(--ngb-sidebar-line-x) - 1px);
+        width: 3px;
+        content: '';
+        background-color: currentcolor;
+        border-radius: 1rem;
+      }
+    }
+
+    &[data-level='2'] {
+      --ngb-sidebar-text-x: 4.75rem;
+      --ngb-sidebar-line-x: 3.75rem;
+    }
+
+    &[data-level='3'] {
+      --ngb-sidebar-text-x: 6.375rem;
+      --ngb-sidebar-line-x: 5.375rem;
+    }
+
+    // Top level: bold, with an icon, no guide line.
+    &[data-level='0'] {
+      gap: 0;
+      min-height: 2.5rem;
+      padding-block: 0.625rem;
+      padding-inline-start: 1.6875rem;
+      margin-bottom: -1px;
+      font-weight: var(--font-weight-bold);
+      color: var(--fg-body);
+
+      &::before,
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  .ngb-sidebar-icon {
+    margin-inline-end: 0.875rem;
+  }
+
+  // A group's children slide open (0fr to 1fr rows animates to the content's height) and fade in,
+  // with the chevron's timing.
+  .ngb-sidebar-collapse {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 0.3s cubic-bezier(0.2, 0, 0.4, 0.9);
+  }
+
+  .ngb-sidebar-collapse-inner {
+    min-height: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: opacity 0.3s cubic-bezier(0.2, 0, 0.4, 0.9);
+  }
+
+  .ngb-sidebar-collapse-open {
+    grid-template-rows: 1fr;
+
+    > .ngb-sidebar-collapse-inner {
+      opacity: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ngb-sidebar-collapse,
+    .ngb-sidebar-collapse-inner,
+    .ngb-sidebar-chevron {
+      transition: none;
+    }
+  }
+
+  // Every group's chevron sits at the inline end of its row, aligned down the sidebar.
+  .ngb-sidebar-chevron {
+    flex-shrink: 0;
+    margin-inline-start: auto;
+    transition: transform 0.3s cubic-bezier(0.2, 0, 0.4, 0.9);
+
+    // Collapsed it points to the inline end (mirrored in RTL by <ngb-icon>); expanded it points down.
+    [aria-expanded='true'] > & {
+      transform: rotate(90deg);
+    }
+  }
+
+  // Footer -------------------------------------------------------------------------------------
+
+  .ngb-footer {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem 1.5rem;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1.5rem var(--ngb-layout-content-padding);
+    font-size: var(--font-size-sm);
+    line-height: 1.25rem;
+    color: var(--fg-2);
+    border-top: 1px solid var(--ngb-layout-divider-color);
+
+    // Inside <ngb-layout-content> the footer is its own panel below the seam, not a divided strip.
+    // The frame covers the bottom 8px, so keep it clear of that.
+    .ngb-layout-content > & {
+      margin-bottom: var(--ngb-layout-frame-width);
+      background-color: var(--ngb-layout-panel-bg);
+      border-top: 0;
+    }
+
+    a {
+      color: inherit;
+      text-decoration: none;
+
+      &:hover {
+        color: var(--fg-body);
+      }
+    }
+  }
+}
+
+// Unlayered on purpose: Bootstrap 6 declares its drawer tokens outside any cascade layer, so these
+// overrides must be too. Same specificity as .lg\:drawer and loaded later, so they win.
+// Below lg: a full-height panel flush with the start edge over a plain dark backdrop, like
+// taiga-ui.dev's mobile menu.
+.ngb-sidebar-drawer {
+  --drawer-width: min(17.25rem, calc(100vw - 3rem));
+  // With a unit: Bootstrap slides the drawer off screen with calc(-100% - var(--drawer-inset)),
+  // which a unitless 0 makes invalid, leaving the drawer in place with no animation.
+  --drawer-inset: 0px;
+  --drawer-border-width: 0;
+  --drawer-border-radius: 0;
+  --drawer-box-shadow: none;
+  --drawer-bg: var(--ngb-layout-panel-bg);
+  --drawer-backdrop-bg: rgb(0 0 0 / 50%);
+  --drawer-backdrop-blur: 0;
+
+  .drawer-body {
+    padding: 0;
+  }
+
+  // Below lg it slides in and out. `overlay` keeps a closing drawer in the top layer (above the
+  // fixed navbar) until it has slid away, and its backdrop fades out alongside.
+  @media (width < $lg) {
+    --drawer-transition-property: transform, visibility, overlay;
+
+    transition-behavior: allow-discrete;
+
+    &:not([open])::backdrop {
+      background-color: transparent;
+    }
+  }
+
+  // From lg up: fill the fixed column and scroll the items inside it, without chaining to the
+  // page. (Bootstrap's layered `height: auto !important` can't be overridden, so cap the height.)
+  @media (width >= $lg) {
+    flex-direction: column;
+    max-height: 100%;
+    overflow: hidden;
+
+    .drawer-body {
+      flex: 1 1 auto;
+      flex-direction: column;
+      min-height: 0;
+      overflow-y: auto;
+      overflow-x: hidden;
+      overscroll-behavior: contain;
+      scrollbar-width: thin;
+    }
+  }
+}
+
+// Bootstrap 6 always reserves a scrollbar gutter on :root (unlayered), which leaves a strip wider than
+// the 8px frame on the right even when the page doesn't scroll. In the layout, reserve none and use
+// a thin scrollbar over the frame colour when the page does scroll.
+:root:has(.ngb-layout) {
+  scrollbar-gutter: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--fg-3) transparent;
+}

package/styles/_overlay.scss

@@ -0,0 +1,14 @@
+// Structural styles for @angular/cdk/overlay (the overlay container, panes and backdrops).
+// Bootstrap's z-index scale is used instead of the CDK's fixed 1000.
+@use '@angular/cdk' as cdk;
+
+@layer components {
+  @include cdk.overlay();
+
+  // The container holds popovers, tooltips and toasts; the top of that range keeps all of them
+  // above the sticky navbar and drawers. Modals use the native <dialog> top layer instead.
+  .cdk-overlay-container,
+  .cdk-global-overlay-wrapper {
+    z-index: var(--z-toast, 1070);
+  }
+}

package/styles/_tokens.scss

@@ -0,0 +1,29 @@
+// Global tokens for @ngb-bootstrap/core additions.
+// Built on Bootstrap 6's token system: override with
+//   @use "@ngb-bootstrap/core/styles" with ($ngb-root-tokens: (--ngb-focus-outline-offset: 3px));
+@use 'bootstrap/scss/_config.scss' as bs;
+
+$ngb-root-tokens: () !default;
+
+// stylelint-disable-next-line scss/dollar-variable-default
+$ngb-root-tokens: bs.defaults(
+  (
+    --ngb-transition-duration: 0.2s,
+    --ngb-focus-outline-offset: 2px,
+    // Layout (<ngb-layout>, <ngb-navbar>, <ngb-sidebar>, <ngb-footer>): Taiga UI docs proportions.
+    --ngb-layout-frame-bg: light-dark(#f6f6f6, #2f2f2f),
+    --ngb-layout-panel-bg: light-dark(#fff, #222),
+    --ngb-layout-frame-width: 0.5rem,
+    --ngb-layout-frame-radius: 1.5rem,
+    --ngb-layout-seam-width: 0.25rem,
+    --ngb-layout-seam-radius: 0.625rem,
+    --ngb-layout-divider-color: light-dark(rgb(0 0 0 / 10%), rgb(255 255 255 / 14%)),
+    --ngb-layout-content-padding: 1rem,
+    --ngb-navbar-height: 4.125rem,
+    --ngb-navbar-padding-x: 1rem,
+    --ngb-sidebar-width: 16.5rem,
+    --ngb-sidebar-collapsed-width: 4.375rem,
+    --ngb-sidebar-brand-bg: var(--ngb-layout-frame-bg),
+  ),
+  $ngb-root-tokens
+);