@bodynarf/react.components 1.13.8 → 1.14.1

package/components/primitives/radioGroup/types.d.ts

@@ -0,0 +1,61 @@
+import { BaseElementProps, ElementColor, ElementSize } from "../../../types";
+/** Single radio item */
+export interface RadioItem {
+    /** Unique item identifier */
+    id: string;
+    /** Item value */
+    value: string;
+    /** Displaying text (label) */
+    displayValue: string;
+    /** Is item disabled */
+    disabled?: boolean;
+    /** Element title (tooltip) */
+    title?: string;
+}
+/** RadioGroup component props type */
+export type RadioGroupProps = BaseElementProps & {
+    /** Radio items to display */
+    items: Array<RadioItem>;
+    /** Currently selected item id */
+    value?: string;
+    /** Name attribute for all radio inputs in the group */
+    name?: string;
+    /** Component size */
+    size?: ElementSize;
+    /** Style. Colors the radio buttons */
+    style?: ElementColor;
+    /** Is component disabled */
+    disabled?: boolean;
+    /**
+     * Display radio buttons in a row (horizontal).
+     * @default false (vertical)
+     */
+    horizontal?: boolean;
+    /**
+     * Is full colored radio (filled background).
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Display radio with circle style.
+     * @default true
+     */
+    circle?: boolean;
+    /**
+     * Remove the radio border.
+     * @default false
+     */
+    withoutBorder?: boolean;
+    /**
+     * Radio has background color.
+     * Only works if style is set.
+     * @default false
+     */
+    hasBackgroundColor?: boolean;
+    /**
+     * Handler of selection change
+     * @param item Selected item
+     */
+    onValueChange?: (item: RadioItem) => void;
+};
+//# sourceMappingURL=types.d.ts.map

package/components/primitives/radioGroup/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/radioGroup/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzE,wBAAwB;AACxB,MAAM,WAAW,SAAS;IACtB,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IAEX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IAEd,8BAA8B;IAC9B,YAAY,EAAE,MAAM,CAAC;IAErB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,sCAAsC;AACtC,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG;IAC7C,6BAA6B;IAC7B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAExB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,qBAAqB;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,sCAAsC;IACtC,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CAC7C,CAAC"}

package/components/primitives/radioGroup/types.js

@@ -0,0 +1 @@
+export {};

package/components/primitives/slider/component/index.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import "./style.scss";
+import { SliderProps } from "../types";
+/** Slider/Range input component */
+declare const Slider: FC<SliderProps>;
+export default Slider;
+//# sourceMappingURL=index.d.ts.map

package/components/primitives/slider/component/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/slider/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAkC,MAAM,OAAO,CAAC;AAOxE,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,mCAAmC;AACnC,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA+G3B,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/components/primitives/slider/component/index.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { emptyFn, generateGuid, getClassName, isNullish } from "@bodynarf/utils";
+import { ElementSize } from "../../../../types";
+import { getElementColorClassName, getSizeClassName, mapDataAttributes } from "../../../../utils";
+import "./style.scss";
+/** Slider/Range input component */
+const Slider = ({ onValueChange = emptyFn, defaultValue, name = generateGuid(), size = ElementSize.Normal, style, disabled = false, min = 0, max = 100, step = 1, showValue = false, showMinMax = false, showProgress = true, vertical = false, verticalHeight = "200px", circle = false, valueFormatter, onBlur, className, data, title, }) => {
+    const [value, setValue] = useState(defaultValue ?? min);
+    const progressPercent = useMemo(() => {
+        if (max === min) {
+            return 0;
+        }
+        return ((value - min) / (max - min)) * 100;
+    }, [value, min, max]);
+    const onChange = useCallback((event) => {
+        const newValue = Number(event.target.value);
+        setValue(newValue);
+        onValueChange(newValue);
+    }, [onValueChange]);
+    const handleBlur = useCallback(() => {
+        if (isNullish(onBlur)) {
+            return;
+        }
+        onBlur();
+    }, [onBlur]);
+    const elClassName = getClassName([
+        "slider",
+        "bbr-slider",
+        className,
+        getSizeClassName(size, ElementSize.Normal),
+        getElementColorClassName(style),
+        showProgress ? "has-output-tooltip" : "",
+        circle ? "is-circle" : "",
+        vertical ? "is-vertical" : "",
+    ]);
+    const containerClassName = getClassName([
+        "bbr-slider-container",
+        vertical ? "is-vertical" : "",
+    ]);
+    const dataAttributes = mapDataAttributes(data);
+    return (_jsxs("div", { className: containerClassName, style: vertical ? { height: verticalHeight } : undefined, children: [showValue === true && (_jsx("output", { className: "bbr-slider-output", style: { left: `calc(${progressPercent}% - 1rem)` }, children: valueFormatter ? valueFormatter(value) : value })), _jsx("input", { min: min, max: max, id: name, step: step, name: name, type: "range", title: title, value: value, ...dataAttributes, disabled: disabled, onBlur: handleBlur, onChange: onChange, className: elClassName, style: {
+                    ["--progress-percent"]: `${progressPercent}%`,
+                    ...(vertical ? { height: verticalHeight } : {}),
+                } }), showMinMax === true && (_jsxs("div", { className: "bbr-slider-labels", children: [_jsx("span", { className: "bbr-slider-label-min", children: min }), _jsx("span", { className: "bbr-slider-label-max", children: max })] }))] }));
+};
+export default Slider;

