@uibit/sentiment-selector 0.1.0 → 0.2.0

package/README.md

@@ -1,6 +1,16 @@
 # Sentiment Bar
 
-[Interactive Demonstration](https://rawlings.github.io/uibit/sentiment-bar)
+[![NPM Version](https://img.shields.io/npm/v/@uibit/sentiment-selector.svg?style=flat-square&color=black)](https://www.npmjs.com/package/@uibit/sentiment-selector)
+
+
+[Interactive Demonstration](https://rawlings.github.io/uibit/components/sentiment-selector)
+
+## Installation
+
+```bash
+npm install @uibit/sentiment-selector
+```
+
 
 Sentiment Bar is an interactive feedback collector component that makes user ratings engaging. By utilizing smooth spring scale animations, visual focus shifts, and double-tap confirmations, it lowers user friction and increases response rates.
 

package/custom-elements.json

@@ -47,7 +47,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Micro-feedback widget displaying a horizontal row of expressive face icons.\nTapping or clicking an option scales it up with a spring animation and fires\na scored event. Unselected options are dimmed to focus attention on the\ncurrent selection.\n\nCustomize the option set by setting the `options` property programmatically\nor by passing a JSON array string on the `options` attribute. Each option\nreferences an icon name from the UIBit icon registry.",
+          "description": "Micro-feedback widget displaying a horizontal row of expressive face icons.",
           "name": "SentimentSelector",
           "cssProperties": [
             {
@@ -142,6 +142,7 @@
               "type": {
                 "text": "string"
               },
+              "description": "The selected rating value.",
               "attribute": "value",
               "reflects": true
             },
@@ -218,6 +219,211 @@
                   }
                 }
               ]
+            },
+            {
+              "kind": "field",
+              "name": "locale",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
+              "attribute": "locale",
+              "inheritedFrom": {
+                "name": "UIBitElement",
+                "module": "../../platform/core/src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "resolvedLocale",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Resolves the active locale for formatting and localization.\nChecks the `locale` property first, then traverses up the DOM to find\nthe nearest ancestor with a `lang` attribute, and finally falls back\nto undefined (which defaults to browser locale).",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "UIBitElement",
+                "module": "../../platform/core/src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_disposables",
+              "type": {
+                "text": "Set<() => void>"
+              },
+              "privacy": "private",
+              "default": "new Set()",
+              "inheritedFrom": {
+                "name": "UIBitElement",
+                "module": "../../platform/core/src/element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "createProperty",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "PropertyKey"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "PropertyDeclaration"
+                  }
+                }
+              ],
+              "description": "Overrides createProperty to automatically map camelCase property names\nto kebab-case attribute names by default.",
+              "inheritedFrom": {
+                "name": "UIBitElement",
+                "module": "../../platform/core/src/element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "finalizeStyles",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "Array<any>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "styles",
+                  "optional": true,
+                  "type": {
+                    "text": "CSSResultGroup"
+                  }
+                }
+              ],
+              "description": "Automatically prepends basic layout resets (border-box) to the\ncomponent's final styles.",
+              "inheritedFrom": {
+                "name": "UIBitElement",
+                "module": "../../platform/core/src/element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "dispatchCustomEvent",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "detail",
+                  "optional": true,
+                  "type": {
+                    "text": "T"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "Omit<CustomEventInit<T>, 'detail'>"
+                  }
+                }
+              ],
+              "description": "Helper to dispatch a custom event with standard bubbles and composed options.",
+              "inheritedFrom": {
+                "name": "UIBitElement",
+                "module": "../../platform/core/src/element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getCssPropertyValue",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "propertyName",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Helper to retrieve a computed CSS custom property value from the element.",
+              "inheritedFrom": {
+                "name": "UIBitElement",
+                "module": "../../platform/core/src/element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "registerDisposable",
+              "parameters": [
+                {
+                  "name": "cleanup",
+                  "type": {
+                    "text": "() => void"
+                  }
+                }
+              ],
+              "description": "Register a cleanup function to be executed when the element is disconnected from the DOM.",
+              "inheritedFrom": {
+                "name": "UIBitElement",
+                "module": "../../platform/core/src/element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "listen",
+              "return": {
+                "type": {
+                  "text": "() => void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "target",
+                  "type": {
+                    "text": "EventTarget"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(this: EventTarget, ev: HTMLElementEventMap[K]) => any"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | AddEventListenerOptions"
+                  }
+                }
+              ],
+              "description": "Utility to add an event listener that is automatically cleaned up when the element is disconnected.",
+              "inheritedFrom": {
+                "name": "UIBitElement",
+                "module": "../../platform/core/src/element.ts"
+              }
             }
           ],
           "events": [
@@ -242,6 +448,7 @@
               "type": {
                 "text": "string"
               },
+              "description": "The selected rating value.",
               "fieldName": "value"
             },
             {
@@ -252,6 +459,25 @@
               "default": "true",
               "description": "Show the label text for the selected option below the track.",
               "fieldName": "showLabel"
+            },
+            {
+              "name": "locale",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
+              "fieldName": "locale",
+              "inheritedFrom": {
+                "name": "UIBitElement",
+                "module": "../../platform/core/src/element.ts"
+              }
+            }
+          ],
+          "cssStates": [
+            {
+              "name": "selected",
+              "description": "Active when a rating value has been selected."
             }
           ],
           "mixins": [
@@ -264,6 +490,7 @@
             "name": "UIBitElement",
             "package": "@uibit/core"
           },
