@drivenets/design-system 0.14.0 → 0.16.0

package/src/components/ds-radio-group/figma/ds-radio-group-item.figma.ts

@@ -0,0 +1,24 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=32934-446
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-radio-group
+// component=DsRadioGroup.Item
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const state = instance.getEnum('state', {
+	default: 'default',
+	hover: 'hover',
+	focus: 'focus',
+	disabled: 'disabled',
+});
+
+const attrs = ['value="option"', 'label="Option"', state === 'disabled' ? 'disabled' : '']
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<DsRadioGroup.Item ${attrs} />`,
+	imports: ["import { DsRadioGroup } from '@drivenets/design-system'"],
+	id: 'ds-radio-group-item',
+	metadata: { nestable: true },
+};

package/src/components/ds-radio-group/figma/ds-radio-group.figma.ts

@@ -0,0 +1,14 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=34864-124515
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-radio-group
+// component=DsRadioGroup.Root
+import figma from 'figma';
+
+export default {
+	example: figma.code`<DsRadioGroup.Root>
+	<DsRadioGroup.Item value="option-1" label="Option 1" />
+	<DsRadioGroup.Item value="option-2" label="Option 2" />
+</DsRadioGroup.Root>`,
+	imports: ["import { DsRadioGroup } from '@drivenets/design-system'"],
+	id: 'ds-radio-group',
+	metadata: { nestable: false },
+};

package/src/components/ds-segment-group/ds-segment-group.tsx

@@ -74,3 +74,6 @@ export const DsSegmentGroup = {
 	Item,
 	ItemText,
 };
+DsSegmentGroup.Root.displayName = 'DsSegmentGroup.Root';
+DsSegmentGroup.Item.displayName = 'DsSegmentGroup.Item';
+DsSegmentGroup.ItemText.displayName = 'DsSegmentGroup.ItemText';

package/src/components/ds-segment-group/figma/ds-segment-group-item.figma.ts

@@ -0,0 +1,25 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15094-6249
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-segment-group
+// component=DsSegmentGroup.Item
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const state = instance.getEnum('State', {
+	Default: 'default',
+	Hover: 'hover',
+	Pressed: 'pressed',
+	Focus: 'focus',
+	Disabled: 'disabled',
+});
+
+const attrs = ['value="option"', 'label="Option"', state === 'disabled' ? 'disabled' : '']
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<DsSegmentGroup.Item ${attrs} />`,
+	imports: ["import { DsSegmentGroup } from '@drivenets/design-system'"],
+	id: 'ds-segment-group-item',
+	metadata: { nestable: true },
+};

package/src/components/ds-segment-group/figma/ds-segment-group.figma.ts

@@ -0,0 +1,23 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15094-8569
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-segment-group
+// component=DsSegmentGroup.Root
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const size = instance.getEnum('Size', {
+	medium: 'medium',
+	small: 'small',
+});
+
+const sizeAttr = size === 'small' ? ' size="small"' : '';
+
+export default {
+	example: figma.code`<DsSegmentGroup.Root${sizeAttr}>
+	<DsSegmentGroup.Item value="option-1" label="Option 1" />
+	<DsSegmentGroup.Item value="option-2" label="Option 2" />
+</DsSegmentGroup.Root>`,
+	imports: ["import { DsSegmentGroup } from '@drivenets/design-system'"],
+	id: 'ds-segment-group',
+	metadata: { nestable: false },
+};

package/src/components/ds-select/ds-select.tsx

