@jetbrains/ring-ui 7.0.60 → 7.0.62

package/components/button/button.d.ts

@@ -51,7 +51,7 @@ export declare class Button extends PureComponent<ButtonProps> {
      * @deprecated Use icons with appropriate intrinsic sizes instead
      */
     static IconSize: typeof Size;
-    static contextType: React.Context<ControlsHeight>;
+    static contextType: React.Context<ControlsHeight | (() => ControlsHeight)>;
     context: React.ContextType<typeof ControlsHeightContext>;
     buttonRef: React.RefObject<HTMLButtonElement | null>;
     render(): import("react/jsx-runtime").JSX.Element;

package/components/button/button.js

@@ -40,7 +40,7 @@ export class Button extends PureComponent {
         const classes = getButtonClasses({
             ...this.props,
             inline: isInline,
-            height: height ?? this.context,
+            height: height ?? (typeof this.context === 'function' ? this.context() : this.context),
         });
         const content = (_jsxs(_Fragment, { children: [icon && (_jsx(Icon, { className: classNames(styles.icon, iconClassName), glyph: icon, size: iconSize, suppressSizeWarning: iconSuppressSizeWarning })), children, iconRight && _jsx(Icon, { className: classNames(styles.iconRight, iconRightClassName), glyph: iconRight }), dropdown && _jsx(Icon, { glyph: isInline ? chevron12pxDown : chevronDown, className: styles.dropdownIcon })] }));
         const isDisabled = disabled || loader || undefined;

package/components/global/configuration.d.ts

@@ -0,0 +1,11 @@
+export declare enum ControlsHeight {
+    S = "S",
+    M = "M",
+    L = "L"
+}
+export interface RingUIConfiguration {
+    controlsHeight?: ControlsHeight;
+    popupsCssPositioning?: boolean;
+}
+export declare function configure(config: RingUIConfiguration): void;
+export declare function getConfiguration(): Required<RingUIConfiguration>;

package/components/global/configuration.js

@@ -0,0 +1,21 @@
+export var ControlsHeight;
+(function (ControlsHeight) {
+    ControlsHeight["S"] = "S";
+    ControlsHeight["M"] = "M";
+    ControlsHeight["L"] = "L";
+})(ControlsHeight || (ControlsHeight = {}));
+const globalConfiguration = {
+    controlsHeight: ControlsHeight.M,
+    popupsCssPositioning: true,
+};
+export function configure(config) {
+    if (config.controlsHeight !== undefined) {
+        globalConfiguration.controlsHeight = config.controlsHeight;
+    }
+    if (config.popupsCssPositioning !== undefined) {
+        globalConfiguration.popupsCssPositioning = config.popupsCssPositioning;
+    }
+}
+export function getConfiguration() {
+    return { ...globalConfiguration };
+}

package/components/global/controls-height.d.ts

@@ -1,8 +1,5 @@
-export declare enum ControlsHeight {
-    S = "S",
-    M = "M",
-    L = "L"
-}
-export declare const ControlsHeightContext: import("react").Context<ControlsHeight>;
-export declare function configureGlobalControlsHeight(value: ControlsHeight): void;
+import { ControlsHeight } from './configuration';
+export { ControlsHeight } from './configuration';
+export declare const configureGlobalControlsHeight: (value: ControlsHeight) => void;
 export declare function getGlobalControlsHeight(): ControlsHeight;
+export declare const ControlsHeightContext: import("react").Context<ControlsHeight | (() => ControlsHeight)>;

package/components/global/controls-height.js

@@ -1,16 +1,12 @@
 import { createContext } from 'react';
-export var ControlsHeight;
-(function (ControlsHeight) {
-    ControlsHeight["S"] = "S";
-    ControlsHeight["M"] = "M";
-    ControlsHeight["L"] = "L";
-})(ControlsHeight || (ControlsHeight = {}));
-export const ControlsHeightContext = createContext(ControlsHeight.M);
-let globalControlsHeight = ControlsHeight.M;
+import deprecate from 'util-deprecate';
+import { configure, ControlsHeight, getConfiguration } from './configuration';
+export { ControlsHeight } from './configuration';
 // This can be used if React Context is not applicable, for example for alertService or Auth dialog
-export function configureGlobalControlsHeight(value) {
-    globalControlsHeight = value;
-}
+export const configureGlobalControlsHeight = deprecate((value) => {
+    configure({ controlsHeight: value });
+}, 'Ring UI: configureGlobalControlsHeight() is deprecated, use configure() instead');
 export function getGlobalControlsHeight() {
-    return globalControlsHeight;
+    return getConfiguration().controlsHeight ?? ControlsHeight.M;
 }
+export const ControlsHeightContext = createContext(getGlobalControlsHeight);

package/components/global/variables.css

@@ -116,10 +116,12 @@
   --ring-link-hover-color: rgb(var(--ring-link-hover-components)); /* #2E55A3 */
   --ring-error-components: 204, 54, 69;
   --ring-error-color: rgb(var(--ring-error-components)); /* #CC3645 */
-  --ring-warning-components: 184, 85, 22;
-  --ring-warning-color: rgb(var(--ring-warning-components)); /* #B85516 */ /* Prefer using warning icon + regular text color */
+  --ring-warning-components: 182, 84, 22;
+  --ring-warning-color: rgb(var(--ring-warning-components)); /* #B65416 */ /* Prefer using warning icon + regular text color */
   --ring-success-components: 31, 117, 54;
   --ring-success-color: rgb(var(--ring-success-components)); /* #1F7536 */ /* Prefer using success icon + regular text color */
+  --ring-purple-text-components: 131, 77, 240;
+  --ring-purple-text-color: rgb(var(--ring-purple-text-components)); /* #834DF0 */
   --ring-text-components: 39, 40, 46;
   --ring-text-color: rgb(var(--ring-text-components)); /* #27282E */
   --ring-active-text-color: var(--ring-text-color);

package/components/global/variables_dark.css

@@ -41,8 +41,8 @@
   --ring-main-error-color: rgb(var(--ring-main-error-components)); /* #BD5757 */
   --ring-main-error-hover-components: 156, 78, 78;
   --ring-main-error-hover-color: rgb(var(--ring-main-error-hover-components)); /* #9C4E4E */
-  --ring-main-warning-components: 224, 136, 85;
-  --ring-main-warning-color: rgb(var(--ring-main-warning-components)); /* #E08855 */
+  --ring-main-warning-components: 224, 137, 87;
+  --ring-main-warning-color: rgb(var(--ring-main-warning-components)); /* #E08957 */
   --ring-main-warning-hover-components: 199, 125, 85;
   --ring-main-warning-hover-color: rgb(var(--ring-main-warning-hover-components)); /* #C77D55 */
   --ring-main-purple-components: 149, 90, 224;
@@ -103,10 +103,12 @@
   --ring-link-hover-color: rgb(var(--ring-link-hover-components)); /* #6B9BFA */
   --ring-error-components: 227, 119, 116;
   --ring-error-color: rgb(var(--ring-error-components)); /* #E37774 */
-  --ring-warning-components: 224, 136, 85;
-  --ring-warning-color: rgb(var(--ring-warning-components)); /* #E08855 */ /* Prefer using warning icon + regular text color */
+  --ring-warning-components: 224, 137, 87;
+  --ring-warning-color: rgb(var(--ring-warning-components)); /* #E08957 */ /* Prefer using warning icon + regular text color */
   --ring-success-components: 95, 173, 101;
   --ring-success-color: rgb(var(--ring-success-components)); /* #5FAD65 */ /* Prefer using success icon + regular text color */
+  --ring-purple-text-components: 181, 137, 236;
+  --ring-purple-text-color: rgb(var(--ring-purple-text-components)); /* #B589EC */
   --ring-text-components: 255, 255, 255;
   --ring-text-color: rgb(var(--ring-text-components)); /* #FFFFFF */
   --ring-active-text-components: 255, 255, 255;
@@ -175,8 +177,8 @@
   --ring-warning-container-light-color: rgb(var(--ring-warning-container-light-components)); /* #352A27 */
   --ring-highlight-container-light-components: 49, 42, 35;
   --ring-highlight-container-light-color: rgb(var(--ring-highlight-container-light-components)); /* #312A23 */
-  --ring-grey-container-light-components: 57, 59, 64;
-  --ring-grey-container-light-color: rgb(var(--ring-grey-container-light-components)); /* #393B40 */
+  --ring-grey-container-light-components: 43, 45, 48;
+  --ring-grey-container-light-color: rgb(var(--ring-grey-container-light-components)); /* #2B2D30 */
   --ring-purple-container-light-components: 43, 37, 49;
   --ring-purple-container-light-color: rgb(var(--ring-purple-container-light-components)); /* #2B2531 */
   --ring-highlight-fill-components: 214, 174, 88;

package/components/input/input.d.ts

@@ -1,6 +1,6 @@
 import { PureComponent, Ref, ComponentType, InputHTMLAttributes, TextareaHTMLAttributes, ReactNode } from 'react';
 import * as React from 'react';
-import { ControlsHeight } from '../global/controls-height';
+import { ControlsHeight, ControlsHeightContext } from '../global/controls-height';
 import { LabelType } from '../control-label/control-label';
 declare function noop(): void;
 /**
@@ -58,7 +58,8 @@ export declare class Input extends PureComponent<InputProps> {
     componentDidMount(): void;
     componentDidUpdate(): void;
     componentWillUnmount(): void;
-    static contextType: React.Context<ControlsHeight>;
+    static contextType: React.Context<ControlsHeight | (() => ControlsHeight)>;
+    context: React.ContextType<typeof ControlsHeightContext>;
     frame?: number;
     input?: HTMLInputElement | HTMLTextAreaElement | null;
     id: string;

package/components/input/input.js

@@ -97,7 +97,7 @@ export class Input extends PureComponent {
         // Modifiers
         size, multiline, borderless, 
         // Props
-        label, labelType, error, help, className, inputClassName, children, value, onClear, disabled, inputRef, onChange, enableShortcuts, id, placeholder, icon, translations, height = this.context, beforeInput, afterInput, autogrow, ...restProps } = this.props;
+        label, labelType, error, help, className, inputClassName, children, value, onClear, disabled, inputRef, onChange, enableShortcuts, id, placeholder, icon, translations, height = typeof this.context === 'function' ? this.context() : this.context, beforeInput, afterInput, autogrow, ...restProps } = this.props;
         const { empty } = this.state;
         const clearable = !!onClear;
         const classes = classNames(className, styles.outerContainer, [styles[`size${size}`]], [styles[`height${height}`]], {

package/components/popup/popup.css

@@ -19,6 +19,80 @@
   box-shadow: var(--ring-popup-shadow);
 }
 
+:root {
+  --ring-popup-offset: 8px;
+}
+
+.cssAnchoredPopup {
+  --ring-popup-offset: 0;
+
+  top: unset;
+  left: unset;
+
+  margin: 0
+}
+
+@position-try --bottom-right {
+  position-area: block-end span-inline-end;
+  margin-block-start: var(--ring-popup-offset);
+}
+
+@position-try --bottom-left {
+  position-area: block-end span-inline-start;
+  margin-block-start: var(--ring-popup-offset);
+}
+
+@position-try --bottom-center {
+  position-area: block-end center;
+  margin-block-start: var(--ring-popup-offset);
+}
+
+@position-try --top-center {
+  position-area: block-start center;
+  margin-block-end: var(--ring-popup-offset);
+}
+
+@position-try --top-right {
+  position-area: block-start span-inline-end;
+  margin-block-end: var(--ring-popup-offset);
+}
+
+@position-try --top-left {
+  position-area: block-start span-inline-start;
+  margin-block-end: var(--ring-popup-offset);
+}
+
+@position-try --right-center {
+  position-area: center inline-end;
+  margin-inline-start: var(--ring-popup-offset);
+}
+
+@position-try --right-top {
+  position-area: span-block-start inline-end;
+  margin-inline-start: var(--ring-popup-offset);
+}
+
+@position-try --right-bottom {
+  position-area: span-block-end inline-end;
+  margin-inline-start: var(--ring-popup-offset);
+}
+
+@position-try --left-center {
+  position-area: center inline-start;
+  margin-inline-end: var(--ring-popup-offset);
+}
+
+@position-try --left-top {
+  position-area: span-block-start inline-start;
+  margin-inline-end: var(--ring-popup-offset);
+}
+
+@position-try --left-bottom {
+  position-area: span-block-end inline-start;
+  margin-inline-end: var(--ring-popup-offset);
+}
+
+
 .largeBorderRadius {
   border-radius: var(--ring-border-radius-large);
 }

package/components/popup/popup.d.ts

@@ -32,6 +32,7 @@ export interface BasePopupProps {
     withTail?: boolean;
     tailOffset?: number;
     largeBorderRadius?: boolean;
+    cssPositioning?: boolean;
     anchorElement?: HTMLElement | null | undefined;
     target?: string | Element | null | undefined;
     className?: string | null | undefined;
@@ -117,6 +118,7 @@ export default class Popup<P extends BasePopupProps = PopupProps> extends PureCo
         direction: Directions | null;
     };
     private _updateDirection;
+    private shouldUseCssPositioning;
     private _updatePosition;
     private _redraw;
     private _getAnchor;

package/components/popup/popup.js

@@ -11,10 +11,12 @@ import { Listeners, getStyles } from '../global/dom';
 import Shortcuts from '../shortcuts/shortcuts';
 import dataTests from '../global/data-tests';
 import TabTrap from '../tab-trap/tab-trap';
+import { getConfiguration } from '../global/configuration';
 import position from './position';
 import styles from './popup.css';
 import { DEFAULT_DIRECTIONS, Dimension, Directions, Display, MaxHeight, MinWidth } from './popup.consts';
 import { PopupTargetContext, PopupTarget } from './popup.target';
+import { setCSSAnchorPositioning, supportsCSSAnchorPositioning } from './position-css';
 export { PopupTargetContext, PopupTarget };
 const isPossibleClientSideNavigation = (event) => {
     const target = event.target;
@@ -158,23 +160,47 @@ export default class Popup extends PureComponent {
             }
         }
     };
+    shouldUseCssPositioning() {
+        if (!supportsCSSAnchorPositioning()) {
+            return false;
+        }
+        return this.props.cssPositioning !== undefined
+            ? this.props.cssPositioning
+            : getConfiguration().popupsCssPositioning;
+    }
     _updatePosition = () => {
         const popup = this.popup;
+        const anchor = this._getAnchor();
         if (popup) {
-            popup.style.position = 'absolute';
-            if (this.isVisible()) {
-                const { styles: style, direction } = this.position();
-                Object.entries(style).forEach(([key, value]) => {
-                    const propKey = key;
-                    if (typeof value === 'number') {
-                        popup.style[propKey] = `${value}px`;
-                    }
-                    else {
-                        popup.style[propKey] = value.toString();
-                    }
+            if (this.shouldUseCssPositioning() && anchor) {
+                // Use CSS Anchor positioning
+                setCSSAnchorPositioning({
+                    popup,
+                    anchor,
+                    uid: this.uid,
+                    minWidth: this.props.minWidth,
+                    top: this.props.top,
+                    left: this.props.left,
+                    directions: this.props.directions,
+                    offset: this.props.offset,
                 });
-                if (direction != null) {
-                    this._updateDirection(direction);
+            }
+            else {
+                popup.style.position = 'absolute';
+                if (this.isVisible()) {
+                    const { styles: style, direction } = this.position();
+                    Object.entries(style).forEach(([key, value]) => {
+                        const propKey = key;
+                        if (typeof value === 'number') {
+                            popup.style[propKey] = `${value}px`;
+                        }
+                        else {
+                            popup.style[propKey] = value.toString();
+                        }
+                    });
+                    if (direction != null) {
+                        this._updateDirection(direction);
+                    }
                 }
             }
             this.setState(this.calculateDisplay);
@@ -199,16 +225,20 @@ export default class Popup extends PureComponent {
             clearTimeout(this._prevTimeout);
             this._prevTimeout = window.setTimeout(() => {
                 this._listenersEnabled = true;
-                this.listeners.add(window, 'resize', this._redraw);
-                if (this.props.autoPositioningOnScroll) {
-                    this.listeners.add(window, 'scroll', this._redraw);
+                // CSS positioning doesn't need resize/scroll listeners as it's handled by CSS
+                // But we need them if CSS positioning isn't supported
+                if (!this.shouldUseCssPositioning()) {
+                    this.listeners.add(window, 'resize', this._redraw);
+                    if (this.props.autoPositioningOnScroll) {
+                        this.listeners.add(window, 'scroll', this._redraw);
+                    }
+                    let el = this._getAnchor();
+                    while (el) {
+                        this.listeners.add(el, 'scroll', this._redraw);
+                        el = el.parentElement;
+                    }
                 }
                 this.listeners.add(document, 'pointerdown', this._onDocumentClick, true);
-                let el = this._getAnchor();
-                while (el) {
-                    this.listeners.add(el, 'scroll', this._redraw);
-                    el = el.parentElement;
-                }
             }, 0);
             return;
         }
@@ -259,6 +289,7 @@ export default class Popup extends PureComponent {
         const { className, style, hidden, attached, keepMounted, client, onMouseDown, onMouseUp, onMouseOver, onMouseOut, onContextMenu, 'data-test': dataTest, largeBorderRadius, } = this.props;
         const showing = this.state.display === Display.SHOWING;
         const classes = classNames(className, styles.popup, {
+            [styles.cssAnchoredPopup]: this.shouldUseCssPositioning(),
             [styles.attached]: attached,
             [styles.hidden]: hidden,
             [styles.showing]: showing,

package/components/popup/position-css.d.ts

@@ -0,0 +1,14 @@
+import { Directions } from './popup.consts';
+export declare const supportsCSSAnchorPositioning: () => boolean;
+interface SetCSSAnchorPositioningParams {
+    popup: HTMLElement;
+    anchor: HTMLElement;
+    uid: string;
+    minWidth?: number | 'target' | null;
+    top?: number;
+    left?: number;
+    directions: readonly Directions[];
+    offset?: number;
+}
+export declare const setCSSAnchorPositioning: ({ popup, anchor, uid, minWidth, top, left, directions, offset, }: SetCSSAnchorPositioningParams) => void;
+export {};

package/components/popup/position-css.js

@@ -0,0 +1,75 @@
+import { getRect } from '../global/dom';
+import { calculateMinWidth } from './position';
+import { Directions } from './popup.consts';
+export const supportsCSSAnchorPositioning = () => {
+    return CSS?.supports?.('anchor-name', 'none');
+};
+const getPositionArea = (direction) => {
+    switch (direction) {
+        case Directions.BOTTOM_RIGHT:
+            return ['block-end span-inline-end', '--bottom-right'];
+        case Directions.BOTTOM_LEFT:
+            return ['block-end span-inline-start', '--bottom-left'];
+        case Directions.BOTTOM_CENTER:
+            return ['block-end center', '--bottom-center'];
+        case Directions.TOP_CENTER:
+            return ['block-start center', '--top-center'];
+        case Directions.TOP_RIGHT:
+            return ['block-start span-inline-end', '--top-right'];
+        case Directions.TOP_LEFT:
+            return ['block-start span-inline-start', '--top-left'];
+        case Directions.RIGHT_CENTER:
+            return ['center inline-end', '--right-center'];
+        case Directions.RIGHT_TOP:
+            return ['span-block-start inline-end', '--right-top'];
+        case Directions.RIGHT_BOTTOM:
+            return ['span-block-end inline-end', '--right-bottom'];
+        case Directions.LEFT_CENTER:
+            return ['center inline-start', '--left-center'];
+        case Directions.LEFT_TOP:
+            return ['span-block-start inline-start', '--left-top'];
+        case Directions.LEFT_BOTTOM:
+            return ['span-block-end inline-start', '--left-bottom'];
+        default:
+            return ['block-end span-inline-end', '--bottom-right'];
+    }
+};
+const getPositionFallbacks = (directions) => {
+    return directions
+        .slice(1)
+        .map(direction => getPositionArea(direction)[1])
+        .join(', ');
+};
+export const setCSSAnchorPositioning = ({ popup, anchor, uid, minWidth, top, left, directions, offset, }) => {
+    const anchorName = anchor.style.getPropertyValue('anchor-name') || `--anchor-${uid}`;
+    if (!anchor.style.getPropertyValue('anchor-name')) {
+        anchor.style.setProperty('anchor-name', anchorName);
+    }
+    popup.style.setProperty('position-anchor', anchorName);
+    const calculatedMinWidth = calculateMinWidth(getRect(anchor).width, minWidth);
+    if (calculatedMinWidth !== null) {
+        popup.style.minWidth = `${calculatedMinWidth}px`;
+    }
+    if (top) {
+        popup.style.transform = `translateY(${top}px)`;
+    }
+    if (left) {
+        popup.style.left = `${left}px`;
+    }
+    const [initialPositionStyle, initialPositionName] = getPositionArea(directions[0]);
+    popup.style.setProperty('position-area', initialPositionStyle);
+    if (offset) {
+        popup.style.setProperty('--ring-popup-offset', `${offset}px`);
+        if (initialPositionName.startsWith('--bottom') || initialPositionName.startsWith('--top')) {
+            popup.style.margin = `${offset}px 0`;
+        }
+        else {
+            popup.style.margin = `0 ${offset}px`;
+        }
+    }
+    // Add fallbacks for better positioning if there are multiple directions
+    const fallbacks = getPositionFallbacks(directions);
+    if (fallbacks) {
+        popup.style.setProperty('position-try-fallbacks', fallbacks);
+    }
+};

package/components/popup/position.d.ts

@@ -24,6 +24,7 @@ export interface PositionAttrs {
 }
 export declare const positionPropKeys: readonly ["directions", "autoPositioning", "autoCorrectTopOverflow", "sidePadding", "top", "left", "offset", "maxHeight", "minWidth"];
 export declare function maxHeightForDirection(direction: Directions, anchorNode: Element, containerNode?: Element | null): number | null;
+export declare function calculateMinWidth(anchorWidth: number, minWidth: PositionAttrs['minWidth']): number | null;
 export default function position(attrs: PositionAttrs): {
     styles: PositionStyles;
     direction: Directions | null;

package/components/popup/position.js

@@ -126,6 +126,15 @@ export function maxHeightForDirection(direction, anchorNode, containerNode) {
             return null;
     }
 }
+export function calculateMinWidth(anchorWidth, minWidth) {
+    if (minWidth === MinWidth.TARGET || minWidth === 'target') {
+        return anchorWidth;
+    }
+    else if (minWidth) {
+        return anchorWidth < minWidth ? minWidth : anchorWidth;
+    }
+    return null;
+}
 export default function position(attrs) {
     const { popup, anchor, container, directions, autoPositioning, sidePadding, top, left, offset, maxHeight, minWidth, autoCorrectTopOverflow = true, } = attrs;
     let styles = {
@@ -185,11 +194,9 @@ export default function position(attrs) {
             scroll,
         });
     }
-    if (minWidth === MinWidth.TARGET || minWidth === 'target') {
-        styles.minWidth = anchorRect.width;
-    }
-    else if (minWidth) {
-        styles.minWidth = anchorRect.width < minWidth ? minWidth : anchorRect.width;
+    const newMinWidth = calculateMinWidth(anchorRect.width, minWidth);
+    if (newMinWidth !== null) {
+        styles.minWidth = newMinWidth;
     }
     return { styles, direction: chosenDirection };
 }

package/components/select/select.d.ts

@@ -5,7 +5,7 @@ import { Size } from '../input/input';
 import { LabelType } from '../control-label/control-label';
 import { ListDataItem } from '../list/consts';
 import { Directions } from '../popup/popup.consts';
-import { ControlsHeight } from '../global/controls-height';
+import { ControlsHeight, ControlsHeightContext } from '../global/controls-height';
 import SelectPopup, { Filter, FilterFn, Multiple, Tags } from './select__popup';
 /**
  * @name Select
@@ -206,7 +206,8 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
     static getDerivedStateFromProps<T = unknown>(nextProps: SelectProps<T>, prevState: SelectState<T>): Partial<SelectState<T>>;
     state: SelectState<T>;
     componentDidUpdate(prevProps: SelectProps<T>, prevState: SelectState<T>): void;
-    static contextType: React.Context<ControlsHeight>;
+    static contextType: React.Context<ControlsHeight | (() => ControlsHeight)>;
+    context: React.ContextType<typeof ControlsHeightContext>;
     static Type: typeof Type;
     static Size: typeof Size;
     id: string;
@@ -258,6 +259,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
     private _getLabel;
     private _getPlaceholder;
     _getSelectedString(): string | null;
+    private getHeight;
     private _getIcons;
     private _getAvatar;
     filter?: HTMLInputElement | null;

package/components/select/select.js

@@ -733,11 +733,14 @@ export default class Select extends Component {
             return this.state.selected != null ? getItemLabel(this.state.selected) : null;
         }
     }
+    getHeight() {
+        return this.props.height || (typeof this.context === 'function' ? this.context() : this.context);
+    }
     _getIcons() {
         const { selected } = this.state;
         const { disabled, clear, hideArrow } = this.props;
         const icons = [];
-        const height = this.props.height || this.context;
+        const height = this.getHeight();
         if (!Array.isArray(selected) && selected?.icon) {
             icons.push(_jsx("button", { title: "Toggle options popup", type: "button", className: styles.selectedIcon, disabled: this.props.disabled, onClick: this._clickHandler, style: { backgroundImage: `url(${selected.icon})` } }, "selected"));
         }
@@ -775,7 +778,7 @@ export default class Select extends Component {
         const dataTest = this.props['data-test'];
         const { selectedLabel } = this.props;
         const { shortcutsEnabled } = this.state;
-        const classes = classNames(styles.select, 'ring-js-shortcuts', this.props.className, styles[`height${this.props.height || this.context}`], {
+        const classes = classNames(styles.select, 'ring-js-shortcuts', this.props.className, styles[`height${this.getHeight()}`], {
             [styles[`size${this.props.size}`]]: this.props.type !== Type.INLINE,
             [styles.disabled]: this.props.disabled,
         });

package/components/tag/tag.css

@@ -3,6 +3,15 @@
 /* ensure styles order */
 @import "../link/link.css";
 
+:root,
+:host {
+  --ring-error-tag-text-color: var(--ring-main-error-hover-color);
+}
+
+:global(.ring-ui-theme-dark) {
+  --ring-error-tag-text-color: var(--ring-error-color);
+}
+
 .tag {
   --ring-tag-max-height: 20px;
 
@@ -23,7 +32,7 @@
 
   vertical-align: top;
 
-  color: var(--ring-text-color);
+  color: var(--ring-tag-text-color);
 
   border: none;
   border-radius: var(--ring-border-radius);
@@ -52,8 +61,80 @@
 
   border-radius: var(--ring-border-radius);
 
-  background-color: var(--ring-tag-background-color);
+  background-color: var(--ring-tag-container-background-color);
+}
+
+.default {
+  --ring-tag-container-background-color: var(--ring-tag-background-color);
+  --ring-tag-container-hover-background-color: var(--ring-tag-hover-background-color);
+  --ring-tag-text-color: var(--ring-text-color);
+  --ring-tag-icon-color: var(--ring-secondary-color);
+  --ring-tag-container-outline-background-color: var(--ring-grey-container-light-color);
+  --ring-tag-container-outline-hover-background-color: var(--ring-tag-background-color);
+  --ring-tag-outline-color: var(--ring-line-color);
+  --ring-tag-outline-hover-color: var(--ring-borders-color);
+}
+
+.main {
+  --ring-tag-container-background-color: var(--ring-hover-background-color);
+  --ring-tag-container-hover-background-color: var(--ring-selected-background-color);
+  --ring-tag-text-color: var(--ring-link-color);
+  --ring-tag-icon-color: var(--ring-link-color);
+  --ring-tag-container-outline-background-color: var(--ring-main-container-light-color);
+  --ring-tag-container-outline-hover-background-color: var(--ring-hover-background-color);
+  --ring-tag-outline-color: var(--ring-border-hover-color);
+  --ring-tag-outline-hover-color: var(--ring-border-accent-color);
+}
 
+.success {
+  --ring-tag-container-background-color: var(--ring-added-subtle-background-color);
+  --ring-tag-container-hover-background-color: var(--ring-added-background-color);
+  --ring-tag-text-color: var(--ring-success-color);
+  --ring-tag-icon-color: var(--ring-icon-success-color);
+  --ring-tag-container-outline-background-color: var(--ring-success-container-light-color);
+  --ring-tag-container-outline-hover-background-color: var(--ring-added-subtle-background-color);
+  --ring-tag-outline-color: var(--ring-success-border-color);
+  --ring-tag-outline-hover-color: var(--ring-success-border-hover-color);
+}
+
+.warning {
+  --ring-tag-container-background-color: var(--ring-warning-subtle-background-color);
+  --ring-tag-container-hover-background-color: var(--ring-warning-background-color);
+  --ring-tag-text-color: var(--ring-warning-color);
+  --ring-tag-icon-color: var(--ring-icon-warning-color);
+  --ring-tag-container-outline-background-color: var(--ring-warning-container-light-color);
+  --ring-tag-container-outline-hover-background-color: var(--ring-warning-subtle-background-color);
+  --ring-tag-outline-color: var(--ring-warning-border-color);
+  --ring-tag-outline-hover-color: var(--ring-warning-border-hover-color);
+}
+
+.error {
+  --ring-tag-container-background-color: var(--ring-removed-subtle-background-color);
+  --ring-tag-container-hover-background-color: var(--ring-removed-background-color);
+  --ring-tag-text-color: var(--ring-error-tag-text-color);
+  --ring-tag-icon-color: var(--ring-icon-error-color);
+  --ring-tag-container-outline-background-color: var(--ring-error-container-light-color);
+  --ring-tag-container-outline-hover-background-color: var(--ring-removed-subtle-background-color);
+  --ring-tag-outline-color: var(--ring-error-border-color);
+  --ring-tag-outline-hover-color: var(--ring-error-border-hover-color);
+}
+
+.purple {
+  --ring-tag-container-background-color: var(--ring-purple-subtle-background-color);
+  --ring-tag-container-hover-background-color: var(--ring-purple-background-color);
+  --ring-tag-text-color: var(--ring-purple-text-color);
+  --ring-tag-icon-color: var(--ring-main-purple-color);
+  --ring-tag-container-outline-background-color: var(--ring-purple-container-light-color);
+  --ring-tag-container-outline-hover-background-color: var(--ring-purple-subtle-background-color);
+  --ring-tag-outline-color: var(--ring-purple-border-color);
+  --ring-tag-outline-hover-color: var(--ring-purple-border-hover-color);
+}
+
+.outline {
+  --ring-tag-container-background-color: var(--ring-tag-container-outline-background-color);
+  --ring-tag-container-hover-background-color: var(--ring-tag-container-outline-hover-background-color);
+
+  box-shadow: inset 0 0 0 1px var(--ring-tag-outline-color);
 }
 
 .focused,
@@ -67,9 +148,10 @@
 .focused,
 .tag:focus-visible,
 .container:hover {
-  transition: none;
+  --ring-tag-outline-color: var(--ring-tag-outline-hover-color);
+  --ring-tag-container-background-color: var(--ring-tag-container-hover-background-color);
 
-  background-color: var(--ring-tag-hover-background-color);
+  transition: none;
 }
 
 .content {
@@ -84,6 +166,8 @@
 }
 
 .remove {
+  --ring-button-text-color: var(--ring-secondary-color);
+
   position: absolute;
   z-index: 1;
   top: 2px;
@@ -95,15 +179,11 @@
   line-height: calc(var(--ring-unit) * 2);
 }
 
-.removeIcon.removeIcon {
-  color: var(--ring-secondary-color);
-}
-
 .icon {
   margin-right: calc(var(--ring-unit) / 2);
   margin-left: calc(var(--ring-unit) * -0.5);
 
-  color: var(--ring-secondary-color);
+  color: var(--ring-tag-icon-color);
 
   && svg {
     vertical-align: -3.5px;

package/components/tag/tag.d.ts

@@ -6,6 +6,14 @@ export interface TagRenderProps extends HTMLAttributes<HTMLElement> {
     ref: RefCallback<HTMLElement>;
     'data-test': string;
 }
+export declare enum TagType {
+    DEFAULT = "default",
+    MAIN = "main",
+    SUCCESS = "success",
+    WARNING = "warning",
+    ERROR = "error",
+    PURPLE = "purple"
+}
 export interface TagProps {
     onRemove?: ((event: React.MouseEvent<HTMLElement>) => void) | null;
     onClick: (event: React.MouseEvent<HTMLElement>) => void;
@@ -22,6 +30,8 @@ export interface TagProps {
     rgTagTitle?: string | undefined;
     textColor?: string | undefined;
     backgroundColor?: string | undefined;
+    outline?: boolean;
+    tagType?: TagType;
 }
 /**
  * @name Tag
@@ -33,6 +43,7 @@ export default class Tag extends PureComponent<TagProps> {
     };
     componentDidUpdate(prevProps: TagProps): void;
     componentWillUnmount(): void;
+    static Type: typeof TagType;
     onDocumentClick: (event: MouseEvent) => void;
     tagNode?: HTMLElement | null;
     tagRef: (el: HTMLElement | null) => void;

package/components/tag/tag.js

@@ -6,6 +6,15 @@ import Icon from '../icon/icon';
 import Button from '../button/button';
 import { ControlsHeight } from '../global/controls-height';
 import styles from './tag.css';
+export var TagType;
+(function (TagType) {
+    TagType["DEFAULT"] = "default";
+    TagType["MAIN"] = "main";
+    TagType["SUCCESS"] = "success";
+    TagType["WARNING"] = "warning";
+    TagType["ERROR"] = "error";
+    TagType["PURPLE"] = "purple";
+})(TagType || (TagType = {}));
 /**
  * @name Tag
  */
@@ -16,6 +25,7 @@ export default class Tag extends PureComponent {
         disabled: false,
         focused: false,
         render: props => _jsx("button", { type: "button", ...props }),
+        tagType: TagType.DEFAULT,
     };
     state = {
         focused: false,
@@ -33,6 +43,7 @@ export default class Tag extends PureComponent {
         this.setDocumentClickListener(false);
         this.setState({ focused: false });
     }
+    static Type = TagType;
     onDocumentClick = (event) => {
         if (this.tagNode) {
             this.setState({ focused: this.tagNode === event.target });
@@ -77,7 +88,7 @@ export default class Tag extends PureComponent {
     }
     renderRemoveIcon() {
         if (!this.props.readOnly && this.props.onRemove) {
-            return (_jsx(Button, { title: "Remove", icon: closeIcon, "data-test": "ring-tag-remove", className: styles.remove, iconClassName: styles.removeIcon, onClick: this.props.onRemove, style: { '--ring-secondary-color': this.props.textColor }, height: ControlsHeight.M }));
+            return (_jsx(Button, { title: "Remove", icon: closeIcon, "data-test": "ring-tag-remove", className: styles.remove, onClick: this.props.onRemove, style: { '--ring-secondary-color': this.props.textColor }, height: ControlsHeight.M }));
         }
         return null;
     }
@@ -88,7 +99,9 @@ export default class Tag extends PureComponent {
             [styles.withRemove]: !this.props.readOnly && this.props.onRemove,
         }, this.props.className);
         const { backgroundColor, textColor, render } = this.props;
-        return (_jsxs("span", { className: classNames(styles.container, this.props.containerClassName), children: [render({
+        return (_jsxs("span", { className: classNames(styles.container, this.props.containerClassName, styles[this.props.tagType], {
+                [styles.outline]: this.props.outline,
+            }), children: [render({
                     'data-test': 'ring-tag',
                     className: classes,
                     ref: this.tagRef,

package/components/tags-input/tags-input.d.ts

@@ -4,7 +4,7 @@ import Select, { SelectItem } from '../select/select';
 import { TagType } from '../tags-list/tags-list';
 import Caret from '../caret/caret';
 import { Size } from '../input/input';
-import { ControlsHeight } from '../global/controls-height';
+import { ControlsHeight, ControlsHeightContext } from '../global/controls-height';
 import { Filter } from '../select/select__popup';
 import { TagAttrs } from '../tag/tag';
 import { LabelType } from '../control-label/control-label';
@@ -82,7 +82,8 @@ export default class TagsInput extends PureComponent<TagsInputProps, TagsInputSt
     componentDidMount(): void;
     static ngModelStateField: string;
     ngModelStateField: string;
-    static contextType: React.Context<ControlsHeight>;
+    static contextType: React.Context<ControlsHeight | (() => ControlsHeight)>;
+    context: React.ContextType<typeof ControlsHeightContext>;
     id: string;
     node?: HTMLElement | null;
     nodeRef: (node: HTMLElement | null) => void;

package/components/tags-input/tags-input.js

@@ -221,7 +221,7 @@ export default class TagsInput extends PureComponent {
     };
     render() {
         const { focused, tags, activeIndex } = this.state;
-        const { disabled, canNotBeEmpty, allowAddNewTags, filter, size, labelType, height = this.context, label, } = this.props;
+        const { disabled, canNotBeEmpty, allowAddNewTags, filter, size, labelType, height = typeof this.context === 'function' ? this.context() : this.context, label, } = this.props;
         const classes = classNames(styles.tagsInput, [inputStyles[`size${size}`]], [inputStyles[`height${height}`]], {
             [styles.tagsInputDisabled]: disabled,
             [styles.tagsInputFocused]: focused,

package/components/toggle/toggle.css

@@ -190,6 +190,10 @@
   }
 }
 
+.input[disabled] + .switch {
+  --ring-toggle-item-color: var(--ring-content-background-color);
+}
+
 /* stylelint-disable-next-line selector-max-specificity */
 .input:checked[disabled] + .switch {
   --ring-toggle-background-color: var(--ring-border-disabled-active-color);
@@ -197,7 +201,6 @@
 
 /* stylelint-disable-next-line selector-max-specificity */
 .input[disabled]:not(:checked) + .switch {
-  --ring-toggle-item-color: var(--ring-content-background-color);
   --ring-toggle-background-color: var(--ring-disabled-background-color);
   --ring-toggle-border-color: var(--ring-border-disabled-color);
   --ring-switch-border-color: var(--ring-border-disabled-color);

package/components/user-card/card.js

@@ -5,7 +5,7 @@ import copyIcon from '@jetbrains/icons/copy';
 import Avatar, { Size as AvatarSize } from '../avatar/avatar';
 import Link from '../link/link';
 import clipboard from '../clipboard/clipboard';
-import Tag from '../tag/tag';
+import Tag, { TagType } from '../tag/tag';
 import Icon, { Size as IconSize } from '../icon/icon';
 import { I18nContext } from '../i18n/i18n-context';
 import Tooltip from '../tooltip/tooltip';
@@ -25,6 +25,6 @@ export default class UserCard extends PureComponent {
         const userActiveStatusClasses = classNames(styles.userActiveStatus, user.online ? styles.online : '');
         return (_jsx("div", { ...restProps, className: classes, children: _jsxs("div", { className: styles.userInformationContainer, children: [_jsxs("div", { className: styles.userAvatar, children: [_jsx(Avatar, { size: AvatarSize.Size56, url: user.avatarUrl, username: user.name, round: true }), !!avatarInfo && avatarInfo] }), _jsxs("div", { className: styles.userInformation, children: [_jsxs("div", { className: styles.userInformationGeneral, children: [_jsxs("div", { className: styles.userNameLine, children: [user.href && (_jsx(Link, { href: user.href, className: styles.userName, "data-test": "user-card-link", children: user.name })), !user.href && _jsx("span", { className: styles.userName, children: user.name }), typeof user.online === 'boolean' && (_jsx("span", { className: userActiveStatusClasses, title: user.online
                                                     ? (translations?.online ?? translate('online'))
-                                                    : (translations?.offline ?? translate('offline')) })), !!info && _jsx("span", { className: styles.userNameInfo, children: info }), user.banned && (_jsx(Tooltip, { title: user.banReason, children: _jsx(Tag, { className: styles.banLabel, children: translations?.banned ?? translate('banned') }) }))] }), _jsx("div", { className: styles.userLogin, children: user.login }), user.email && (_jsxs("span", { className: styles.userEmailWrapper, children: [_jsx(Link, { href: `mailto:${user.email}`, title: `mailto:${user.email}`, target: "_blank", className: styles.userEmail, children: user.email }), user.unverifiedEmail && (_jsx("span", { className: styles.unverifiedLabel, children: translations?.unverified ?? translate('unverified') })), _jsx(Icon, { title: translations?.copyToClipboard ?? translate('copyToClipboard'), className: styles.userCopyIcon, onClick: this.copyEmail, glyph: copyIcon, size: IconSize.Size14, suppressSizeWarning: true })] }))] }), children] })] }) }));
+                                                    : (translations?.offline ?? translate('offline')) })), !!info && _jsx("span", { className: styles.userNameInfo, children: info }), user.banned && (_jsx(Tooltip, { title: user.banReason, children: _jsx(Tag, { tagType: TagType.ERROR, children: translations?.banned ?? translate('banned') }) }))] }), _jsx("div", { className: styles.userLogin, children: user.login }), user.email && (_jsxs("span", { className: styles.userEmailWrapper, children: [_jsx(Link, { href: `mailto:${user.email}`, title: `mailto:${user.email}`, target: "_blank", className: styles.userEmail, children: user.email }), user.unverifiedEmail && (_jsx("span", { className: styles.unverifiedLabel, children: translations?.unverified ?? translate('unverified') })), _jsx(Icon, { title: translations?.copyToClipboard ?? translate('copyToClipboard'), className: styles.userCopyIcon, onClick: this.copyEmail, glyph: copyIcon, size: IconSize.Size14, suppressSizeWarning: true })] }))] }), children] })] }) }));
     }
 }

package/components/user-card/user-card.css

@@ -106,10 +106,6 @@
   margin-bottom: 3px;
 }
 
-.banLabel {
-  color: var(--ring-error-color);
-}
-
 .userActiveStatus {
   display: inline-block;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.60",
+  "version": "7.0.62",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -69,7 +69,7 @@
     "prepare": "webpack -c .storybook/custom-header/webpack.config.js",
     "prepublishOnly": "pinst --disable",
     "prerelease-built-ci": "node scripts/prepare-built-package.js",
-    "prerelease-ci": "git pull && git status",
+    "prerelease-ci": "git pull",
     "pretest-ci": "npm run lint-ci",
     "release-built-ci": "npm publish --access=public $NPM_PUBLISH_PARAMS",
     "release-ci": "npm version $NPM_VERSION_PARAMS && npm publish --access=public $NPM_PUBLISH_PARAMS",
@@ -96,52 +96,50 @@
   "readmeFilename": "README.md",
   "devDependencies": {
     "@babel/cli": "^7.28.3",
-    "@babel/eslint-parser": "^7.28.0",
+    "@babel/eslint-parser": "^7.28.4",
     "@csstools/css-parser-algorithms": "^3.0.4",
     "@csstools/stylelint-no-at-nest-rule": "^4.0.0",
     "@eslint/compat": "^1.3.2",
     "@eslint/eslintrc": "^3.2.0",
-    "@eslint/js": "^9.34.0",
-    "@figma/code-connect": "^1.3.4",
+    "@eslint/js": "^9.35.0",
+    "@figma/code-connect": "^1.3.5",
     "@jetbrains/eslint-config": "^6.0.5",
     "@jetbrains/logos": "3.0.0-canary.734b213.0",
     "@jetbrains/rollup-css-plugin": "./packages/rollup-css-plugin",
     "@jetbrains/stylelint-config": "^4.0.2",
-    "@primer/octicons": "^19.16.0",
+    "@primer/octicons": "^19.18.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-replace": "^6.0.2",
-    "@storybook/addon-a11y": "9.1.4",
-    "@storybook/addon-docs": "^9.1.4",
-    "@storybook/addon-themes": "^9.1.4",
+    "@storybook/addon-a11y": "9.1.5",
+    "@storybook/addon-docs": "^9.1.5",
+    "@storybook/addon-themes": "^9.1.5",
     "@storybook/csf": "^0.1.13",
-    "@storybook/react-webpack5": "9.1.4",
+    "@storybook/react-webpack5": "9.1.5",
     "@storybook/test-runner": "^0.23.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/chai": "^5.2.2",
     "@types/chai-as-promised": "^8.0.2",
     "@types/chai-dom": "1.11.3",
     "@types/eslint__js": "^9.14.0",
     "@types/markdown-it": "^14.1.2",
-    "@types/react": "^19.1.12",
-    "@types/react-dom": "^19.1.8",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
     "@types/webpack-env": "^1.18.8",
     "@vitejs/plugin-react": "^5.0.2",
-    "@vitest/eslint-plugin": "^1.3.6",
+    "@vitest/eslint-plugin": "^1.3.9",
     "acorn": "^8.15.0",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001739",
-    "chai": "^5.3.1",
+    "caniuse-lite": "^1.0.30001741",
     "chai-as-promised": "^8.0.2",
     "chai-dom": "^1.12.1",
     "cheerio": "^1.1.2",
     "core-js": "^3.45.1",
     "cpy-cli": "^6.0.0",
     "dotenv-cli": "^10.0.0",
-    "eslint": "^9.34.0",
+    "eslint": "^9.35.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-formatter-jslint-xml": "^8.40.0",
     "eslint-import-resolver-exports": "^1.0.0-beta.5",
@@ -151,16 +149,16 @@
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-storybook": "^9.1.4",
+    "eslint-plugin-storybook": "^9.1.5",
     "events": "^3.3.0",
     "glob": "^11.0.3",
-    "globals": "^16.3.0",
+    "globals": "^16.4.0",
     "html-webpack-plugin": "^5.6.4",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "~30.1.1",
-    "jest-environment-jsdom": "^30.1.1",
+    "jest": "~30.1.3",
+    "jest-environment-jsdom": "^30.1.2",
     "jest-teamcity": "^1.12.0",
     "lint-staged": "^16.1.6",
     "markdown-it": "^14.1.0",
@@ -172,16 +170,16 @@
     "react-dom": "^19.1.1",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^6.0.1",
-    "rollup": "^4.50.0",
+    "rollup": "^4.50.1",
     "rollup-plugin-clear": "^2.0.7",
     "storage-mock": "^2.1.0",
-    "storybook": "9.1.4",
-    "stylelint": "^16.23.1",
+    "storybook": "9.1.5",
+    "stylelint": "^16.24.0",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
     "terser-webpack-plugin": "^5.3.14",
     "typescript": "~5.9.2",
-    "typescript-eslint": "^8.41.0",
+    "typescript-eslint": "^8.43.0",
     "vitest": "^3.2.4",
     "vitest-teamcity-reporter": "^0.3.1",
     "wallaby-webpack": "^3.9.16",
@@ -209,10 +207,10 @@
     }
   },
   "dependencies": {
-    "@babel/core": "^7.28.3",
+    "@babel/core": "^7.28.4",
     "@babel/preset-typescript": "^7.27.1",
     "@jetbrains/babel-preset-jetbrains": "^2.4.0",
-    "@jetbrains/icons": "^5.12.0",
+    "@jetbrains/icons": "^5.13.0",
     "@jetbrains/postcss-require-hover": "^0.2.0",
     "@types/combokeys": "^2.4.9",
     "@types/element-resize-detector": "^1.1.6",
@@ -220,7 +218,7 @@
     "@types/util-deprecate": "^1.0.4",
     "babel-loader": "10.0.0",
     "babel-plugin-transform-define": "^2.1.4",
-    "browserslist": "^4.25.1",
+    "browserslist": "^4.26.0",
     "change-case": "^4.1.1",
     "classnames": "^2.5.1",
     "combokeys": "^3.0.1",