} HTMLFieldSetElementRef
+ */
+
+/**
+ * @typedef {object} RenderOptionContext
+ * @property {{ first: number, current: number, last: number }} indexes - Selection index information
+ * @property {boolean} isModeSingle - Whether the selector is in single selection mode
+ * @property {boolean} isModeRange - Whether the selector is in range selection mode
+ * @property {boolean} isLastOption - Whether this is the last option in the list (used to control arrow visibility)
+ * @property {RangeSelectorOption} nextOption - The next option in the list, used to determine arrow highlighting state
+ */
+
+/**
+ * A range selector component that allows users to select ranges from a list of options.
+ *
+ * It extends `CcFormControlElement`, so it can be used in a form and its value can be submitted.
+ *
+ * ## Important Caveats
+ *
+ * **Disabled Options in Selections:**
+ * For visualization purposes, disabled options can appear within a selected range in range mode.
+ * However, these disabled options are automatically excluded from form submission and the values array.
+ * Additionally, on component initialization (firstUpdated), any disabled options at the start or end
+ * of the values array are automatically trimmed to ensure clean selection boundaries.
+ *
+ * **Range Mode Interaction:**
+ * In range mode, the drag interaction uses a clear/preview/apply pattern:
+ * - On mousedown: Current selection is cleared and stored for potential rollback
+ * - During drag: "dragging" visual state shows preview, "selected" state is hidden
+ * - On mouseup: Selection is applied if range is valid (>1 option)
+ * - On outside click: Previous selection is restored (rollback)
+ *
+ * **Single-Click Limitation:**
+ * In range mode, clicking a single option without dragging will not create a selection.
+ * This is intentional to distinguish between single clicks and drag operations.
+ *
+ * @cssdisplay inline-block
+ *
+ * @csspart options - Styles the options container, mainly to modify their layout.
+ *
+ * @cssprop {Size} --cc-form-label-gap - The space between the label and the control (defaults: `0.35em`).
+ * @cssprop {Size} --cc-form-label-gap-inline - The space between the label and the control when layout is inline (defaults: `0.75em`).
+ * @cssprop {Color} --cc-input-label-color - The color for the input's label (defaults: `inherit`).
+ * @cssprop {FontSize} --cc-input-label-font-size - The font-size for the input's label (defaults: `inherit`).
+ * @cssprop {FontWeight} --cc-input-label-font-weight - The font-weight for the input's label (defaults: `normal`).
+ * @cssprop {Width} --cc-range-selector-options-width - Sets the width of the form control content (defaults: `fit-content`).
+ * @cssprop {Size} --cc-range-selector-options-indent - horizontal space between the start of the line and the options (defaults: `0.25em`).
+ *
+ * @slot help - The help message to be displayed right below the options. Please use a `` tag.
+ */
+export class CcRangeSelector extends CcFormControlElement {
+ static get properties() {
+ return {
+ ...super.properties,
+ disabled: { type: Boolean, reflect: true },
+ inline: { type: Boolean, reflect: true },
+ label: { type: String },
+ mode: { type: String, reflect: true },
+ options: { type: Array },
+ readonly: { type: Boolean, reflect: true },
+ required: { type: Boolean, reflect: true },
+ selection: { type: Object },
+ showCustom: { type: Boolean, attribute: 'show-custom' },
+ value: { type: String },
+ _isCustomOptionActive: { type: Boolean, state: true },
+ };
+ }
+
+ static reactiveValidationProperties = ['required', 'options'];
+
+ constructor() {
+ super();
+
+ /** @type {boolean} Whether the component should be disabled (default: 'false') */
+ this.disabled = false;
+
+ /** @type {boolean} Sets the `