elements-kit 0.10.0 → 0.10.2

package/README.md

@@ -227,20 +227,22 @@ customElements.define("x-counter", CounterElement);
 
 ### Typed JSX for custom elements
 
-Register the tag and augment the `CustomElementRegistry` interface — JSX infers the full prop shape (attributes, events, slots, children) from the class itself.
+Register the tag and augment `ElementsKit.CustomElementRegistry` in the global namespace — JSX infers the full prop shape (attributes, events, slots, children) from the class itself.
 
 ```ts
 import { defineElement } from "elements-kit/custom-elements";
 
 defineElement("x-counter", CounterElement);
 
-declare module "elements-kit/custom-elements" {
-  interface CustomElementRegistry {
-    "x-counter": typeof CounterElement;
+declare global {
+  namespace ElementsKit {
+    interface CustomElementRegistry {
+      "x-counter": typeof CounterElement;
+    }
   }
 }
 
-// Now `<x-counter count={5} />` is fully typed — no hand-written `declare global` block.
+// Now `<x-counter count={5} />` is fully typed.
 ```
 
 See [Types](docs/src/content/docs/elements/types.mdx) for the full set of prop-inference helpers.

package/dist/ui/segmented-control/segmented-control.css

@@ -13,6 +13,7 @@
   --seg-track-radius: max(var(--radius-2), var(--radius-pill));
   --seg-indicator-radius: max(.5px,
     calc(var(--seg-track-radius) - var(--seg-inset)));
+  --seg-indicator-bg: var(--color-background);
   border-radius: var(--seg-track-radius);
   border: 0;
   grid-auto-columns: minmax(0, 1fr);
@@ -25,6 +26,10 @@
   position: relative;
 }
 
+:is(.dark, .dark-theme) :where(.x-segmented-control:not(.light, .light-theme)), :is(.dark, .dark-theme):where(.x-segmented-control:not(.light, .light-theme)) {
+  --seg-indicator-bg: var(--base-color-a3);
+}
+
 .x-segmented-control > label {
   justify-content: center;
   align-items: center;
@@ -101,7 +106,7 @@
   content: "";
   inset: var(--seg-inset);
   z-index: -1;
-  background-color: var(--color-background);
+  background-color: var(--seg-indicator-bg);
   border-radius: var(--seg-indicator-radius);
   box-shadow: 0 0 0 .5px var(--base-color-a3),
     0 1px 2px var(--base-color-a4);
@@ -130,7 +135,7 @@
     bottom: var(--seg-inset);
     left: anchor(--x-seg-active left);
     right: anchor(--x-seg-active right);
-    background-color: var(--color-background);
+    background-color: var(--seg-indicator-bg);
     border-radius: var(--seg-indicator-radius);
     width: auto;
     box-shadow: 0 0 0 .5px var(--base-color-a3),

package/dist/ui/slider/slider.css

@@ -2,6 +2,7 @@
   --slider-thumb-size: calc(var(--slider-track-size) + var(--space-1));
   --slider-fill-color: var(--color-9);
   height: var(--slider-thumb-size);
+  appearance: auto;
   accent-color: var(--slider-fill-color);
   cursor: var(--cursor-slider-thumb);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "elements-kit",
   "type": "module",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "description": "A lightweight reactive UI library that transforms native HTMLElements into reactive components with signals. Ideal for framework-agnostic applications and web components.",
   "keywords": [
     "webcomponents",