funda-ui 4.7.624 → 4.7.701

package/lib/esm/Popover/PopoverContent.tsx

@@ -0,0 +1,72 @@
+import React, { forwardRef } from 'react';
+import RootPortal from 'funda-root-portal';
+import { combinedCls } from 'funda-utils/dist/cjs/cls';
+
+
+import { usePopoverContext } from './Popover';
+
+// PopoverContent component
+export type PopoverContentProps = {
+    children: React.ReactNode;
+    className?: string;
+};
+
+const PopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>((props, ref) => {
+    const { children, className } = props;
+    const {
+        isOpen,
+        contentRef,
+        id,
+        direction,
+        size,
+        popupArrowStyle,
+        popupContentStyle,
+        wrapperClassName,
+        position
+    } = usePopoverContext();
+
+    const wrapperRef = (node: HTMLDivElement | null) => {
+        if (node) {
+            (contentRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+        }
+        if (typeof ref === 'function') {
+            ref(node);
+        } else if (ref && node) {
+            (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+        }
+    };
+
+    return (
+        <RootPortal show={isOpen} containerClassName="Popover">
+            <div
+                ref={wrapperRef}
+                id={`cus-popover__wrapper-${id}`}
+                className={combinedCls(
+                    'cus-popover__wrapper',
+                    wrapperClassName,
+                    'active'
+                )}
+                role="popover"
+                data-microtip-position={direction || 'top'}
+                data-microtip-size={size || 'auto'}
+                style={{
+                    left: position.x,
+                    top: position.y,
+                    display: 'none',
+                    ...popupArrowStyle
+                }}
+            >
+                <div 
+                    className={combinedCls('cus-popover__content', className)} 
+                    style={popupContentStyle}
+                >
+                    {children}
+                </div>
+            </div>
+        </RootPortal>
+    );
+});
+
+PopoverContent.displayName = 'PopoverContent';
+
+export default PopoverContent;

package/lib/esm/Popover/PopoverTrigger.tsx

@@ -0,0 +1,62 @@
+import React, { forwardRef } from 'react';
+import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
+
+
+import { usePopoverContext } from './Popover';
+
+// PopoverTrigger component
+export type PopoverTriggerProps = {
+    asChild?: boolean;
+    className?: string;
+    children: React.ReactNode;
+};
+
+const PopoverTrigger = forwardRef<HTMLElement, PopoverTriggerProps>((props, ref) => {
+    const { asChild, className, children } = props;
+    const { triggerRef, setIsOpen, isOpen, id, direction, size } = usePopoverContext();
+
+    const handleClick = (e: React.MouseEvent) => {
+        e.preventDefault();
+        setIsOpen(!isOpen);
+    };
+
+    const setRefs = (node: HTMLElement | null) => {
+        if (node) {
+            (triggerRef as React.MutableRefObject<HTMLElement | null>).current = node;
+        }
+        if (typeof ref === 'function') {
+            ref(node);
+        } else if (ref && node) {
+            (ref as React.MutableRefObject<HTMLElement | null>).current = node;
+        }
+    };
+
+    const triggerProps: any = {
+        ref: setRefs,
+        'data-overlay-id': `cus-popover__wrapper-${id}`,
+        className: combinedCls(
+            'cus-popover__trigger',
+            clsWrite(className, 'd-inline-block')
+        ),
+        'data-microtip-position': direction || 'top',
+        'data-microtip-size': size || 'auto',
+        onClick: handleClick
+    };
+
+    if (asChild && React.isValidElement(children)) {
+        return React.cloneElement(children as React.ReactElement<any>, {
+            ...triggerProps,
+            ...(children.props || {})
+        });
+    }
+
+    return (
+        <div {...triggerProps}>
+            {children}
+        </div>
+    );
+});
+
+PopoverTrigger.displayName = 'PopoverTrigger';
+
+export default PopoverTrigger;

package/{publish/lib/esm/Tooltip → lib/esm/Popover}/index.scss

@@ -1,7 +1,7 @@
 
 
 /* ======================================================
-    <!-- Tooltip -->
+    <!-- Popover -->
 /* ====================================================== */
 
 
@@ -18,22 +18,22 @@
  * 10. Size
 */
 
-.cus-tooltip__wrapper {
-
-    --cus-tooltip-box-shadow: 0 5px 15px 0 rgba(0,0,0,.07), 0 15px 35px 0 rgba(50,50,93,.1);
-    --cus-tooltip-content-bg: rgba(17, 17, 17, 0.9);
-    --cus-tooltip-content-color: #fff;
-    --cus-tooltip-content-font-size: 0.75em;
-    --cus-tooltip-content-padding-x: 1em;
-    --cus-tooltip-content-padding-y: .5em;
-    --cus-tooltip-content-line-height: 1.5;
-    --cus-tooltip-arrow-bg-top: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
-    --cus-tooltip-arrow-bg-bottom: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
-    --cus-tooltip-arrow-bg-left: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
-    --cus-tooltip-arrow-bg-right: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
-
-    --cus-tooltip-arrow-width: 18px;
-    --cus-tooltip-arrow-height: 6px;
+.cus-popover__wrapper {
+
+    --cus-popover-box-shadow: 0 5px 15px 0 rgba(0,0,0,.07), 0 15px 35px 0 rgba(50,50,93,.1);
+    --cus-popover-content-bg: rgba(17, 17, 17, 0.9);
+    --cus-popover-content-color: #fff;
+    --cus-popover-content-font-size: 0.75em;
+    --cus-popover-content-padding-x: 1em;
+    --cus-popover-content-padding-y: .5em;
+    --cus-popover-content-line-height: 1.5;
+    --cus-popover-arrow-bg-top: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+    --cus-popover-arrow-bg-bottom: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+    --cus-popover-arrow-bg-left: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+    --cus-popover-arrow-bg-right: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+
+    --cus-popover-arrow-width: 18px;
+    --cus-popover-arrow-height: 6px;
     
 
     position: absolute;
@@ -52,7 +52,7 @@
         display: block !important;
 
         &::before,
-        > .cus-tooltip__content {
+        > .cus-popover__content {
             opacity: 1;
         }
     }
@@ -60,21 +60,21 @@
     &:focus {
 
         &::before,
-        > .cus-tooltip__content {
+        > .cus-popover__content {
             opacity: 1;
         }
     }
 
 
     &::before,
-    > .cus-tooltip__content {
+    > .cus-popover__content {
         backface-visibility: hidden;
         will-change: transform;
         opacity: 0;
         box-sizing: border-box;
         z-index: 10;
         transform-origin: top;
-        box-shadow: var(--cus-tooltip-box-shadow);
+        box-shadow: var(--cus-popover-box-shadow);
         transition: none !important;  /* Don't use transition if position is outside window */
     }
 
@@ -86,19 +86,19 @@
 	---------------------------
 	*/
 
-    > .cus-tooltip__content {
+    > .cus-popover__content {
         pointer-events: auto;
-        background: var(--cus-tooltip-content-bg);
+        background: var(--cus-popover-content-bg);
         border-radius: 4px;
-        color: var(--cus-tooltip-content-color);
+        color: var(--cus-popover-content-color);
         content: attr(aria-label);
-        font-size: var(--cus-tooltip-content-font-size);
+        font-size: var(--cus-popover-content-font-size);
         font-weight: normal;
         text-transform: none;
-        padding: var(--cus-tooltip-content-padding-y) var(--cus-tooltip-content-padding-x);
+        padding: var(--cus-popover-content-padding-y) var(--cus-popover-content-padding-x);
         white-space: nowrap;
         box-sizing: content-box;
-        line-height: var(--cus-tooltip-content-line-height);
+        line-height: var(--cus-popover-content-line-height);
         
 
         img {
@@ -118,22 +118,22 @@
 
     &[data-microtip-position|="top"] {
         &::before {
-            background: var(--cus-tooltip-arrow-bg-top);
-            height: var(--cus-tooltip-arrow-height);
-            width: var(--cus-tooltip-arrow-width);
+            background: var(--cus-popover-arrow-bg-top);
+            height: var(--cus-popover-arrow-height);
+            width: var(--cus-popover-arrow-width);
         }
 
-        > .cus-tooltip__content {
-            margin-bottom: var(--cus-tooltip-arrow-height);
+        > .cus-popover__content {
+            margin-bottom: var(--cus-popover-arrow-height);
         }
 
         &::before {
-            top: calc(100% - var(--cus-tooltip-arrow-height));
-            left: calc(var(--cus-tooltip-arrow-width)/2 * -1);
+            top: calc(100% - var(--cus-popover-arrow-height));
+            left: calc(var(--cus-popover-arrow-width)/2 * -1);
         }
 
-        > .cus-tooltip__content {
-            bottom: calc(100% + var(--cus-tooltip-arrow-height));
+        > .cus-popover__content {
+            bottom: calc(100% + var(--cus-popover-arrow-height));
             left: 50%;
             transform: translateX(-50%);
         }
@@ -147,10 +147,10 @@
     */
 
     &[data-microtip-position="top-left"] {
-        > .cus-tooltip__content {
-            bottom: calc(100% + var(--cus-tooltip-arrow-height));
+        > .cus-popover__content {
+            bottom: calc(100% + var(--cus-popover-arrow-height));
             left: 50%;
-            transform: translateX(calc(-100% + var(--cus-tooltip-arrow-width)));
+            transform: translateX(calc(-100% + var(--cus-popover-arrow-width)));
         }
 
     }
@@ -164,10 +164,10 @@
     */
 
     &[data-microtip-position="top-right"] {
-        > .cus-tooltip__content {
-            bottom: calc(100% + var(--cus-tooltip-arrow-height));
+        > .cus-popover__content {
+            bottom: calc(100% + var(--cus-popover-arrow-height));
             left: 50%;
-            transform: translateX(calc(0% - var(--cus-tooltip-arrow-width)));
+            transform: translateX(calc(0% - var(--cus-popover-arrow-width)));
         }
     }
 
@@ -180,25 +180,25 @@
 
     &[data-microtip-position|="bottom"] {
         &::before {
-            background: var(--cus-tooltip-arrow-bg-bottom);
-            height: var(--cus-tooltip-arrow-height);
-            width: var(--cus-tooltip-arrow-width);
+            background: var(--cus-popover-arrow-bg-bottom);
+            height: var(--cus-popover-arrow-height);
+            width: var(--cus-popover-arrow-width);
             margin-top: 5px;
             margin-bottom: 0;
         }
 
-        > .cus-tooltip__content {
-            margin-top: var(--cus-tooltip-arrow-height);
+        > .cus-popover__content {
+            margin-top: var(--cus-popover-arrow-height);
         }
 
         &::before {
-            bottom: calc(100% - var(--cus-tooltip-arrow-height));
-            left: calc(var(--cus-tooltip-arrow-width)/2 * -1);
+            bottom: calc(100% - var(--cus-popover-arrow-height));
+            left: calc(var(--cus-popover-arrow-width)/2 * -1);
         }
 
-        > .cus-tooltip__content {
+        > .cus-popover__content {
             bottom: auto;
-            top: calc(100% + var(--cus-tooltip-arrow-height));
+            top: calc(100% + var(--cus-popover-arrow-height));
             left: 50%;
             transform: translateX(-50%);
         }
@@ -213,11 +213,11 @@
 
 
     &[data-microtip-position="bottom-left"] {
-        > .cus-tooltip__content {
+        > .cus-popover__content {
             bottom: auto;
-            top: calc(100% + var(--cus-tooltip-arrow-height));
+            top: calc(100% + var(--cus-popover-arrow-height));
             left: 50%;
-            transform: translateX(calc(-100% + var(--cus-tooltip-arrow-width)));
+            transform: translateX(calc(-100% + var(--cus-popover-arrow-width)));
         }
     }
 
@@ -229,11 +229,11 @@
 
 
     &[data-microtip-position="bottom-right"] {
-        > .cus-tooltip__content {
+        > .cus-popover__content {
             bottom: auto;
-            top: calc(100% + var(--cus-tooltip-arrow-height));
+            top: calc(100% + var(--cus-popover-arrow-height));
             left: 50%;
-            transform: translateX(calc(0% - var(--cus-tooltip-arrow-width)));
+            transform: translateX(calc(0% - var(--cus-popover-arrow-width)));
         }
     }
 
@@ -245,7 +245,7 @@
     10. Size
     ---------------------------
     */
-    &[data-microtip-size="auto"].cus-tooltip__content {
+    &[data-microtip-size="auto"].cus-popover__content {
         white-space: nowrap;
         width: auto;
         max-width: 530px;
@@ -253,17 +253,17 @@
         text-overflow: ellipsis;
     }
 
-    &[data-microtip-size="small"].cus-tooltip__content {
+    &[data-microtip-size="small"].cus-popover__content {
         white-space: initial;
         width: 80px;
     }
 
-    &[data-microtip-size="medium"].cus-tooltip__content {
+    &[data-microtip-size="medium"].cus-popover__content {
         white-space: initial;
         width: 150px;
     }
 
-    &[data-microtip-size="large"].cus-tooltip__content {
+    &[data-microtip-size="large"].cus-popover__content {
         white-space: initial;
         width: 260px;
     }

package/lib/esm/Popover/index.tsx

@@ -0,0 +1,4 @@
+export { default } from './Popover';
+export { default as PopoverTrigger } from './PopoverTrigger';
+export { default as PopoverContent } from './PopoverContent';
+export { default as PopoverClose } from './PopoverClose';

package/lib/esm/Radio/index.tsx

@@ -355,7 +355,7 @@ const Radio = forwardRef((props: RadioProps, externalRef: any) => {
 
     //
     function handleFocus(event: any) {
-        rootRef.current?.classList.add('focus');
+        rootRef.current?.classList.add('focus-floating');
 
         //
         onFocus?.(event);
@@ -374,7 +374,7 @@ const Radio = forwardRef((props: RadioProps, externalRef: any) => {
 
         //----
         //remove focus style
-        rootRef.current?.classList.remove('focus');
+        rootRef.current?.classList.remove('focus-floating');
 
    
         //
@@ -390,7 +390,7 @@ const Radio = forwardRef((props: RadioProps, externalRef: any) => {
 
         //----
         //remove focus style
-        rootRef.current?.classList.remove('focus');
+        rootRef.current?.classList.remove('focus-floating');
 
         //
         onBlur?.(event);

package/lib/esm/SearchBar/index.tsx

@@ -114,7 +114,6 @@ const SearchBar = forwardRef((props: SearchBarProps, externalRef: any) => {
     }
 
     function handleFocus(event: FocusEvent<HTMLInputElement>) {
-        rootRef.current?.classList.add('focus');
 
         //
         onFocus?.(event, onComposition);
@@ -125,11 +124,7 @@ const SearchBar = forwardRef((props: SearchBarProps, externalRef: any) => {
 
         setChangedVal(val);
 
-        //----
-        //remove focus style
-        if (val === '') {
-            rootRef.current?.classList.remove('focus');
-        }
+
 
         //
         onChange?.(event, onComposition);
@@ -140,11 +135,7 @@ const SearchBar = forwardRef((props: SearchBarProps, externalRef: any) => {
         const val = event.target.value;
 
 
-        //----
-        //remove focus style
-        if (val === '') {
-            rootRef.current?.classList.remove('focus');
-        }
+
 
         //
         onBlur?.(event, onComposition);
@@ -178,7 +169,12 @@ const SearchBar = forwardRef((props: SearchBarProps, externalRef: any) => {
         <>
 
 
-            <div className={clsWrite(wrapperClassName, 'mb-3 position-relative')} ref={rootRef}>
+            <div className={combinedCls(
+                clsWrite(wrapperClassName, 'mb-3 position-relative'),
+                {
+                    'focus-floating': changedVal !== ''
+                }
+            )} ref={rootRef}>
                 {label ? <>{typeof label === 'string' ? <label htmlFor={idRes} className="form-label" dangerouslySetInnerHTML={{ __html: `${label}` }}></label> : <label htmlFor={idRes} className="form-label" >{label}</label>}</> : null}
 
                 <div className={combinedCls(

package/lib/esm/Select/index.tsx

@@ -1207,10 +1207,10 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
         if (parseFloat(oldHeight) > filteredHeight) {
             listContentRef.current.style.height = filteredHeight + 'px';
-            console.log('popwinContainerHeightAdjust - height changed to:', filteredHeight);
+            // console.log('popwinContainerHeightAdjust - height changed to:', filteredHeight);
         } else {
             listContentRef.current.style.height = oldHeight + 'px';
-            console.log('popwinContainerHeightAdjust - height kept as:', oldHeight);
+           //  console.log('popwinContainerHeightAdjust - height kept as:', oldHeight);
         }
 
     }

package/lib/esm/Switch/index.tsx

@@ -55,7 +55,7 @@ const Switch = forwardRef((props: SwitchProps, externalRef: any) => {
     const [val, setVal] = useState<boolean>(false);  // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
 
     function handleFocus(event: any) {
-        rootRef.current?.classList.add('focus');
+        rootRef.current?.classList.add('focus-floating');
 
         //
         onFocus?.(event);    
@@ -69,7 +69,7 @@ const Switch = forwardRef((props: SwitchProps, externalRef: any) => {
         
         //----
         //remove focus style
-        rootRef.current?.classList.remove('focus');
+        rootRef.current?.classList.remove('focus-floating');
 
         //
         if (typeof (onChange) === 'function') {
@@ -85,7 +85,7 @@ const Switch = forwardRef((props: SwitchProps, externalRef: any) => {
 
         //----
         //remove focus style
-        rootRef.current?.classList.remove('focus');
+        rootRef.current?.classList.remove('focus-floating');
 
         //
         onBlur?.(event);

package/lib/esm/TagInput/index.scss

@@ -2,17 +2,17 @@
     <!-- Tag Input -->
 /* ====================================================== */
 
-.tag-input__wrapper {
+.taginput__wrapper {
 
-    --tag-input-control-border-radius: 0.375rem;
-    --tag-input-control-wrapper-bg: #fff;
-    --tag-input-control-wrapper-border-color: #dee2e6;
-    --tag-input-control-color: #adb5bd;
-    --tag-input-list-bg: #efefef;
-    --tag-input-removebtn-fill: #000;
-    --tag-input-removebtn-hover-fill: #f00;
-    --tag-input-focus-border-color:#86b7fe;
-    --tag-input-focus-box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
+    --taginput-control-border-radius: 0.375rem;
+    --taginput-control-wrapper-bg: #fff;
+    --taginput-control-wrapper-border-color: #dee2e6;
+    --taginput-control-color: #adb5bd;
+    --taginput-list-bg: #efefef;
+    --taginput-removebtn-fill: #000;
+    --taginput-removebtn-hover-fill: #f00;
+    --taginput-focus-border-color:#86b7fe;
+    --taginput-focus-box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
 
 
     display: flex;
@@ -26,7 +26,7 @@
     }
 
     
-    .tag-input__control-wrapper {
+    .taginput__control-wrapper {
         display: flex;
 
         > div {
@@ -37,16 +37,16 @@
 
             /* bootstrap style that match ".form-control" */
             padding: 0.375rem;
-            background-color: var(--tag-input-control-wrapper-bg);
+            background-color: var(--taginput-control-wrapper-bg);
             background-clip: padding-box;
-            border: 1px solid var(--tag-input-control-wrapper-border-color);
+            border: 1px solid var(--taginput-control-wrapper-border-color);
             appearance: none;
-            border-radius: var(--tag-input-control-border-radius);
+            border-radius: var(--taginput-control-border-radius);
             transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
             padding-bottom: 1px;
 
 
-            .tag-input__control {
+            .taginput__control {
                 margin-bottom: 0.375rem;
                 
                 input {
@@ -61,7 +61,7 @@
                     font-size: 0.875rem;
                     font-weight: 400;
                     line-height: 1.5;
-                    color: var(--tag-input-control-color);
+                    color: var(--taginput-control-color);
 
                     &:focus {
                         outline: none;
@@ -76,14 +76,14 @@
     }
 
 
-    ul.tag-input__list {
+    ul.taginput__list {
         li {
             display: inline-block;
             margin: 5px;
             margin-bottom: 0;
             padding: .1rem 1.5rem .1rem 1rem;
             font-size: 0.875rem;
-            background: var(--tag-input-list-bg);
+            background: var(--taginput-list-bg);
             border-radius: 30px;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -100,12 +100,12 @@
                 transform: translateY(-50%);
 
                 path {
-                    fill: var(--tag-input-removebtn-fill);
+                    fill: var(--taginput-removebtn-fill);
                 }
 
                 &:hover {
                     path {
-                        fill: var(--tag-input-removebtn-hover-fill);
+                        fill: var(--taginput-removebtn-hover-fill);
                     }
                 }
             }
@@ -114,11 +114,11 @@
 
     }
 
-    &.focus {
-        .tag-input__control-wrapper {
+    &.focus-floating {
+        .taginput__control-wrapper {
             > div {
-                box-shadow: var(--tag-input-focus-box-shadow);
-                border-color: var(--tag-input-focus-border-color);
+                box-shadow: var(--taginput-focus-box-shadow);
+                border-color: var(--taginput-focus-border-color);
             } 
         }
     }