+          "summary": "A modern, accessible user rating and sentiment scale selector component.\nTapping or clicking an option scales it up with a spring animation and fires\na scored event. Unselected options are dimmed to focus attention on the\ncurrent selection.\n\nCustomize the option set by setting the `options` property programmatically\nor by passing a JSON array string on the `options` attribute. Each option\nreferences an icon name from the UIBit icon registry.",
           "tagName": "uibit-sentiment-selector",
           "customElement": true
         }
@@ -321,6 +548,250 @@
       "path": "src/types.ts",
       "declarations": [],
       "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "../../platform/core/src/element.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A foundational base class for all UIBit web components.\nProvides custom event helpers, default kebab-case attribute mapping,\nautomatic cleanup/disposable tracking, and auto-injected reset styles.",
+          "name": "UIBitElement",
+          "members": [
+            {
+              "kind": "field",
+              "name": "locale",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
+              "attribute": "locale"
+            },
+            {
+              "kind": "field",
+              "name": "resolvedLocale",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Resolves the active locale for formatting and localization.\nChecks the `locale` property first, then traverses up the DOM to find\nthe nearest ancestor with a `lang` attribute, and finally falls back\nto undefined (which defaults to browser locale).",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_disposables",
+              "type": {
+                "text": "Set<() => void>"
+              },
+              "privacy": "private",
+              "default": "new Set()"
+            },
+            {
+              "kind": "method",
+              "name": "createProperty",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "PropertyKey"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "PropertyDeclaration"
+                  }
+                }
+              ],
+              "description": "Overrides createProperty to automatically map camelCase property names\nto kebab-case attribute names by default."
+            },
+            {
+              "kind": "method",
+              "name": "finalizeStyles",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "Array<any>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "styles",
+                  "optional": true,
+                  "type": {
+                    "text": "CSSResultGroup"
+                  }
+                }
+              ],
+              "description": "Automatically prepends basic layout resets (border-box) to the\ncomponent's final styles."
+            },
+            {
+              "kind": "method",
+              "name": "dispatchCustomEvent",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "detail",
+                  "optional": true,
+                  "type": {
+                    "text": "T"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "Omit<CustomEventInit<T>, 'detail'>"
+                  }
+                }
+              ],
+              "description": "Helper to dispatch a custom event with standard bubbles and composed options."
+            },
+            {
+              "kind": "method",
+              "name": "getCssPropertyValue",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "propertyName",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Helper to retrieve a computed CSS custom property value from the element."
+            },
+            {
+              "kind": "method",
+              "name": "registerDisposable",
+              "parameters": [
+                {
+                  "name": "cleanup",
+                  "type": {
+                    "text": "() => void"
+                  }
+                }
+              ],
+              "description": "Register a cleanup function to be executed when the element is disconnected from the DOM."
+            },
+            {
+              "kind": "method",
+              "name": "listen",
+              "return": {
+                "type": {
+                  "text": "() => void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "target",
+                  "type": {
+                    "text": "EventTarget"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(this: EventTarget, ev: HTMLElementEventMap[K]) => any"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | AddEventListenerOptions"
+                  }
+                }
+              ],
+              "description": "Utility to add an event listener that is automatically cleaned up when the element is disconnected."
+            },
+            {
+              "kind": "method",
+              "name": "listen",
+              "return": {
+                "type": {
+                  "text": "() => void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "target",
+                  "type": {
+                    "text": "EventTarget"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "EventListenerOrEventListenerObject"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | AddEventListenerOptions"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "locale",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
+              "fieldName": "locale"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UIBitElement",
+          "declaration": {
+            "name": "UIBitElement",
+            "module": "../../platform/core/src/element.ts"
+          }
+        }
+      ]
     }
   ]
 }

