@vanelsas/baredom 3.1.0 → 3.2.0

package/CHANGELOG.md

@@ -2,6 +2,33 @@
 
 All notable changes to BareDOM will be documented in this file.
 
+## [3.2.0] - 2026-05-22
+
+Five new components, an element-highlight feature for the `x-trace-history` dev tool, two notable bug fixes, and an internal naming-consistency cleanup.
+
+### Added
+
+- **x-split-pane** — Resizable two-panel layout. A draggable divider re-proportions a `start` and an `end` panel along a horizontal or vertical axis. The divider position is a percentage held in the `position` attribute — the single source of truth — so layouts are fully serialisable and the component stays stateless. Nest panes for three or more panels.
+- **x-code** — Code-display component. Reads source code from its own light-DOM text content, tokenizes it with a built-in syntax highlighter, and renders a themable code block with optional line numbers, soft-wrapping, a header bar with a copy button, and a collapsible long-snippet mode.
+- **x-calendar** — Standalone, always-visible inline month calendar — a companion to `x-date-picker`. Supports single-date and date-range selection, localized weekday/month names, configurable first-day-of-week, a month/year quick-jump header, and an optional ISO week-number column. Dates are ISO 8601 strings.
+- **x-range-slider** — Dual-handle, form-associated, accessible range slider. Two draggable thumbs select a numeric `[start, end]` sub-range within `[min, max]`.
+- **x-rating** — Discrete, form-associated, accessible star-rating component. A row of star (or heart) icons selects a numeric rating, optionally in half-star increments; `readonly` mode displays an average rating such as `3.5`.
+- **`x-trace-history` element highlight** — Selecting a record in the dock now outlines the live web component that emitted it with a magenta accent overlay. The outline tracks the target through scroll/resize, smoothly scrolls offscreen targets into view (respecting `prefers-reduced-motion`), and clears when selection clears, when the dock unmounts, or when the originating element has been disconnected since the record was emitted. `document`-tag records produce no outline. The highlight machinery emits zero trace records, and the dock remains opt-in via `?baredom-trace-history` — never shipped in production.
+
+### Fixed
+
+- **x-card** — Interactive cards declared in HTML with an observed attribute set at upgrade time silently never installed their listeners, so `<x-card interactive>` never responded to clicks. `connected!`'s install guard conflated refs-init with listener-install; the install epoch now lives on its own `k-installed` field, gated independently of refs init.
+- **x-modal** — `x-modal-toggle` was dispatched on every connect because the open-transition epoch started at `nil` and always differed from the initial open state. The toggle decision is now folded into the main render-pipeline epoch and gated on `(some? old-m)`.
+
+### Changed
+
+- **Shared date utilities** — Date math extracted into a shared `baredom.utils.dates` namespace, consumed by `x-calendar` and `x-date-picker`.
+- **Internal naming consistency** — The top-level model transformer was renamed from `derive-state` to `normalize` across 23 component model layers and their tests, so every component uses the same name. No behaviour change.
+- **Dead-code removal** — Write-only instance fields (set but never read) removed from x-combobox, x-multi-combobox, x-welcome-tour, x-spotlight-card, x-stat, x-tab, and x-tabs.
+- **`x-trace-history` highlight refactor** — `apply-highlight!` decomposed into a phase-list dispatcher per the `render-orchestrator` pattern; `reposition!` now clears the stale cached component id when the target has been disconnected; the reduced-motion probe caches the live `MediaQueryList` instead of re-invoking `matchMedia` on every show.
+- **Angular adapter** — `@vanelsas/baredom-angular` dev dependencies bumped from Angular 17 to 21; `custom-elements.json` refreshed.
+- **CI** — `check_method_api.bb` taught about the `define-method!` helper introduced by the x-modal refactor, so wrapped method installations are no longer flagged as "declared but not installed".
+
 ## [3.1.0] - 2026-05-16
 
 A full-library audit cycle against the `x-icon` golden sample (PRs #222–#231). All 99 components now conform to the Hickey-level architecture standard documented in `CLAUDE.md`. No public API or behavioural changes.

package/custom-elements.json

@@ -363,6 +363,159 @@
         "name" : "XSlider"
       }
     } ]
