@kolkrabbi/kol-component 0.12.0 → 0.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",
@@ -23,7 +23,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.27.19",
     "embla-carousel-react": "^8.6.0",
-    "@kolkrabbi/kol-icons": "0.7.0"
+    "@kolkrabbi/kol-icons": "0.7.1"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",

package/src/molecules/Slider.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useId, useMemo, useState } from 'react'
 import Input from '../atoms/Input.jsx'
 
 /**
@@ -46,6 +46,10 @@ const Slider = ({
   displayWidth = 6,
   fontSize,
 }) => {
+  /* Label ↔ input pairing — the <label> is a sibling of the range input, so
+   * without an htmlFor/id pair the visible label confers no accessible name. */
+  const sliderId = useId()
+
   const handleChange = (e) => {
     if (onChange) {
       onChange(Number(e.target.value))
@@ -96,6 +100,7 @@ const Slider = ({
     <div className={`control-slider gap-3 shadow-none ${className}`}>
       {label && (
         <label
+          htmlFor={sliderId}
           className={`kol-helper-12 whitespace-nowrap shrink-0 w-fit ${disabled ? 'opacity-50' : ''}`}
           style={fontSize ? { fontSize } : undefined}
         >
@@ -103,6 +108,7 @@ const Slider = ({
         </label>
       )}
       <input
+        id={sliderId}
         type="range"
         min={min}
         max={max}