@jetbrains/ring-ui 6.0.6-beta.0 → 6.0.6

package/components/island/content.d.ts

@@ -0,0 +1,43 @@
+import React, { Component, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+import createResizeDetector from 'element-resize-detector';
+export interface IslandContentProps extends Omit<HTMLAttributes<HTMLElement>, 'onScroll'> {
+    fade?: boolean | null | undefined;
+    onScrollToBottom?: (() => void) | null | undefined;
+    scrollableWrapperClassName?: string | null | undefined;
+}
+export interface IslandContentInnerProps extends IslandContentProps {
+    onScroll: (node: HTMLElement) => void;
+    bottomBorder: boolean;
+}
+declare class Content extends Component<IslandContentInnerProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        scrollableWrapperClassName: PropTypes.Requireable<string>;
+        fade: PropTypes.Requireable<boolean>;
+        bottomBorder: PropTypes.Requireable<boolean>;
+        onScroll: PropTypes.Requireable<(...args: any[]) => any>;
+        onScrollToBottom: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        fade: boolean;
+        bottomBorder: boolean;
+        onScroll: () => void;
+        onScrollToBottom: () => void;
+    };
+    state: {
+        scrolledToTop: boolean;
+        scrolledToBottom: boolean;
+    };
+    componentWillUnmount(): void;
+    resizeDetector: createResizeDetector.Erd;
+    wrapperNode?: HTMLElement | null;
+    setWrapper: (node: HTMLElement | null) => void;
+    calculateScrollPosition: () => void;
+    scrollableNode?: HTMLElement | null;
+    setScrollableNodeAndCalculatePosition: (node: HTMLElement | null) => void;
+    render(): React.JSX.Element;
+}
+declare const ContentWrapper: React.ForwardRefExoticComponent<IslandContentProps & React.RefAttributes<Content>>;
+export default ContentWrapper;

package/components/island/content.js