package/components/primitives/slider/component/style.css

@@ -0,0 +1,438 @@
+.bbr-slider-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding-top: 0.5rem;
+}
+.bbr-slider-container.is-vertical {
+  flex-direction: row;
+  width: auto;
+  height: 200px;
+  padding-top: 0;
+  padding-left: 0.5rem;
+}
+
+.bbr-slider-output {
+  position: absolute;
+  top: -1.5rem;
+  display: inline-block;
+  width: 3rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  text-align: center;
+  color: hsl(0, 0%, 100%);
+  background-color: hsl(171, 100%, 41%);
+  border-radius: 4px;
+  pointer-events: none;
+}
+.bbr-slider-output::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: hsl(171, 100%, 41%) transparent transparent transparent;
+}
+
+.bbr-slider-labels {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: hsl(0, 0%, 48%);
+}
+
+input[type=range].slider.bbr-slider {
+  --progress-percent: 0%;
+  appearance: none;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+}
+input[type=range].slider.bbr-slider::-webkit-slider-runnable-track {
+  box-sizing: border-box;
+  width: 100%;
+  height: 0.5rem;
+  background: linear-gradient(to right, hsl(171, 100%, 41%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+  border: 0px solid hsl(0, 0%, 48%);
+  border-radius: 4px;
+  box-shadow: 0px 0px 0px hsl(0, 0%, 48%);
+}
+input[type=range].slider.bbr-slider::-moz-range-track {
+  box-sizing: border-box;
+  width: 100%;
+  height: 0.5rem;
+  background: hsl(0, 0%, 86%);
+  border: 0px solid hsl(0, 0%, 48%);
+  border-radius: 4px;
+  box-shadow: 0px 0px 0px hsl(0, 0%, 48%);
+}
+input[type=range].slider.bbr-slider::-moz-range-progress {
+  height: 0.5rem;
+  background: hsl(171, 100%, 41%);
+  border-radius: 4px;
+}
+input[type=range].slider.bbr-slider::-ms-track {
+  box-sizing: border-box;
+  width: 100%;
+  height: 0.5rem;
+  background: transparent;
+  border-color: transparent;
+  color: transparent;
+}
+input[type=range].slider.bbr-slider::-ms-fill-lower {
+  background: hsl(171, 100%, 41%);
+  border-radius: 4px;
+}
+input[type=range].slider.bbr-slider::-ms-fill-upper {
+  background: hsl(0, 0%, 86%);
+  border-radius: 4px;
+}
+input[type=range].slider.bbr-slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 1rem;
+  height: 1rem;
+  margin-top: -0.25rem;
+  background: hsl(0, 0%, 100%);
+  border: 1px solid hsl(0, 0%, 71%);
+  border-radius: 4px;
+  box-shadow: none;
+  transition: transform 0.2s ease;
+}
+input[type=range].slider.bbr-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.1);
+}
+input[type=range].slider.bbr-slider::-moz-range-thumb {
+  width: 1rem;
+  height: 1rem;
+  background: hsl(0, 0%, 100%);
+  border: 1px solid hsl(0, 0%, 71%);
+  border-radius: 4px;
+  box-shadow: none;
+  transition: transform 0.2s ease;
+}
+input[type=range].slider.bbr-slider::-moz-range-thumb:hover {
+  transform: scale(1.1);
+}
+input[type=range].slider.bbr-slider::-ms-thumb {
+  width: 1rem;
+  height: 1rem;
+  background: hsl(0, 0%, 100%);
+  border: 1px solid hsl(0, 0%, 71%);
+  border-radius: 4px;
+  box-shadow: none;
+}
+input[type=range].slider.bbr-slider:focus {
+  outline: none;
+}
+input[type=range].slider.bbr-slider:focus::-webkit-slider-thumb {
+  border-color: hsl(171, 100%, 41%);
+  box-shadow: 0 0 0 0.125em rgba(0, 209.1, 177.735, 0.25);
+}
+input[type=range].slider.bbr-slider:focus::-moz-range-thumb {
+  border-color: hsl(171, 100%, 41%);
+  box-shadow: 0 0 0 0.125em rgba(0, 209.1, 177.735, 0.25);
+}
+input[type=range].slider.bbr-slider:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+input[type=range].slider.bbr-slider.is-circle::-webkit-slider-thumb {
+  border-radius: 50%;
+}
+input[type=range].slider.bbr-slider.is-circle::-moz-range-thumb {
+  border-radius: 50%;
+}
+input[type=range].slider.bbr-slider.is-circle::-ms-thumb {
+  border-radius: 50%;
+}
+input[type=range].slider.bbr-slider.is-small::-webkit-slider-runnable-track {
+  height: 0.375rem;
+}
+input[type=range].slider.bbr-slider.is-small::-moz-range-track {
+  height: 0.375rem;
+}
+input[type=range].slider.bbr-slider.is-small::-ms-track {
+  height: 0.375rem;
+}
+input[type=range].slider.bbr-slider.is-small::-webkit-slider-thumb {
+  height: 0.75rem;
+  width: 0.75rem;
+  margin-top: -0.1875rem;
+}
+input[type=range].slider.bbr-slider.is-small::-moz-range-thumb {
+  height: 0.75rem;
+  width: 0.75rem;
+}
+input[type=range].slider.bbr-slider.is-small::-ms-thumb {
+  height: 0.75rem;
+  width: 0.75rem;
+  margin-top: 0;
+}
+input[type=range].slider.bbr-slider.is-medium::-webkit-slider-runnable-track {
+  height: 0.625rem;
+}
+input[type=range].slider.bbr-slider.is-medium::-moz-range-track {
+  height: 0.625rem;
+}
+input[type=range].slider.bbr-slider.is-medium::-ms-track {
+  height: 0.625rem;
+}
+input[type=range].slider.bbr-slider.is-medium::-webkit-slider-thumb {
+  height: 1.25rem;
+  width: 1.25rem;
+  margin-top: -0.3125rem;
+}
+input[type=range].slider.bbr-slider.is-medium::-moz-range-thumb {
+  height: 1.25rem;
+  width: 1.25rem;
+}
+input[type=range].slider.bbr-slider.is-medium::-ms-thumb {
+  height: 1.25rem;
+  width: 1.25rem;
+  margin-top: 0;
+}
+input[type=range].slider.bbr-slider.is-large::-webkit-slider-runnable-track {
+  height: 0.75rem;
+}
+input[type=range].slider.bbr-slider.is-large::-moz-range-track {
+  height: 0.75rem;
+}
+input[type=range].slider.bbr-slider.is-large::-ms-track {
+  height: 0.75rem;
+}
+input[type=range].slider.bbr-slider.is-large::-webkit-slider-thumb {
+  height: 1.5rem;
+  width: 1.5rem;
+  margin-top: -0.375rem;
+}
+input[type=range].slider.bbr-slider.is-large::-moz-range-thumb {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+input[type=range].slider.bbr-slider.is-large::-ms-thumb {
+  height: 1.5rem;
+  width: 1.5rem;
+  margin-top: 0;
+}
+input[type=range].slider.bbr-slider.is-white::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, hsl(0, 0%, 100%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-white::-moz-range-progress {
+  background: hsl(0, 0%, 100%);
+}
+input[type=range].slider.bbr-slider.is-white::-ms-fill-lower {
+  background: hsl(0, 0%, 100%);
+}
+input[type=range].slider.bbr-slider.is-white:focus::-webkit-slider-thumb {
+  border-color: hsl(0, 0%, 100%);
+  box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
+}
+input[type=range].slider.bbr-slider.is-white:focus::-moz-range-thumb {
+  border-color: hsl(0, 0%, 100%);
+  box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
+}
+input[type=range].slider.bbr-slider.is-black::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, hsl(0, 0%, 4%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-black::-moz-range-progress {
+  background: hsl(0, 0%, 4%);
+}
+input[type=range].slider.bbr-slider.is-black::-ms-fill-lower {
+  background: hsl(0, 0%, 4%);
+}
+input[type=range].slider.bbr-slider.is-black:focus::-webkit-slider-thumb {
+  border-color: hsl(0, 0%, 4%);
+  box-shadow: 0 0 0 0.125em rgba(10.2, 10.2, 10.2, 0.25);
+}
+input[type=range].slider.bbr-slider.is-black:focus::-moz-range-thumb {
+  border-color: hsl(0, 0%, 4%);
+  box-shadow: 0 0 0 0.125em rgba(10.2, 10.2, 10.2, 0.25);
+}
+input[type=range].slider.bbr-slider.is-light::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, hsl(0, 0%, 96%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-light::-moz-range-progress {
+  background: hsl(0, 0%, 96%);
+}
+input[type=range].slider.bbr-slider.is-light::-ms-fill-lower {
+  background: hsl(0, 0%, 96%);
+}
+input[type=range].slider.bbr-slider.is-light:focus::-webkit-slider-thumb {
+  border-color: hsl(0, 0%, 96%);
+  box-shadow: 0 0 0 0.125em rgba(244.8, 244.8, 244.8, 0.25);
+}
+input[type=range].slider.bbr-slider.is-light:focus::-moz-range-thumb {
+  border-color: hsl(0, 0%, 96%);
+  box-shadow: 0 0 0 0.125em rgba(244.8, 244.8, 244.8, 0.25);
+}
+input[type=range].slider.bbr-slider.is-dark::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, hsl(0, 0%, 21%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-dark::-moz-range-progress {
+  background: hsl(0, 0%, 21%);
+}
+input[type=range].slider.bbr-slider.is-dark::-ms-fill-lower {
+  background: hsl(0, 0%, 21%);
+}
+input[type=range].slider.bbr-slider.is-dark:focus::-webkit-slider-thumb {
+  border-color: hsl(0, 0%, 21%);
+  box-shadow: 0 0 0 0.125em rgba(53.55, 53.55, 53.55, 0.25);
+}
+input[type=range].slider.bbr-slider.is-dark:focus::-moz-range-thumb {
+  border-color: hsl(0, 0%, 21%);
+  box-shadow: 0 0 0 0.125em rgba(53.55, 53.55, 53.55, 0.25);
+}
+input[type=range].slider.bbr-slider.is-primary::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, hsl(171, 100%, 41%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-primary::-moz-range-progress {
+  background: hsl(171, 100%, 41%);
+}
+input[type=range].slider.bbr-slider.is-primary::-ms-fill-lower {
+  background: hsl(171, 100%, 41%);
+}
+input[type=range].slider.bbr-slider.is-primary:focus::-webkit-slider-thumb {
+  border-color: hsl(171, 100%, 41%);
+  box-shadow: 0 0 0 0.125em rgba(0, 209.1, 177.735, 0.25);
+}
+input[type=range].slider.bbr-slider.is-primary:focus::-moz-range-thumb {
+  border-color: hsl(171, 100%, 41%);
+  box-shadow: 0 0 0 0.125em rgba(0, 209.1, 177.735, 0.25);
+}
+input[type=range].slider.bbr-slider.is-link::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, hsl(229, 53%, 53%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-link::-moz-range-progress {
+  background: hsl(229, 53%, 53%);
+}
+input[type=range].slider.bbr-slider.is-link::-ms-fill-lower {
+  background: hsl(229, 53%, 53%);
+}
+input[type=range].slider.bbr-slider.is-link:focus::-webkit-slider-thumb {
+  border-color: hsl(229, 53%, 53%);
+  box-shadow: 0 0 0 0.125em rgba(71.6295, 94.92035, 198.6705, 0.25);
+}
+input[type=range].slider.bbr-slider.is-link:focus::-moz-range-thumb {
+  border-color: hsl(229, 53%, 53%);
+  box-shadow: 0 0 0 0.125em rgba(71.6295, 94.92035, 198.6705, 0.25);
+}
+input[type=range].slider.bbr-slider.is-info::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, hsl(207, 61%, 53%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-info::-moz-range-progress {
+  background: hsl(207, 61%, 53%);
+}
+input[type=range].slider.bbr-slider.is-info::-ms-fill-lower {
+  background: hsl(207, 61%, 53%);
+}
+input[type=range].slider.bbr-slider.is-info:focus::-webkit-slider-thumb {
+  border-color: hsl(207, 61%, 53%);
+  box-shadow: 0 0 0 0.125em rgba(62.0415, 142.46085, 208.2585, 0.25);
+}
+input[type=range].slider.bbr-slider.is-info:focus::-moz-range-thumb {
+  border-color: hsl(207, 61%, 53%);
+  box-shadow: 0 0 0 0.125em rgba(62.0415, 142.46085, 208.2585, 0.25);
+}
+input[type=range].slider.bbr-slider.is-success::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, hsl(153, 53%, 53%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-success::-moz-range-progress {
+  background: hsl(153, 53%, 53%);
+}
+input[type=range].slider.bbr-slider.is-success::-ms-fill-lower {
+  background: hsl(153, 53%, 53%);
+}
+input[type=range].slider.bbr-slider.is-success:focus::-webkit-slider-thumb {
+  border-color: hsl(153, 53%, 53%);
+  box-shadow: 0 0 0 0.125em rgba(71.6295, 198.6705, 141.50205, 0.25);
+}
+input[type=range].slider.bbr-slider.is-success:focus::-moz-range-thumb {
+  border-color: hsl(153, 53%, 53%);
+  box-shadow: 0 0 0 0.125em rgba(71.6295, 198.6705, 141.50205, 0.25);
+}
+input[type=range].slider.bbr-slider.is-warning::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, hsl(44, 100%, 77%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-warning::-moz-range-progress {
+  background: hsl(44, 100%, 77%);
+}
+input[type=range].slider.bbr-slider.is-warning::-ms-fill-lower {
+  background: hsl(44, 100%, 77%);
+}
+input[type=range].slider.bbr-slider.is-warning:focus::-webkit-slider-thumb {
+  border-color: hsl(44, 100%, 77%);
+  box-shadow: 0 0 0 0.125em rgba(255, 223.72, 137.7, 0.25);
+}
+input[type=range].slider.bbr-slider.is-warning:focus::-moz-range-thumb {
+  border-color: hsl(44, 100%, 77%);
+  box-shadow: 0 0 0 0.125em rgba(255, 223.72, 137.7, 0.25);
+}
+input[type=range].slider.bbr-slider.is-danger::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, hsl(348, 86%, 61%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-danger::-moz-range-progress {
+  background: hsl(348, 86%, 61%);
+}
+input[type=range].slider.bbr-slider.is-danger::-ms-fill-lower {
+  background: hsl(348, 86%, 61%);
+}
+input[type=range].slider.bbr-slider.is-danger:focus::-webkit-slider-thumb {
+  border-color: hsl(348, 86%, 61%);
+  box-shadow: 0 0 0 0.125em rgba(241.077, 70.023, 104.2338, 0.25);
+}
+input[type=range].slider.bbr-slider.is-danger:focus::-moz-range-thumb {
+  border-color: hsl(348, 86%, 61%);
+  box-shadow: 0 0 0 0.125em rgba(241.077, 70.023, 104.2338, 0.25);
+}
+input[type=range].slider.bbr-slider.is-vertical {
+  writing-mode: vertical-lr;
+  direction: rtl;
+  width: 0.5rem;
+  height: 100%;
+  min-height: 100px;
+}
+input[type=range].slider.bbr-slider.is-vertical::-webkit-slider-runnable-track {
+  width: 0.5rem;
+  height: 100%;
+  background: linear-gradient(to top, hsl(171, 100%, 41%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-vertical::-webkit-slider-thumb {
+  margin-top: 0;
+  margin-left: -0.25rem;
+}
+input[type=range].slider.bbr-slider.is-vertical.is-white::-webkit-slider-runnable-track {
+  background: linear-gradient(to top, hsl(0, 0%, 100%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-vertical.is-black::-webkit-slider-runnable-track {
+  background: linear-gradient(to top, hsl(0, 0%, 4%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-vertical.is-light::-webkit-slider-runnable-track {
+  background: linear-gradient(to top, hsl(0, 0%, 96%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-vertical.is-dark::-webkit-slider-runnable-track {
+  background: linear-gradient(to top, hsl(0, 0%, 21%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-vertical.is-primary::-webkit-slider-runnable-track {
+  background: linear-gradient(to top, hsl(171, 100%, 41%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-vertical.is-link::-webkit-slider-runnable-track {
+  background: linear-gradient(to top, hsl(229, 53%, 53%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-vertical.is-info::-webkit-slider-runnable-track {
+  background: linear-gradient(to top, hsl(207, 61%, 53%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-vertical.is-success::-webkit-slider-runnable-track {
+  background: linear-gradient(to top, hsl(153, 53%, 53%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-vertical.is-warning::-webkit-slider-runnable-track {
+  background: linear-gradient(to top, hsl(44, 100%, 77%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-vertical.is-danger::-webkit-slider-runnable-track {
+  background: linear-gradient(to top, hsl(348, 86%, 61%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
+}