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

package/components/link/clickableLink.d.ts

@@ -0,0 +1,20 @@
+import React, { PureComponent, AnchorHTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+export interface ClickableLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    onConditionalClick?: ((isPlainLeft: boolean, e: React.MouseEvent<HTMLAnchorElement>) => void) | null | undefined;
+    onPlainLeftClick?: ((e: React.MouseEvent<HTMLAnchorElement>) => void) | null | undefined;
+    activeClassName?: string | null | undefined;
+    disabled?: boolean | undefined;
+}
+export default class ClickableLink extends PureComponent<ClickableLinkProps> {
+    static propTypes: {
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onPlainLeftClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onConditionalClick: PropTypes.Requireable<(...args: any[]) => any>;
+        activeClassName: PropTypes.Requireable<string>;
+        href: PropTypes.Validator<string>;
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+    };
+    onClick: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+    render(): React.JSX.Element;
+}

package/components/link/clickableLink.js

@@ -0,0 +1,33 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+const LEFT_BUTTON = 0;
+// Cmd/Ctrl/Shift/Alt + Click should trigger default browser behaviour. Same applies to non-left clicks
+const isPlainLeftClick = (e) => e.button === LEFT_BUTTON && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey;
+export default class ClickableLink extends PureComponent {
+    static propTypes = {
+        onClick: PropTypes.func,
+        onPlainLeftClick: PropTypes.func,
+        onConditionalClick: PropTypes.func,
+        activeClassName: PropTypes.string,
+        href: PropTypes.string.isRequired,
+        children: PropTypes.node.isRequired
+    };
+    onClick = (e) => {
+        const { onClick, onConditionalClick, onPlainLeftClick } = this.props;
+        const isPlainLeft = isPlainLeftClick(e);
+        if (onClick) {
+            onClick(e);
+        }
+        if (onConditionalClick) {
+            onConditionalClick(isPlainLeft, e);
+        }
+        if (onPlainLeftClick && isPlainLeft) {
+            e.preventDefault();
+            onPlainLeftClick(e);
+        }
+    };
+    render() {
+        const { onConditionalClick, onPlainLeftClick, activeClassName, href, children, ...restProps } = this.props;
+        return <a href={href} {...restProps} onClick={this.onClick}>{children}</a>;
+    }
+}

package/components/link/link.css

@@ -0,0 +1,64 @@
+@import "../global/variables.css";
+
+.link,
+.withLinks a {
+  cursor: pointer;
+  transition: color var(--ring-fast-ease);
+
+  color: var(--ring-link-color);
+
+  outline: none;
+
+  text-decoration-line: none;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+
+  @media (resolution >= 2dppx) {
+    text-decoration-thickness: 0.5px;
+  }
+
+  &:hover,
+  &.hover {
+    text-decoration-line: underline;
+
+    transition: none;
+
+    color: var(--ring-link-hover-color);
+  }
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  &.pseudo:hover {
+    text-decoration: none;
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px var(--ring-border-hover-color);
+  }
+}
+
+.link.active {
+  color: inherit;
+}
+
+.inherit:not(:hover) {
+  color: inherit;
+}
+
+.pseudo {
+  margin: 0;
+  padding: 0;
+
+  text-align: left;
+
+  border: 0;
+
+  background: transparent;
+
+  font: inherit;
+
+  &::-moz-focus-inner {
+    padding: 0;
+
+    border: 0;
+  }
+}

package/components/link/link.d.ts

