@luzmo/react-lucero 2.5.1 → 2.6.0

package/esm/components/color-area.d.ts

@@ -1,14 +1,18 @@
 import { EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoColorArea as LuzmoColorAreaClass } from '@luzmo/lucero/color-area';
+import { LuzmoColorArea as LuzmoColorAreaClass, InteractionEventDetail } from '@luzmo/lucero/color-area';
 /**
  * React wrapper for <luzmo-color-area>
  *
  * @event onInput - The value of the Color Area has changed.
  * @event onChange - An alteration to the value of the Color Area has been committed by the user.
+ * @event onLuzmoInteractionStart - A pointer drag or held-key interaction starts, before its first value change.
+ * @event onLuzmoInteractionEnd - The interaction ends after its last `input`/`change`, even when nothing changed. A cancelled pointer commits and ends the same way.
  */
 export declare const LuzmoColorArea: ReactWebComponent<LuzmoColorAreaClass, {
     onInput: EventName<Event>;
     onChange: EventName<Event>;
+    onLuzmoInteractionStart: EventName<CustomEvent<InteractionEventDetail>>;
+    onLuzmoInteractionEnd: EventName<CustomEvent<InteractionEventDetail>>;
 }>;
 /** The underlying custom element type for LuzmoColorArea */
 export type LuzmoColorAreaElement = LuzmoColorAreaClass;

package/esm/components/color-area.js

@@ -7,7 +7,9 @@ const LuzmoColorAreaComponent = createComponent({
     react: React,
     events: {
         onInput: 'input',
-        onChange: 'change'
+        onChange: 'change',
+        onLuzmoInteractionStart: 'luzmo-interaction-start',
+        onLuzmoInteractionEnd: 'luzmo-interaction-end'
     }
 });
 /**
@@ -15,5 +17,7 @@ const LuzmoColorAreaComponent = createComponent({
  *
  * @event onInput - The value of the Color Area has changed.
  * @event onChange - An alteration to the value of the Color Area has been committed by the user.
+ * @event onLuzmoInteractionStart - A pointer drag or held-key interaction starts, before its first value change.
+ * @event onLuzmoInteractionEnd - The interaction ends after its last `input`/`change`, even when nothing changed. A cancelled pointer commits and ends the same way.
  */
 export const LuzmoColorArea = LuzmoColorAreaComponent;

package/esm/components/color-menu.d.ts

@@ -1,13 +1,17 @@
 import { EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoColorMenu as LuzmoColorMenuClass } from '@luzmo/lucero/color-menu';
+import { LuzmoColorMenu as LuzmoColorMenuClass, InteractionEventDetail } from '@luzmo/lucero/color-menu';
 /**
  * React wrapper for <luzmo-color-menu>
  *
  * @event onChange - An alteration to the value of the Color Menu has been committed by the user.
+ * @event onLuzmoInteractionStart - Bubbles up from the color area or a color slider when a pointer drag or held-key interaction starts. The menu forwards it unchanged and adds none of its own.
+ * @event onLuzmoInteractionEnd - Bubbles up from the same control when that interaction ends. Swatch picks and typed values are single `change` events without an interaction.
  * @event onKeydown - Trick :focus-visible polyfill into thinking keyboard based focus
  */
 export declare const LuzmoColorMenu: ReactWebComponent<LuzmoColorMenuClass, {
     onChange: EventName<CustomEvent>;
+    onLuzmoInteractionStart: EventName<CustomEvent<InteractionEventDetail>>;
+    onLuzmoInteractionEnd: EventName<CustomEvent<InteractionEventDetail>>;
     onKeydown: EventName<KeyboardEvent>;
 }>;
 /** The underlying custom element type for LuzmoColorMenu */

package/esm/components/color-menu.js

@@ -7,6 +7,8 @@ const LuzmoColorMenuComponent = createComponent({
     react: React,
     events: {
         onChange: 'change',
+        onLuzmoInteractionStart: 'luzmo-interaction-start',
+        onLuzmoInteractionEnd: 'luzmo-interaction-end',
         onKeydown: 'keydown'
     }
 });
