@tabler/core 1.6.0 → 1.6.1

package/js/src/popover.ts

@@ -1,13 +1,19 @@
 import { Popover } from './bootstrap'
+import Manipulator from './bootstrap/dom/manipulator'
+import { onDOMContentLoaded } from './bootstrap/util/index'
 
 // js-docs-start popover-init
-const popoverTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[data-bs-toggle="popover"]'))
-popoverTriggerList.map(function (popoverTriggerEl: HTMLElement) {
-  const options = {
-    delay: { show: 50, hide: 50 },
-    html: popoverTriggerEl.getAttribute('data-bs-html') === 'true',
-    placement: popoverTriggerEl.getAttribute('data-bs-placement') ?? 'auto',
+onDOMContentLoaded(() => {
+  for (const popoverTriggerEl of document.querySelectorAll<HTMLElement>('[data-bs-toggle="popover"], [data-tblr-toggle="popover"]')) {
+    try {
+      const options = {
+        delay: Manipulator.getDataAttribute(popoverTriggerEl, 'delay') ?? { show: 50, hide: 50 },
+        placement: Manipulator.getDataAttribute(popoverTriggerEl, 'placement') ?? 'auto',
+      }
+      Popover.getOrCreateInstance(popoverTriggerEl, options)
+    } catch (error) {
+      console.error(error)
+    }
   }
-  return new Popover(popoverTriggerEl, options)
 })
 // js-docs-end popover-init

package/js/src/sidebar.ts

@@ -1,11 +1,12 @@
 import { Dropdown } from './bootstrap'
+import { onDOMContentLoaded } from './bootstrap/util/index'
 
 /*
 Folded sidebar toggle
  */
 // js-docs-start sidebar-folded-toggle
 const syncSidebarToggles = (folded: boolean): void => {
-  for (const toggle of document.querySelectorAll('[data-bs-toggle="sidebar-folded"]')) {
+  for (const toggle of document.querySelectorAll('[data-bs-toggle="sidebar-folded"], [data-tblr-toggle="sidebar-folded"]')) {
     toggle.setAttribute('aria-pressed', String(folded))
   }
 }
@@ -28,8 +29,9 @@ document.addEventListener('click', (event: MouseEvent) => {
     return
   }
 
-  const target = event.target as Element
-  if (target.closest('.navbar-vertical .dropdown-menu')) {
+  // A synthetic click dispatched on the document has no Element target.
+  const target = event.target
+  if (!(target instanceof Element) || target.closest('.navbar-vertical .dropdown-menu')) {
     return
   }
 
@@ -60,7 +62,8 @@ document.addEventListener(
 // The folded state may come pre-render from localStorage (tabler-theme.js), so
 // align the toggle buttons with it once the DOM is available. Server-rendered
 // open submenus are also closed, so they don't hang as open flyouts.
-document.addEventListener('DOMContentLoaded', () => {
+// onDOMContentLoaded runs at once when the script loads after the event.
+onDOMContentLoaded(() => {
   const folded = (document.documentElement.getAttribute('data-bs-sidebar') ?? '').startsWith('folded')
   syncSidebarToggles(folded)
 
@@ -73,7 +76,7 @@ document.addEventListener('DOMContentLoaded', () => {
 })
 
 document.addEventListener('click', (event: MouseEvent) => {
-  const trigger = (event.target as Element).closest('[data-bs-toggle="sidebar-folded"]')
+  const trigger = event.target instanceof Element ? event.target.closest('[data-bs-toggle="sidebar-folded"], [data-tblr-toggle="sidebar-folded"]') : null
   if (!trigger) {
     return
   }
@@ -89,7 +92,12 @@ document.addEventListener('click', (event: MouseEvent) => {
     html.removeAttribute('data-bs-sidebar')
   }
 
-  localStorage.setItem('tabler-sidebar', willFold ? 'folded-hover' : 'default')
+  // Storage may be blocked by the browser; the fold still applies to this page.
+  try {
+    localStorage.setItem('tabler-sidebar', willFold ? 'folded-hover' : 'default')
+  } catch {
+    // ignore
+  }
   syncSidebarToggles(willFold)
 
   // Close open sidebar dropdowns so an inline submenu doesn't turn into a

package/js/src/sortable.ts

@@ -101,7 +101,11 @@ class Sortable extends BaseComponent {
 
     if (raw) {
       try {
-        dataOptions = JSON.parse(raw)
+        const parsed: unknown = JSON.parse(raw)
+        // Only an object carries options; `null`, a number or an array is ignored.
+        if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+          dataOptions = parsed as Record<string, unknown>
+        }
       } catch {
         // ignore invalid JSON
       }

package/js/src/sparkline.ts

@@ -262,7 +262,9 @@ class Sparkline extends BaseComponent {
     this._element.querySelector(`.${CLASS_NAME_LABEL}`)?.remove()
 
     if (this._config.values.length === 0) {
-      this._element.innerHTML = ''
+      cancelAnimationFrame(this._frame)
+      previous?.remove()
+      EventHandler.trigger(this._element, EVENT_RENDERED)
       return
     }
 
@@ -308,7 +310,8 @@ class Sparkline extends BaseComponent {
 
   dispose(): void {
     cancelAnimationFrame(this._frame)
-    this._element.innerHTML = ''
+    this._element.querySelector('svg')?.remove()
+    this._element.querySelector(`.${CLASS_NAME_LABEL}`)?.remove()
     super.dispose()
   }
 
@@ -365,6 +368,12 @@ class Sparkline extends BaseComponent {
     const pairs = Array.from(to.children).map((target, i) => {
       const source = from.children[i]
       const tweens: [string, string, string][] = []
+      for (const { name } of Array.from(source.attributes)) {
+        if (!target.hasAttribute(name)) {
+          source.removeAttribute(name)
+        }
+      }
+
       for (const { name, value } of Array.from(target.attributes)) {
         const start = source.getAttribute(name)
         if (start === null || start === value) {
@@ -431,8 +440,8 @@ class Sparkline extends BaseComponent {
 
     const { min, span } = rangeOf(cfg.values, cfg.min, cfg.max, ...(cfg.threshold === null ? [] : [cfg.threshold]))
     const yOf = (value: number): number => cfg.pad + (1 - (value - min) / span) * (cfg.height - cfg.pad * 2)
-    const ys = cfg.values.map(yOf)
-    const step = ys.length > 1 ? cfg.width / (ys.length - 1) : cfg.width
+    const ys = cfg.values.length === 1 ? [yOf(cfg.values[0]), yOf(cfg.values[0])] : cfg.values.map(yOf)
+    const step = cfg.width / (ys.length - 1)
 
     if (cfg.threshold !== null) {
       this._hairline(svg, yOf(cfg.threshold), 'threshold', true)
@@ -463,7 +472,7 @@ class Sparkline extends BaseComponent {
     if (spotIndex >= 0) {
       const spot = svgEl('circle')
       setAttr(spot, {
-        cx: spotIndex * step,
+        cx: cfg.values.length === 1 ? cfg.width / 2 : spotIndex * step,
         cy: ys[spotIndex],
         r: getCssNumber(this._element, 'spot-size', 2),
         fill: cssVar('spot'),
@@ -560,7 +569,7 @@ class Sparkline extends BaseComponent {
     const cfg = this._config
     const svg = this._createSvg()
 
-    const strokeWidth = getCssNumber(this._element, 'stroke-width', 3)
+    const strokeWidth = getCssNumber(this._element, 'stroke-width', 2)
     const radius = Math.max(0, Math.min(cfg.width, cfg.height) / 2 - strokeWidth / 2)
     const cx = cfg.width / 2
     const cy = cfg.height / 2

package/js/src/strength.ts

@@ -9,6 +9,7 @@ import BaseComponent from './bootstrap/base-component'
 import EventHandler from './bootstrap/dom/event-handler'
 import SelectorEngine from './bootstrap/dom/selector-engine'
 import { initAll } from './bootstrap/util/component-functions'
+import { getElement } from './bootstrap/util/index'
 import type { ElementSelector } from './bootstrap/types'
 
 type StrengthLevel = 'weak' | 'fair' | 'good' | 'strong'
@@ -164,17 +165,29 @@ class Strength extends BaseComponent {
   }
 
   // Private
+  _configAfterMerge(config: ComponentConfig): ComponentConfig {
+    // A partial `messages` or `weights` overrides only the keys it names.
+    return {
+      ...config,
+      messages: { ...Default.messages, ...config.messages },
+      weights: { ...Default.weights, ...config.weights },
+    }
+  }
+
   _getInput(): HTMLInputElement | null {
     const { input } = this._config
     if (input) {
-      return SelectorEngine.findOne(input) as HTMLInputElement | null
+      return getElement(input) as HTMLInputElement | null
     }
 
-    // Without an explicit selector only the meter's own parent is searched, so
-    // a form with several password fields cannot bind the wrong one.
+    // Without an explicit selector only the meter's own parent is searched.
+    // The nearest field before the meter wins, so a confirm-password field
+    // placed after it is never mistaken for the one being rated; a meter
+    // placed above its field falls back to the first field after it.
     const parent = this._element.parentElement
     const fields = parent ? (SelectorEngine.find(SELECTOR_PASSWORD, parent) as HTMLInputElement[]) : []
-    return fields[fields.length - 1] ?? null
+    const precedingFields = fields.filter((field) => Boolean(field.compareDocumentPosition(this._element) & Node.DOCUMENT_POSITION_FOLLOWING))
+    return precedingFields[precedingFields.length - 1] ?? fields[0] ?? null
   }
 
   _getText(): HTMLElement | null {

package/js/src/switch-icon.ts

@@ -138,8 +138,19 @@ class SwitchIcon extends BaseComponent {
       .finally(() => this.#setLoading(false))
   }
 
+  dispose(): void {
+    // A wait() still pending must not leave the spinner on the button.
+    this.#setLoading(false)
+    super.dispose()
+  }
+
   // Private
   #setActive(active: boolean): void {
+    // A pending wait() may settle after dispose().
+    if (!this._element) {
+      return
+    }
+
     this.#iconElement.classList.toggle(CLASS_NAME_ACTIVE, active)
     this._element.setAttribute('aria-pressed', String(active))
 
@@ -147,6 +158,10 @@ class SwitchIcon extends BaseComponent {
   }
 
   #setLoading(loading: boolean): void {
+    if (!this._element) {
+      return
+    }
+
     this.#iconElement.classList.toggle(CLASS_NAME_LOADING, loading)
     if (loading) {
       this._element.setAttribute('aria-busy', 'true')

package/js/src/tab.ts

@@ -1,18 +1,28 @@
 import { Tab } from './bootstrap'
+import { onDOMContentLoaded } from './bootstrap/util/index'
 
 // js-docs-start tab-init
 export const EnableActivationTabsFromLocationHash = (): void => {
   const locationHash: string = window.location.hash
 
-  if (locationHash) {
-    const tabsList: HTMLAnchorElement[] = [].slice.call(document.querySelectorAll<HTMLAnchorElement>('[data-bs-toggle="tab"]'))
-    const matchedTabs = tabsList.filter((tab: HTMLAnchorElement) => tab.hash === locationHash)
+  if (!locationHash) {
+    return
+  }
+
+  for (const tab of document.querySelectorAll<HTMLAnchorElement>('[data-bs-toggle="tab"], [data-tblr-toggle="tab"]')) {
+    if (tab.hash !== locationHash) {
+      continue
+    }
 
-    matchedTabs.map((tab: HTMLAnchorElement) => {
-      new Tab(tab).show()
-    })
+    // A tab link outside a .nav/.list-group has no parent to switch in;
+    // show() would throw and stop the rest of the bundle.
+    try {
+      ;(Tab.getOrCreateInstance(tab) as InstanceType<typeof Tab>).show()
+    } catch (error) {
+      console.error(error)
+    }
   }
 }
 
-EnableActivationTabsFromLocationHash()
+onDOMContentLoaded(EnableActivationTabsFromLocationHash)
 // js-docs-end tab-init

package/js/src/toast.ts

@@ -1,17 +1,25 @@
 import { Toast } from './bootstrap'
+import SelectorEngine from './bootstrap/dom/selector-engine'
+import { onDOMContentLoaded } from './bootstrap/util/index'
 
 // js-docs-start toast-init
-const toastsTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[data-bs-toggle="toast"]'))
-toastsTriggerList.map(function (toastTriggerEl: HTMLElement) {
-  const target = toastTriggerEl.getAttribute('data-bs-target')
-  if (target === null) {
-    return
-  }
-
-  const toastEl = new Toast(target)
+onDOMContentLoaded(() => {
+  for (const toastTriggerEl of document.querySelectorAll<HTMLElement>('[data-bs-toggle="toast"], [data-tblr-toggle="toast"]')) {
+    try {
+      // A trigger whose target is missing is left alone instead of getting a
+      // click handler that throws.
+      const toastEl = SelectorEngine.getElementFromSelector(toastTriggerEl)
+      if (!toastEl) {
+        continue
+      }
 
-  toastTriggerEl.addEventListener('click', () => {
-    toastEl.show()
-  })
+      const toast = Toast.getOrCreateInstance(toastEl) as InstanceType<typeof Toast>
+      toastTriggerEl.addEventListener('click', () => {
+        toast.show()
+      })
+    } catch (error) {
+      console.error(error)
+    }
+  }
 })
 // js-docs-end toast-init

package/js/src/tooltip.ts

@@ -1,13 +1,22 @@
 import { Tooltip } from './bootstrap'
+import Manipulator from './bootstrap/dom/manipulator'
+import { onDOMContentLoaded } from './bootstrap/util/index'
 
 // js-docs-start tooltip-init
-const tooltipTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[data-bs-toggle="tooltip"]'))
-tooltipTriggerList.map(function (tooltipTriggerEl: HTMLElement) {
-  const options = {
-    delay: { show: 50, hide: 50 },
-    html: tooltipTriggerEl.getAttribute('data-bs-html') === 'true',
-    placement: tooltipTriggerEl.getAttribute('data-bs-placement') ?? 'auto',
+// One element with a broken config must not stop the rest of the bundle, so
+// every instance is created on its own. `data-bs-delay` on the element wins
+// over the shorter default delay.
+onDOMContentLoaded(() => {
+  for (const tooltipTriggerEl of document.querySelectorAll<HTMLElement>('[data-bs-toggle="tooltip"], [data-tblr-toggle="tooltip"]')) {
+    try {
+      const options = {
+        delay: Manipulator.getDataAttribute(tooltipTriggerEl, 'delay') ?? { show: 50, hide: 50 },
+        placement: Manipulator.getDataAttribute(tooltipTriggerEl, 'placement') ?? 'auto',
+      }
+      Tooltip.getOrCreateInstance(tooltipTriggerEl, options)
+    } catch (error) {
+      console.error(error)
+    }
   }
-  return new Tooltip(tooltipTriggerEl, options)
 })
 // js-docs-end tooltip-init

package/js/tabler-theme.ts

@@ -9,16 +9,40 @@ const params = new URLSearchParams(window.location.search)
 
 const prefersDark = window.matchMedia('(prefers-color-scheme: dark)')
 
+// A setting value is a short token: it ends up as a `data-bs-*` attribute on
+// <html> and in localStorage, so anything else from the URL is ignored.
+const VALUE_PATTERN = /^[a-z0-9-]{1,32}$/
+
+// Accessing localStorage throws when site data is blocked (Chrome "block all
+// cookies", Safari with storage disabled, partitioned third-party frames), so
+// every access is guarded and the switcher falls back to the page defaults.
+const storage = {
+  get(key: string): string | null {
+    try {
+      return localStorage.getItem(key)
+    } catch {
+      return null
+    }
+  },
+  set(key: string, value: string): void {
+    try {
+      localStorage.setItem(key, value)
+    } catch {
+      // ignore: the choice applies to this page only
+    }
+  },
+}
+
 for (const key in themeDefaults) {
   const param = params.get(key)
   let selectedValue: string
 
-  if (!!param) {
-    localStorage.setItem('tabler-' + key, param)
+  if (param && VALUE_PATTERN.test(param)) {
+    storage.set('tabler-' + key, param)
     selectedValue = param
   } else {
     // A stored choice wins; otherwise a server-rendered attribute is the starting value.
-    const storedTheme = localStorage.getItem('tabler-' + key)
+    const storedTheme = storage.get('tabler-' + key)
     const serverValue = document.documentElement.getAttribute('data-bs-' + key)
     selectedValue = storedTheme ?? serverValue ?? themeDefaults[key as ThemeKey]
   }
@@ -36,7 +60,7 @@ for (const key in themeDefaults) {
 
 prefersDark.addEventListener('change', (event) => {
   // No stored choice means the default, which is auto.
-  if ((localStorage.getItem('tabler-theme') ?? 'auto') === 'auto') {
+  if ((storage.get('tabler-theme') ?? 'auto') === 'auto') {
     if (event.matches) {
       document.documentElement.setAttribute('data-bs-theme', 'dark')
     } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tabler/core",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "homepage": "https://tabler.io",
   "repository": {
@@ -250,7 +250,7 @@
     "tom-select": "^2.6.2",
     "typed.js": "^3.0.0",
     "typescript": "^7.0.2",
-    "vanilla-calendar-pro": "^3.3.2",
+    "vanilla-calendar-pro": "^3.4.0",
     "vitest": "4.1.11"
   },
   "scripts": {

package/scss/layout/_navbar.scss

@@ -660,8 +660,7 @@ Navbar vertical
     // The sidebar is rendered for the expanded state, so the active submenu can
     // arrive open (.show). Folded, it would paint as a flyout until sidebar.ts
     // closes it on DOMContentLoaded — a flicker on every reload. Menus opened by
-    // the Dropdown plugin carry a popper data attribute (data-tblr-popper from
-    // tabler.js, data-bs-popper from Bootstrap's own js), so only the
+    // the Dropdown plugin carry a data-bs-popper attribute, so only the
     // server-rendered ones hide.
     .navbar-vertical .dropdown-menu.show:not([data-bs-popper]):not([data-tblr-popper]) {
       display: none;

package/scss/ui/_cards.scss

@@ -302,9 +302,21 @@ Stacked card
 }
 
 // Card progress
-// `.card >` outranks ui/_progress.scss's later `.progress { position: relative; }`.
-.card > .card-progress {
+.card-progress {
   --card-progress-height: #{$card-progress-height};
+  height: var(--card-progress-height);
+
+  &:last-child {
+    @include border-radius(0 0 2px 2px);
+  }
+
+  &:first-child {
+    @include border-radius(2px 2px 0 0);
+  }
+}
+
+// `.card >` outranks the fallback above and ui/_progress.scss's later `.progress { position: relative; }`.
+.card > .card-progress {
   --card-progress-offset: calc(-1 * var(--card-border-width));
   position: absolute;
   inset: var(--card-progress-offset);