npm - @finqu/cool - Versions diffs - 1.2.29 → 1.3.0 - Mend

@finqu/cool 1.2.29 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (206) hide show

package/README.md +680 -1
package/dist/css/cool.css +23575 -16644
package/dist/css/cool.css.map +1 -154
package/dist/css/cool.min.css +89 -3
package/dist/css/cool.min.css.map +1 -1
package/dist/js/cool.bundle.js +15402 -3800
package/dist/js/cool.bundle.js.map +1 -1
package/dist/js/cool.bundle.min.js +20 -8
package/dist/js/cool.bundle.min.js.map +1 -1
package/dist/js/cool.esm.js +4269 -3360
package/dist/js/cool.esm.js.map +1 -1
package/dist/js/cool.esm.min.js +9 -8
package/dist/js/cool.esm.min.js.map +1 -1
package/dist/js/cool.js +4271 -3362
package/dist/js/cool.js.map +1 -1
package/dist/js/cool.min.js +9 -8
package/dist/js/cool.min.js.map +1 -1
package/package.json +94 -61
package/.babelrc.js +0 -20
package/.browserslistrc +0 -13
package/build/.eslintrc.json +0 -10
package/build/banner.js +0 -14
package/build/build-plugins.js +0 -92
package/build/rollup.config.js +0 -46
package/dist/css/cool-grid.css +0 -4390
package/dist/css/cool-grid.css.map +0 -30
package/dist/css/cool-grid.min.css +0 -7
package/dist/css/cool-grid.min.css.map +0 -1
package/dist/css/cool-reboot.css +0 -286
package/dist/css/cool-reboot.css.map +0 -62
package/dist/css/cool-reboot.min.css +0 -7
package/dist/css/cool-reboot.min.css.map +0 -1
package/html/index.html +0 -2703
package/js/dist/collapse.js +0 -5535
package/js/dist/collapse.js.map +0 -1
package/js/dist/common.js +0 -21996
package/js/dist/common.js.map +0 -1
package/js/dist/cooldropdown.js +0 -467
package/js/dist/cooldropdown.js.map +0 -1
package/js/dist/coolpopover.js +0 -391
package/js/dist/coolpopover.js.map +0 -1
package/js/dist/coolsectiontabs.js +0 -256
package/js/dist/coolsectiontabs.js.map +0 -1
package/js/dist/coolselect.js +0 -796
package/js/dist/coolselect.js.map +0 -1
package/js/dist/cooltooltip.js +0 -360
package/js/dist/cooltooltip.js.map +0 -1
package/js/dist/coolui.js +0 -73
package/js/dist/coolui.js.map +0 -1
package/js/dist/dropdown.js +0 -27421
package/js/dist/dropdown.js.map +0 -1
package/js/dist/popover.js +0 -9472
package/js/dist/popover.js.map +0 -1
package/js/dist/sectiontabs.js +0 -4483
package/js/dist/sectiontabs.js.map +0 -1
package/js/dist/select.js +0 -37080
package/js/dist/select.js.map +0 -1
package/js/dist/tooltip.js +0 -8786
package/js/dist/tooltip.js.map +0 -1
package/js/index.esm.js +0 -21
package/js/index.umd.js +0 -21
package/js/src/abstract-ui-component.js +0 -81
package/js/src/collapse.js +0 -286
package/js/src/common.js +0 -296
package/js/src/dialog.js +0 -579
package/js/src/dropdown.js +0 -525
package/js/src/popover.js +0 -632
package/js/src/section-tabs.js +0 -215
package/js/src/select.js +0 -1342
package/js/src/toast.js +0 -581
package/js/src/tooltip.js +0 -591
package/js/src/util/animate-css.js +0 -22
package/js/src/util/index.js +0 -122
package/js/src/util/perfect-scrollbar.js +0 -1316
package/less/alert.less +0 -345
package/less/badge.less +0 -38
package/less/bootstrap-noconflict.less +0 -23
package/less/bootstrap.less +0 -23
package/less/button-group.less +0 -153
package/less/buttons.less +0 -287
package/less/dialog-noconflict.less +0 -174
package/less/dialog.less +0 -203
package/less/dropdown.less +0 -209
package/less/forms.less +0 -770
package/less/images.less +0 -242
package/less/input-group.less +0 -163
package/less/list-group.less +0 -73
package/less/mixins/aspect-ratio.less +0 -23
package/less/mixins/border-radius.less +0 -24
package/less/mixins/box-shadow.less +0 -4
package/less/mixins/buttons.less +0 -17
package/less/mixins/caret.less +0 -51
package/less/mixins/clearfix.less +0 -10
package/less/mixins/gradients.less +0 -34
package/less/mixins/nav-divider.less +0 -7
package/less/mixins/object-fit.less +0 -13
package/less/mixins/reset-text.less +0 -16
package/less/mixins.less +0 -11
package/less/package.json +0 -11
package/less/pagination.less +0 -69
package/less/popover.less +0 -143
package/less/project.sublime-workspace +0 -774
package/less/reboot.less +0 -235
package/less/section.less +0 -793
package/less/select.less +0 -150
package/less/tables.less +0 -737
package/less/tabs.less +0 -162
package/less/tooltip.less +0 -87
package/less/type.less +0 -71
package/less/utilities/align.less +0 -27
package/less/utilities/animate.less +0 -3512
package/less/utilities/background.less +0 -70
package/less/utilities/borders.less +0 -16
package/less/utilities/color.less +0 -70
package/less/utilities/cursor.less +0 -8
package/less/utilities/display.less +0 -38
package/less/utilities/embed.less +0 -61
package/less/utilities/flex.less +0 -76
package/less/utilities/jquery-ui.less +0 -116
package/less/utilities/lazyload.less +0 -29
package/less/utilities/overflow.less +0 -11
package/less/utilities/pace.less +0 -25
package/less/utilities/placeholder.less +0 -60
package/less/utilities/position.less +0 -42
package/less/utilities/scrollbar.less +0 -152
package/less/utilities/spacing.less +0 -197
package/less/utilities/text.less +0 -68
package/less/utilities/transform.less +0 -7
package/less/utilities.less +0 -21
package/less/variables.less +0 -343
package/scss/LISENCE +0 -15
package/scss/_alert.scss +0 -102
package/scss/_badge.scss +0 -102
package/scss/_button-group.scss +0 -129
package/scss/_buttons.scss +0 -248
package/scss/_custom-forms.scss +0 -444
package/scss/_dialog.scss +0 -160
package/scss/_dropdown.scss +0 -233
package/scss/_forms.scss +0 -258
package/scss/_frame.scss +0 -627
package/scss/_functions.scss +0 -124
package/scss/_grid.scss +0 -35
package/scss/_images.scss +0 -361
package/scss/_input-group.scss +0 -285
package/scss/_list-group.scss +0 -82
package/scss/_mixins.scss +0 -34
package/scss/_navbar.scss +0 -290
package/scss/_notification.scss +0 -13
package/scss/_pagination.scss +0 -88
package/scss/_popover.scss +0 -167
package/scss/_reboot.scss +0 -284
package/scss/_root.scss +0 -15
package/scss/_section.scss +0 -977
package/scss/_select.scss +0 -187
package/scss/_tables.scss +0 -735
package/scss/_tabs.scss +0 -178
package/scss/_toast.scss +0 -182
package/scss/_tooltip.scss +0 -101
package/scss/_type.scss +0 -129
package/scss/_utilities.scss +0 -23
package/scss/_variables.scss +0 -823
package/scss/cool-grid.scss +0 -29
package/scss/cool-reboot.scss +0 -11
package/scss/cool.scss +0 -37
package/scss/mixins/_alert-variant.scss +0 -20
package/scss/mixins/_aspect-ratio.scss +0 -29
package/scss/mixins/_background-variant.scss +0 -25
package/scss/mixins/_badge-variant.scss +0 -36
package/scss/mixins/_breakpoints.scss +0 -102
package/scss/mixins/_buttons.scss +0 -104
package/scss/mixins/_caret.scss +0 -80
package/scss/mixins/_clearfix.scss +0 -10
package/scss/mixins/_float.scss +0 -14
package/scss/mixins/_forms.scss +0 -67
package/scss/mixins/_gradients.scss +0 -40
package/scss/mixins/_grid-framework.scss +0 -72
package/scss/mixins/_grid.scss +0 -60
package/scss/mixins/_nav-divider.scss +0 -9
package/scss/mixins/_notification-variant.scss +0 -7
package/scss/mixins/_object-fit.scss +0 -16
package/scss/mixins/_reset-text.scss +0 -19
package/scss/mixins/_text-emphasis.scss +0 -21
package/scss/mixins/_text-hide.scss +0 -10
package/scss/mixins/_text-truncate.scss +0 -81
package/scss/mixins/_visibility.scss +0 -7
package/scss/project.sublime-workspace +0 -491
package/scss/utilities/_align.scss +0 -41
package/scss/utilities/_animate.scss +0 -3512
package/scss/utilities/_background.scss +0 -14
package/scss/utilities/_borders.scss +0 -146
package/scss/utilities/_clearfix.scss +0 -6
package/scss/utilities/_collapse.scss +0 -33
package/scss/utilities/_cursor.scss +0 -22
package/scss/utilities/_display.scss +0 -16
package/scss/utilities/_embed.scss +0 -78
package/scss/utilities/_flex.scss +0 -52
package/scss/utilities/_lazyload.scss +0 -31
package/scss/utilities/_overflow.scss +0 -6
package/scss/utilities/_perfect-scrollbar.scss +0 -141
package/scss/utilities/_placeholder.scss +0 -77
package/scss/utilities/_position.scss +0 -30
package/scss/utilities/_sizing.scss +0 -32
package/scss/utilities/_spacing.scss +0 -92
package/scss/utilities/_text.scss +0 -99
package/scss/utilities/_user-select.scss +0 -14
package/scss/utilities/_visibility.scss +0 -10