@@ -0,0 +1,100 @@
+import React, { forwardRef, Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import createResizeDetector from 'element-resize-detector';
+import scheduleRAF from '../global/schedule-raf';
+import styles from './island.css';
+import { ScrollHandlerContext } from './adaptive-island-hoc';
+const scheduleScrollAction = scheduleRAF();
+const noop = () => { };
+const END_DISTANCE = 16;
+class Content extends Component {
+    static propTypes = {
+        children: PropTypes.node,
+        className: PropTypes.string,
+        scrollableWrapperClassName: PropTypes.string,
+        fade: PropTypes.bool,
+        bottomBorder: PropTypes.bool,
+        onScroll: PropTypes.func,
+        onScrollToBottom: PropTypes.func
+    };
+    static defaultProps = {
+        fade: true,
+        bottomBorder: false,
+        onScroll: noop,
+        onScrollToBottom: noop
+    };
+    state = {
+        scrolledToTop: true,
+        scrolledToBottom: false
+    };
+    componentWillUnmount() {
+        this.scrollableNode = null;
+        if (!this.wrapperNode) {
+            return;
+        }
+        this.resizeDetector.removeAllListeners(this.wrapperNode);
+    }
+    resizeDetector = createResizeDetector({ strategy: 'scroll' });
+    wrapperNode;
+    setWrapper = (node) => {
+        if (!node) {
+            return;
+        }
+        this.wrapperNode = node;
+        this.resizeDetector.listenTo(node, this.calculateScrollPosition);
+    };
+    calculateScrollPosition = () => scheduleScrollAction(() => {
+        const { scrollableNode } = this;
+        if (!scrollableNode) {
+            return;
+        }
+        this.props.onScroll(scrollableNode);
+        const { scrollTop, scrollHeight, offsetHeight } = scrollableNode;
+        const scrolledToTop = scrollTop === 0;
+        const scrolledToBottom = offsetHeight + scrollTop >= scrollHeight - END_DISTANCE;
+        if (scrolledToBottom) {
+            this.props.onScrollToBottom?.();
+        }
+        this.setState({ scrolledToTop, scrolledToBottom });
+    });
+    scrollableNode;
+    setScrollableNodeAndCalculatePosition = (node) => {
+        if (!node) {
+            return;
+        }
+        this.scrollableNode = node;
+        this.calculateScrollPosition();
+    };
+    render() {
+        const { children, className, bottomBorder, scrollableWrapperClassName, onScroll, onScrollToBottom, fade, ...restProps } = this.props;
+        const { scrolledToTop, scrolledToBottom } = this.state;
+        const classes = classNames(styles.content, className, {
+            [styles.contentWithTopFade]: fade && !scrolledToTop,
+            [styles.contentWithBottomFade]: fade && !scrolledToBottom,
+            [styles.withTransparentBottomBorder]: bottomBorder,
+            [styles.withBottomBorder]: bottomBorder && !scrolledToBottom
+        });
+        const scrollableWrapperClasses = classNames(styles.scrollableWrapper, scrollableWrapperClassName);
+        return (<div {...restProps} data-test="ring-island-content" className={classes}>
+        <div 
+        // it has to be focusable because it can be scrollable
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex={0} data-scrollable-container className={scrollableWrapperClasses} ref={this.setScrollableNodeAndCalculatePosition} onScroll={fade ? this.calculateScrollPosition : noop}>
+          {fade && (<div ref={this.setWrapper}>
+              {children}
+            </div>)}
+
+          {!fade && children}
+        </div>
+      </div>);
+    }
+}
+const ContentWrapper = forwardRef((props, ref) => (<ScrollHandlerContext.Consumer>
+    {onScroll => {
+        const addProps = onScroll != null ? { onScroll, bottomBorder: true } : {};
+        return <Content {...props} {...addProps} ref={ref}/>;
+    }}
+  </ScrollHandlerContext.Consumer>));
+ContentWrapper.displayName = 'ContentWrapper';
+export default ContentWrapper;

package/components/island/header.d.ts

@@ -0,0 +1,8 @@
+import React, { HTMLAttributes } from 'react';
+export interface IslandHeaderProps extends HTMLAttributes<HTMLElement> {
+    wrapWithTitle?: boolean | undefined;
+    border?: boolean | null | undefined;
+    phase?: number | undefined;
+}
+declare const HeaderWrapper: (props: IslandHeaderProps) => React.JSX.Element;
+export default HeaderWrapper;

package/components/island/header.js

@@ -0,0 +1,78 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { interpolateLinear } from '../global/linear-function';
+import styles from './island.css';
+import { PhaseContext } from './adaptive-island-hoc';
+const Start = {
+    FONT_SIZE: 24,
+    LINE_HEIGHT: 28,
+    PADDING_TOP: 24,
+    PADDING_BOTTOM: 0,
+    X: 0,
+    Y: 0,
+    SPACING: 0
+};
+const End = {
+    FONT_SIZE: 13,
+    LINE_HEIGHT: 20,
+    PADDING_TOP: 16,
+    PADDING_BOTTOM: 8,
+    // Compensation
+    X: 0.4,
+    Y: 0.1,
+    SPACING: 1.09
+};
+const BORDER_APPEAR_PHASE = 0.5;
+class Header extends Component {
+    static propTypes = {
+        children: PropTypes.node,
+        className: PropTypes.string,
+        border: PropTypes.bool,
+        wrapWithTitle: PropTypes.bool,
+        phase: PropTypes.number
+    };
+    static defaultProps = {
+        wrapWithTitle: true
+    };
+    style(name) {
+        return interpolateLinear(Start[name], End[name], this.props.phase ?? 0);
+    }
+    render() {
+        const { children, className, wrapWithTitle, border, phase, ...restProps } = this.props;
+        const classes = classNames(styles.header, className, {
+            [styles.withBottomBorder]: border || phase != null && phase >= BORDER_APPEAR_PHASE
+        });
+        const headerStyle = phase != null
+            ? {
+                lineHeight: `${this.style('LINE_HEIGHT')}px`, // need to append px because number is a valid line-height value
+                paddingTop: this.style('PADDING_TOP'),
+                paddingBottom: this.style('PADDING_BOTTOM')
+            }
+            : undefined;
+        const scaleFont = phase != null && this.style('FONT_SIZE') / Start.FONT_SIZE;
+        const titleStyle = (phase != null && phase < 1)
+            ? {
+                fontSize: Start.FONT_SIZE,
+                transform: `translate(${this.style('X')}px, ${this.style('Y')}px) scale(${scaleFont})`,
+                letterSpacing: this.style('SPACING')
+            }
+            : undefined;
+        return (<div {...restProps} data-test="ring-island-header" className={classes} style={headerStyle}>
+        {wrapWithTitle &&
+                (<h2 className={styles.title} style={titleStyle}>
+            {children}
+          </h2>)}
+
+        {!wrapWithTitle && children}
+
+      </div>);
+    }
+}
+const HeaderWrapper = (props) => (<PhaseContext.Consumer>
+    {phase => {
+        const addProps = phase != null ? { phase } : {};
+        return <Header {...props} {...addProps}/>;
+    }}
+  </PhaseContext.Consumer>);
+export default HeaderWrapper;

package/components/island/island.css

@@ -0,0 +1,131 @@
+@import "../global/variables.css";
+
+@value gradientStart: rgba(255, 255, 255, 0);
+@value gradientStop: var(--ring-content-background-color);
+
+.island {
+  display: flex;
+  flex-direction: column;
+
+  border: 1px solid var(--ring-line-color);
+  border-radius: var(--ring-border-radius);
+
+  background-color: var(--ring-content-background-color);
+  box-shadow: 0 1px 4px var(--ring-popup-shadow-color);
+}
+
+.withTransparentBottomBorder {
+  transition: border-bottom-color 0.1s;
+
+  border-bottom: 1px solid transparent;
+}
+
+.header {
+  box-sizing: border-box;
+  width: 100%;
+  padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4) var(--ring-unit);
+
+  transition: border-bottom-color 0.1s;
+
+  border-bottom: 1px solid transparent;
+
+  line-height: 24px;
+}
+
+.withBottomBorder.withBottomBorder {
+  border-bottom-color: var(--ring-popup-border-color);
+  border-top-left-radius: var(--ring-border-radius);
+  border-top-right-radius: var(--ring-border-radius);
+}
+
+.title {
+  display: block;
+  float: left;
+
+  margin: 0;
+
+  transform-origin: 0 50%;
+  word-break: break-word;
+
+  color: var(--ring-heading-color);
+
+  font-size: inherit;
+
+  font-weight: bold;
+}
+
+.narrowIsland .header {
+  padding: 0 calc(var(--ring-unit) * 2);
+}
+
+.content {
+  position: relative;
+
+  display: flex;
+  overflow: auto;
+
+  width: 100%;
+  -webkit-overflow-scrolling: touch;
+}
+
+.scrollableWrapper {
+  overflow: auto;
+
+  width: 100%;
+  padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4);
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+}
+
+.narrowIsland .scrollableWrapper {
+  padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 2);
+}
+
+.withoutPaddings .scrollableWrapper {
+  padding: 0;
+}
+
+.contentWithTopFade::before {
+  position: absolute;
+  z-index: var(--ring-fixed-z-index);
+  left: 0;
+
+  display: block;
+
+  width: 100%;
+  height: calc(var(--ring-unit) * 3);
+
+  content: "";
+
+  pointer-events: none;
+
+  opacity: 0.8;
+
+  background: linear-gradient(to top, gradientStart, gradientStop);
+}
+
+.contentWithTopFade:first-child::before {
+  border-top-left-radius: var(--ring-border-radius);
+  border-top-right-radius: var(--ring-border-radius);
+}
+
+.contentWithBottomFade::after {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+
+  display: block;
+
+  width: 100%;
+  height: calc(var(--ring-unit) * 3);
+
+  content: "";
+  pointer-events: none;
+
+  opacity: 0.8;
+  border-bottom-right-radius: var(--ring-border-radius);
+  border-bottom-left-radius: var(--ring-border-radius);
+  background: linear-gradient(to bottom, gradientStart, gradientStop);
+}