package/dist/frameworks/angular/index.ts

@@ -1,78 +1,93 @@
-import { Component, ChangeDetectionStrategy, ElementRef, input, effect, output, booleanAttribute, numberAttribute, forwardRef } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ElementRef, model, input, effect, output, booleanAttribute, numberAttribute, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
 import '@uibit/sentiment-selector';
 import type { SentimentSelector as HTMLElementClass } from '@uibit/sentiment-selector';
-
 @Component({
-  selector: 'uibit-sentiment-selector',
-  template: '<ng-content></ng-content>',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => NgxSentimentSelector),
-      multi: true
+    selector: 'uibit-sentiment-selector',
+    template: '<ng-content></ng-content>',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(()=>NgxSentimentSelector),
+            multi: true
+        }
+    ],
+    host: {
+        '(sentiment-change)': 'sentimentChange.emit($event); value.set($event.detail?.value !== undefined ? $event.detail.value : $event.target.value); handleInput($event)',
+        '(sentiment-submit)': 'sentimentSubmit.emit($event); value.set($event.detail?.value !== undefined ? $event.detail.value : $event.target.value); handleInput($event)'
     }
-  ],
-  host: {
-    '(sentiment-change)': 'sentimentChange.emit($event); handleInput()',
-    '(sentiment-submit)': 'sentimentSubmit.emit($event); handleInput()',
-    '(blur)': 'handleBlur()',
-    '(change)': 'handleInput()',
-    '(input)': 'handleInput()'
-  }
 })
 export class NgxSentimentSelector implements ControlValueAccessor {
-  constructor(private el: ElementRef<HTMLElementClass>) {
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.value = this.value();
-      }
-    });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.showLabel = this.showLabel();
-      }
+    constructor(private el: ElementRef<HTMLElementClass>){
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.value = this.value();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.showLabel = this.showLabel();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.valueAsNumber = this.valueAsNumber();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.locale = this.locale();
+            }
+        });
+    }
+    readonly value = model<string>(undefined);
+    readonly showLabel = input<boolean, any>(true, {
+        transform: booleanAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.valueAsNumber = this.valueAsNumber();
-      }
+    readonly valueAsNumber = input<number | undefined, any>(undefined, {
+        transform: numberAttribute
     });
-  }
-
-  readonly value = input<string, any>('');
-  readonly showLabel = input<boolean, any>(true, { transform: booleanAttribute });
-  readonly valueAsNumber = input<number | undefined, any>(0, { transform: numberAttribute });
-
-  readonly sentimentChange = output<CustomEvent<{ value: number, label: string }>>();
-  readonly sentimentSubmit = output<CustomEvent<{ value: number, label: string }>>();
-
-  private _onChange: (value: any) => void = () => {};
-  private _onTouched: () => void = () => {};
-
-  writeValue(value: any): void {
-    this.el.nativeElement.value = value;
-  }
-
-  registerOnChange(fn: any): void {
-    this._onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this._onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.el.nativeElement.disabled = isDisabled;
-  }
-
-  handleInput() {
-    this._onChange(this.el.nativeElement.value);
-  }
-
-  handleBlur() {
-    this._onTouched();
-  }
+    readonly locale = input<string>('');
+    readonly sentimentChange = output<CustomEvent<{
+        value: number;
+        label: string;
+    }>>();
+    readonly sentimentSubmit = output<CustomEvent<{
+        value: number;
+        label: string;
+    }>>();
+    private _onChange: (value: any) => void = ()=>{};
+    private _onTouched: () => void = ()=>{};
+    writeValue(value: any): void {
+        if (value !== undefined) {
+            this.value.set(value);
+        }
+    }
+    registerOnChange(fn: any): void {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn: any): void {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled: boolean): void {
+        const el = this.el.nativeElement;
+        if ('disabled' in el) {
+            (el as any).disabled = isDisabled;
+        }
+        if (isDisabled) {
+            el.setAttribute('disabled', '');
+        } else {
+            el.removeAttribute('disabled');
+        }
+    }
+    handleInput(event: any) {
+        const val = event.target.value;
+        this.value.set(val);
+        this._onChange(val);
+    }
+    handleBlur() {
+        this._onTouched();
+    }
 }