@@ -0,0 +1,138 @@
+import React, { ReactNode, ComponentType } from 'react';
+import PropTypes from 'prop-types';
+import { ClickableLinkProps } from './clickableLink';
+/**
+ * @name Link
+ */
+export interface LinkBaseProps {
+    active?: boolean | null | undefined;
+    inherit?: boolean | null | undefined;
+    pseudo?: boolean | null | undefined;
+    hover?: boolean | null | undefined;
+    'data-test'?: string | null | undefined;
+    children: ReactNode;
+}
+export type LinkProps<P extends ClickableLinkProps = ClickableLinkProps> = Omit<P, keyof LinkBaseProps> & LinkBaseProps;
+export declare function linkHOC<P extends ClickableLinkProps>(ComposedComponent: ComponentType<P> | string): {
+    new (props: LinkProps<P> | Readonly<LinkProps<P>>): {
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<P>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<LinkProps<P>>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<LinkProps<P>>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<LinkProps<P>>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<LinkProps<P>>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<LinkProps<P>>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<LinkProps<P>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<LinkProps<P>>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<LinkProps<P>>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    new (props: LinkProps<P>, context: any): {
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<P>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<LinkProps<P>>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<LinkProps<P>>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<LinkProps<P>>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<LinkProps<P>>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<LinkProps<P>>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<LinkProps<P>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<LinkProps<P>>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<LinkProps<P>>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    propTypes: {
+        className: PropTypes.Requireable<string>;
+        active: PropTypes.Requireable<boolean>;
+        inherit: PropTypes.Requireable<boolean>;
+        pseudo: PropTypes.Requireable<boolean>;
+        hover: PropTypes.Requireable<boolean>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        'data-test': PropTypes.Requireable<string>;
+        href: PropTypes.Requireable<string>;
+        onPlainLeftClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    contextType?: React.Context<any> | undefined;
+};
+declare const _default: {
+    new (props: LinkProps<ClickableLinkProps> | Readonly<LinkProps<ClickableLinkProps>>): {
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<ClickableLinkProps>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<LinkProps<ClickableLinkProps>>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<LinkProps<ClickableLinkProps>>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<LinkProps<ClickableLinkProps>>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<LinkProps<ClickableLinkProps>>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<LinkProps<ClickableLinkProps>>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<LinkProps<ClickableLinkProps>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<LinkProps<ClickableLinkProps>>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<LinkProps<ClickableLinkProps>>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    new (props: LinkProps<ClickableLinkProps>, context: any): {
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<ClickableLinkProps>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<LinkProps<ClickableLinkProps>>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<LinkProps<ClickableLinkProps>>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<LinkProps<ClickableLinkProps>>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<LinkProps<ClickableLinkProps>>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<LinkProps<ClickableLinkProps>>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<LinkProps<ClickableLinkProps>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<LinkProps<ClickableLinkProps>>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<LinkProps<ClickableLinkProps>>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    propTypes: {
+        className: PropTypes.Requireable<string>;
+        active: PropTypes.Requireable<boolean>;
+        inherit: PropTypes.Requireable<boolean>;
+        pseudo: PropTypes.Requireable<boolean>;
+        hover: PropTypes.Requireable<boolean>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        'data-test': PropTypes.Requireable<string>;
+        href: PropTypes.Requireable<string>;
+        onPlainLeftClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    contextType?: React.Context<any> | undefined;
+};
+export default _default;

package/components/link/link.js

@@ -0,0 +1,44 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import dataTests from '../global/data-tests';
+import ClickableLink from './clickableLink';
+import styles from './link.css';
+export function linkHOC(ComposedComponent) {
+    const isCustom = typeof ComposedComponent !== 'string' && ComposedComponent !== ClickableLink;
+    return class Link extends PureComponent {
+        static propTypes = {
+            className: PropTypes.string,
+            active: PropTypes.bool,
+            inherit: PropTypes.bool,
+            pseudo: PropTypes.bool,
+            hover: PropTypes.bool,
+            children: PropTypes.node,
+            'data-test': PropTypes.string,
+            href: PropTypes.string,
+            onPlainLeftClick: PropTypes.func,
+            onClick: PropTypes.func
+        };
+        render() {
+            const { active, inherit, pseudo, hover, className, 'data-test': dataTest, href, children, onPlainLeftClick, onClick, ...restProps } = this.props;
+            const useButton = pseudo || !isCustom && href == null;
+            const classes = classNames(styles.link, className, {
+                [styles.active]: active,
+                [styles.inherit]: inherit,
+                [styles.hover]: hover,
+                [styles.pseudo]: useButton
+            });
+            let props = restProps;
+            if (isCustom && !props.activeClassName) {
+                props = { ...props, activeClassName: styles.active };
+            }
+            if (useButton) {
+                return (<button type="button" {...props} className={classes} onClick={(onClick || onPlainLeftClick)} data-test={dataTests('ring-link', dataTest)}>{children}</button>);
+            }
+            return (<ComposedComponent {...props} href={href} className={classes} onClick={onClick} onPlainLeftClick={onPlainLeftClick} data-test={dataTests('ring-link', dataTest)}>
+          {children}
+        </ComposedComponent>);
+        }
+    };
+}
+export default linkHOC(ClickableLink);

package/components/list/consts.d.ts

@@ -0,0 +1,77 @@
+import React, { ComponentType, ReactNode, ReactElement, SyntheticEvent } from 'react';
+import { LinkProps } from '../link/link';
+import { IconType, Size } from '../icon/icon';
+import { ClickableLinkProps } from '../link/clickableLink';
+/**
+ * @enum {number}
+ */
+export declare enum Type {
+    SEPARATOR = 0,
+    LINK = 1,
+    ITEM = 2,
+    HINT = 3,
+    CUSTOM = 4,
+    TITLE = 5,
+    MARGIN = 6
+}
+export declare const Dimension: {
+    ITEM_PADDING: number;
+    ITEM_HEIGHT: number;
+    COMPACT_ITEM_HEIGHT: number;
+    SEPARATOR_HEIGHT: number;
+    SEPARATOR_FIRST_HEIGHT: number;
+    SEPARATOR_TEXT_HEIGHT: number;
+    TITLE_HEIGHT: number;
+    INNER_PADDING: number;
+    MARGIN: number;
+};
+export declare const DEFAULT_ITEM_TYPE = Type.ITEM;
+export type ListDataItem<T = unknown> = T & Partial<Omit<LinkProps, 'onClick' | 'onMouseUp'>> & {
+    rgItemType?: Type | null | undefined;
+    key?: string | number | null | undefined;
+    disabled?: boolean | undefined;
+    details?: string | null | undefined;
+    hoverClassName?: string | null | undefined;
+    compact?: boolean | null | undefined;
+    className?: string | null | undefined;
+    url?: string | undefined;
+    showGeneratedAvatar?: boolean | null | undefined;
+    username?: string | null | undefined;
+    avatar?: string | null | undefined;
+    subavatar?: string | null | undefined;
+    glyph?: IconType | string | null | undefined;
+    icon?: string | undefined;
+    iconSize?: Size | null | undefined;
+    rightGlyph?: IconType | string | null | undefined;
+    title?: string | null | undefined;
+    level?: number | null | undefined;
+    checkbox?: boolean | undefined;
+    description?: ReactNode;
+    label?: ReactNode;
+    rightNodes?: ReactNode;
+    leftNodes?: ReactNode;
+    tagName?: keyof JSX.IntrinsicElements | null | undefined;
+    selectedLabel?: string | null | undefined;
+    originalModel?: never;
+    LinkComponent?: ComponentType<ClickableLinkProps> | string | null | undefined;
+    template?: ReactNode | ((props: ListDataItemProps<T>) => ReactNode);
+    labelWrapper?: (children: ReactNode) => ReactElement;
+    custom?: boolean | null | undefined;
+    onClick?: ((item: ListDataItem<T>, event: Event | SyntheticEvent) => void) | null | undefined;
+    onMouseUp?: ((item: ListDataItem<T>, event: Event | SyntheticEvent) => void) | null | undefined;
+};
+export interface ListDataItemAddProps {
+    className?: string;
+    compact?: boolean | null | undefined;
+    hover: boolean;
+    onMouseOver: (e: SyntheticEvent) => void;
+    tabIndex: number;
+    scrolling: boolean;
+    onMouseUp?: (e: React.MouseEvent) => void;
+    onMouseDown?: (e: React.MouseEvent) => void;
+    onClick: (e: SyntheticEvent) => void;
+    onCheckboxChange: (e: React.ChangeEvent) => void;
+    isFirst?: boolean;
+    'data-test'?: string | null | undefined;
+}
+export type ListDataItemProps<T = unknown> = Omit<ListDataItem<T>, keyof ListDataItemAddProps> & ListDataItemAddProps;

package/components/list/consts.js

@@ -0,0 +1,25 @@
+/**
+ * @enum {number}
+ */
+export var Type;
+(function (Type) {
+    Type[Type["SEPARATOR"] = 0] = "SEPARATOR";
+    Type[Type["LINK"] = 1] = "LINK";
+    Type[Type["ITEM"] = 2] = "ITEM";
+    Type[Type["HINT"] = 3] = "HINT";
+    Type[Type["CUSTOM"] = 4] = "CUSTOM";
+    Type[Type["TITLE"] = 5] = "TITLE";
+    Type[Type["MARGIN"] = 6] = "MARGIN";
+})(Type || (Type = {}));
+export const Dimension = {
+    ITEM_PADDING: 16,
+    ITEM_HEIGHT: 32,
+    COMPACT_ITEM_HEIGHT: 24,
+    SEPARATOR_HEIGHT: 25,
+    SEPARATOR_FIRST_HEIGHT: 16,
+    SEPARATOR_TEXT_HEIGHT: 18,
+    TITLE_HEIGHT: 42,
+    INNER_PADDING: 8,
+    MARGIN: 8
+};
+export const DEFAULT_ITEM_TYPE = Type.ITEM;

package/components/list/list.css

@@ -0,0 +1,298 @@
+@import "../global/variables.css";
+
+.list {
+  position: relative;
+
+  z-index: 1;
+
+  border-radius: var(--ring-border-radius);
+
+  line-height: normal;
+}
+
+.simpleInner {
+  overflow: auto;
+}
+
+.scrolling {
+  pointer-events: none;
+}
+
+.separator {
+  display: block;
+
+  min-height: var(--ring-unit);
+
+  margin-top: var(--ring-unit);
+  padding: 0 calc(var(--ring-unit) * 2) 1px;
+
+  text-align: right;
+  white-space: nowrap;
+
+  color: var(--ring-secondary-color);
+  border-top: 1px solid var(--ring-line-color);
+
+  font-size: var(--ring-font-size-smaller);
+  line-height: var(--ring-line-height-lower);
+}
+
+.separator_first {
+  margin-top: 0;
+  padding-top: 0;
+
+  border: none;
+}
+
+.item {
+  display: block;
+
+  box-sizing: border-box;
+
+  width: 100%;
+
+  text-align: left;
+  vertical-align: bottom;
+  white-space: nowrap;
+  text-decoration: none;
+
+  outline: none;
+
+  font-size: var(--ring-font-size);
+}
+
+.item.item {
+  padding: 3px calc(var(--ring-unit) * 2) 5px;
+
+  line-height: calc(var(--ring-unit) * 3);
+}
+
+.itemContainer {
+  position: relative;
+}
+
+.compact {
+  line-height: calc(var(--ring-unit) * 2);
+}
+
+.error {
+  cursor: default;
+
+  /* Override ring-link */
+  &,
+  &:hover,
+  &:focus,
+  &:visited {
+    color: var(--ring-error-color);
+  }
+}
+
+.add {
+  padding: var(--ring-unit) calc(2 * var(--ring-unit));
+
+  line-height: calc(4 * var(--ring-unit));
+}
+
+.top {
+  display: flex;
+  align-items: baseline;
+  flex-direction: row;
+}
+
+.left {
+  align-self: center;
+  flex-shrink: 0;
+}
+
+.label {
+  overflow: hidden;
+  flex-grow: 1;
+  flex-shrink: 1;
+
+  text-align: left;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  [dir="rtl"] & {
+    text-align: right;
+    direction: ltr;
+  }
+}
+
+.description {
+  overflow: hidden;
+  flex-shrink: 100;
+
+  padding-left: var(--ring-unit);
+
+  text-align: right;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  color: var(--ring-secondary-color);
+
+  font-size: var(--ring-font-size-smaller);
+  font-weight: 400;
+  line-height: var(--ring-line-height-lowest);
+}
+
+.right {
+  display: flex;
+  align-items: center;
+  align-self: center;
+  flex-direction: row;
+  flex-shrink: 0;
+}
+
+.details {
+  margin-bottom: 6px;
+
+  white-space: normal;
+
+  color: var(--ring-secondary-color);
+
+  font-size: var(--ring-font-size-smaller);
+  line-height: var(--ring-line-height-lowest);
+}
+
+.padded {
+  margin-left: 20px;
+}
+
+/* Override :last-child */
+.hint.hint {
+  margin-bottom: 0;
+
+  border-top: 1px solid var(--ring-line-color);
+  background-color: var(--ring-sidebar-background-color);
+
+  font-size: var(--ring-font-size-smaller);
+}
+
+.action {
+  cursor: pointer;
+
+  color: var(--ring-text-color);
+}
+
+/* override link */
+.actionLink.actionLink {
+  transition: none;
+}
+
+.hover:not(.error) {
+  background-color: var(--ring-selected-background-color);
+}
+
+.icon {
+  display: inline-block;
+
+  width: 20px;
+  height: 20px;
+  margin-left: calc(var(--ring-unit) * 2);
+
+  background-repeat: no-repeat;
+  background-position: center;
+
+  background-size: contain;
+}
+
+.highlight {
+  color: var(--ring-link-hover-color);
+}
+
+.service {
+  color: var(--ring-secondary-color);
+}
+
+.glyph {
+  float: left;
+
+  width: 20px;
+
+  margin-right: var(--ring-unit);
+
+  color: var(--ring-icon-secondary-color);
+}
+
+.avatar {
+  composes: glyph;
+
+  top: 0;
+
+  height: 20px;
+
+  object-fit: cover;
+  object-position: center;
+}
+
+.rightGlyph {
+  composes: glyph;
+
+  float: right;
+
+  margin-right: 0;
+  margin-left: calc(var(--ring-unit) * 2);
+}
+
+.checkboxContainer {
+  position: absolute;
+  top: 7px;
+  left: 19px;
+
+  width: 20px;
+  height: 20px;
+  margin-right: var(--ring-unit);
+}
+
+.compact .checkboxContainer {
+  top: 0;
+
+  width: calc(var(--ring-unit) * 2);
+  height: calc(var(--ring-unit) * 2);
+}
+
+.title {
+  display: block;
+
+  margin-top: 10px;
+  margin-bottom: 6px;
+  padding: var(--ring-unit) calc(var(--ring-unit) * 2) 0;
+
+  text-align: left;
+
+  [dir="rtl"] & {
+    text-align: right;
+    direction: ltr;
+  }
+}
+
+.title_first {
+  margin-top: 0;
+}
+
+.text {
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+
+  color: var(--ring-secondary-color);
+
+  font-size: var(--ring-font-size-smaller);
+}
+
+.fade {
+  position: absolute;
+  bottom: 0;
+
+  width: 100%;
+  height: calc(var(--ring-unit) * 3);
+
+  pointer-events: none;
+
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--ring-content-background-color));
+}
+
+.disabled {
+  pointer-events: none;
+
+  color: var(--ring-disabled-color);
+}