@@ -271,4 +271,6 @@ function getItemCheckedState({
 	return someSelected ? 'indeterminate' : false;
 }
 
+DsSelect.displayName = 'DsSelect';
+
 export default DsSelect;

package/src/components/ds-site-node/ds-site-node.figma.ts

@@ -0,0 +1,27 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=39525-181
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-site-node
+// component=DsSiteNode
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const state = instance.getEnum('State', {
+	Default: 'default',
+	Selected: 'selected',
+	Muted: 'muted',
+	Overflow: 'overflow',
+});
+
+const tier = instance.getString('Tier');
+const siteCode = instance.getString('Site code');
+const overflowLabel = instance.getString('Overflow label');
+
+export default {
+	example:
+		state === 'overflow'
+			? figma.code`<DsSiteNode state="${state}" overflowLabel="${overflowLabel}" />`
+			: figma.code`<DsSiteNode state="${state}" tier="${tier}" siteCode="${siteCode}" />`,
+	imports: ["import { DsSiteNode } from '@drivenets/design-system'"],
+	id: 'ds-site-node',
+	metadata: { nestable: true },
+};

package/src/components/ds-site-node/ds-site-node.module.scss

@@ -0,0 +1,59 @@
+$node-width: 140px;
+$node-radius: 8px;
+$overflow-height: 70px;
+
+.node {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	width: $node-width;
+	padding: var(--sm);
+	gap: var(--2xs);
+	overflow: clip;
+	border: 1px solid var(--border-secondary);
+	border-radius: $node-radius;
+	background: var(--background);
+	font-family: var(--font-family-base);
+	cursor: pointer;
+	appearance: none;
+
+	&:focus-visible {
+		outline: 2px solid var(--outline-moderate);
+		outline-offset: 2px;
+	}
+}
+
+.selected {
+	border-color: var(--outline-moderate);
+	background: var(--background-info);
+	box-shadow: inset 0 0 0 1px var(--outline-moderate);
+}
+
+.overflow {
+	min-height: $overflow-height;
+	gap: 0;
+	border: 1px dashed var(--border-disabled);
+	background: var(--background-secondary-selected-weak);
+}
+
+.pill {
+	padding: var(--4xs) var(--xs);
+	overflow: clip;
+	border-radius: 9999px;
+	background: var(--background-primary);
+}
+
+.pillMuted {
+	background: var(--background-tertiary-selected-weak);
+}
+
+.siteCode {
+	display: block;
+	align-self: stretch;
+	overflow: hidden;
+	text-align: center;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}

package/src/components/ds-site-node/ds-site-node.tsx

@@ -0,0 +1,73 @@
+import classNames from 'classnames';
+import type { DsSiteNodeProps } from './ds-site-node.types';
+import { useIsOverflowing } from './hooks/use-is-overflowing';
+import { DsStack } from '../ds-stack';
+import { DsTooltip } from '../ds-tooltip';
+import { DsTypography } from '../ds-typography';
+import styles from './ds-site-node.module.scss';
+
+const DsSiteNode = ({
+	ref,
+	state = 'default',
+	tier,
+	siteCode,
+	overflowLabel,
+	className,
+	style,
+	'aria-label': ariaLabel,
+	onClick,
+}: DsSiteNodeProps) => {
+	const isOverflow = state === 'overflow';
+	const isSelected = state === 'selected';
+	const isMuted = state === 'muted';
+
+	const { ref: siteCodeRef, isOverflowing } = useIsOverflowing<HTMLSpanElement>(siteCode);
+
+	return (
+		<button
+			ref={ref}
+			type="button"
+			className={classNames(
+				styles.node,
+				{
+					[styles.selected]: isSelected,
+					[styles.overflow]: isOverflow,
+				},
+				className,
+			)}
+			style={style}
+			aria-label={ariaLabel}
+			aria-current={isSelected ? true : undefined}
+			onClick={onClick}
+		>
+			{isOverflow ? (
+				<DsTypography variant="body-sm-reg" color="secondary">
+					{overflowLabel}
+				</DsTypography>
+			) : (
+				<>
+					<DsStack
+						direction="row"
+						alignItems="center"
+						justifyContent="center"
+						className={classNames(styles.pill, { [styles.pillMuted]: isMuted })}
+					>
+						<DsTypography variant="body-xs-md" color={isMuted ? 'on-disabled' : 'on-action'}>
+							{tier}
+						</DsTypography>
+					</DsStack>
+
+					<span ref={siteCodeRef} className={styles.siteCode}>
+						<DsTooltip content={isOverflowing ? siteCode : undefined}>
+							<DsTypography variant="body-sm-bold" color={isSelected ? 'main' : 'secondary'}>
+								{siteCode}
+							</DsTypography>
+						</DsTooltip>
+					</span>
+				</>
+			)}
+		</button>
+	);
+};
+
+export default DsSiteNode;

package/src/components/ds-site-node/ds-site-node.types.ts

@@ -0,0 +1,36 @@
+import type { CSSProperties, MouseEvent, Ref } from 'react';
+
+export const siteNodeStates = ['default', 'selected', 'muted', 'overflow'] as const;
+export type SiteNodeState = (typeof siteNodeStates)[number];
+
+export interface DsSiteNodeProps {
+	ref?: Ref<HTMLButtonElement>;
+	/**
+	 * Scope/selection state within the site hierarchy path.
+	 * `overflow` renders a collapsed summary node (no tier/site code).
+	 */
+	state?: SiteNodeState;
+	/**
+	 * Short tier label shown in the pill, e.g. `"T1"`. Ignored when `state="overflow"`.
+	 */
+	tier?: string;
+	/**
+	 * Site identifier. Truncates with an ellipsis and reveals the full value in a
+	 * tooltip when it overflows. Ignored when `state="overflow"`.
+	 */
+	siteCode?: string;
+	/**
+	 * Summary label for the collapsed branch, e.g. `"+2 more"`. Only used when
+	 * `state="overflow"`.
+	 */
+	overflowLabel?: string;
+	className?: string;
+	style?: CSSProperties;
+	/**
+	 * Overrides the accessible name. By default the node is named by its visible
+	 * content (tier + site code, or the overflow label); set this to give the
+	 * overflow node a more descriptive name, e.g. `"Show 2 more sites"`.
+	 */
+	'aria-label'?: string;
+	onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+}

package/src/components/ds-site-node/hooks/use-is-overflowing.ts

@@ -0,0 +1,31 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+
+export const useIsOverflowing = <T extends HTMLElement = HTMLElement>(text: string | undefined) => {
+	const ref = useRef<T>(null);
+	const [isOverflowing, setIsOverflowing] = useState(false);
+
+	useLayoutEffect(() => {
+		const element = ref.current;
+		if (!element) {
+			return;
+		}
+
+		const measure = () => setIsOverflowing(element.scrollWidth > element.clientWidth);
+		measure();
+
+		const observer = new ResizeObserver(measure);
+		observer.observe(element);
+
+		const frame = requestAnimationFrame(measure);
+		document.fonts.ready.then(measure).catch(() => undefined);
+		document.fonts.addEventListener('loadingdone', measure);
+
+		return () => {
+			cancelAnimationFrame(frame);
+			observer.disconnect();
+			document.fonts.removeEventListener('loadingdone', measure);
+		};
+	}, [text]);
+
+	return { ref, isOverflowing };
+};

package/src/components/ds-site-node/index.ts

@@ -0,0 +1,3 @@
+export { default as DsSiteNode } from './ds-site-node';
+export { siteNodeStates } from './ds-site-node.types';
+export type { DsSiteNodeProps, SiteNodeState } from './ds-site-node.types';

package/src/components/ds-skeleton/ds-skeleton-circle.tsx

@@ -26,4 +26,6 @@ const DsSkeletonCircle = ({ size = 'regular', color = 'gray', className, style }
 	);
 };
 