package/components/island/island.d.ts

@@ -0,0 +1,78 @@
+import React, { Component, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+export interface IslandProps extends HTMLAttributes<HTMLElement> {
+    narrow?: boolean | null | undefined;
+    withoutPaddings?: boolean | null | undefined;
+    'data-test'?: string | null | undefined;
+}
+/**
+ * @name Island
+ */
+export default class Island extends Component<IslandProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        narrow: PropTypes.Requireable<boolean>;
+        withoutPaddings: PropTypes.Requireable<boolean>;
+        'data-test': PropTypes.Requireable<string>;
+    };
+    render(): React.JSX.Element;
+}
+export declare const AdaptiveIsland: {
+    new (props: IslandProps | Readonly<IslandProps>): {
+        state: {
+            phase: null;
+        };
+        onContentScroll: ({ scrollTop, scrollHeight, clientHeight }: Element) => void;
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<IslandProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<IslandProps>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<IslandProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<IslandProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<IslandProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<IslandProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<IslandProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<IslandProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<IslandProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    new (props: IslandProps, context: any): {
+        state: {
+            phase: null;
+        };
+        onContentScroll: ({ scrollTop, scrollHeight, clientHeight }: Element) => void;
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<IslandProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<IslandProps>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<IslandProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<IslandProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<IslandProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<IslandProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<IslandProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<IslandProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<IslandProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    propTypes: React.WeakValidationMap<IslandProps> | undefined;
+    contextType?: React.Context<any> | undefined;
+};
+export { default as Header } from './header';
+export { default as Content } from './content';

package/components/island/island.js

@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import dataTests from '../global/data-tests';
+import adaptiveIslandHOC from './adaptive-island-hoc';
+import styles from './island.css';
+/**
+ * @name Island
+ */
+export default class Island extends Component {
+    static propTypes = {
+        children: PropTypes.node,
+        className: PropTypes.string,
+        narrow: PropTypes.bool,
+        withoutPaddings: PropTypes.bool,
+        'data-test': PropTypes.string
+    };
+    render() {
+        const { children, className, narrow, withoutPaddings, 'data-test': dataTest, ...restProps } = this.props;
+        const classes = classNames(styles.island, className, {
+            [styles.narrowIsland]: narrow,
+            [styles.withoutPaddings]: withoutPaddings
+        });
+        return (<div {...restProps} className={classes} data-test={dataTests('ring-island', dataTest)}>
+        {children}
+      </div>);
+    }
+}
+export const AdaptiveIsland = adaptiveIslandHOC(Island);
+export { default as Header } from './header';
+export { default as Content } from './content';

package/components/island-legacy/content-legacy.d.ts

@@ -0,0 +1,10 @@
+import React, { HTMLAttributes, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import './island-legacy.css';
+export default class Content extends PureComponent<HTMLAttributes<HTMLElement>> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    render(): React.JSX.Element;
+}

package/components/island-legacy/content-legacy.js

@@ -0,0 +1,17 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import './island-legacy.css';
+export default class Content extends PureComponent {
+    static propTypes = {
+        className: PropTypes.string,
+        children: PropTypes.node
+    };
+    render() {
+        const { children, className, ...restProps } = this.props;
+        const classes = classNames('ring-island__content', className);
+        return (<div {...restProps} className={classes}>
+        {children}
+      </div>);
+    }
+}

package/components/island-legacy/header-legacy.d.ts

@@ -0,0 +1,10 @@
+import React, { HTMLAttributes, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import './island-legacy.css';
+export default class Header extends PureComponent<HTMLAttributes<HTMLElement>> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    render(): React.JSX.Element;
+}

package/components/island-legacy/header-legacy.js

@@ -0,0 +1,19 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import './island-legacy.css';
+export default class Header extends PureComponent {
+    static propTypes = {
+        className: PropTypes.string,
+        children: PropTypes.node
+    };
+    render() {
+        const { children, className, ...restProps } = this.props;
+        const classes = classNames('ring-island__header', className);
+        return (<div {...restProps} className={classes}>
+        <div className="ring-island__title">
+          {children}
+        </div>
+      </div>);
+    }
+}

package/components/island-legacy/island-legacy.css

@@ -0,0 +1,98 @@
+/**
+ * @name Island Legacy
+ */
+
+:global(.ring-island) {
+  min-width: calc(var(--ring-unit) * 25 - 2px);
+
+  color: var(--ring-text-color);
+
+  border: 1px solid;
+  border-color: var(--ring-line-color);
+  border-radius: var(--ring-border-radius);
+
+  background-color: var(--ring-content-background-color);
+  box-shadow: 0 1px 4px var(--ring-popup-shadow-color);
+
+  font-family: var(--ring-font-family);
+
+  font-size: var(--ring-font-size);
+}
+
+:global(.ring-island_stack-right) {
+  border-right: none;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+
+  box-shadow: none;
+}
+
+:global(.ring-island_stack-left) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+
+  box-shadow: none;
+}
+
+:global(.ring-island__header) {
+  min-height: calc(var(--ring-unit) * 3 - 2px);
+
+  border-bottom: 1px solid var(--ring-line-color);
+  border-top-left-radius: var(--ring-border-radius);
+  border-top-right-radius: var(--ring-border-radius);
+
+  background-color: var(--ring-content-background-color);
+
+  line-height: calc(var(--ring-unit) * 3 - 2px);
+}
+
+:global(.ring-island__header-btn),
+:global(.ring-island__header-button) {
+  float: right;
+
+  padding: 0 calc(var(--ring-unit) * 2 - 1px);
+
+  /* -1 to account for border */
+
+  cursor: pointer;
+
+  user-select: none;
+
+  color: var(--ring-secondary-color);
+
+  border-left: 1px solid var(--ring-disabled-color);
+  text-shadow: var(--ring-white-text-color) 0 0 1px;
+
+  font-size: var(--ring-font-size-smaller);
+}
+
+:global(.ring-island__header-btn),
+:global(.ring-island__header-button:hover) {
+  background:
+    var(--ring-hover-background-color)
+    linear-gradient(to top, var(--ring-hover-background-color), var(--ring-content-background-color));
+}
+
+:global(.ring-island__header-btn),
+:global(.ring-island__header-button:active) {
+  background: var(--ring-content-background-color) none;
+  box-shadow: 0 0 4px 0 var(--ring-content-background-color) inset;
+}
+
+:global(.ring-island__header-btn),
+:global(.ring-island__header-button:last-child) {
+  border-top-right-radius: 3px;
+}
+
+:global(.ring-island__title) {
+  display: block;
+  float: left;
+
+  padding: 0 calc(var(--ring-unit) * 4);
+
+  font-weight: bold;
+}
+
+:global(.ring-island__content) {
+  margin: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4);
+}

package/components/island-legacy/island-legacy.d.ts

@@ -0,0 +1,12 @@
+import React, { HTMLAttributes, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import './island-legacy.css';
+export default class Island extends PureComponent<HTMLAttributes<HTMLElement>> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    render(): React.JSX.Element;
+}
+export { default as Header } from './header-legacy';
+export { default as Content } from './content-legacy';

package/components/island-legacy/island-legacy.js

@@ -0,0 +1,19 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import './island-legacy.css';
+export default class Island extends PureComponent {
+    static propTypes = {
+        className: PropTypes.string,
+        children: PropTypes.node
+    };
+    render() {
+        const { children, className, ...restProps } = this.props;
+        const classes = classNames('ring-island', className);
+        return (<div {...restProps} className={classes}>
+        {children}
+      </div>);
+    }
+}
+export { default as Header } from './header-legacy';
+export { default as Content } from './content-legacy';

package/components/line/line.css

@@ -0,0 +1,14 @@
+@import "../global/variables.css";
+
+:global(.ring-line) {
+  display: block;
+
+  width: 100%;
+  height: 1px;
+
+  background-color: var(--ring-line-color);
+}
+
+:global(.ring-line_separated) {
+  margin: calc(var(--ring-unit) * 2) 0;
+}