package/dist/frameworks/astro/index.d.ts

@@ -4,7 +4,14 @@ import '@uibit/sentiment-selector';
 declare global {
   namespace astroHTML.JSX {
     interface IntrinsicElements {
-      'uibit-sentiment-selector': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes;
+      'uibit-sentiment-selector': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes & {
+      value?: string;
+      showLabel?: boolean;
+      valueAsNumber?: number | undefined;
+      locale?: string;
+      "on:sentiment-change"?: (event: CustomEvent<{ value: number, label: string }>) => void;
+      "on:sentiment-submit"?: (event: CustomEvent<{ value: number, label: string }>) => void;
+      };
     }
   }
 }

package/dist/frameworks/preact/index.d.ts

@@ -9,6 +9,11 @@ declare module 'preact' {
       value?: string;
       showLabel?: boolean;
       valueAsNumber?: number | undefined;
+      locale?: string;
+      onSentimentChange?: (event: CustomEvent<{ value: number, label: string }>) => void;
+      "on:sentiment-change"?: (event: CustomEvent<{ value: number, label: string }>) => void;
+      onSentimentSubmit?: (event: CustomEvent<{ value: number, label: string }>) => void;
+      "on:sentiment-submit"?: (event: CustomEvent<{ value: number, label: string }>) => void;
       };
     }
   }

package/dist/frameworks/react/index.ts

@@ -0,0 +1,127 @@
+import React, { useRef, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
+import type { SentimentSelector as HTMLElementClass } from '@uibit/sentiment-selector';
+import '@uibit/sentiment-selector';
+const useTypeOfLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+export interface SentimentSelectorProps extends Omit<React.HTMLAttributes<HTMLElementClass>, 'value' | 'showLabel' | 'valueAsNumber' | 'locale' | 'onSentimentChange' | 'onSentimentSubmit'> {
+    children?: React.ReactNode;
+    value?: string;
+    showLabel?: boolean;
+    valueAsNumber?: number | undefined;
+    locale?: string;
+    onSentimentChange?: (event: CustomEvent<{
+        value: number;
+        label: string;
+    }>) => void;
+    onSentimentSubmit?: (event: CustomEvent<{
+        value: number;
+        label: string;
+    }>) => void;
+}
+export const SentimentSelector = ({ ref, children, ...props }: SentimentSelectorProps & {
+    ref?: React.Ref<HTMLElementClass>;
+})=>{
+    const innerRef = useRef<HTMLElementClass>(null);
+    const propsRef = useRef(props);
+    propsRef.current = props;
+    useImperativeHandle(ref, ()=>innerRef.current!);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.value !== undefined) {
+            (element as any).value = props.value;
+        }
+    }, [
+        props.value
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.showLabel !== undefined) {
+            (element as any).showLabel = props.showLabel;
+        }
+    }, [
+        props.showLabel
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.valueAsNumber !== undefined) {
+            (element as any).valueAsNumber = props.valueAsNumber;
+        }
+    }, [
+        props.valueAsNumber
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.locale !== undefined) {
+            (element as any).locale = props.locale;
+        }
+    }, [
+        props.locale
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (!element) return;
+        const handleEvent = (event: Event)=>{
+            if (propsRef.current.onSentimentChange) {
+                propsRef.current.onSentimentChange(event as any);
+            }
+        };
+        element.addEventListener('sentiment-change', handleEvent);
+        return ()=>{
+            element.removeEventListener('sentiment-change', handleEvent);
+        };
+    }, []);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (!element) return;
+        const handleEvent = (event: Event)=>{
+            if (propsRef.current.onSentimentSubmit) {
+                propsRef.current.onSentimentSubmit(event as any);
+            }
+        };
+        element.addEventListener('sentiment-submit', handleEvent);
+        return ()=>{
+            element.removeEventListener('sentiment-submit', handleEvent);
+        };
+    }, []);
+    const domProps = {
+        ...props
+    };
+    const customPropNames = [
+        'value',
+        'showLabel',
+        'valueAsNumber',
+        'locale',
+        'onSentimentChange',
+        'onSentimentSubmit'
+    ];
+    for (const key of customPropNames){
+        delete (domProps as any)[key];
+    }
+    return React.createElement('uibit-sentiment-selector', {
+        ref: innerRef,
+        ...domProps
+    }, children);
+};
+declare global {
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                'uibit-sentiment-selector': React.ClassAttributes<HTMLElementClass> & React.HTMLAttributes<HTMLElementClass> & {
+                    children?: React.ReactNode;
+                    class?: string;
+                    value?: string;
+                    showLabel?: boolean;
+                    valueAsNumber?: number | undefined;
+                    locale?: string;
+                    onSentimentChange?: (event: CustomEvent<{
+                        value: number;
+                        label: string;
+                    }>) => void;
+                    onSentimentSubmit?: (event: CustomEvent<{
+                        value: number;
+                        label: string;
+                    }>) => void;
+                };
+            }
+        }
+    }
+}