package/README.md CHANGED Viewed

@@ -1 +1,680 @@
-### Finqu UI
+# Cool UI
+Build beautiful, responsive web interfaces. Fast, flexible, and effortlessly customizable.
+Cool UI is a CSS + JavaScript UI toolkit built by [Finqu](https://finqu.com). It provides a comprehensive set of layout primitives, components, and utility classes — all customizable at runtime through CSS custom properties.
+The JavaScript layer is written in **native ECMAScript** (ES classes, `document.querySelector`, `ResizeObserver`, etc.). A thin jQuery compatibility wrapper is included for legacy support, but **jQuery is not required to use the public API**.
+---
+## What's in the package
+When you install `@finqu/cool`, you get the `dist/` folder:
+### CSS
+| File | Description |
+|------|-------------|
+| `dist/css/cool.css` | Full framework — all components, layout, and utilities |
+| `dist/css/cool.min.css` | Minified production build |
+| `dist/css/cool.css.map` | Source map |
+| `dist/css/cool.min.css.map` | Minified source map |
+### JavaScript
+| File | Description |
+|------|-------------|
+| `dist/js/cool.bundle.js` | UMD bundle with all dependencies (jQuery, PerfectScrollbar) included |
+| `dist/js/cool.bundle.min.js` | Minified UMD bundle |
+| `dist/js/cool.esm.js` | ES module build (external jQuery) |
+| `dist/js/cool.esm.min.js` | Minified ES module build |
+| `dist/js/cool.js` | UMD standalone build (external jQuery) |
+| `dist/js/cool.min.js` | Minified UMD standalone |
+**Bundle vs Standalone:** The `.bundle.js` files include jQuery and PerfectScrollbar for legacy compatibility. The standalone `.js` and `.esm.js` files keep these as external dependencies.
+---
+## Installation
+```bash
+npm install @finqu/cool
+```
+```bash
+yarn add @finqu/cool
+```
+```bash
+pnpm add @finqu/cool
+```
+---
+## Quick start
+### With a bundler (Webpack, Vite, Rollup, etc.)
+```js
+// Import CSS (side-effect import)
+import '@finqu/cool/dist/css/cool.css';
+// Import JS (ES module)
+import Cool from '@finqu/cool/dist/js/cool.esm.js';
+// Initialize when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+  Cool.initialize();
+});
+```
+> The ESM build expects jQuery and PerfectScrollbar as external dependencies. The bundle build (`cool.bundle.js`) includes them automatically.
+### Without a bundler (script tags)
+Use the self-contained bundle that includes all dependencies:
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="node_modules/@finqu/cool/dist/css/cool.min.css">
+</head>
+<body>
+  <!-- Your markup -->
+  <script src="node_modules/@finqu/cool/dist/js/cool.bundle.min.js"></script>
+  <script>
+    Cool.initialize();
+  </script>
+</body>
+</html>
+```
+The UMD bundle exposes a global `Cool` object.
+---
+## Usage
+Cool UI uses a flat class naming convention (no BEM nesting in class names). All CSS properties are scoped under the `--cool-*` namespace.
+### Grid
+A 12-column flexbox grid system with responsive breakpoints.
+```html
+<div class="container">
+  <div class="row">
+    <div class="col-6">Half width</div>
+    <div class="col-6">Half width</div>
+  </div>
+</div>
+```
+**Containers:** `.container` (responsive max-width), `.container-fluid` (full width), `.container-content` (content-constrained width).
+**Responsive columns:** `.col-sm-*`, `.col-md-*`, `.col-lg-*`, `.col-xl-*`
+**Gutters:** `.g-0` through `.g-6`, `.gx-*` (horizontal), `.gy-*` (vertical). Responsive: `.g-md-3`, etc.
+**Offsets:** `.offset-1` through `.offset-11`, with responsive variants.
+### Buttons
+```html
+<button class="btn btn-primary">Primary</button>
+<button class="btn btn-secondary">Secondary</button>
+<button class="btn btn-brand">Brand</button>
+<button class="btn btn-action">Action</button>
+<button class="btn btn-outline-primary">Outline Primary</button>
+<button class="btn btn-outline-secondary">Outline Secondary</button>
+<button class="btn btn-remove">Remove</button>
+<button class="btn btn-link">Link style</button>
+```
+**Sizes:** `.btn-xs`, `.btn-sm`, `.btn-lg`
+**Full width:** `.btn-block`
+**Icon button** (square, equal width/height):
+```html
+<button class="btn btn-icon btn-primary">
+  <span class="icon">✕</span>
+</button>
+```
+### Forms
+```html
+<div class="form-group">
+  <label>Email</label>
+  <input type="email" class="form-control" placeholder="you@example.com">
+</div>
+```
+**Sizes:** `.form-control-sm`, `.form-control-lg`
+**Floating labels:**
+```html
+<div class="form-label-group label-on-top">
+  <input type="text" class="form-control" id="name" placeholder="Name">
+  <label for="name">Name</label>
+</div>
+```
+**Checkbox:**
+```html
+<div class="form-check">
+  <input type="checkbox" id="check1">
+  <label for="check1">
+    <span class="form-check-icon">
+      <svg viewBox="0 0 12 10"><polyline points="1.5 6 4.5 9 10.5 1"></polyline></svg>
+    </span>
+    <span class="form-check-label">Check me</span>
+  </label>
+</div>
+```
+**Switch:**
+```html
+<div class="form-switch">
+  <input type="checkbox" class="form-switch-input" id="switch1">
+  <label class="form-switch-label" for="switch1"></label>
+</div>
+```
+**Validation:** Add `.is-valid` or `.is-invalid` to `.form-control` or `.input-group`. Pair with `.valid-feedback` / `.invalid-feedback`.
+### Dropdown (requires JS)
+```html
+<div class="dropdown">
+  <button data-toggle="dropdown" class="btn btn-secondary">
+    Menu
+  </button>
+  <div class="dropdown-menu">
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
+    <div class="dropdown-divider"></div>
+    <a class="dropdown-item" href="#">Separated link</a>
+  </div>
+</div>
+```
+### Dialog (requires JS)
+Dialogs are created programmatically. `Cool.initialize()` creates a Dialog singleton on `document.body`.
+**Native:**
+```js
+const dialog = Cool.Dialog.instances[0];
+dialog.init({
+  title: 'Confirm action',
+  body: '<p>Are you sure?</p>',
+  size: 'sm',              // '', 'sm', 'md', 'lg', 'xl', 'full'
+  centered: true,
+  callbacks: {
+    confirm: function(done) {
+      // Perform action, then close
+      done();
+    },
+    close: function(done) {
+      done();
+    }
+  },
+  actions: {
+    confirm: { content: 'Yes, confirm' },
+    close:   { content: 'Cancel' }
+  }
+});
+```
+**Legacy jQuery wrapper:**
+```js
+const dialog = $('body').data('plugin_coolDialog');
+dialog.init({ title: 'Confirm', body: '<p>Are you sure?</p>' });
+```
+### Toast (requires JS)
+Toasts are created programmatically. `Cool.initialize()` creates a Toast singleton on `document.body`.
+**Native:**
+```js
+const toast = Cool.Toast.instances[0];
+toast.init({
+  content: 'Settings saved successfully',
+  theme: 'dark',            // 'dark' or 'light'
+  placement: 'bottom-center',
+  dismiss: 3                // auto-dismiss in seconds
+});
+```
+**Legacy jQuery wrapper:**
+```js
+const toast = $('body').data('plugin_coolToast');
+toast.init({ content: 'Settings saved successfully' });
+```
+### Tooltip (requires JS)
+```html
+<button data-toggle="tooltip" data-content="Helpful tip" data-placement="top">
+  Hover me
+</button>
+```
+Tooltips are auto-initialized by `Cool.initialize()`.
+### Popover (requires JS)
+```html
+<button data-toggle="popover"
+        data-title="Popover title"
+        data-content="Popover body content"
+        data-placement="bottom"
+        data-trigger="click">
+  Click me
+</button>
+```
+### Collapse (requires JS)
+```html
+<button data-toggle="collapse" data-target="#collapseContent" aria-expanded="false">
+  Toggle content
+</button>
+<div id="collapseContent" class="collapse">
+  <p>Collapsible content here.</p>
+</div>
+```
+### Select (requires JS)
+The custom select component replaces native selects with a searchable, styled dropdown:
+```html
+<div class="select-container" data-toggle="select" data-name="category" data-type="radio">
+  <div class="select">
+    <div class="select-header">
+      <span class="select-title">Choose…</span>
+      <span class="select-icon">▾</span>
+    </div>
+    <!-- Items are rendered by JS -->
+  </div>
+</div>
+```
+### Tables
+```html
+<table class="table">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Status</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Item one</td>
+      <td><span class="badge badge-success badge-sm">Active</span></td>
+    </tr>
+  </tbody>
+</table>
+```
+**Variants:** `.table-sm`, `.table-borderless`, `.table-hover`, `.table-striped`
+### Badges
+```html
+<span class="badge badge-primary">Default</span>
+<span class="badge badge-success badge-sm">Active</span>
+<span class="badge badge-outline-danger badge-xs">Urgent</span>
+```
+**Themes:** `.badge-primary`, `.badge-secondary`, `.badge-success`, `.badge-info`, `.badge-warning`, `.badge-danger`, `.badge-light`, `.badge-medium`, `.badge-dark`, `.badge-brand`
+**Outline:** `.badge-outline-primary`, `.badge-outline-danger`, etc.
+**Sizes:** `.badge-xs`, `.badge-sm`
+### Alerts & Notifications
+```html
+<div class="alert alert-info">
+  <div class="alert-icon">
+    <span class="icon">ℹ</span>
+  </div>
+  <div class="alert-content-container">
+    <div class="alert-content">This is an informational alert.</div>
+  </div>
+</div>
+```
+**Themes:** `.alert-primary`, `.alert-secondary`, `.alert-success`, `.alert-info`, `.alert-warning`, `.alert-danger`, etc.
+### List Group
+```html
+<div class="list-group list-group-bordered list-group-hover">
+  <div class="list-group-item">Item one</div>
+  <div class="list-group-item">Item two</div>
+  <div class="list-group-item">Item three</div>
+</div>
+```
+### Pagination
+```html
+<ul class="pagination">
+  <li class="page-item disabled"><a class="page-link" href="#">‹</a></li>
+  <li class="page-item active"><a class="page-link" href="#">1</a></li>
+  <li class="page-item"><a class="page-link" href="#">2</a></li>
+  <li class="page-item"><a class="page-link" href="#">3</a></li>
+  <li class="page-item"><a class="page-link" href="#">›</a></li>
+</ul>
+```
+### Sections
+Sections are card-like content containers:
+```html
+<div class="section">
+  <div class="section-title">
+    <div class="title"><p>Section title</p></div>
+  </div>
+  <div class="section-content">
+    <p>Section body content.</p>
+  </div>
+</div>
+```
+---
+## JavaScript initialization
+Cool UI's JavaScript is written in native ECMAScript. A jQuery compatibility wrapper is included for legacy support. All public APIs are available through the global `Cool` object.
+### Full initialization
+```js
+Cool.initialize({
+  // Optional per-component settings
+  popover: { /* Popover defaults */ },
+  dropdown: { /* Dropdown defaults */ },
+  tooltip: { /* Tooltip defaults */ },
+  select: { /* Select defaults */ },
+  collapse: { /* Collapse defaults */ },
+  sidebar: { /* Sidebar defaults */ },
+  toast: { /* Toast defaults */ },
+  dialog: { /* Dialog defaults */ }
+});
+```
+`Cool.initialize()` scans the DOM for `data-toggle` attributes and instantiates the matching component:
+| `data-toggle` value | Component |
+|---------------------|-----------|
+| `popover` | Popover |
+| `dropdown` | Dropdown |
+| `tooltip` | Tooltip |
+| `select` | Select |
+| `collapse` | Collapse |
+| `section-tabs` | SectionTabs |
+**Dialog** and **Toast** are initialized on `document.body` and used programmatically.
+### Initializing dynamically added content
+After adding HTML to the DOM, initialize new `data-toggle` elements:
+```js
+Cool.initComponent('#my-new-container');
+// or
+Cool.initComponent(document.getElementById('my-new-container'));
+```
+### Re-initializing after DOM changes
+```js
+Cool.refresh();
+```
+### Global API
+All methods are available directly on the `Cool` global:
+```js
+Cool.initialize(opts)            // Initialize all components
+Cool.refresh()                   // Re-scan DOM for new data-toggle elements
+Cool.initComponent(selector)     // Initialize components within a container
+Cool.destroy()                   // Tear down all components
+Cool.getSidebar()                // Returns the Sidebar instance
+Cool.getSection()                // Returns the Section instance
+Cool.observeResize(el, cb)       // Watch element for size changes
+Cool.unobserveResize(el)         // Stop watching
+Cool.addScrollListener(id, cb)   // Register a scroll handler
+Cool.removeScrollListener(id)    // Unregister a scroll handler
+```
+### Accessing component instances
+Every component class has a static `instances` array. Singletons like Dialog and Toast
+have one entry; per-element components (Dropdown, Tooltip, etc.) have one entry per element.
+**Native:**
+```js
+// Singletons (one instance on document.body)
+const dialog = Cool.Dialog.instances[0];
+const toast  = Cool.Toast.instances[0];
+// Per-element components
+const dropdowns = Cool.Dropdown.instances;  // all Dropdown instances
+const tooltips  = Cool.Tooltip.instances;   // all Tooltip instances
+// Sidebar & Section (dedicated getters)
+const sidebar = Cool.getSidebar();
+const section = Cool.getSection();
+```
+**Legacy jQuery wrapper:**
+```js
+// Per-element
+const dropdown = $(element).data('plugin_coolDropdown');
+dropdown.show();
+dropdown.close();
+dropdown.destroy();
+const tooltip = $(element).data('plugin_coolTooltip');
+tooltip.show();
+tooltip.close();
+// Singletons
+const toast  = $('body').data('plugin_coolToast');
+const dialog = $('body').data('plugin_coolDialog');
+```
+### Component lifecycle callbacks
+All components support lifecycle callbacks:
+```js
+Cool.initialize({
+  dropdown: {
+    onInit: function() { /* Fired when initialized */ },
+    onShow: function() { /* Fired when shown */ },
+    onClose: function() { /* Fired when closed */ },
+    onDestroy: function() { /* Fired when destroyed */ }
+  }
+});
+```
+### Utility helpers
+```js
+// Observe element resize
+Cool.observeResize(element, (entry) => { /* ... */ });
+Cool.unobserveResize(element);
+// Scroll listeners
+Cool.addScrollListener('my-id', () => { /* ... */ });
+Cool.removeScrollListener('my-id');
+```
+---
+## Customization
+Cool UI exposes **hundreds of CSS custom properties** on `:root`, all prefixed with `--cool-*`. Since consumers use the compiled CSS output, customization is done by overriding these properties — **not** by modifying Sass variables.
+### Overriding CSS custom properties
+```css
+:root {
+  /* Theme colors */
+  --cool-theme-color-primary: #1a56db;
+  --cool-theme-foreground-color-primary: #ffffff;
+  --cool-theme-color-brand: #ff6600;
+  /* Typography */
+  --cool-font-family-base: 'Inter', sans-serif;
+  --cool-font-size-base: 15px;
+  /* Spacing */
+  --cool-spacer: 1rem;
+  /* Border radius */
+  --cool-border-radius: 8px;
+  --cool-section-border-radius: 12px;
+  /* Buttons */
+  --cool-btn-border-radius: 6px;
+  --cool-btn-font-weight: 600;
+  /* Inputs */
+  --cool-input-border-radius: 6px;
+  --cool-input-border-color: #d0d5dd;
+  /* Shadows */
+  --cool-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+```
+### Key customization categories
+| Category | Example properties |
+|----------|-------------------|
+| **Colors** | `--cool-theme-color-primary`, `--cool-theme-color-secondary`, `--cool-theme-color-success`, `--cool-theme-color-danger`, `--cool-theme-color-brand` |
+| **Grey scale** | `--cool-color-grey-50` through `--cool-color-grey-950` |
+| **Typography** | `--cool-font-family-base`, `--cool-font-size-base`, `--cool-font-weight-base`, `--cool-line-height-base` |
+| **Headings** | `--cool-h1-font-size` through `--cool-h6-font-size`, `--cool-headings-font-family`, `--cool-headings-font-weight` |
+| **Body** | `--cool-body-bg`, `--cool-body-color` |
+| **Links** | `--cool-link-color`, `--cool-link-hover-color` |
+| **Buttons** | `--cool-btn-padding-y`, `--cool-btn-padding-x`, `--cool-btn-font-size`, `--cool-btn-border-radius` |
+| **Forms** | `--cool-input-height`, `--cool-input-bg`, `--cool-input-border-color`, `--cool-input-border-radius` |
+| **Grid** | `--cool-grid-columns`, `--cool-grid-gutter-x`, `--cool-grid-gutter-y` |
+| **Sections** | `--cool-section-border-radius`, `--cool-section-bg`, `--cool-section-border-color` |
+| **Navbar** | `--cool-navbar-bg`, `--cool-navbar-height`, `--cool-navbar-color` |
+| **Dialog** | `--cool-dialog-bg`, `--cool-dialog-width`, `--cool-dialog-padding-x` |
+| **Dropdown** | `--cool-dropdown-bg`, `--cool-dropdown-border-radius`, `--cool-dropdown-box-shadow` |
+| **Toast** | `--cool-toast-bg-dark`, `--cool-toast-bg-light`, `--cool-toast-border-radius` |
+| **Tooltip** | `--cool-tooltip-bg`, `--cool-tooltip-color`, `--cool-tooltip-border-radius` |
+| **Badge** | `--cool-badge-font-size`, `--cool-badge-border-radius`, `--cool-badge-padding-y` |
+| **Shadows** | `--cool-box-shadow-sm`, `--cool-box-shadow`, `--cool-box-shadow-lg` |
+| **Z-index** | `--cool-zindex-dropdown`, `--cool-zindex-dialog`, `--cool-zindex-toast`, `--cool-zindex-tooltip` |
+### Scoped overrides
+Override properties on a specific element for component-level customization:
+```html
+<button class="btn btn-primary" style="--cool-btn-border-radius: 999px;">
+  Pill button
+</button>
+```
+### Utility classes
+Cool UI ships a full set of utility classes:
+- **Display:** `.d-none`, `.d-flex`, `.d-block`, `.d-inline`, `.d-grid`, plus responsive variants (`.d-md-flex`)
+- **Flexbox:** `.flex-row`, `.flex-column`, `.flex-wrap`, `.justify-content-*`, `.align-items-*`, `.flex-grow-*`, `.flex-shrink-*`
+- **Spacing:** `.m-0` through `.m-6`, `.p-0` through `.p-6`, with directional variants (`.mt-*`, `.px-*`, `.mb-auto`) and responsive variants
+- **Text:** `.text-left`, `.text-center`, `.text-right`, `.text-truncate`, `.text-uppercase`, `.text-lowercase`, `.text-nowrap`, `.font-weight-bold`, `.font-weight-normal`
+- **Background:** `.bg-primary`, `.bg-secondary`, `.bg-success`, `.bg-danger`, etc.
+- **Borders:** `.border`, `.border-0`, `.rounded`, `.rounded-circle`
+- **Sizing:** `.w-100`, `.w-50`, `.h-100`, `.mw-100`
+- **Position:** `.position-relative`, `.position-absolute`, `.position-fixed`, `.position-sticky`
+- **Overflow:** `.overflow-hidden`, `.overflow-auto`, `.overflow-visible`
+- **Visibility:** `.visible`, `.invisible`
+- **Opacity:** `.opacity-0`, `.opacity-25`, `.opacity-50`, `.opacity-75`, `.opacity-100`
+- **Shadows:** `.shadow-sm`, `.shadow`, `.shadow-lg`, `.shadow-none`
+- **Z-index:** `.z-0`, `.z-1`, `.z-2`, `.z-3`
+- **Cursor:** `.cursor-pointer`, `.cursor-default`, `.cursor-grab`
+- **Pointer events:** `.pe-none`, `.pe-auto`
+- **User select:** `.user-select-none`, `.user-select-all`, `.user-select-auto`
+- **Screen readers:** `.sr-only`
+---
+## CSS layers
+Cool UI uses CSS `@layer` for cascade management:
+```
+reset, base, layout, vendor, icons, components, utilities, app
+```
+The `app` layer is reserved for your application styles and has the highest priority by default.
+---
+## Browser support
+Defined in `.browserslistrc`:
+- Chrome ≥ 60
+- Firefox ≥ 60
+- Edge ≥ 79
+- Safari ≥ 12
+- iOS ≥ 12
+- Android ≥ 6
+---
+## Dependencies
+Cool UI's JavaScript is written in native ECMAScript. jQuery is used only as a
+legacy compatibility layer for the plugin wrapper pattern.
+| Dependency | Purpose | Included in bundle | Required for standalone/ESM |
+|------------|---------|-------------------|-----------------------------|
+| [jQuery](https://jquery.com/) ^3.7.1 | Legacy plugin wrapper | ✅ `cool.bundle.js` | Must be provided externally |
+| [PerfectScrollbar](https://github.com/mdbootstrap/perfect-scrollbar) ^1.5.6 | Custom scrollbars | ✅ `cool.bundle.js` | Must be provided externally |
+---
+## License
+ISC — see [LICENSE](https://opensource.org/licenses/ISC) for details.
+Copyright © 2026 [Finqu Oy](https://finqu.com).