+DsSkeletonCircle.displayName = 'DsSkeletonCircle';
+
 export default DsSkeletonCircle;

package/src/components/ds-skeleton/ds-skeleton-rect.tsx

@@ -33,4 +33,6 @@ const DsSkeletonRect = ({
 	);
 };
 
+DsSkeletonRect.displayName = 'DsSkeletonRect';
+
 export default DsSkeletonRect;

package/src/components/ds-skeleton/ds-skeleton-text.tsx

@@ -46,4 +46,6 @@ const DsSkeletonText = ({
 	);
 };
 
+DsSkeletonText.displayName = 'DsSkeletonText';
+
 export default DsSkeletonText;

package/src/components/ds-skeleton/ds-skeleton.ts

@@ -2,8 +2,14 @@ import DsSkeletonText from './ds-skeleton-text';
 import DsSkeletonCircle from './ds-skeleton-circle';
 import DsSkeletonRect from './ds-skeleton-rect';
 
-export default {
+const DsSkeleton = {
 	Text: DsSkeletonText,
 	Circle: DsSkeletonCircle,
 	Rect: DsSkeletonRect,
 };
+
+DsSkeleton.Text.displayName = 'DsSkeleton.Text';
+DsSkeleton.Circle.displayName = 'DsSkeleton.Circle';
+DsSkeleton.Rect.displayName = 'DsSkeleton.Rect';
+
+export default DsSkeleton;

package/src/components/ds-smart-tabs/ds-smart-tabs.tsx

@@ -108,6 +108,10 @@ const DsSmartTabs = ({
 	);
 };
 
+DsSmartTab.displayName = 'DsSmartTabs.Tab';
+
 DsSmartTabs.Tab = DsSmartTab;
 
+DsSmartTabs.displayName = 'DsSmartTabs';
+
 export default DsSmartTabs;

package/src/components/ds-spinner/ds-spinner.figma.ts

@@ -0,0 +1,19 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15119-13518
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-spinner
+// component=DsSpinner
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const size = instance.getEnum('Size', {
+	SM: 'small',
+	Default: 'medium',
+	LG: 'large',
+});
+
+export default {
+	example: figma.code`<DsSpinner size="${size}" />`,
+	imports: ["import { DsSpinner } from '@drivenets/design-system'"],
+	id: 'ds-spinner',
+	metadata: { nestable: true },
+};

package/src/components/ds-spinner/ds-spinner.tsx

@@ -48,4 +48,6 @@ const DsSpinner: React.FC<DsSpinnerProps> = ({ size = 'medium', className, style
 	);
 };
 
+DsSpinner.displayName = 'DsSpinner';
+
 export default DsSpinner;

package/src/components/ds-split-button/ds-split-button.tsx

@@ -4,6 +4,12 @@ import styles from './ds-split-button.module.scss';
 import type { DsSplitButtonProps, SplitButtonSize } from './ds-split-button.types';
 import { DsButtonV3 } from '../ds-button-v3';
 
+/**
+ * Secondary action button paired with a dropdown select for choosing a related option.
+ * Both slots share a size and disabled state controlled by the split button.
+ *
+ * @summary split action button with a primary action and an option select
+ */
 const DsSplitButton = ({
 	ref,
 	className,

package/src/components/ds-status-badge/ds-status-badge.tsx

@@ -39,4 +39,6 @@ const DsStatusBadge: React.FC<DsStatusBadgeProps> = ({
 	);
 };
 
+DsStatusBadge.displayName = 'DsStatusBadge';
+
 export default DsStatusBadge;

package/src/components/ds-status-badge-v2/index.ts

@@ -11,3 +11,5 @@ export type {
 	DsStatusBadgeV2Props,
 } from './ds-status-badge-v2.types';
 export { statusBadgeV2Phases, statusBadgeV2Variants, statusBadgeV2Sizes } from './ds-status-badge-v2.types';
+
+DsStatusBadgeV2.displayName = 'DsStatusBadgeV2';

package/src/components/ds-stepper/components/ds-step-content.tsx

@@ -48,3 +48,5 @@ export function DsStepContent({ index, label, description, actions }: DsStepCont
 		</div>
 	);
 }
+
+DsStepContent.displayName = 'DsStepContent';

package/src/components/ds-stepper/components/ds-step-next-button.tsx

@@ -20,3 +20,5 @@ export function DsNextStepButton({ children, size = 'small', ...rest }: DsNextSt
 		</DsButton>
 	);
 }
+
+DsNextStepButton.displayName = 'DsNextStepButton';

package/src/components/ds-stepper/components/ds-step.tsx

@@ -116,3 +116,5 @@ export function DsStep({
 		</Wrapper>
 	);
 }
+
+DsStep.displayName = 'DsStep';

package/src/components/ds-stepper/ds-stepper.figma.ts

@@ -0,0 +1,38 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=29164-187694
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-stepper
+// component=DsStepper
+//
+// `direction` maps to `orientation`. Figma's `type` (detailed|compact) is not a code prop:
+// detailed steps carry a `description` on each `DsStepContent`, compact steps omit it. The
+// steps are composed in code (`DsStep` > `DsStepContent` > `DsNextStepButton`), not derivable
+// from Figma's step atoms, and `count` is data — so a representative two-step composition is
+// emitted for the developer to extend (one `DsStep` per step). The panel-docked wrappers
+// (`DAP_stepper-panel-*_v01`) are a `DsPanel` composition and are intentionally not connected;
+// the stepper still resolves when nested inside them.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const orientation =
+	instance.getEnum('direction', {
+		vertical: 'vertical',
+		horizontal: 'horizontal',
+	}) ?? 'vertical';
+
+const detailed = instance.getEnum('type', { detailed: true, compact: false }) ?? true;
+const description = detailed ? ' description="Step description"' : '';
+
+export default {
+	example: figma.code`<DsStepper count={2} orientation="${orientation}">
+	<DsStep index={0}>
+		<DsStepContent index={0} label="Step title"${description} actions={<DsNextStepButton>Next</DsNextStepButton>} />
+	</DsStep>
+	<DsStep index={1}>
+		<DsStepContent index={1} label="Step title"${description} actions={<DsNextStepButton>Finish</DsNextStepButton>} />
+	</DsStep>
+	{/* Add a <DsStep> per step */}
+</DsStepper>`,
+	imports: ["import { DsStepper, DsStep, DsStepContent, DsNextStepButton } from '@drivenets/design-system'"],
+	id: 'ds-stepper',
+	metadata: { nestable: true },
+};

package/src/components/ds-stepper/ds-stepper.tsx

@@ -58,3 +58,4 @@ export function DsStepper({
 		</StepperContext.Provider>
 	);
 }
+DsStepper.displayName = 'DsStepper';

package/src/components/ds-system-status/ds-system-status.tsx

@@ -30,4 +30,6 @@ const DsSystemStatus: React.FC<DsSystemStatusProps> = ({ status, label, classNam
 	);
 };
 
+DsSystemStatus.displayName = 'DsSystemStatus';
+
 export default DsSystemStatus;

package/src/components/ds-table/components/ds-table-row/ds-table-row.module.scss

@@ -9,7 +9,7 @@
 		}
 	}
 