+  }, {
+    "kind" : "javascript-module",
+    "path" : "dist/x-calendar.js",
+    "declarations" : [ {
+      "kind" : "class",
+      "name" : "XCalendar",
+      "tagName" : "x-calendar",
+      "superclass" : {
+        "name" : "HTMLElement"
+      },
+      "members" : [ {
+        "kind" : "field",
+        "name" : "min",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "disabled",
+        "type" : {
+          "text" : "boolean"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "locale",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "autoSwap",
+        "type" : {
+          "text" : "boolean"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "value",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "mode",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "start",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "month",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "showWeekNumbers",
+        "type" : {
+          "text" : "boolean"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "disabledDates",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "max",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "firstDayOfWeek",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "end",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "rangeAllowSameDay",
+        "type" : {
+          "text" : "boolean"
+        }
+      }, {
+        "kind" : "method",
+        "name" : "focus",
+        "return" : {
+          "type" : {
+            "text" : "void"
+          }
+        }
+      }, {
+        "kind" : "method",
+        "name" : "goToMonth",
+        "return" : {
+          "type" : {
+            "text" : "void"
+          }
+        },
+        "parameters" : [ {
+          "name" : "month",
+          "type" : {
+            "text" : "string"
+          }
+        } ]
+      }, {
+        "kind" : "method",
+        "name" : "clear",
+        "return" : {
+          "type" : {
+            "text" : "void"
+          }
+        }
+      } ],
+      "events" : [ {
+        "name" : "x-calendar-change",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      }, {
+        "name" : "x-calendar-navigate",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      } ],
+      "slots" : [ {
+        "name" : ""
+      } ]
+    } ],
+    "exports" : [ {
+      "kind" : "js",
+      "name" : "init",
+      "declaration" : {
+        "name" : "init"
+      }
+    }, {
+      "kind" : "custom-element-definition",
+      "name" : "x-calendar",
+      "declaration" : {
+        "name" : "XCalendar"
+      }
+    } ]
   }, {
     "kind" : "javascript-module",
     "path" : "dist/x-toaster.js",
@@ -2190,6 +2343,109 @@
         "name" : "XStat"
       }
     } ]
+  }, {
+    "kind" : "javascript-module",
+    "path" : "dist/x-code.js",
+    "declarations" : [ {
+      "kind" : "class",
+      "name" : "XCode",
+      "tagName" : "x-code",
+      "superclass" : {
+        "name" : "HTMLElement"
+      },
+      "members" : [ {
+        "kind" : "field",
+        "name" : "language",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "filename",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "showCopy",
+        "type" : {
+          "text" : "boolean"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "lineNumbers",
+        "type" : {
+          "text" : "boolean"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "wrap",
+        "type" : {
+          "text" : "boolean"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "maxLines",
+        "type" : {
+          "text" : "number"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "expanded",
+        "type" : {
+          "text" : "boolean"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "code",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "method",
+        "name" : "expand",
+        "return" : {
+          "type" : {
+            "text" : "void"
+          }
+        }
+      }, {
+        "kind" : "method",
+        "name" : "collapse",
+        "return" : {
+          "type" : {
+            "text" : "void"
+          }
+        }
+      } ],
+      "events" : [ {
+        "name" : "x-code-copy",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      }, {
+        "name" : "x-code-toggle",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      } ],
+      "slots" : [ {
+        "name" : ""
+      } ]
+    } ],
+    "exports" : [ {
+      "kind" : "js",
+      "name" : "init",
+      "declaration" : {
+        "name" : "init"
+      }
+    }, {
+      "kind" : "custom-element-definition",
+      "name" : "x-code",
+      "declaration" : {
+        "name" : "XCode"
+      }
+    } ]
   }, {
     "kind" : "javascript-module",
     "path" : "dist/x-skeleton.js",
@@ -3827,6 +4083,110 @@
         "name" : "XScrollStack"
       }
     } ]
+  }, {
+    "kind" : "javascript-module",
+    "path" : "dist/x-rating.js",
+    "declarations" : [ {
+      "kind" : "class",
+      "name" : "XRating",
+      "tagName" : "x-rating",
+      "superclass" : {
+        "name" : "HTMLElement"
+      },
+      "members" : [ {
+        "kind" : "field",
+        "name" : "allowClear",
+        "type" : {
+          "text" : "boolean"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "disabled",
+        "type" : {
+          "text" : "boolean"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "name",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "value",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "precision",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "size",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "readOnly",
+        "type" : {
+          "text" : "boolean"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "max",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "label",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "shape",
+        "type" : {
+          "text" : "string"
+        }
+      } ],
+      "events" : [ {
+        "name" : "x-rating-change-request",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      }, {
+        "name" : "x-rating-change",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      }, {
+        "name" : "x-rating-hover",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      } ],
+      "slots" : [ {
+        "name" : ""
+      } ]
+    } ],
+    "exports" : [ {
+      "kind" : "js",
+      "name" : "init",
+      "declaration" : {
+        "name" : "init"
+      }
+    }, {
+      "kind" : "custom-element-definition",
+      "name" : "x-rating",
+      "declaration" : {
+        "name" : "XRating"
+      }
+    } ]
   }, {
     "kind" : "javascript-module",
     "path" : "dist/x-breadcrumbs.js",
@@ -5572,6 +5932,122 @@
         "name" : "XScrollTimeline"
       }
     } ]
+  }, {
+    "kind" : "javascript-module",
+    "path" : "dist/x-range-slider.js",
+    "declarations" : [ {
+      "kind" : "class",
+      "name" : "XRangeSlider",
+      "tagName" : "x-range-slider",
+      "superclass" : {
+        "name" : "HTMLElement"
+      },
+      "members" : [ {
+        "kind" : "field",
+        "name" : "min",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "disabled",
+        "type" : {
+          "text" : "boolean"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "showValue",
+        "type" : {
+          "text" : "boolean"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "name",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "start",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "minGap",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "size",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "readOnly",
+        "type" : {
+          "text" : "boolean"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "max",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "label",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "end",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "step",
+        "type" : {
+          "text" : "string"
+        }
+      } ],
+      "events" : [ {
+        "name" : "x-range-slider-change-request",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      }, {
+        "name" : "x-range-slider-input",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      }, {
+        "name" : "x-range-slider-change",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      } ],
+      "slots" : [ {
+        "name" : ""
+      } ]
+    } ],
+    "exports" : [ {
+      "kind" : "js",
+      "name" : "init",
+      "declaration" : {
+        "name" : "init"
+      }
+    }, {
+      "kind" : "custom-element-definition",
+      "name" : "x-range-slider",
+      "declaration" : {
+        "name" : "XRangeSlider"
+      }
+    } ]
   }, {
     "kind" : "javascript-module",
     "path" : "dist/x-text-area.js",
@@ -7416,6 +7892,83 @@
         "name" : "XTypography"
       }
     } ]
+  }, {
+    "kind" : "javascript-module",
+    "path" : "dist/x-split-pane.js",
+    "declarations" : [ {
+      "kind" : "class",
+      "name" : "XSplitPane",
+      "tagName" : "x-split-pane",
+      "superclass" : {
+        "name" : "HTMLElement"
+      },
+      "members" : [ {
+        "kind" : "field",
+        "name" : "orientation",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "position",
+        "type" : {
+          "text" : "number"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "minStart",
+        "type" : {
+          "text" : "number"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "minEnd",
+        "type" : {
+          "text" : "number"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "disabled",
+        "type" : {
+          "text" : "boolean"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "dividerLabel",
+        "type" : {
+          "text" : "string"
+        }
+      } ],
+      "events" : [ {
+        "name" : "x-split-pane-resize",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      }, {
+        "name" : "x-split-pane-resize-end",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      } ],
+      "slots" : [ {
+        "name" : "start"
+      }, {
+        "name" : "end"
+      } ]
+    } ],
+    "exports" : [ {
+      "kind" : "js",
+      "name" : "init",
+      "declaration" : {
+        "name" : "init"
+      }
+    }, {
+      "kind" : "custom-element-definition",
+      "name" : "x-split-pane",
+      "declaration" : {
+        "name" : "XSplitPane"
+      }
+    } ]
   }, {
     "kind" : "javascript-module",
     "path" : "dist/x-ripple-effect.js",

package/dist/baredom.d.ts

@@ -4,6 +4,7 @@ export { XLiquidGlass } from "./x-liquid-glass";
 export { XAlert } from "./x-alert";
 export { XSwitch } from "./x-switch";
 export { XSlider } from "./x-slider";
+export { XCalendar } from "./x-calendar";
 export { XToaster } from "./x-toaster";
 export { XColorPicker } from "./x-color-picker";
 export { XBentoGrid } from "./x-bento-grid";
@@ -26,6 +27,7 @@ export { XSelect } from "./x-select";
 export { XRadio } from "./x-radio";
 export { XNeuralGlow } from "./x-neural-glow";
 export { XStat } from "./x-stat";
+export { XCode } from "./x-code";
 export { XSkeleton } from "./x-skeleton";
 export { XOtpInput } from "./x-otp-input";
 export { XOrganicProgress } from "./x-organic-progress";
@@ -49,6 +51,7 @@ export { XGrid } from "./x-grid";
 export { XSearchField } from "./x-search-field";
 export { XContainer } from "./x-container";
 export { XScrollStack } from "./x-scroll-stack";
+export { XRating } from "./x-rating";
 export { XBreadcrumbs } from "./x-breadcrumbs";
 export { XChart } from "./x-chart";
 export { XProgress } from "./x-progress";
@@ -67,6 +70,7 @@ export { XParticleButton } from "./x-particle-button";
 export { XLiquidFill } from "./x-liquid-fill";
 export { XCombobox } from "./x-combobox";
 export { XScrollTimeline } from "./x-scroll-timeline";
+export { XRangeSlider } from "./x-range-slider";
 export { XTextArea } from "./x-text-area";
 export { XToast } from "./x-toast";
 export { XTabs } from "./x-tabs";
@@ -90,6 +94,7 @@ export { XTableRow } from "./x-table-row";
 export { XPopover } from "./x-popover";
 export { XImage } from "./x-image";
 export { XTypography } from "./x-typography";
+export { XSplitPane } from "./x-split-pane";
 export { XRippleEffect } from "./x-ripple-effect";
 export { XKineticCanvas } from "./x-kinetic-canvas";
 export { XFieldset } from "./x-fieldset";