package/dist/frameworks/solid/index.d.ts

@@ -9,8 +9,9 @@ declare module 'solid-js' {
               value?: string;
       showLabel?: boolean;
       valueAsNumber?: number | undefined;
-      "on:sentiment-change"?: (event: CustomEvent) => void;
-      "on:sentiment-submit"?: (event: CustomEvent) => void;
+      locale?: string;
+      "on:sentiment-change"?: (event: CustomEvent<{ value: number, label: string }>) => void;
+      "on:sentiment-submit"?: (event: CustomEvent<{ value: number, label: string }>) => void;
       };
     }
   }

package/dist/frameworks/stencil/index.d.ts

@@ -8,6 +8,11 @@ declare module '@stencil/core' {
     value?: string;
     showLabel?: boolean;
     valueAsNumber?: number | undefined;
+    locale?: string;
+    onSentimentChange?: (event: CustomEvent<{ value: number, label: string }>) => void;
+    "on:sentiment-change"?: (event: CustomEvent<{ value: number, label: string }>) => void;
+    onSentimentSubmit?: (event: CustomEvent<{ value: number, label: string }>) => void;
+    "on:sentiment-submit"?: (event: CustomEvent<{ value: number, label: string }>) => void;
       };
     }
   }

package/dist/frameworks/svelte/index.svelte

@@ -1,37 +1,74 @@
 <script lang="ts">
   import '@uibit/sentiment-selector';
   import type { SentimentSelector as HTMLElementClass } from '@uibit/sentiment-selector';