-	&:hover {
+	&:not(.loadingRow):hover {
 		background-color: var(--background-secondary);
 	}
 

package/src/components/ds-table/components/ds-table-row/ds-table-row.tsx

@@ -51,6 +51,7 @@ const DsTableRow = <TData,>({ ref, row, isSelected }: DsTableRowProps<TData>) =>
 		primaryRowActions,
 		secondaryRowActions,
 		activeRowId,
+		loading,
 	} = useDsTableContext<TData, unknown>();
 	const isExpanded = row.getIsExpanded();
 	const isActive = activeRowId === row.id;
@@ -90,6 +91,7 @@ const DsTableRow = <TData,>({ ref, row, isSelected }: DsTableRowProps<TData>) =>
 					onRowClick && styles.clickableRow,
 					!bordered && styles.rowNoBorder,
 					isExpanded && styles.expanded,
+					loading && styles.loadingRow,
 				)}
 				style={rowStyle}
 				onClick={() => onRowClick?.(row.original)}

package/src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.module.scss

@@ -7,7 +7,7 @@
 	position: absolute;
 	width: 100%;
 
-	&:hover {
+	&:not(.loadingRow):hover {
 		background-color: var(--background-secondary);
 	}
 

package/src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.tsx

@@ -26,6 +26,7 @@ export const DsTableRowVirtualized = <TData,>({
 		renderExpandedRow,
 		onRowClick,
 		onRowDoubleClick,
+		loading,
 	} = useDsTableContext<TData, unknown>();
 	const isExpanded = row.getIsExpanded();
 	const isActive = activeRowId === row.id;
@@ -58,6 +59,7 @@ export const DsTableRowVirtualized = <TData,>({
 				onRowClick && styles.clickableRow,
 				!bordered && styles.rowNoBorder,
 				isExpanded && styles.expanded,
+				loading && styles.loadingRow,
 			)}
 			onClick={isExpandedRowContent ? undefined : () => onRowClick?.(row.original)}
 			onDoubleClick={isExpandedRowContent ? undefined : () => onRowDoubleClick?.(row.original)}

package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-checkbox.tsx

@@ -25,3 +25,4 @@ export const DsTableEditCellCheckbox = <TData extends RowData>({
 		/>
 	);
 };
+DsTableEditCellCheckbox.displayName = 'DsTableEditCellCheckbox';

package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-date.tsx

@@ -48,3 +48,4 @@ export const DsTableEditCellDate = <TData extends RowData>({
 		</TableEditFormControl>
 	);
 };
+DsTableEditCellDate.displayName = 'DsTableEditCellDate';

package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-number.tsx

@@ -49,3 +49,4 @@ export const DsTableEditCellNumber = <TData extends RowData>({
 		</TableEditFormControl>
 	);
 };
+DsTableEditCellNumber.displayName = 'DsTableEditCellNumber';

package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-select.tsx

@@ -34,3 +34,4 @@ export const DsTableEditCellSelect = <TData extends RowData>({
 		</TableEditFormControl>
 	);
 };
+DsTableEditCellSelect.displayName = 'DsTableEditCellSelect';

package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-text.tsx

@@ -48,3 +48,4 @@ export const DsTableEditCellText = <TData extends RowData>({
 		</TableEditFormControl>
 	);
 };
+DsTableEditCellText.displayName = 'DsTableEditCellText';

package/src/components/ds-table/components/edit/ds-table-editable-cell/ds-table-editable-cell.module.scss

@@ -11,18 +11,30 @@
 		outline: none;
 	}
 
-	.editButton {
+	.editButton,
+	.lockIcon {
 		flex-shrink: 0;
 		opacity: 0;
 		pointer-events: none;
 	}
 
+	.lockIcon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+	}
+
 	&:hover,
 	&:focus-within,
 	&[data-active] {
-		.editButton {
+		.editButton,
+		.lockIcon {
 			opacity: 1;
 			pointer-events: auto;
 		}
 	}
+
+	&[data-locked] {
+		cursor: default;
+	}
 }