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

package/package.json

@@ -1,10 +1,124 @@
 {
   "name": "@ngb-bootstrap/core",
-  "version": "0.0.0",
-  "description": "Angular components built on Bootstrap 6 CSS. Placeholder - first release coming soon.",
+  "version": "0.1.0-next.0",
+  "description": "Angular components built on Bootstrap 6 CSS.",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Angular-Bootstrap-Project/angular-bootstrap.git"
-  }
+    "url": "git+https://github.com/Angular-Bootstrap-Project/angular-bootstrap.git",
+    "directory": "projects/core"
+  },
+  "keywords": [
+    "angular",
+    "bootstrap",
+    "bootstrap6",
+    "components",
+    "ui"
+  ],
+  "peerDependencies": {
+    "@angular/cdk": ">=22.0.0 <24.0.0",
+    "@angular/common": ">=22.0.0 <24.0.0",
+    "@angular/core": ">=22.0.0 <24.0.0",
+    "@angular/forms": ">=22.0.0 <24.0.0",
+    "@angular/platform-browser": ">=22.0.0 <24.0.0",
+    "@angular/router": ">=22.0.0 <24.0.0",
+    "@ngb-bootstrap/icons": "0.1.0-next.0",
+    "bootstrap": "6.0.0-alpha.1"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "exports": {
+    "./styles": {
+      "sass": "./styles/_index.scss"
+    },
+    "./styles/*": "./styles/*",
+    "./ngb-bootstrap.css": "./ngb-bootstrap.css",
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/ngb-bootstrap-core.d.ts",
+      "default": "./fesm2022/ngb-bootstrap-core.mjs"
+    },
+    "./alert": {
+      "types": "./types/ngb-bootstrap-core-alert.d.ts",
+      "default": "./fesm2022/ngb-bootstrap-core-alert.mjs"
+    },
+    "./badge": {
+      "types": "./types/ngb-bootstrap-core-badge.d.ts",
+      "default": "./fesm2022/ngb-bootstrap-core-badge.mjs"
+    },
+    "./breadcrumb": {
+      "types": "./types/ngb-bootstrap-core-breadcrumb.d.ts",
+      "default": "./fesm2022/ngb-bootstrap-core-breadcrumb.mjs"
+    },
+    "./button": {
+      "types": "./types/ngb-bootstrap-core-button.d.ts",
+      "default": "./fesm2022/ngb-bootstrap-core-button.mjs"
+    },
+    "./card": {
+      "types": "./types/ngb-bootstrap-core-card.d.ts",
+      "default": "./fesm2022/ngb-bootstrap-core-card.mjs"
+    },
+    "./cdk": {
+      "types": "./types/ngb-bootstrap-core-cdk.d.ts",
+      "default": "./fesm2022/ngb-bootstrap-core-cdk.mjs"
+    },
+    "./checkbox": {
+      "types": "./types/ngb-bootstrap-core-checkbox.d.ts",
+      "default": "./fesm2022/ngb-bootstrap-core-checkbox.mjs"
+    },
+    "./chips": {
+      "types": "./types/ngb-bootstrap-core-chips.d.ts",
+      "default": "./fesm2022/ngb-bootstrap-core-chips.mjs"
+    },
+    "./floating-label": {
+      "types": "./types/ngb-bootstrap-core-floating-label.d.ts",
+      "default": "./fesm2022/ngb-bootstrap-core-floating-label.mjs"
+    },
+    "./footer": {
+      "types": "./types/ngb-bootstrap-core-footer.d.ts",
+      "default": "./fesm2022/ngb-bootstrap-core-footer.mjs"
+    },
+    "./icon": {
+      "types": "./types/ngb-bootstrap-core-icon.d.ts",
+      "default": "./fesm2022/ngb-bootstrap-core-icon.mjs"
+    },
+    "./input": {
+      "types": "./types/ngb-bootstrap-core-input.d.ts",
+      "default": "./fesm2022/ngb-bootstrap-core-input.mjs"
+    },
+    "./layout": {
+      "types": "./types/ngb-bootstrap-core-layout.d.ts",
+      "default": "./fesm2022/ngb-bootstrap-core-layout.mjs"
+    },
+    "./navbar": {
+      "types": "./types/ngb-bootstrap-core-navbar.d.ts",
+      "default": "./fesm2022/ngb-bootstrap-core-navbar.mjs"
+    },
+    "./radio": {
+      "types": "./types/ngb-bootstrap-core-radio.d.ts",
+      "default": "./fesm2022/ngb-bootstrap-core-radio.mjs"
+    },
+    "./sidebar": {
+      "types": "./types/ngb-bootstrap-core-sidebar.d.ts",
+      "default": "./fesm2022/ngb-bootstrap-core-sidebar.mjs"
+    },
+    "./spinner": {
+      "types": "./types/ngb-bootstrap-core-spinner.d.ts",
+      "default": "./fesm2022/ngb-bootstrap-core-spinner.mjs"
+    },
+    "./switch": {
+      "types": "./types/ngb-bootstrap-core-switch.d.ts",
+      "default": "./fesm2022/ngb-bootstrap-core-switch.mjs"
+    }
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "module": "fesm2022/ngb-bootstrap-core.mjs",
+  "typings": "types/ngb-bootstrap-core.d.ts",
+  "type": "module"
 }