-  
-  let {
-    value = undefined,
-      showLabel = undefined,
-      valueAsNumber = undefined,
-      children
+
+let {
+    value = $bindable(),
+    showLabel = $bindable(),
+    valueAsNumber = $bindable(),
+    locale = $bindable(),
+    children,
+    ...restProps
   } = $props<{
-    children?: any;
+    children?: import('svelte').Snippet;
     value?: string;
     showLabel?: boolean;
     valueAsNumber?: number | undefined;
-  
+    locale?: string;
+
+    [key: string]: any;
   }>();
-  
-  let elementRef: HTMLElementClass | null = $state(null);
-  
-  $effect(() => {
-    if (elementRef && value !== undefined) {
+
+let elementRef: HTMLElementClass | null = $state(null);
+
+$effect(() => {
+    if (elementRef && value !== undefined && elementRef.value !== value) {
       elementRef.value = value;
     }
-    if (elementRef && showLabel !== undefined) {
+    if (elementRef && showLabel !== undefined && elementRef.showLabel !== showLabel) {
       elementRef.showLabel = showLabel;
     }
-    if (elementRef && valueAsNumber !== undefined) {
+    if (elementRef && valueAsNumber !== undefined && elementRef.valueAsNumber !== valueAsNumber) {
       elementRef.valueAsNumber = valueAsNumber;
     }
+    if (elementRef && locale !== undefined && elementRef.locale !== locale) {
+      elementRef.locale = locale;
+    }
   });
-  
+
+$effect(() => {
+    const element = elementRef;
+    if (!element) return;
+
+    const handleEvent = () => {
+      if (value !== element.value) {
+        value = element.value as any;
+      }
+      if (showLabel !== element.showLabel) {
+        showLabel = element.showLabel as any;
+      }
+      if (valueAsNumber !== element.valueAsNumber) {
+        valueAsNumber = element.valueAsNumber as any;
+      }
+      if (locale !== element.locale) {
+        locale = element.locale as any;
+      }
+    };
+
+    const events = ['change', 'input', 'sentiment-change', 'sentiment-submit'];
+    for (const event of events) {
+      element.addEventListener(event, handleEvent);
+    }
+    return () => {
+      for (const event of events) {
+        element.removeEventListener(event, handleEvent);
+      }
+    };
+  });
+
 </script>
 
-<uibit-sentiment-selector bind:this={elementRef} {...$$restProps}>
+<uibit-sentiment-selector bind:this={elementRef} {...restProps}>
 
   {#if children}
     {@render children()}

package/dist/frameworks/vue/index.ts

@@ -1,29 +1,108 @@
-import { defineComponent, h } from 'vue';
+import { defineComponent, h, ref, watch } from 'vue';
 import type { SentimentSelector as HTMLElementClass } from '@uibit/sentiment-selector';
 import '@uibit/sentiment-selector';
-
 export const SentimentSelector = defineComponent({
-  name: 'SentimentSelector',
-  props: {
-    value: { type: [String, Number, Boolean, Array, Object] as any },
-    showLabel: { type: [String, Number, Boolean, Array, Object] as any },
-    valueAsNumber: { type: [String, Number, Boolean, Array, Object] as any }
-  },
-  emits: ['sentiment-change', 'sentiment-submit'],
-  setup(props, { slots, emit }) {
-    return () => {
-      const eventListeners: Record<string, any> = {};
-      eventListeners['onSentiment-change'] = (event: Event) => {
-        emit('sentiment-change', event);
-      };
-      eventListeners['onSentiment-submit'] = (event: Event) => {
-        emit('sentiment-submit', event);
-      };
-
-      return h('uibit-sentiment-selector', {
-        ...props,
-        ...eventListeners
-      }, slots.default?.());
-    };
-  }
+    name: 'SentimentSelector',
+    props: {
+        value: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        showLabel: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        valueAsNumber: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        locale: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        modelValue: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        }
+    },
+    emits: [
+        'sentiment-change',
+        'sentiment-submit',
+        'update:modelValue'
+    ],
+    setup (props, { slots, emit }) {
+        const elementRef = ref<HTMLElementClass | null>(null);
+        if (true) {
+            watch(()=>props.modelValue, (newVal)=>{
+                if (elementRef.value && newVal !== undefined && elementRef.value.value !== newVal) {
+                    elementRef.value.value = newVal;
+                }
+            });
+            watch(()=>props.value, (newVal)=>{
+                if (elementRef.value && newVal !== undefined && elementRef.value.value !== newVal) {
+                    elementRef.value.value = newVal;
+                }
+            });
+        }
+        watch(()=>props.showLabel, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).showLabel = newVal;
+            }
+        });
+        watch(()=>props.valueAsNumber, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).valueAsNumber = newVal;
+            }
+        });
+        watch(()=>props.locale, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).locale = newVal;
+            }
+        });
+        return ()=>{
+            const eventListeners: Record<string, any> = {};
+            eventListeners['onSentiment-change'] = (event: Event)=>{
+                emit('sentiment-change', event);
+                emit('update:modelValue', (event.target as any).value);
+            };
+            eventListeners['onSentiment-submit'] = (event: Event)=>{
+                emit('sentiment-submit', event);
+                emit('update:modelValue', (event.target as any).value);
+            };
+            const mergedProps = {
+                ...props,
+                ...eventListeners,
+                ref: elementRef
+            };
+            if (true && props.modelValue !== undefined) {
+                (mergedProps as any).value = props.modelValue;
+            }
+            return h('uibit-sentiment-selector', mergedProps, slots.default?.());
+        };
+    }
 });