@@ -14,6 +16,8 @@ const LuzmoColorMenuComponent = createComponent({
  * React wrapper for <luzmo-color-menu>
  *
  * @event onChange - An alteration to the value of the Color Menu has been committed by the user.
+ * @event onLuzmoInteractionStart - Bubbles up from the color area or a color slider when a pointer drag or held-key interaction starts. The menu forwards it unchanged and adds none of its own.
+ * @event onLuzmoInteractionEnd - Bubbles up from the same control when that interaction ends. Swatch picks and typed values are single `change` events without an interaction.
  * @event onKeydown - Trick :focus-visible polyfill into thinking keyboard based focus
  */
 export const LuzmoColorMenu = LuzmoColorMenuComponent;

package/esm/components/color-picker.d.ts

@@ -1,14 +1,18 @@
 import { EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoColorPicker as LuzmoColorPickerClass } from '@luzmo/lucero/color-picker';
+import { LuzmoColorPicker as LuzmoColorPickerClass, InteractionEventDetail } from '@luzmo/lucero/color-picker';
 /**
  * React wrapper for <luzmo-color-picker>
  *
  * @event onChange - An alteration to the value of the Color Picker has been committed by the user.
  * @event onInput - The value of the Color Picker has changed.
+ * @event onLuzmoInteractionStart - Bubbles up from the menu's color area or color sliders when a pointer drag or held-key interaction starts, before the first `change` it causes.
+ * @event onLuzmoInteractionEnd - Bubbles up when that interaction ends, after its last `change`. Closing the popover ends an interaction in progress. Swatch picks and typed values are single `change` events without an interaction.
  */
 export declare const LuzmoColorPicker: ReactWebComponent<LuzmoColorPickerClass, {
     onChange: EventName<Event>;
     onInput: EventName<CustomEvent>;
+    onLuzmoInteractionStart: EventName<CustomEvent<InteractionEventDetail>>;
+    onLuzmoInteractionEnd: EventName<CustomEvent<InteractionEventDetail>>;
 }>;
 /** The underlying custom element type for LuzmoColorPicker */
 export type LuzmoColorPickerElement = LuzmoColorPickerClass;

package/esm/components/color-picker.js

@@ -7,7 +7,9 @@ const LuzmoColorPickerComponent = createComponent({
     react: React,
     events: {
         onChange: 'change',
-        onInput: 'input'
+        onInput: 'input',
+        onLuzmoInteractionStart: 'luzmo-interaction-start',
+        onLuzmoInteractionEnd: 'luzmo-interaction-end'
     }
 });
 /**
@@ -15,5 +17,7 @@ const LuzmoColorPickerComponent = createComponent({
  *
  * @event onChange - An alteration to the value of the Color Picker has been committed by the user.
  * @event onInput - The value of the Color Picker has changed.
+ * @event onLuzmoInteractionStart - Bubbles up from the menu's color area or color sliders when a pointer drag or held-key interaction starts, before the first `change` it causes.
+ * @event onLuzmoInteractionEnd - Bubbles up when that interaction ends, after its last `change`. Closing the popover ends an interaction in progress. Swatch picks and typed values are single `change` events without an interaction.
  */
 export const LuzmoColorPicker = LuzmoColorPickerComponent;

package/esm/components/color-slider.d.ts

@@ -1,15 +1,19 @@
 import { EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoColorSlider as LuzmoColorSliderClass } from '@luzmo/lucero/color-slider';
+import { LuzmoColorSlider as LuzmoColorSliderClass, InteractionEventDetail } from '@luzmo/lucero/color-slider';
 /**
  * React wrapper for <luzmo-color-slider>
  *
  * @event onInput - The value of the Color Slider has changed.
  * @event onChange - An alteration to the value of the Color Slider has been committed by the user.
+ * @event onLuzmoInteractionStart - A pointer drag or held-key interaction starts, before its first value change.
+ * @event onLuzmoInteractionEnd - The interaction ends after its last `input`/`change`, even when nothing changed. A cancelled pointer commits and ends the same way.
  * @event onKeydown - Trick :focus-visible polyfill into thinking keyboard based focus
  */
 export declare const LuzmoColorSlider: ReactWebComponent<LuzmoColorSliderClass, {
     onInput: EventName<Event>;
     onChange: EventName<Event>;
+    onLuzmoInteractionStart: EventName<CustomEvent<InteractionEventDetail>>;
+    onLuzmoInteractionEnd: EventName<CustomEvent<InteractionEventDetail>>;
     onKeydown: EventName<KeyboardEvent>;
 }>;
 /** The underlying custom element type for LuzmoColorSlider */

package/esm/components/color-slider.js

@@ -8,6 +8,8 @@ const LuzmoColorSliderComponent = createComponent({
     events: {
         onInput: 'input',
         onChange: 'change',
+        onLuzmoInteractionStart: 'luzmo-interaction-start',
+        onLuzmoInteractionEnd: 'luzmo-interaction-end',
         onKeydown: 'keydown'
     }
 });
@@ -16,6 +18,8 @@ const LuzmoColorSliderComponent = createComponent({
  *
  * @event onInput - The value of the Color Slider has changed.
  * @event onChange - An alteration to the value of the Color Slider has been committed by the user.
+ * @event onLuzmoInteractionStart - A pointer drag or held-key interaction starts, before its first value change.
+ * @event onLuzmoInteractionEnd - The interaction ends after its last `input`/`change`, even when nothing changed. A cancelled pointer commits and ends the same way.
  * @event onKeydown - Trick :focus-visible polyfill into thinking keyboard based focus
  */
 export const LuzmoColorSlider = LuzmoColorSliderComponent;

package/esm/components/slider.d.ts

@@ -1,15 +1,21 @@
 import { EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoSlider as LuzmoSliderClass } from '@luzmo/lucero/slider';
+import { LuzmoSlider as LuzmoSliderClass, InteractionEventDetail } from '@luzmo/lucero/slider';
 /**
  * A numeric slider with one or more handles.
  *
  * @event onInput - The value changes during user interaction.
  * @event onChange - A user value change is committed.
+ * @event onLuzmoInteractionStart - A pointer drag or held-key interaction starts, before its first value change.
+ * @event onLuzmoInteractionEnd - The interaction ends after its last `input`/`change`, even when nothing changed.
+ * @event onLuzmoInteractionCancel - A cancelled pointer drag ends after the value reverted to its start.
  * @event onKeydown - Trick :focus-visible polyfill into thinking keyboard based focus
  */
 export declare const LuzmoSlider: ReactWebComponent<LuzmoSliderClass, {
     onInput: EventName<Event>;
     onChange: EventName<Event>;
+    onLuzmoInteractionStart: EventName<CustomEvent<InteractionEventDetail>>;
+    onLuzmoInteractionEnd: EventName<CustomEvent<InteractionEventDetail>>;
+    onLuzmoInteractionCancel: EventName<CustomEvent<InteractionEventDetail>>;
     onKeydown: EventName<KeyboardEvent>;
 }>;
 /** The underlying custom element type for LuzmoSlider */

package/esm/components/slider.js

@@ -8,6 +8,9 @@ const LuzmoSliderComponent = createComponent({
     events: {
         onInput: 'input',
         onChange: 'change',
+        onLuzmoInteractionStart: 'luzmo-interaction-start',
+        onLuzmoInteractionEnd: 'luzmo-interaction-end',
+        onLuzmoInteractionCancel: 'luzmo-interaction-cancel',
         onKeydown: 'keydown'
     }
 });
@@ -16,6 +19,9 @@ const LuzmoSliderComponent = createComponent({
  *
  * @event onInput - The value changes during user interaction.
  * @event onChange - A user value change is committed.
+ * @event onLuzmoInteractionStart - A pointer drag or held-key interaction starts, before its first value change.
+ * @event onLuzmoInteractionEnd - The interaction ends after its last `input`/`change`, even when nothing changed.
+ * @event onLuzmoInteractionCancel - A cancelled pointer drag ends after the value reverted to its start.
  * @event onKeydown - Trick :focus-visible polyfill into thinking keyboard based focus
  */
 export const LuzmoSlider = LuzmoSliderComponent;

package/package.json

@@ -30,7 +30,7 @@
     "@lit/react": "^1.0.8",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@luzmo/lucero": "2.5.1"
+    "@luzmo/lucero": "2.6.0"
   },
-  "version": "2.5.1"
+  "version": "2.6.0"
 }