package/styles/_breadcrumb.scss

@@ -0,0 +1,9 @@
+// <ngb-breadcrumb>: Bootstrap colours links with --fg-3, which the Taiga type scale makes a 40%
+// tint (2.4:1 on white). Use --fg-2 instead so links meet WCAG AA contrast (4.5:1).
+
+@layer components {
+  .breadcrumb {
+    --breadcrumb-link-color: var(--fg-2);
+    --breadcrumb-link-hover-color: var(--fg-body);
+  }
+}

package/styles/_button.scss

@@ -0,0 +1,14 @@
+// Square icon buttons: Bootstrap's .btn-icon only sets aspect-ratio, which leaves the width to the
+// content. Fix both sides to the button's size tokens (--btn-min-height follows .btn-xs/sm/lg) and
+// scale the icon with them.
+
+@layer components {
+  .btn-icon {
+    inline-size: var(--btn-min-height);
+    block-size: var(--btn-min-height);
+
+    > .ngb-icon {
+      --ngb-icon-size: 1.25em;
+    }
+  }
+}

package/styles/_card.scss

@@ -0,0 +1,86 @@
+// Collapsible card: a borderless "large card" on a floating surface. The summary is always
+// visible; the hidden content folds with a grid-template-rows transition (0fr to 1fr), so no
+// height is measured in JS. While collapsed, a narrower strip peeks out under the card
+// (decorative, a pseudo-element). The collapsed region is also `inert` in the markup; `visibility`
+// is only here to keep it from painting once the transition ends.
+
+@layer components {
+  .ngb-collapsible-card {
+    --card-border-width: 0;
+    --card-border-radius: calc(var(--radius-9) * 1.5);
+    --card-inner-border-radius: var(--card-border-radius);
+    --card-box-shadow: 0 0.0625rem 0.25rem oklch(0 0 0 / 0.04);
+    --card-bg: light-dark(var(--bg-body), var(--bg-2));
+    --collapsible-peek-bg: var(--bg-3);
+    --collapsible-peek-height: 0.75rem;
+    --collapsible-peek-inset: var(--card-spacer-x);
+
+    padding: var(--card-spacer-y) var(--card-spacer-x);
+    // Room for the peek strip, which hangs below the card box.
+    margin-block-end: var(--collapsible-peek-height);
+
+    &:not(.ngb-collapsible-expanded)::after {
+      position: absolute;
+      inset-block-start: 100%;
+      inset-inline: var(--collapsible-peek-inset);
+      height: var(--collapsible-peek-height);
+      pointer-events: none;
+      content: '';
+      background-color: var(--collapsible-peek-bg);
+      border-end-start-radius: var(--radius-7);
+      border-end-end-radius: var(--radius-7);
+    }
+  }
+
+  .ngb-collapsible-region {
+    display: grid;
+    grid-template-rows: 0fr;
+    visibility: hidden;
+    transition:
+      grid-template-rows 0.3s cubic-bezier(0.2, 0, 0.4, 0.9),
+      visibility 0s linear 0.3s;
+
+    .ngb-collapsible-expanded > & {
+      grid-template-rows: 1fr;
+      visibility: visible;
+      transition-delay: 0s;
+    }
+  }
+
+  .ngb-collapsible-region-inner {
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .ngb-collapsible-region-content {
+    padding-block-start: var(--card-spacer-y);
+  }
+
+  // Grey subtle button, blue chevron.
+  .ngb-collapsible-toggle {
+    --ngb-icon-fill-1: var(--primary-fg);
+  }
+
+  .ngb-collapsible-toggle > ngb-icon {
+    transition: transform 0.3s cubic-bezier(0.2, 0, 0.4, 0.9);
+
+    // Points down when collapsed, up when expanded.
+    .ngb-collapsible-expanded & {
+      transform: rotate(180deg);
+    }
+  }
+
+  .ngb-collapsible-static {
+    .ngb-collapsible-region,
+    .ngb-collapsible-toggle > ngb-icon {
+      transition: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ngb-collapsible-region,
+    .ngb-collapsible-toggle > ngb-icon {
+      transition: none;
+    }
+  }
+}

package/styles/_chip.scss

@@ -0,0 +1,10 @@
+// <ngb-chip-group>: lays out a wrapping row of Bootstrap `.chip`s. The spacing follows the chip's
+// own gap token, so it adapts when an app changes `--chip-gap`.
+
+@layer components {
+  .chip-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(var(--chip-gap, 0.3125rem) * 1.5);
+  }
+}

package/styles/_choice.scss

@@ -0,0 +1,14 @@
+// Groups of radios (<ngb-radio-group>). Each item is a Bootstrap .form-field.
+
+@layer components {
+  .ngb-choice-group {
+    display: grid;
+    gap: 0.5rem;
+  }
+
+  .ngb-choice-group-inline {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem 1.5rem;
+  }
+}

package/styles/_contrast.scss

@@ -0,0 +1,23 @@
+// Bootstrap 6.0.0-alpha.1's default palette fails WCAG AA contrast in a few places: white text on
+// solid primary (3.6:1), success (2.8:1) and danger (4.4:1), and light-mode text in subtle and
+// outline variants of primary, success, info and warning (3.1 to 4.3:1). Each token below moves to
+// the lightest step of the same hue that reaches 4.5:1. Dark-mode text already passes and is kept.
+// Turn it off with: @use "@ngb-bootstrap/core/styles" with ($ngb-accessible-colors: false);
+
+$ngb-accessible-colors: true !default;
+
+@if $ngb-accessible-colors {
+  // Unlayered for the same reason as the typography tokens: Bootstrap's :root tokens sit outside
+  // any cascade layer, so a layered override would lose.
+  :root {
+    // Solid fills behind white text.
+    --primary-bg: var(--blue-600);
+    --success-bg: var(--green-700);
+    --danger-bg: var(--red-600);
+    // Text on the page and on the theme's subtle background.
+    --primary-fg: light-dark(var(--blue-700), var(--blue-400));
+    --success-fg: light-dark(var(--green-700), var(--green-400));
+    --info-fg: light-dark(var(--cyan-700), var(--cyan-400));
+    --warning-fg: light-dark(var(--yellow-800), var(--yellow-400));
+  }
+}

package/styles/_icon.scss

@@ -0,0 +1,62 @@
+// <ngb-icon>: sizing and IconPark's four themes.
+// The generated SVGs read --ngb-icon-color-1…4. Each theme maps them onto the public fill tokens,
+// which can be set on any ancestor:
+//   --ngb-icon-fill-1   main stroke and fill        (default: currentColor)
+//   --ngb-icon-fill-2   accent fill                 (default: --primary-bg)
+//   --ngb-icon-fill-3   inner lines on solid shapes (default: --bg-body)
+//   --ngb-icon-fill-4   secondary accent            (default: --info-bg)
+//   --ngb-icon-size, --ngb-icon-stroke-width, --ngb-icon-linecap, --ngb-icon-linejoin
+
+@layer components {
+  .ngb-icon {
+    --ngb-icon-fill-1-resolved: var(--ngb-icon-fill-1, currentColor);
+    --ngb-icon-fill-2-resolved: var(--ngb-icon-fill-2, var(--primary-bg));
+    --ngb-icon-fill-3-resolved: var(--ngb-icon-fill-3, var(--bg-body));
+    --ngb-icon-fill-4-resolved: var(--ngb-icon-fill-4, var(--info-bg));
+
+    display: inline-block;
+    flex-shrink: 0;
+    inline-size: var(--ngb-icon-size, 1em);
+    block-size: var(--ngb-icon-size, 1em);
+    line-height: 0;
+    vertical-align: -0.125em;
+
+    > svg {
+      display: block;
+      inline-size: 100%;
+      block-size: 100%;
+    }
+  }
+
+  .ngb-icon-outline {
+    --ngb-icon-color-1: var(--ngb-icon-fill-1-resolved);
+    --ngb-icon-color-2: none;
+    --ngb-icon-color-3: var(--ngb-icon-fill-1-resolved);
+    --ngb-icon-color-4: none;
+  }
+
+  .ngb-icon-filled {
+    --ngb-icon-color-1: var(--ngb-icon-fill-1-resolved);
+    --ngb-icon-color-2: var(--ngb-icon-fill-1-resolved);
+    --ngb-icon-color-3: var(--ngb-icon-fill-3-resolved);
+    --ngb-icon-color-4: var(--ngb-icon-fill-3-resolved);
+  }
+
+  .ngb-icon-two-tone {
+    --ngb-icon-color-1: var(--ngb-icon-fill-1-resolved);
+    --ngb-icon-color-2: var(--ngb-icon-fill-2-resolved);
+    --ngb-icon-color-3: var(--ngb-icon-fill-1-resolved);
+    --ngb-icon-color-4: var(--ngb-icon-fill-2-resolved);
+  }
+
+  .ngb-icon-multi-color {
+    --ngb-icon-color-1: var(--ngb-icon-fill-1-resolved);
+    --ngb-icon-color-2: var(--ngb-icon-fill-2-resolved);
+    --ngb-icon-color-3: var(--ngb-icon-fill-3-resolved);
+    --ngb-icon-color-4: var(--ngb-icon-fill-4-resolved);
+  }
+
+  .ngb-icon-rtl:dir(rtl) {
+    transform: scaleX(-1);
+  }
+}

package/styles/_index.scss

@@ -0,0 +1,33 @@
+// @ngb-bootstrap/core stylesheet.
+// Load AFTER Bootstrap 6:
+//   @use "bootstrap/scss/bootstrap.scss";
+//   @use "@ngb-bootstrap/core/styles";
+// Component styles for things Bootstrap lacks are added here as they are built.
+@forward 'tokens';
+@forward 'typography';
+@forward 'contrast';
+@use 'tokens' as t;
+@use 'bootstrap/scss/mixins/_tokens.scss' as *;
+@use 'typography';
+@use 'contrast';
+@use 'icon';
+@use 'breadcrumb';
+@use 'button';
+@use 'choice';
+@use 'chip';
+@use 'input';
+@use 'card';
+@use 'layout';
+@use 'overlay';
+
+@layer components {
+  :root {
+    @include tokens(t.$ngb-root-tokens);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :root {
+      --ngb-transition-duration: 0s;
+    }
+  }
+}

package/styles/_input.scss

@@ -0,0 +1,9 @@
+// The clear button of ngb-textfield sits in a trailing .input-group-text cell. Give the cell the
+// input's background so it reads as part of the field, and trim its padding around the small X.
+
+@layer components {
+  .ngb-textfield-clear {
+    padding-inline: 0.5rem;
+    background-color: var(--btn-input-bg);
+  }
+}