@proyecto-viviana/solidaria-components 0.2.5 → 0.2.9

package/src/Menu.tsx

@@ -8,7 +8,9 @@
 import {
   type JSX,
   createContext,
+  createEffect,
   createMemo,
+  createSignal,
   splitProps,
   useContext,
   For,
@@ -22,6 +24,7 @@ import {
   createHover,
   createButton,
   createInteractOutside,
+  mergeProps,
   FocusScope,
   type AriaMenuProps,
   type AriaMenuItemProps,
@@ -33,6 +36,7 @@ import {
   type MenuState,
   type OverlayTriggerState,
   type Key,
+  type DropTarget,
 } from '@proyecto-viviana/solid-stately';
 import {
   type RenderChildren,
@@ -41,6 +45,27 @@ import {
   type SlotProps,
   useRenderProps,
 } from './utils';
+import { SharedElementTransition } from './SharedElementTransition';
+import { type DragAndDropHooks } from './useDragAndDrop';
+import {
+  CollectionRendererContext,
+  Section,
+  Header,
+  Group,
+  type CollectionEntry,
+  type CollectionRendererContextValue,
+  type SectionProps,
+  useCollectionRenderer,
+  flattenCollectionEntries,
+  isCollectionSection,
+} from './Collection';
+import { useVirtualizerContext } from './Virtualizer';
+import {
+  getNormalizedDropTargetKey,
+  mergePersistedKeysIntoVirtualRange,
+  useDndPersistedKeys,
+  useRenderDropIndicator,
+} from './DragAndDrop';
 
 // ============================================
 // TYPES
@@ -57,7 +82,7 @@ export interface MenuProps<T>
   extends Omit<AriaMenuProps, 'children'>,
     SlotProps {
   /** The items to render in the menu. */
-  items: T[];
+  items: CollectionEntry<T>[];
   /** Function to get the key from an item. */
   getKey?: (item: T) => Key;
   /** Function to get the text value from an item. */
@@ -76,6 +101,8 @@ export interface MenuProps<T>
   class?: ClassNameOrFunction<MenuRenderProps>;
   /** The inline style for the element. */
   style?: StyleOrFunction<MenuRenderProps>;
+  /** Drag and drop hooks from `useDragAndDrop`. */
+  dragAndDropHooks?: DragAndDropHooks<T>;
 }
 
 export interface MenuItemRenderProps {
@@ -140,12 +167,18 @@ export interface MenuTriggerProps extends Omit<AriaMenuTriggerProps, 'children'>
   onOpenChange?: (isOpen: boolean) => void;
 }
 
+export interface SubmenuTriggerProps extends MenuTriggerProps {}
+
 // ============================================
 // CONTEXT
 // ============================================
 
 interface MenuContextValue<T> {
   state: MenuState<T>;
+  isDisabled: () => boolean;
+  dragAndDropHooks?: DragAndDropHooks<T>;
+  dragState?: unknown;
+  dropState?: unknown;
 }
 
 interface MenuTriggerContextValue {
@@ -157,6 +190,7 @@ interface MenuTriggerContextValue {
 export const MenuContext = createContext<MenuContextValue<unknown> | null>(null);
 export const MenuStateContext = createContext<MenuState<unknown> | null>(null);
 export const MenuTriggerContext = createContext<MenuTriggerContextValue | null>(null);
+export const RootMenuTriggerStateContext = createContext<OverlayTriggerState | null>(null);
 
 // ============================================
 // COMPONENTS
@@ -192,22 +226,28 @@ export function MenuTrigger(props: MenuTriggerProps): JSX.Element {
   );
 
   return (
-    <MenuTriggerContext.Provider
-      value={{
-        state,
-        triggerProps: menuTriggerProps,
-        menuProps,
-      }}
-    >
-      {props.children}
-    </MenuTriggerContext.Provider>
+    <RootMenuTriggerStateContext.Provider value={state}>
+      <MenuTriggerContext.Provider
+        value={{
+          state,
+          triggerProps: menuTriggerProps,
+          menuProps,
+        }}
+      >
+        {props.children}
+      </MenuTriggerContext.Provider>
+    </RootMenuTriggerStateContext.Provider>
   );
 }
 
+export function SubmenuTrigger(props: SubmenuTriggerProps): JSX.Element {
+  return <MenuTrigger {...props} />;
+}
+
 /**
  * A button that opens a menu.
  */
-export interface MenuButtonProps extends SlotProps {
+export interface MenuButtonProps extends SlotProps, Omit<JSX.HTMLAttributes<HTMLButtonElement>, 'class' | 'style' | 'children'> {
   /** The children of the button. A function may be provided to receive render props. */
   children?: RenderChildren<MenuTriggerRenderProps>;
   /** The CSS className for the element. */
@@ -218,8 +258,10 @@ export interface MenuButtonProps extends SlotProps {
   isDisabled?: boolean;
 }
 
+export interface MenuSectionProps extends SectionProps {}
+
 export function MenuButton(props: MenuButtonProps): JSX.Element {
-  const [local] = splitProps(props, ['class', 'style', 'slot', 'isDisabled']);
+  const [local, domProps] = splitProps(props, ['class', 'style', 'slot', 'isDisabled', 'children']);
 
   // Get trigger context
   const context = useContext(MenuTriggerContext);
@@ -289,6 +331,7 @@ export function MenuButton(props: MenuButtonProps): JSX.Element {
 
   return (
     <button
+      {...domProps}
       {...cleanTriggerProps()}
       {...cleanButtonProps()}
       {...cleanFocusProps()}
@@ -315,19 +358,25 @@ export function Menu<T>(props: MenuProps<T>): JSX.Element {
   const [local, stateProps, ariaProps] = splitProps(
     props,
     ['children', 'class', 'style', 'slot'],
-    ['items', 'getKey', 'getTextValue', 'getDisabled', 'disabledKeys', 'onAction', 'onClose']
+    ['items', 'getKey', 'getTextValue', 'getDisabled', 'disabledKeys', 'onAction', 'onClose', 'dragAndDropHooks']
   );
 
   // Get trigger context if available
   const triggerContext = useContext(MenuTriggerContext);
 
   // Ref for the menu element (for click outside detection)
-  let menuRef: HTMLUListElement | undefined;
+  const [menuRef, setMenuRef] = createSignal<HTMLUListElement | null>(null);
+
+  const flatItems = createMemo<T[]>(() => {
+    return flattenCollectionEntries(stateProps.items);
+  });
+
+  const hasSections = createMemo(() => stateProps.items.some((item) => isCollectionSection(item)));
 
   // Create menu state
   const state = createMenuState<T>({
     get items() {
-      return stateProps.items;
+      return flatItems();
     },
     get getKey() {
       return stateProps.getKey;
@@ -349,9 +398,26 @@ export function Menu<T>(props: MenuProps<T>): JSX.Element {
     },
   });
 
+  const resolveDisabled = (): boolean => {
+    const disabled = ariaProps.isDisabled;
+    if (typeof disabled === 'function') {
+      return (disabled as () => boolean)();
+    }
+    return !!disabled;
+  };
+
   // Create menu aria props
-  const { menuProps } = createMenu(
+  const { menuProps, labelProps } = createMenu(
     {
+      get isDisabled() {
+        return resolveDisabled();
+      },
+      get label() {
+        return ariaProps.label;
+      },
+      get onAction() {
+        return stateProps.onAction;
+      },
       get onClose() {
         return stateProps.onClose ?? (() => triggerContext?.state.close());
       },
@@ -361,6 +427,9 @@ export function Menu<T>(props: MenuProps<T>): JSX.Element {
       get 'aria-labelledby'() {
         return ariaProps['aria-labelledby'];
       },
+      get 'aria-describedby'() {
+        return ariaProps['aria-describedby'];
+      },
     },
     state
   );
@@ -370,7 +439,7 @@ export function Menu<T>(props: MenuProps<T>): JSX.Element {
 
   // Handle click outside to close menu
   createInteractOutside({
-    ref: () => menuRef ?? null,
+    ref: () => menuRef(),
     onInteractOutside: () => {
       if (triggerContext?.state.isOpen()) {
         triggerContext.state.close();
@@ -411,27 +480,264 @@ export function Menu<T>(props: MenuProps<T>): JSX.Element {
     const { ref: _ref3, ...rest } = focusProps as Record<string, unknown>;
     return rest;
   };
+  const cleanLabelProps = () => {
+    const { ref: _ref4, ...rest } = labelProps as Record<string, unknown>;
+    return rest;
+  };
 
   // If inside a MenuTrigger, only render when open
   // If standalone (no trigger context), always render
   const shouldRender = () => triggerContext ? triggerContext.state.isOpen() : true;
+  const parentCollectionRenderer = useCollectionRenderer<unknown>();
+  const virtualizer = useVirtualizerContext();
+  const getItemNodes = createMemo(() => Array.from(state.collection()).filter((node) => node.type === 'item'));
+  const getDropTargetByIndex = (index: number, position: 'before' | 'after' | 'on'): DropTarget | null => {
+    const node = getItemNodes()[index];
+    if (!node) return null;
+    return { type: 'item', key: node.key, dropPosition: position };
+  };
+  const hasDroppableDnd = createMemo(() => {
+    const hooks = stateProps.dragAndDropHooks;
+    return Boolean(
+      hooks?.useDroppableCollectionState &&
+      hooks.useDroppableCollection &&
+      (hooks.dropTargetDelegate || parentCollectionRenderer?.dropTargetDelegate || hooks.ListDropTargetDelegate)
+    );
+  });
+  const hasDraggableDnd = createMemo(() => {
+    const hooks = stateProps.dragAndDropHooks;
+    return Boolean(hooks?.useDraggableCollectionState && hooks.useDraggableCollection);
+  });
+  const dragState = createMemo(() => {
+    if (!hasDraggableDnd()) return undefined;
+    return stateProps.dragAndDropHooks?.useDraggableCollectionState?.({
+      items: flatItems(),
+    });
+  });
+  const dropState = createMemo(() => {
+    if (!hasDroppableDnd()) return undefined;
+    return stateProps.dragAndDropHooks?.useDroppableCollectionState?.({});
+  });
+  const persistedKeys = useDndPersistedKeys(
+    { focusedKey: state.focusedKey },
+    stateProps.dragAndDropHooks,
+    dropState(),
+    state.collection()
+  );
+  const virtualRange = createMemo(() => {
+    if (!virtualizer || !parentCollectionRenderer?.isVirtualized || hasSections()) return null;
+    const baseRange = virtualizer.getVisibleRange(stateProps.items.length);
+    const itemNodes = getItemNodes();
+    const persistedIndexes = Array.from(persistedKeys())
+      .map((key) => itemNodes.findIndex((node) => node.key === key))
+      .filter((index) => index >= 0);
+    const dropTarget = dropState()?.target;
+    const normalizedDropKey = getNormalizedDropTargetKey(dropTarget, state.collection());
+    const focusedKey = state.focusedKey();
+    const focusedIndex = focusedKey != null ? itemNodes.findIndex((node) => node.key === focusedKey) : -1;
+    const forceIncludeIndexes = [
+      dropTarget?.type === 'item' ? itemNodes.findIndex((node) => node.key === dropTarget.key) : -1,
+      normalizedDropKey != null ? itemNodes.findIndex((node) => node.key === normalizedDropKey) : -1,
+      dropTarget?.type === 'item' ? -1 : focusedIndex,
+    ].filter((index) => index >= 0);
+    return mergePersistedKeysIntoVirtualRange(baseRange, persistedIndexes, stateProps.items.length, virtualizer, 80, {
+      forceIncludeIndexes,
+      forceIncludeMaxSpan: 320,
+    });
+  });
+  const visibleItems = createMemo(() => {
+    const range = virtualRange();
+    if (!range) return stateProps.items;
+    return stateProps.items.slice(range.start, range.end);
+  });
+  createEffect(() => {
+    if (!hasDraggableDnd()) return;
+    const hooks = stateProps.dragAndDropHooks;
+    const activeDragState = dragState();
+    if (!hooks?.useDraggableCollection || !activeDragState) return;
+    hooks.useDraggableCollection({}, activeDragState, () => menuRef());
+  });
+  const droppableCollection = createMemo(() => {
+    if (!hasDroppableDnd()) return undefined;
+    const hooks = stateProps.dragAndDropHooks;
+    const activeDropState = dropState();
+    if (!hooks?.useDroppableCollection || !activeDropState) return undefined;
+    const resolveDirection = (): 'ltr' | 'rtl' => {
+      const menuEl = menuRef();
+      if (menuEl && typeof window !== 'undefined' && typeof window.getComputedStyle === 'function') {
+        const dir = window.getComputedStyle(menuEl).direction;
+        if (dir === 'rtl') return 'rtl';
+      }
+      return typeof document !== 'undefined' && document.dir === 'rtl' ? 'rtl' : 'ltr';
+    };
+    const dropTargetDelegate = hooks.dropTargetDelegate
+      ?? parentCollectionRenderer?.dropTargetDelegate
+      ?? (hooks.ListDropTargetDelegate
+        ? new hooks.ListDropTargetDelegate(
+          () => state.collection(),
+          () => menuRef(),
+          { layout: 'stack', orientation: 'vertical', direction: resolveDirection() }
+        )
+        : undefined);
+    if (!dropTargetDelegate) return undefined;
+    return hooks.useDroppableCollection(
+      {
+        dropTargetDelegate,
+        keyboardDelegate: {
+          getFirstKey: () => state.collection().getFirstKey(),
+          getLastKey: () => state.collection().getLastKey(),
+          getKeyBelow: (key) => state.collection().getKeyAfter(key),
+          getKeyAbove: (key) => state.collection().getKeyBefore(key),
+          getKeyPageBelow: (key) => state.collection().getKeyAfter(key),
+          getKeyPageAbove: (key) => state.collection().getKeyBefore(key),
+        },
+      },
+      activeDropState,
+      () => menuRef()
+    );
+  });
+  const isRootDropTarget = createMemo(() => {
+    return Boolean(dropState()?.target?.type === 'root');
+  });
+  const dndRenderDropIndicator = createMemo(() => useRenderDropIndicator(stateProps.dragAndDropHooks, dropState()));
+  const dndDropIndicator = (index: number, position: 'before' | 'after' | 'on') => {
+    const target = getDropTargetByIndex(index, position);
+    if (!target || target.type !== 'item') return undefined;
+    return dndRenderDropIndicator()?.(target);
+  };
+  const sectionedRenderEntries = createMemo(() => {
+    let globalIndex = 0;
+    return stateProps.items.map((entry) => {
+      if (isCollectionSection(entry)) {
+        const sectionItems = entry.items.map((item) => ({
+          item,
+          index: globalIndex++,
+        }));
+        return {
+          type: 'section' as const,
+          section: entry,
+          items: sectionItems,
+        };
+      }
+      const indexedItem = {
+        item: entry as T,
+        index: globalIndex++,
+      };
+      return {
+        type: 'item' as const,
+        item: indexedItem,
+      };
+    });
+  });
+  const collectionRenderer = createMemo<CollectionRendererContextValue<unknown>>(() => ({
+    ...parentCollectionRenderer,
+    renderItem: (item) => props.children(item as T),
+    renderDropIndicator: (index, position) =>
+      dndDropIndicator(index, position) ?? parentCollectionRenderer?.renderDropIndicator?.(index, position),
+  }));
 
   // Only use FocusScope when inside a MenuTrigger (for popover behavior)
   // Standalone menus don't need focus restoration
   const menuContent = () => (
-    <MenuContext.Provider value={{ state }}>
+    <MenuContext.Provider
+      value={{
+        state,
+        isDisabled: resolveDisabled,
+        dragAndDropHooks: stateProps.dragAndDropHooks,
+        dragState: dragState(),
+        dropState: dropState(),
+      } as MenuContextValue<unknown>}
+    >
       <MenuStateContext.Provider value={state}>
-        <ul
-          ref={(el) => (menuRef = el)}
-          {...cleanMenuProps()}
-          {...cleanTriggerMenuProps()}
-          {...cleanFocusProps()}
-          class={renderProps.class()}
-          style={renderProps.style()}
-          data-focused={state.isFocused() || undefined}
-        >
-          <For each={stateProps.items}>{(item) => props.children?.(item)}</For>
-        </ul>
+        <CollectionRendererContext.Provider value={collectionRenderer()}>
+          <>
+            <Show when={ariaProps.label}>
+              <span {...cleanLabelProps()}>{ariaProps.label as JSX.Element}</span>
+            </Show>
+            <ul
+              ref={setMenuRef}
+              {...mergeProps(
+                cleanMenuProps(),
+                cleanTriggerMenuProps(),
+                cleanFocusProps(),
+                (droppableCollection()?.collectionProps as Record<string, unknown> | undefined) ?? {}
+              )}
+              class={renderProps.class()}
+              style={renderProps.style()}
+              data-focused={state.isFocused() || undefined}
+              data-disabled={resolveDisabled() || undefined}
+              data-drop-target={isRootDropTarget() || undefined}
+            >
+              <SharedElementTransition>
+              {hasSections()
+                ? (
+                  <For each={sectionedRenderEntries()}>
+                    {(entry) =>
+                      entry.type === 'section'
+                        ? (
+                          <li role="presentation" data-section-wrapper>
+                            <Section class="solidaria-Menu-section">
+                              {entry.section.title != null && (
+                                <Header class="solidaria-Menu-sectionHeader">{entry.section.title}</Header>
+                              )}
+                              <Group class="solidaria-Menu-sectionGroup">
+                                <ul role="group" aria-label={entry.section['aria-label']}>
+                                  <For each={entry.items}>
+                                    {(indexedItem) => (
+                                      <>
+                                        {collectionRenderer().renderDropIndicator?.(indexedItem.index, 'before')}
+                                        {collectionRenderer().renderDropIndicator?.(indexedItem.index, 'on')}
+                                        {props.children?.(indexedItem.item)}
+                                        {collectionRenderer().renderDropIndicator?.(indexedItem.index, 'after')}
+                                      </>
+                                    )}
+                                  </For>
+                                </ul>
+                              </Group>
+                            </Section>
+                          </li>
+                        )
+                        : (
+                          <>
+                            {collectionRenderer().renderDropIndicator?.(entry.item.index, 'before')}
+                            {collectionRenderer().renderDropIndicator?.(entry.item.index, 'on')}
+                            {props.children?.(entry.item.item)}
+                            {collectionRenderer().renderDropIndicator?.(entry.item.index, 'after')}
+                          </>
+                        )
+                    }
+                  </For>
+                )
+                : (
+                  <>
+                    {virtualRange()?.offsetTop
+                      ? <li role="presentation" aria-hidden="true" style={{ height: `${virtualRange()!.offsetTop}px` }} data-virtualizer-spacer="top" />
+                      : null}
+                    <For each={visibleItems()}>
+                      {(item, index) => {
+                        const itemIndex = () => (virtualRange()?.start ?? 0) + index();
+                        const beforeIndicator = () => collectionRenderer().renderDropIndicator?.(itemIndex(), 'before');
+                        const onIndicator = () => collectionRenderer().renderDropIndicator?.(itemIndex(), 'on');
+                        const afterIndicator = () => collectionRenderer().renderDropIndicator?.(itemIndex(), 'after');
+                        return (
+                          <>
+                            {beforeIndicator()}
+                            {onIndicator()}
+                            {props.children?.(item as T)}
+                            {afterIndicator()}
+                          </>
+                        );
+                      }}
+                    </For>
+                    {virtualRange()?.offsetBottom
+                      ? <li role="presentation" aria-hidden="true" style={{ height: `${virtualRange()!.offsetBottom}px` }} data-virtualizer-spacer="bottom" />
+                      : null}
+                  </>
+                )}
+              </SharedElementTransition>
+            </ul>
+          </>
+        </CollectionRendererContext.Provider>
       </MenuStateContext.Provider>
     </MenuContext.Provider>
   );
@@ -467,16 +773,18 @@ export function MenuItem<T>(props: MenuItemProps<T>): JSX.Element {
     throw new Error('MenuItem must be used within a Menu');
   }
   const state = context as MenuState<T>;
+  const menuContext = useContext(MenuContext) as MenuContextValue<T> | null;
+  const [ref, setRef] = createSignal<HTMLLIElement | null>(null);
 
   // Create menu item aria props
   const itemAria = createMenuItem<T>(
     {
       key: local.id,
       get isDisabled() {
-        return ariaProps.isDisabled;
+        return Boolean(ariaProps.isDisabled || menuContext?.isDisabled());
       },
       get 'aria-label'() {
-        return ariaProps['aria-label'];
+        return ariaProps['aria-label'] ?? local.textValue;
       },
       get onAction() {
         return local.onAction;
@@ -512,21 +820,55 @@ export function MenuItem<T>(props: MenuItemProps<T>): JSX.Element {
     },
     renderValues
   );
+  const hasPrimitiveLabel = () => {
+    return typeof props.children === 'string' || typeof props.children === 'number';
+  };
 
   // Remove ref from spread props
   const cleanItemProps = () => {
-    const { ref: _ref1, ...rest } = itemAria.menuItemProps as Record<string, unknown>;
+    const {
+      ref: _ref1,
+      'aria-describedby': _ariaDescribedby,
+      ...rest
+    } = itemAria.menuItemProps as Record<string, unknown>;
+    if (!hasPrimitiveLabel() && rest['aria-label'] == null) {
+      delete rest['aria-labelledby'];
+    }
     return rest;
   };
   const cleanHoverProps = () => {
     const { ref: _ref2, ...rest } = hoverProps as Record<string, unknown>;
     return rest;
   };
+  const draggableItem = createMemo(() => {
+    if (!menuContext?.dragAndDropHooks?.useDraggableItem || !menuContext.dragState) return undefined;
+    return menuContext.dragAndDropHooks.useDraggableItem(
+      {
+        key: local.id as string | number,
+      },
+      menuContext.dragState as Parameters<NonNullable<DragAndDropHooks<T>['useDraggableItem']>>[1]
+    );
+  });
+  const droppableItem = createMemo(() => {
+    if (!menuContext?.dragAndDropHooks?.useDroppableItem || !menuContext.dropState) return undefined;
+    return menuContext.dragAndDropHooks.useDroppableItem(
+      {
+        key: local.id as string | number,
+      },
+      menuContext.dropState as Parameters<NonNullable<DragAndDropHooks<T>['useDroppableItem']>>[1],
+      () => ref()
+    );
+  });
 
   return (
     <li
-      {...cleanItemProps()}
-      {...cleanHoverProps()}
+      ref={setRef}
+      {...mergeProps(
+        cleanItemProps(),
+        cleanHoverProps(),
+        (draggableItem()?.dragProps as Record<string, unknown> | undefined) ?? {},
+        (droppableItem()?.dropProps as Record<string, unknown> | undefined) ?? {}
+      )}
       class={renderProps.class()}
       style={renderProps.style()}
       data-focused={itemAria.isFocused() || undefined}
@@ -534,11 +876,22 @@ export function MenuItem<T>(props: MenuItemProps<T>): JSX.Element {
       data-pressed={itemAria.isPressed() || undefined}
       data-hovered={isHovered() || undefined}
       data-disabled={itemAria.isDisabled() || undefined}
+      data-dragging={draggableItem()?.isDragging || undefined}
+      data-drop-target={droppableItem()?.isDropTarget || undefined}
     >
-      {renderProps.renderChildren()}
+      {hasPrimitiveLabel()
+        ? <span {...itemAria.labelProps}>{renderProps.renderChildren()}</span>
+        : renderProps.renderChildren()}
     </li>
   );
 }
 
+/**
+ * Section primitive alias for Menu composition parity.
+ */
+export function MenuSection(props: MenuSectionProps): JSX.Element {
+  return <Section {...props} />;
+}
+
 // Attach Item as a static property
 Menu.Item = MenuItem;

package/src/Meter.tsx

@@ -10,7 +10,6 @@
 
 import {
   type JSX,
-  type ParentProps,
   createContext,
   createMemo,
   splitProps,
@@ -64,6 +63,11 @@ function clamp(value: number, min: number, max: number): number {
   return Math.min(Math.max(value, min), max);
 }
 
+function getSafeRange(min: number, max: number): number {
+  const range = max - min;
+  return Number.isFinite(range) && range > 0 ? range : 1;
+}
+
 // ============================================
 // METER COMPONENT
 // ============================================
@@ -85,7 +89,7 @@ function clamp(value: number, min: number, max: number): number {
  * </Meter>
  * ```
  */
-export function Meter(props: ParentProps<MeterProps>): JSX.Element {
+export function Meter(props: MeterProps): JSX.Element {
   const [local, ariaProps] = splitProps(props, [
     'children',
     'class',
@@ -115,7 +119,7 @@ export function Meter(props: ParentProps<MeterProps>): JSX.Element {
   // Calculate percentage
   const percentage = createMemo(() => {
     const clampedValue = clamp(value(), minValue(), maxValue());
-    return ((clampedValue - minValue()) / (maxValue() - minValue())) * 100;
+    return ((clampedValue - minValue()) / getSafeRange(minValue(), maxValue())) * 100;
   });
 
   // Get value text from aria props