package/dist/sentiment-selector.d.ts

@@ -7,6 +7,8 @@ export interface SentimentOption {
 declare const SentimentSelector_base: import("@uibit/form-internals").Constructor<import("@uibit/form-internals").FormAssociatedInterface> & typeof UIBitElement;
 /**
  * Micro-feedback widget displaying a horizontal row of expressive face icons.
+
+ * @summary A modern, accessible user rating and sentiment scale selector component.
  * Tapping or clicking an option scales it up with a spring animation and fires
  * a scored event. Unselected options are dimmed to focus attention on the
  * current selection.
@@ -33,10 +35,14 @@ declare const SentimentSelector_base: import("@uibit/form-internals").Constructo
  * @cssprop [--uibit-sentiment-selector-label-font-weight=500] - Label font weight
  * @cssprop [--uibit-sentiment-selector-label-color=#6b7280] - Label color
  * @cssprop [--uibit-sentiment-selector-gap=0.625rem] - Gap between track and label
- */
+ 
+ * @cssstate selected - Active when a rating value has been selected.*/
 export declare class SentimentSelector extends SentimentSelector_base {
     static styles: import("lit").CSSResult;
     private options;
+    /**
+     * The selected rating value.
+     */
     value: string;
     /** Show the label text for the selected option below the track. */
     showLabel: boolean;

package/dist/sentiment-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sentiment-selector.d.ts","sourceRoot":"","sources":["../src/sentiment-selector.ts"],"names":[],"mappings":"AACA,OAAO,EAA2C,YAAY,EAAuB,MAAM,aAAa,CAAC;AAczG,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBACa,iBAAkB,SAAQ,sBAAiC;IACtE,MAAM,CAAC,MAAM,0BAAU;IAEd,OAAO,CAAC,OAAO,CAAsC;IAEX,KAAK,EAAE,MAAM,CAAC;IAEjE,mEAAmE;IACb,SAAS,UAAQ;IAE9D,OAAO,CAAC,WAAW,CAAC,CAAS;IAEtC,IAAI,aAAa,IAAI,MAAM,GAAG,SAAS,CAEtC;IAED,IAAI,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,EAE7C;IAED,OAAO,CAAC,OAAO;IAWf,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,aAAa;IAYrB,YAAY,SAEX;IAED,OAAO,CAAC,UAAU;IAmBlB,MAAM,oCA0BL;CACF;eAEc,iBAAiB"}
+{"version":3,"file":"sentiment-selector.d.ts","sourceRoot":"","sources":["../src/sentiment-selector.ts"],"names":[],"mappings":"AACA,OAAO,EAA2C,YAAY,EAAuB,MAAM,aAAa,CAAC;AAczG,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uEA+BuE;AACvE,qBACa,iBAAkB,SAAQ,sBAAiC;IACtE,MAAM,CAAC,MAAM,0BAAU;IAEd,OAAO,CAAC,OAAO,CAAsC;IAE9D;;OAEG;IACgD,KAAK,EAAE,MAAM,CAAC;IAEjE,mEAAmE;IACb,SAAS,UAAQ;IAE9D,OAAO,CAAC,WAAW,CAAC,CAAS;IAEtC,IAAI,aAAa,IAAI,MAAM,GAAG,SAAS,CAEtC;IAED,IAAI,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,EAE7C;IAED,OAAO,CAAC,OAAO;IAWf,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,aAAa;IAYrB,YAAY,SAEX;IAED,OAAO,CAAC,UAAU;IAmBlB,MAAM,oCA0BL;CACF;eAEc,iBAAiB"}

package/dist/sentiment-selector.js

@@ -26,6 +26,8 @@ const DEFAULT_OPTIONS = [
 ];
 /**
  * Micro-feedback widget displaying a horizontal row of expressive face icons.
+
+ * @summary A modern, accessible user rating and sentiment scale selector component.
  * Tapping or clicking an option scales it up with a spring animation and fires
  * a scored event. Unselected options are dimmed to focus attention on the
  * current selection.
@@ -52,7 +54,8 @@ const DEFAULT_OPTIONS = [
  * @cssprop [--uibit-sentiment-selector-label-font-weight=500] - Label font weight
  * @cssprop [--uibit-sentiment-selector-label-color=#6b7280] - Label color
  * @cssprop [--uibit-sentiment-selector-gap=0.625rem] - Gap between track and label
- */
+ 
+ * @cssstate selected - Active when a rating value has been selected.*/
 let SentimentSelector = class SentimentSelector extends FormAssociatedMixin(UIBitElement) {
     constructor() {
         super(...arguments);

package/dist/sentiment-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"sentiment-selector.js","sourceRoot":"","sources":["../src/sentiment-selector.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"sentiment-selector.js","sourceRoot":"","sources":["../src/sentiment-selector.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uibit/sentiment-selector",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Micro-feedback widget with a sliding row of expressive emoji options. Selecting an option triggers a spring-curve scale animation, grays out alternatives, and fires scored events instantly on release.",
   "type": "module",
   "main": "./dist/index.js",
@@ -11,7 +11,7 @@
       "import": "./dist/index.js"
     },
     "./custom-elements.json": "./custom-elements.json",
-    "./react": "./dist/frameworks/react/index.d.ts",
+    "./react": "./dist/frameworks/react/index.ts",
     "./vue": "./dist/frameworks/vue/index.ts",
     "./svelte": "./dist/frameworks/svelte/index.svelte",
     "./angular": "./dist/frameworks/angular/index.ts",
@@ -47,14 +47,14 @@
   },
   "dependencies": {
     "lucide": "^1.24.0",
-    "@uibit/core": "0.1.0",
+    "@uibit/core": "0.2.0",
     "@uibit/form-internals": "0.1.0"
   },
   "devDependencies": {
     "@types/node": "^20.19.43",
     "lit": "^3.3.3",
     "typescript": "7.0.2",
-    "@uibit/codegen": "0.1.0"
+    "@uibit/codegen": "0.2.0"
   },
   "peerDependencies": {
     "lit": "^3.0.0",
@@ -85,9 +85,9 @@
     "tagName": "uibit-sentiment-selector"
   },
   "scripts": {
-    "build": "cem analyze --globs 'src/**/*.ts' --litelement && uibit-codegen --package . && tsc",
-    "dev": "concurrently \"cem analyze --globs 'src/**/*.ts' --litelement --watch\" \"tsc --watch\"",
-    "analyze": "cem analyze --globs 'src/**/*.ts' --litelement",
+    "build": "cem analyze --config ../custom-elements-manifest.config.js && uibit-codegen --package . && tsc",
+    "dev": "concurrently \"cem analyze --config ../custom-elements-manifest.config.js --watch\" \"tsc --watch\"",
+    "analyze": "cem analyze --config ../custom-elements-manifest.config.js",
     "typecheck": "tsc --noEmit",
     "test": "vitest run -c ../../../vitest.config.ts --passWithNoTests"
   }

package/dist/frameworks/react/index.d.ts

@@ -1,21 +0,0 @@
-import type { HTMLAttributes, ClassAttributes } from 'react';
-import type { SentimentSelector as HTMLElementClass } from '@uibit/sentiment-selector';
-import '@uibit/sentiment-selector';
-
-declare global {
-  namespace React {
-    namespace JSX {
-      interface IntrinsicElements {
-        'uibit-sentiment-selector': ClassAttributes<HTMLElementClass> & HTMLAttributes<HTMLElementClass> & {
-          children?: React.ReactNode;
-          class?: string;
-      value?: string;
-      showLabel?: boolean;
-      valueAsNumber?: number | undefined;
-      onSentimentChange?: (event: any) => void;
-      onSentimentSubmit?: (event: any) => void;
-        };
-      }
-    }
-  }
-}